/* =====================================================================
   TIMPEX.club — design system
   Brand: dark forest green (#1A3D32) + lime accent (#D3FF62)
   Re-platformed from the old React build; palette carried over 1:1.
   ===================================================================== */

:root{
  --tx-green:#1A3D32;      /* primary dark green */
  --tx-green-700:#2D5A4A;  /* medium green */
  --tx-sage:#3D7A68;       /* sage / accent text */
  --tx-lime:#D3FF62;       /* bright lime — CTA / highlight */
  --tx-lime-600:#c4f050;   /* lime hover */
  --tx-cream:#FCFEF8;
  --tx-mint:#F0F7ED;       /* pale green section bg */
  --tx-bg:#F7FBF9;
  --tx-ink:#16241d;        /* near-black green text */
  --tx-muted:#5A6C7D;
  --tx-line:#e3ece5;       /* subtle borders */

  /* keep legacy aliases used elsewhere pointed at the brand */
  --tx-primary:var(--tx-green);
  --tx-dark:var(--tx-green);

  --tx-shadow-sm:0 1px 2px rgba(26,61,50,.06);
  --tx-shadow:0 8px 24px -12px rgba(26,61,50,.25);
  --tx-shadow-lg:0 24px 48px -24px rgba(26,61,50,.35);
  --tx-radius:1rem;
}

*{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--tx-ink);
  background:#fff;
}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;}
a{color:var(--tx-sage);text-decoration:none;}
a:hover{color:var(--tx-green);}
.text-muted{color:var(--tx-muted)!important;}

/* ---- Bootstrap "primary" re-skinned to brand green ---------------- */
.btn-primary{
  --bs-btn-bg:var(--tx-green);--bs-btn-border-color:var(--tx-green);
  --bs-btn-hover-bg:#142e25;--bs-btn-hover-border-color:#142e25;
  --bs-btn-active-bg:#102219;--bs-btn-active-border-color:#102219;
  --bs-btn-disabled-bg:var(--tx-green);--bs-btn-disabled-border-color:var(--tx-green);
}
.btn-outline-primary{
  --bs-btn-color:var(--tx-green);--bs-btn-border-color:var(--tx-green);
  --bs-btn-hover-bg:var(--tx-green);--bs-btn-hover-border-color:var(--tx-green);
  --bs-btn-active-bg:var(--tx-green);--bs-btn-active-border-color:var(--tx-green);
}
.text-primary{color:var(--tx-green)!important;}
.bg-primary{background-color:var(--tx-green)!important;}
.border-primary{border-color:var(--tx-green)!important;}
.link-primary{color:var(--tx-sage)!important;}
.badge.text-bg-primary,.badge.bg-primary{background-color:var(--tx-green)!important;color:#fff;}
.form-check-input:checked{background-color:var(--tx-green);border-color:var(--tx-green);}
.form-control:focus,.form-select:focus{
  border-color:var(--tx-sage);
  box-shadow:0 0 0 .2rem rgba(61,122,104,.2);
}
.form-control,.form-select{border-color:#d6e2da;}

/* ---- Lime accent button ----------------------------------------- */
.btn-lime{
  background:var(--tx-lime);color:#14342a;border:0;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(26,61,50,.5);
}
.btn-lime:hover,.btn-lime:focus{background:var(--tx-lime-600);color:#0f261d;transform:translateY(-1px);}
.btn-lime:active{background:#b6e23f;}
.btn{transition:transform .15s ease,background .15s ease,box-shadow .15s ease;border-radius:.6rem;}
.btn-lg{border-radius:.7rem;}

/* =====================================================================
   Public marketing layout
   ===================================================================== */
/* ---- Top contact ribbon ----------------------------------------- */
.tx-ribbon{
  background:#13271f;color:rgba(255,255,255,.82);
  font-size:.8rem;padding:.4rem 0;
}
.tx-ribbon a{color:rgba(255,255,255,.82);transition:color .15s ease;}
.tx-ribbon a:hover{color:var(--tx-lime);}
.tx-ribbon-social a{font-size:.95rem;line-height:1;}

.tx-navbar{
  background:var(--tx-green);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.tx-navbar .navbar-brand img{height:30px;width:auto;max-width:200px;display:block;}

/* White chip behind the dark-wordmark logo so it reads on dark bars */
.tx-logo-chip{background:#fff;border-radius:.6rem;padding:.4rem .7rem;line-height:0;
  display:inline-block;box-shadow:0 2px 8px -4px rgba(0,0,0,.25);}
.tx-logo-chip img{display:block;}
.sidebar .tx-logo-chip,.aside-brand.tx-logo-chip{width:fit-content;}
.tx-navbar .nav-link{color:rgba(255,255,255,.82);font-weight:500;}
.tx-navbar .nav-link:hover,.tx-navbar .nav-link:focus{color:var(--tx-lime);}
.tx-navbar .navbar-toggler{border-color:rgba(255,255,255,.3);}
.tx-navbar .navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(1.6);}

.tx-brand{font-weight:800;letter-spacing:.5px;}

/* ---- Hero -------------------------------------------------------- */
.tx-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(211,255,98,.18), transparent 60%),
    linear-gradient(180deg,var(--tx-cream) 0%, var(--tx-mint) 100%);
  border-bottom:1px solid var(--tx-line);
}
.tx-hero::before{ /* faint geometric grid */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(26,61,50,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,61,50,.05) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%);
          mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%);
}
.tx-hero .container{position:relative;z-index:1;}
.tx-blob{position:absolute;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;filter:blur(2px);opacity:.5;z-index:0;}
.tx-blob.b1{width:120px;height:120px;background:rgba(211,255,98,.55);top:14%;right:8%;transform:rotate(18deg);}
.tx-blob.b2{width:70px;height:70px;background:rgba(61,122,104,.35);bottom:18%;right:24%;}
.tx-blob.b3{width:46px;height:46px;background:rgba(26,61,50,.18);top:30%;right:38%;}

.tx-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--tx-line);color:var(--tx-green);
  font-weight:600;font-size:.82rem;padding:.4rem .9rem;border-radius:999px;
  box-shadow:var(--tx-shadow-sm);
}
.tx-badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--tx-lime);box-shadow:0 0 0 3px rgba(211,255,98,.4);}
.tx-hero h1{font-weight:800;color:var(--tx-green);line-height:1.05;}
.tx-hero .tx-flow{
  font-weight:700;color:var(--tx-sage);
}
.tx-hero .tx-flow b{color:var(--tx-green);}
.tx-hero-chips span{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.9rem;font-weight:600;color:var(--tx-green);
}
.tx-hero-chips i{color:var(--tx-sage);}

/* ---- Inner-page header ------------------------------------------ */
.tx-pagehead{
  position:relative;overflow:hidden;background:var(--tx-green);color:#fff;padding:4.5rem 0;
}
.tx-pagehead::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(700px 300px at 85% -20%, rgba(211,255,98,.22), transparent 60%);
}
.tx-pagehead .container{position:relative;z-index:1;}
.tx-pagehead h1{font-weight:800;color:#fff;}
.tx-pagehead .sub{color:var(--tx-lime);font-size:1.25rem;max-width:820px;}

/* ---- Section scaffolding ---------------------------------------- */
.tx-section{padding:5rem 0;}
.tx-section.tx-tight{padding:3.5rem 0;}
.bg-mint{background:var(--tx-mint);}
.bg-cream{background:var(--tx-cream);}
.tx-eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;
  color:var(--tx-sage);
}
.tx-title{font-weight:800;color:var(--tx-green);}
.tx-lead{color:var(--tx-muted);font-size:1.08rem;}

/* ---- Cards ------------------------------------------------------- */
.tx-card{
  background:#fff;border:1px solid var(--tx-line);border-radius:var(--tx-radius);
  padding:1.6rem;height:100%;box-shadow:var(--tx-shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tx-card:hover{transform:translateY(-4px);box-shadow:var(--tx-shadow);border-color:#cfe0d5;}
.tx-ico{
  width:3rem;height:3rem;border-radius:.85rem;display:inline-flex;
  align-items:center;justify-content:center;font-size:1.35rem;
  background:var(--tx-mint);color:var(--tx-green);
}
.tx-card h3,.tx-card .h5{color:var(--tx-green);font-weight:700;}

/* numbered audience / outcome */
.tx-num{
  width:2.4rem;height:2.4rem;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
  background:var(--tx-green);color:var(--tx-lime);
}

/* ---- Highlight box ---------------------------------------------- */
.tx-highlight{
  background:var(--tx-mint);border:1px solid var(--tx-line);
  border-left:4px solid var(--tx-lime);border-radius:.85rem;padding:1.4rem 1.6rem;
  color:var(--tx-green);
}

/* ---- Steps (How it works) -------------------------------------- */
.tx-flow-step{position:relative;padding-left:3.6rem;}
.tx-flow-step .tx-num{position:absolute;left:0;top:0;}
.tx-flow-step:not(:last-child)::before{
  content:"";position:absolute;left:1.2rem;top:2.6rem;bottom:-1.2rem;width:2px;
  background:linear-gradient(var(--tx-line),transparent);
}

/* ---- Trust strip / stats --------------------------------------- */
.tx-strip{background:var(--tx-green);color:#dfeee6;}
.tx-strip .item{display:flex;align-items:center;gap:.6rem;font-weight:500;}
.tx-strip .item i{color:var(--tx-lime);font-size:1.2rem;}

/* Side-rotating marquee (continuous horizontal scroll) */
.tx-marquee{overflow:hidden;position:relative;}
.tx-marquee::before,.tx-marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.tx-marquee::before{left:0;background:linear-gradient(90deg,var(--tx-green),transparent);}
.tx-marquee::after{right:0;background:linear-gradient(270deg,var(--tx-green),transparent);}
.tx-marquee-track{
  display:flex;width:max-content;align-items:center;gap:2.5rem;
  animation:tx-marquee-scroll 32s linear infinite;
}
.tx-marquee:hover .tx-marquee-track{animation-play-state:paused;}
.tx-marquee-item{
  display:inline-flex;align-items:center;gap:.55rem;font-weight:600;white-space:nowrap;
  color:#eaf5ee;
}
.tx-marquee-item i{color:var(--tx-lime);font-size:1.2rem;}
@keyframes tx-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* exactly one duplicated set → seamless */
}
@media (prefers-reduced-motion:reduce){
  .tx-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;}
  .tx-marquee::before,.tx-marquee::after{display:none;}
}
.tx-stat .num{font-weight:800;color:var(--tx-green);font-size:2.2rem;line-height:1;}
.tx-stat .lbl{color:var(--tx-muted);font-size:.95rem;}

/* ---- CTA band --------------------------------------------------- */
.tx-cta{
  position:relative;overflow:hidden;border-radius:1.5rem;
  background:linear-gradient(135deg,var(--tx-green) 0%,var(--tx-green-700) 55%,var(--tx-sage) 100%);
  color:#fff;padding:3.5rem;
}
.tx-cta::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(211,255,98,.35),transparent 65%);
  right:-60px;top:-80px;
}
.tx-cta h2{color:#fff;font-weight:800;}
.tx-cta .lead{color:rgba(255,255,255,.85);}

/* ---- Footer ----------------------------------------------------- */
.tx-footer{background:var(--tx-green);color:#cbe0d6;}
.tx-footer img{height:48px;width:auto;max-width:220px;margin-bottom:1rem;}
.tx-footer a{color:rgba(255,255,255,.75);}
.tx-footer a:hover{color:var(--tx-lime);}
.tx-footer h6{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;}
.tx-footer .ftr-bottom{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);}
.tx-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.08);color:#cbe0d6;font-size:1rem;transition:all .15s ease;}
.tx-footer-social a:hover{background:var(--tx-lime);color:#13332a;transform:translateY(-2px);}
.tx-footer .tx-logo-chip img{height:auto;margin-bottom:0;}

/* =====================================================================
   Auth pages
   ===================================================================== */
.tx-auth{
  min-height:100vh;display:flex;align-items:center;
  background:
    radial-gradient(800px 400px at 85% 0%, rgba(211,255,98,.18), transparent 60%),
    linear-gradient(135deg,var(--tx-green) 0%,#23493b 55%,var(--tx-sage) 100%);
}
.tx-auth .card{border:0;border-radius:1.1rem;box-shadow:var(--tx-shadow-lg);}
.tx-auth .auth-logo{height:56px;width:auto;max-width:240px;}

/* ---- Enrollment / registration form ----------------------------- */
.tx-form-section{
  font-size:1.05rem;font-weight:700;color:var(--tx-green);
  margin:1.9rem 0 1.1rem;padding-bottom:.45rem;border-bottom:2px solid var(--tx-mint);
}
.tx-form-section:first-of-type{margin-top:.25rem;}
.pw-reqs{list-style:none;padding-left:0;color:var(--tx-muted);}
.pw-reqs li{display:flex;align-items:center;gap:.45rem;padding:.12rem 0;}
.pw-reqs li i{font-size:.95rem;color:#adb5bd;}
.pw-reqs li.ok{color:#198754;}
.pw-reqs li.ok i{color:#198754;}

/* =====================================================================
   Authenticated dashboard shell
   ===================================================================== */
.tx-shell{min-height:100vh;}
.tx-aside{background:var(--tx-green);color:#fff;min-height:100vh;padding:1rem;
  width:250px;flex:0 0 250px;transition:width .2s ease,flex-basis .2s ease;}
.tx-aside.tx-collapsed{width:74px;flex:0 0 74px;}
@media (max-width:767.98px){
  .tx-aside{width:74px;flex:0 0 74px;}
}
.tx-aside .aside-brand img{height:26px;width:auto;max-width:100%;}
.tx-collapsed .aside-brand.tx-logo-chip{background:transparent;box-shadow:none;padding:0;}

/* Sidebar shell: brand on top, scrollable nav in the middle, identity pinned bottom */
.tx-sidebar{position:sticky;top:0;height:100vh;padding-top:.5rem;}
.tx-nav-scroll{overflow-y:auto;overflow-x:hidden;margin-right:-.25rem;padding-right:.25rem;}
.tx-nav-scroll::-webkit-scrollbar{width:6px;}
.tx-nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}

/* Section labels */
.tx-nav-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.45);padding:.25rem .85rem;margin-bottom:.15rem;white-space:nowrap;}
.tx-nav-label--admin{margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);}

/* Nav links */
.tx-sidebar .nav-link{display:flex;align-items:center;gap:.65rem;color:#cbe0d6;border-radius:.5rem;
  padding:.55rem .85rem;font-weight:500;white-space:nowrap;}
.tx-sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.tx-sidebar .nav-link.active{background:var(--tx-lime);color:#13332a;font-weight:600;}
.tx-sidebar .nav-link i{width:1.25rem;flex-shrink:0;text-align:center;}

/* Collapsible admin groups */
.tx-sidebar .tx-group-toggle{cursor:pointer;}
.tx-sidebar .tx-group-caret{width:auto;font-size:.75rem;transition:transform .2s ease;}
.tx-sidebar .tx-group-toggle.collapsed .tx-group-caret{transform:rotate(-90deg);}
.tx-sidebar .tx-subnav{border-left:1px solid rgba(255,255,255,.12);margin-left:1rem;padding-left:.5rem;}
.tx-sidebar .tx-subnav .nav-link{padding:.4rem .75rem;font-size:.925rem;}

/* Identity footer */
.tx-sidebar-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem;}
.tx-identity{gap:.6rem;color:#fff;padding:.4rem .5rem;border-radius:.6rem;}
.tx-identity:hover{background:rgba(255,255,255,.08);color:#fff;}
.tx-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;
  border-radius:50%;background:var(--tx-lime);color:#13332a;font-weight:700;font-size:.95rem;}
.tx-identity-meta{display:flex;flex-direction:column;line-height:1.2;overflow:hidden;}
.tx-identity-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx-identity-role{font-size:.72rem;color:rgba(255,255,255,.6);}

/* ===== Collapsed (icon-rail) mode ===== */
.tx-aside.tx-collapsed{}
.tx-collapsed .tx-nav-label,
.tx-collapsed .nav-link span,
.tx-collapsed .tx-group-caret,
.tx-collapsed .tx-identity-meta,
.tx-collapsed .tx-identity .ms-auto,
.tx-collapsed .aside-brand img{display:none;}
.tx-collapsed .aside-brand::before{content:"T";display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:.6rem;background:var(--tx-lime);color:#13332a;font-weight:800;margin:0 auto;}
.tx-collapsed .nav-link{justify-content:center;padding:.6rem;}
.tx-collapsed .nav-link i{width:auto;}
.tx-collapsed .tx-subnav{margin-left:0;padding-left:0;border-left:none;}
.tx-collapsed .tx-nav-label--admin{border-top:1px solid rgba(255,255,255,.1);margin-top:.5rem;}
.tx-collapsed .tx-identity{justify-content:center;}
/* In the 74px rail there's no room to expand groups, so show every
   admin sub-item as its own icon and make the group header non-interactive. */
.tx-collapsed .tx-subnav{display:flex!important;height:auto!important;}
.tx-collapsed .tx-group-toggle{pointer-events:none;opacity:.65;}

/* Sidebar collapse toggle button (lives in the top bar) */
.tx-sidebar-toggle{border:none;background:transparent;color:var(--tx-green);font-size:1.25rem;
  line-height:1;padding:.25rem .5rem;border-radius:.5rem;}
.tx-sidebar-toggle:hover{background:var(--tx-mint);}

.card-kpi{border:1px solid var(--tx-line);border-radius:var(--tx-radius);box-shadow:var(--tx-shadow-sm);}
.card-kpi .display-6{font-weight:700;color:var(--tx-green);}
/* Make KPI cards feel clickable when wrapped in a link */
a.card-kpi-link{text-decoration:none;display:block;height:100%;}
a.card-kpi-link .card-kpi{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
a.card-kpi-link:hover .card-kpi{transform:translateY(-3px);box-shadow:var(--tx-shadow);border-color:#cfe0d5;}

/* Pagination — brand colours */
.pagination .page-link{color:var(--tx-green);border-color:var(--tx-line);}
.pagination .page-link:hover{background:var(--tx-mint);color:var(--tx-green);}
.pagination .page-item.active .page-link{background:var(--tx-green);border-color:var(--tx-green);color:#fff;}
.pagination .page-item.disabled .page-link{color:var(--tx-muted);}

/* =====================================================================
   Rich admin UI — page bands, stat chips, lively tables, drawers
   ===================================================================== */
.tx-pageband{
  background:linear-gradient(120deg,var(--tx-mint) 0%, #fff 70%);
  border:1px solid var(--tx-line);border-radius:var(--tx-radius);
  padding:1.1rem 1.3rem;box-shadow:var(--tx-shadow-sm);
}
.tx-pageband-icon{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:.85rem;background:var(--tx-green);color:var(--tx-lime);font-size:1.35rem;flex-shrink:0;
  box-shadow:0 6px 16px -8px rgba(26,61,50,.5);
}
.tx-count-pill{
  font-size:.72rem;font-weight:700;background:var(--tx-green);color:#fff;
  padding:.12rem .55rem;border-radius:999px;vertical-align:middle;
}
/* Stat chips */
.tx-chip{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;
  background:#fff;border:1px solid var(--tx-line);color:var(--tx-ink);
  padding:.35rem .7rem;border-radius:999px;box-shadow:var(--tx-shadow-sm);
}
.tx-chip strong{font-weight:700;}
.tx-chip .tx-chip-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--tx-muted);}
.tx-chip--success .tx-chip-dot{background:#1f9d57;} .tx-chip--success{border-color:#bfe6cd;}
.tx-chip--warning .tx-chip-dot{background:#d99a18;} .tx-chip--warning{border-color:#f1dca6;}
.tx-chip--danger  .tx-chip-dot{background:#d3453b;} .tx-chip--danger{border-color:#f0c4c0;}
.tx-chip--info    .tx-chip-dot{background:#2b86c5;} .tx-chip--info{border-color:#bcdcf0;}
.tx-chip--primary .tx-chip-dot{background:var(--tx-green);} .tx-chip--primary{border-color:#bcd6c9;}

/* Lively data tables */
.tx-table-card{border:1px solid var(--tx-line);border-radius:var(--tx-radius);overflow:hidden;
  box-shadow:var(--tx-shadow-sm);background:#fff;}
.tx-table-toolbar{padding:.85rem 1rem;border-bottom:1px solid var(--tx-line);background:#fff;}
.tx-table{margin:0;}
.tx-table thead th{background:var(--tx-mint);color:var(--tx-green);font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--tx-line);white-space:nowrap;}
.tx-table tbody td{vertical-align:middle;border-color:#eef3ef;}
.tx-table tbody tr{transition:background .12s ease;}
.tx-table tbody tr:hover{background:var(--tx-bg);}
.tx-table tbody tr:nth-child(even){background:rgba(240,247,237,.35);}
.tx-table tbody tr:nth-child(even):hover{background:var(--tx-bg);}

/* Sortable column headers */
.tx-sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;}
.tx-sort:hover{color:var(--tx-sage);}
.tx-sort .bi{font-size:.7rem;opacity:.55;}
.tx-sort.is-active .bi{opacity:1;color:var(--tx-sage);}

/* Status pills (vivid, replaces tiny grey badges) */
.tx-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:600;
  padding:.22rem .6rem;border-radius:999px;line-height:1;}
.tx-pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;}
.tx-pill--success{background:#e6f6ec;color:#147a41;}
.tx-pill--warning{background:#fdf3dd;color:#9a6a08;}
.tx-pill--danger {background:#fbe7e5;color:#b3372c;}
.tx-pill--info   {background:#e3f0fb;color:#1f6aa3;}
.tx-pill--muted  {background:#eef1f4;color:#566;}

/* Row avatars */
.tx-row-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--tx-green);color:var(--tx-lime);font-weight:700;font-size:.8rem;flex-shrink:0;}
.tx-avatar-name{display:flex;align-items:center;gap:.6rem;}

/* Empty states */
.tx-empty{text-align:center;padding:2.5rem 1rem;color:var(--tx-muted);}
.tx-empty .bi{font-size:2.2rem;color:#cdddd2;display:block;margin-bottom:.5rem;}

/* Drawer (offcanvas) */
.tx-drawer{width:440px;max-width:92vw;}
.tx-drawer-header{background:var(--tx-green);color:#fff;}
.tx-drawer-header .offcanvas-title{color:#fff;}
.tx-drawer .offcanvas-body{background:var(--tx-bg);}

/* =====================================================================
   Modern layer — glassmorphism, gradient meshes, glow, motion
   ===================================================================== */

/* Gradient mesh backdrop (drop on any section wrapper) */
.tx-mesh{position:relative;isolation:isolate;}
.tx-mesh::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(40rem 28rem at 12% -10%, rgba(211,255,98,.22), transparent 60%),
    radial-gradient(34rem 24rem at 92% 0%, rgba(61,122,104,.20), transparent 55%),
    radial-gradient(40rem 30rem at 50% 120%, rgba(26,61,50,.10), transparent 60%);
}
.tx-mesh-dark{background:linear-gradient(150deg,#0f2a21 0%,#16382c 55%,#1f4a3b 100%);color:#eaf3ee;}
.tx-mesh-dark::before{
  background:
    radial-gradient(38rem 26rem at 15% 0%, rgba(211,255,98,.18), transparent 60%),
    radial-gradient(34rem 24rem at 90% 10%, rgba(211,255,98,.10), transparent 55%);
}

/* Glass cards */
.tx-glass{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:1.1rem;
  box-shadow:0 12px 40px -16px rgba(26,61,50,.35), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tx-glass:hover{transform:translateY(-5px);box-shadow:0 22px 54px -18px rgba(26,61,50,.45);border-color:rgba(211,255,98,.6);}
.tx-glass-dark{
  background:rgba(18,42,33,.55);border:1px solid rgba(255,255,255,.10);color:#eaf3ee;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:1.1rem;
  box-shadow:0 16px 44px -20px rgba(0,0,0,.6);
}

/* Glow accent ring (for icons / CTAs) */
.tx-glow{position:relative;}
.tx-glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,var(--tx-lime),var(--tx-sage));filter:blur(14px);opacity:.45;}

/* Gradient text */
.tx-gradient-text{
  background:linear-gradient(100deg,var(--tx-green) 0%, var(--tx-sage) 55%, #6fae3a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Pill stat (animated counter target) */
.tx-stat-num{font-weight:800;font-size:2.4rem;line-height:1;color:var(--tx-green);}
.tx-mesh-dark .tx-stat-num{color:var(--tx-lime);}

/* Scroll-reveal — fail-safe: content is VISIBLE by default; the hidden
   state only applies once JS has marked the page ready (html.tx-js). This
   guarantees nothing ever stays invisible if JS fails or is slow. */
.tx-js .tx-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.tx-js .tx-reveal.is-in{opacity:1;transform:none;}
.tx-reveal[data-tx-delay="1"]{transition-delay:.08s;}
.tx-reveal[data-tx-delay="2"]{transition-delay:.16s;}
.tx-reveal[data-tx-delay="3"]{transition-delay:.24s;}
.tx-reveal[data-tx-delay="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  .tx-js .tx-reveal{opacity:1;transform:none;transition:none;}
  .tx-glass:hover{transform:none;}
}

/* Modern KPI glass card (admin) */
.tx-kpi-glass{border-radius:1.1rem;padding:1.25rem 1.35rem;position:relative;overflow:hidden;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--tx-line);box-shadow:var(--tx-shadow-sm);transition:transform .2s ease,box-shadow .2s ease;}
.tx-kpi-glass:hover{transform:translateY(-4px);box-shadow:var(--tx-shadow);}
.tx-kpi-glass .tx-kpi-ico{position:absolute;right:-6px;bottom:-10px;font-size:4.5rem;opacity:.08;color:var(--tx-green);}
.table thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tx-muted);}

/* ---- Trade wizard steps ---------------------------------------- */
.tx-steps{display:flex;gap:.5rem;flex-wrap:wrap;}
.tx-steps .step{flex:1;min-width:120px;text-align:center;padding:.5rem;border-radius:.5rem;background:#eef3ef;font-size:.85rem;color:var(--tx-muted);}
.tx-steps .step.active{background:var(--tx-green);color:#fff;}
.tx-steps .step.done{background:var(--tx-sage);color:#fff;}

/* ---- responsive ------------------------------------------------- */
@media (max-width:768px){
  .tx-section{padding:3.25rem 0;}
  .tx-cta{padding:2.25rem;}
  .tx-hero h1{font-size:2.25rem;}
}