/* ===== colour variables: dark defaults (login screen) + WhatsApp LIGHT theme for the app ===== */
:root { --card-a:#1F2C34; --card-b:#182229; --sheet-a:#202C33; --sheet-b:#161F25; --input-bg:#111B21; --input-focus:#131E25;
  --side-a:#14202A; --side-b:#0E171C; --hero-a:#2D2615; --hero-b:#1A1B18; --hero-text:#F2C766; --on-brass:#1B140A;
  --accent-text:#F2C766; --brass-rgb:227 172 71; --bar-a:32 44 51; --bar-b:17 27 33; --dock-a:34 45 52; --dock-b:20 28 33;
  --toast:32 44 51; --sh:0 0 0; --ink:255 255 255; }
:root:has(.shell) { --card-a:#FFFFFF; --card-b:#FBFBF9; --sheet-a:#FFFFFF; --sheet-b:#F7F8FA; --input-bg:#F0F2F5; --input-focus:#FFFFFF;
  --side-a:#FFFFFF; --side-b:#F7F8FA; --hero-a:#E9FCE5; --hero-b:#D9FDD3; --hero-text:#005C4B; --on-brass:#FFFFFF;
  --accent-text:#008069; --brass-rgb:0 168 132; --bar-a:0 128 105; --bar-b:0 107 88; --dock-a:255 255 255; --dock-b:247 248 250;
  --toast:255 255 255; --sh:70 90 100; --ink:17 27 33; color-scheme:light; }
.tri-app:has(.shell) { --bg:#EFEAE2; --panel:#FFFFFF; --panel2:#F0F2F5; --line:#E1E5E8; --text:#111B21; --muted:#667781;
  --brass:#00A884; --brass-hi:#25D366; --brass-lo:#008069; --brass-soft:rgba(0,168,132,.12);
  --teal:#00A884; --hairline:rgba(17,27,33,.08); }
html:has(.shell), body:has(.shell) { background:#EFEAE2; }

/* ===================================================================
   MOBILE PREMIUM LAYER  (phones & small tablets, <= 900px)
   Loaded after style.css. Desktop is untouched.

   Design idea: the society at dusk. Deep blue-black surfaces lit by warm
   brass, soft depth instead of hard borders, a floating glass dock for
   navigation, and motion that only answers a touch (press, ripple, sheet
   rise, page change) — nothing loops on its own.
   =================================================================== */
@media (max-width: 900px) {

  /* ---------- tokens ---------- */
  html, body { background:#0B141A; }
  .tri-app {
    --bg:#0B141A; --panel:#182229; --panel2:#202C33; --line:#2A3942;
    --text:#F1EFE8; --muted:#8E989D;
    --brass:#E3AC47; --brass-hi:#F2C766; --brass-lo:#C98E2B;
    --brass-soft:rgb(var(--brass-rgb) / .14);
    --teal:#4FA595; --coral:#E27A60; --sky:#6DB2DC;
    --hairline:rgb(var(--ink) / .06);
    --ease:cubic-bezier(.22,.8,.32,1);
    --spring:cubic-bezier(.34,1.45,.64,1);
    background:var(--bg);
  }
  /* WhatsApp-style doodle wallpaper: fixed layer behind everything */
  .tri-app:has(.shell)::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(110% 34% at 0% 0%, rgb(var(--brass-rgb) / .07), transparent 62%),
      url('wa-doodle.svg') 0 0 / 260px 260px,
      var(--bg); }
  .tri-app .shell { position:relative; z-index:1; }

  /* ---------- top app bar ---------- */
  .topbar {
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
    background:linear-gradient(180deg, rgb(var(--bar-a) / .96), rgb(var(--bar-b) / .92));
    border-bottom:1px solid var(--hairline); box-shadow:none;
    transition:box-shadow .3s var(--ease), background .3s var(--ease);
  }
  .topbar.scrolled { background:rgb(var(--bar-b) / .96); box-shadow:0 10px 28px -8px rgb(var(--sh) / .65); }
  .topbar h2 { font-size:1.28rem; letter-spacing:-.012em; line-height:1.15; }
  .topbar .meta { display:block; font-size:.72rem; color:var(--muted); margin-top:3px; }
  .badge-role { background:var(--brass-soft); border:1px solid rgb(var(--brass-rgb) / .28); color:var(--accent-text);
    font-weight:600; letter-spacing:.01em; }
  .hamburger-btn, .icon-btn { position:relative; overflow:hidden; background:rgb(var(--ink) / .05);
    border:1px solid var(--hairline); color:var(--text); border-radius:50%; width:42px; height:42px; padding:0;
    transition:transform .2s var(--spring), background .2s; }
  .hamburger-btn { display:inline-flex; margin:0 4px 0 -2px; padding:0; justify-content:center; align-items:center; }
  .hamburger-btn:active, .icon-btn:active { transform:scale(.88); background:var(--brass-soft); }

  /* ---------- page ---------- */
  .content { padding:16px 14px calc(116px + env(safe-area-inset-bottom)); }
  .content.tab-anim { animation:none; }
  .section-title { font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600; letter-spacing:-.005em;
    text-transform:none; color:var(--text); margin:26px 4px 12px; }

  /* ---------- cards ---------- */
  .card {
    background:linear-gradient(165deg,var(--card-a) 0%,var(--card-b) 100%);
    border:1px solid var(--hairline); border-radius:24px; padding:16px;
    box-shadow:0 14px 30px -16px rgb(var(--sh) / .75), inset 0 1px 0 rgb(var(--ink) / .045);
    position:relative; overflow:hidden;
  }
  .card:has(> table) { background:transparent; border:none; box-shadow:none; padding:0; overflow:visible; }
  /* the "hero" card (e.g. Total current fund) gets the brass treatment */
  .card[style*="border-color:var(--brass)"]:not(:has(> table)) {
    background:
      radial-gradient(120% 90% at 100% 0%, rgb(var(--brass-rgb) / .22), transparent 60%),
      linear-gradient(150deg,var(--hero-a),var(--hero-b));
    border:1px solid rgb(var(--brass-rgb) / .38) !important;
    box-shadow:0 18px 38px -16px rgb(var(--brass-rgb) / .35), inset 0 1px 0 rgb(var(--ink) / .08);
  }
  .card[style*="border-color:var(--brass)"]:not(:has(> table)) .kpi-num { color:var(--hero-text); }

  .kpi-label { display:flex; align-items:center; gap:9px; font-size:.76rem; color:var(--muted); margin-bottom:12px; line-height:1.2; }
  .kpi-chip { width:30px; height:30px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; background:var(--brass-soft); color:var(--accent-text); }
  .kpi-chip.tone-teal  { background:rgba(79,165,149,.16);  color:#86D3C2; }
  .kpi-chip.tone-coral { background:rgba(226,122,96,.16);  color:#F0A18D; }
  .kpi-chip.tone-sky   { background:rgba(109,178,220,.16); color:#A4D3EF; }
  .kpi-num { font-size:1.72rem; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
  .kpi-sub { font-size:.74rem; }
  .progress-track { height:10px; background:rgb(var(--ink) / .07); }
  .progress-fill { background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi)); border-radius:20px; }

  /* ---------- status pills ---------- */
  .tag { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 10px; font-size:.72rem; letter-spacing:.01em; }
  .tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }

  /* ---------- buttons ---------- */
  .btn { position:relative; overflow:hidden; min-height:48px; border-radius:28px; font-weight:500;
    background:var(--panel2); border:1px solid rgb(var(--ink) / .08);
    transition:transform .22s var(--spring), box-shadow .25s, filter .2s; }
  .btn:active { transform:scale(.95); filter:none; }
  .btn-sm { min-height:40px; border-radius:22px; padding:8px 16px; }
  .btn-brass { background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); border:none; color:var(--on-brass);
    box-shadow:0 10px 22px -8px rgb(var(--brass-rgb) / .6), inset 0 1px 0 rgba(255,255,255,.4); }
  .btn-teal  { background:linear-gradient(135deg,#6CC4B2,#3F8F80); border:none;
    box-shadow:0 10px 22px -8px rgba(79,165,149,.55), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn-danger { background:linear-gradient(135deg,#EE8E76,#C4513A); border:none; color:#2A0C06;
    box-shadow:0 10px 22px -8px rgba(226,122,96,.5), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn-ghost { background:transparent; border:1px solid rgb(var(--ink) / .12); }
  .ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.3); transform:scale(0);
    animation:rippleOut .6s var(--ease) forwards; pointer-events:none; }
  .btn-brass .ripple, .btn-teal .ripple { background:rgba(255,255,255,.4); }
  @keyframes rippleOut { to { transform:scale(1); opacity:0; } }

  /* ---------- inputs ---------- */
  .field label { font-size:.76rem; margin-bottom:7px; padding-left:4px; }
  .field input, .field select, .field textarea, .login-form input, select.inline, input.inline {
    background:var(--input-bg); border:1.5px solid var(--line); border-radius:16px; min-height:50px; padding:11px 16px;
    transition:border-color .2s, box-shadow .25s, background .2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus, .login-form input:focus,
  select.inline:focus, input.inline:focus {
    outline:none; border-color:var(--brass); background:var(--input-focus); box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .14);
  }
  .tri-app :focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }

  /* ---------- tables -> list cards ---------- */
  tbody tr {
    background:linear-gradient(165deg,var(--card-a),var(--card-b)); border:1px solid var(--hairline); border-radius:22px;
    padding:2px 16px; margin-bottom:12px; box-shadow:0 12px 26px -16px rgb(var(--sh) / .8), inset 0 1px 0 rgb(var(--ink) / .04);
  }
  /* first cell = the card's title (flat number, month, name…) */
  tbody tr > td[data-label]:first-child { justify-content:flex-start; font-family:'Fraunces', serif; font-size:1.1rem;
    font-weight:600; padding:15px 0 13px; text-align:left; letter-spacing:-.005em; }
  tbody tr > td[data-label]:first-child::before { display:none; }
  td[data-label] { border-bottom:1px solid var(--hairline); padding:11px 0; }
  td[data-label]::before { text-transform:none; letter-spacing:0; font-size:.76rem; }
  tbody tr:has(td.empty) { background:transparent; box-shadow:none; }
  td.empty { color:var(--muted); }
  tfoot tr { background:var(--brass-soft); border:1px solid rgb(var(--brass-rgb) / .25); border-radius:18px; }

  /* ---------- collapsible add-forms ---------- */
  .collapsible { border-radius:24px; }
  .collapsible-head { min-height:62px; padding:14px 18px; font-size:.98rem; position:relative; overflow:hidden; }
  .collapsible-plus { width:36px; height:36px; background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); color:var(--on-brass);
    box-shadow:0 6px 14px -4px rgb(var(--brass-rgb) / .55); transition:transform .3s var(--spring); }
  .collapsible.open .collapsible-plus { transform:rotate(135deg); }
  .collapsible.open .collapsible-body { animation:riseIn .4s var(--ease) both; }

  /* ---------- navigation drawer ---------- */
  .drawer { width:304px; border-right:none; border-radius:0 30px 30px 0;
    background:
      radial-gradient(120% 34% at 0% 0%, rgb(var(--brass-rgb) / .2), transparent 62%),
      linear-gradient(180deg,var(--card-a),var(--side-b));
    box-shadow:24px 0 60px rgb(var(--sh) / .6); }
  .drawer.open { animation:drawerIn .42s var(--ease) both; }
  @keyframes drawerIn { from { transform:translateX(-102%); } to { transform:translateX(0); } }
  .drawer-overlay.show { animation:fadeIn .3s ease-out both; background:rgba(5,8,10,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .drawer-user { background:rgb(var(--ink) / .05); border:1px solid var(--hairline); border-radius:20px; }
  .drawer-avatar { width:44px; height:44px; background:linear-gradient(145deg,var(--brass-hi),var(--brass-lo));
    box-shadow:0 8px 18px -6px rgb(var(--brass-rgb) / .6); }
  .drawer-item { position:relative; overflow:hidden; border-radius:16px; padding:8px 12px; min-height:54px; gap:14px; }
  .drawer.open .drawer-item { animation:slideInX .45s var(--ease) both; animation-delay:calc(var(--i,0) * 30ms + 120ms); }
  @keyframes slideInX { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
  .drawer-item svg.icon { width:38px; height:38px; padding:9px; border-radius:13px; background:rgb(var(--ink) / .055);
    transition:background .2s, color .2s; }
  .drawer-item.active { background:linear-gradient(90deg,rgb(var(--brass-rgb) / .18),rgb(var(--brass-rgb) / .03)); box-shadow:none; color:var(--accent-text); }
  .drawer-item.active svg.icon { background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); color:var(--on-brass); fill:rgba(27,20,10,.18); }
  .drawer-foot { border-top:1px solid var(--hairline); }

  /* ---------- floating glass dock (bottom navigation) ---------- */
  .bottomnav {
    left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:8px 6px; gap:2px;
    border-radius:32px; border:1px solid rgb(var(--ink) / .08);
    background:linear-gradient(180deg, rgb(var(--dock-a) / .82), rgb(var(--dock-b) / .88));
    backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:0 22px 44px -10px rgb(var(--sh) / .75), 0 2px 0 rgb(var(--ink) / .05) inset;
  }
  .bottomnav-item { font-size:.66rem; gap:4px; padding:3px 0; letter-spacing:.005em; border-radius:22px;
    transition:color .25s, transform .2s var(--spring); }
  .bottomnav-item:active { transform:scale(.9); }
  .bnav-icon-wrap { padding:6px 0; width:100%; max-width:60px; display:flex; justify-content:center; border-radius:18px;
    transition:background .3s var(--ease), box-shadow .3s var(--ease), color .2s; }
  .bottomnav-item.active { color:var(--accent-text); }
  .bottomnav-item.active .bnav-icon-wrap { background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); color:var(--on-brass);
    box-shadow:0 8px 18px -6px rgb(var(--brass-rgb) / .65); }
  .bottomnav-item.active svg.icon { fill:rgba(27,20,10,.2); }
  .bottomnav-item.pop .bnav-icon-wrap { animation:pillPop .5s var(--spring) both; }
  @keyframes pillPop { 0% { transform:scale(.6); opacity:.3; } 100% { transform:scale(1); opacity:1; } }
  .bnav-icon-wrap .nav-badge { top:-6px; right:0; border:2px solid var(--card-a); min-width:20px; height:20px;
    background:linear-gradient(135deg,#EE8E76,#C4513A); box-shadow:0 4px 10px rgba(196,81,58,.5); }
  .nav-badge { background:linear-gradient(135deg,#EE8E76,#C4513A); }

  /* ---------- bottom sheet ---------- */
  .sheet-overlay { background:rgba(5,8,10,.66); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
  .sheet { background:linear-gradient(180deg,var(--sheet-a),#141C21); border:1px solid var(--hairline); border-bottom:none;
    border-radius:32px 32px 0 0; box-shadow:0 -24px 60px rgb(var(--sh) / .6); animation:sheetUp .45s var(--ease) both; }
  .sheet-handle { width:44px; height:5px; background:rgb(var(--ink) / .18); margin:12px auto 4px; }
  .sheet-title { font-size:1.2rem; padding:12px 20px 10px; }
  .sheet-foot { border-top:1px solid var(--hairline); }

  /* ---------- snackbar toast ---------- */
  .toast { left:14px; right:14px; bottom:calc(104px + env(safe-area-inset-bottom)); border:1px solid rgb(var(--ink) / .08);
    border-left:4px solid var(--brass); border-radius:18px; background:rgb(var(--toast) / .97); text-align:left;
    box-shadow:0 18px 40px -8px rgb(var(--sh) / .7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateY(24px) scale(.97); transition:opacity .25s, transform .4s var(--spring); }
  .toast.show { transform:translateY(0) scale(1); }

  /* ---------- page-change entrance (plays only after a tab switch) ---------- */
  @keyframes riseIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
  .content.tab-anim > *, .content.tab-anim .grid > .card, .content.tab-anim tbody > tr {
    animation:riseIn .55s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms);
  }
  .content.tab-anim .grid { animation:none; }

  /* ---------- pull to refresh ---------- */
  .ptr { position:fixed; z-index:60; left:50%; top:calc(66px + env(safe-area-inset-top)); width:42px; height:42px; margin-left:-21px;
    border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent-text);
    background:var(--card-a); border:1px solid rgb(var(--ink) / .1); box-shadow:0 12px 28px rgb(var(--sh) / .55);
    opacity:0; transform:translateY(-70px) rotate(0deg); pointer-events:none; }
  .ptr.pulling { transition:none; }
  .ptr:not(.pulling) { transition:transform .35s var(--spring), opacity .25s; }
  .ptr.loading { opacity:1; transform:translateY(0); }
  .ptr.loading svg { animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ---------- login on phones ---------- */
  .login-form .btn { min-height:52px; }
  .role-card { border-radius:22px; }
}

/* tiny phones */
@media (max-width: 380px) {
  .bottomnav { left:8px; right:8px; }
  .bottomnav-item { font-size:.6rem; }
  .kpi-num { font-size:1.5rem; }
  .drawer { width:86vw; }
}

@media (prefers-reduced-motion: reduce) {
  .main .content.tab-anim > *, .main .content.tab-anim .grid > .card, .main .content.tab-anim tbody > tr, .sheet, .toast,
  .content.tab-anim > *, .content.tab-anim .grid > .card, .content.tab-anim tbody > tr,
  .drawer.open, .drawer.open .drawer-item, .sheet, .bottomnav-item.pop .bnav-icon-wrap { animation:none !important; }
  .ripple { display:none; }
}

/* ===================================================================
   DESKTOP / LAPTOP (> 900px): same WhatsApp-dark theme and the same
   touch-feel animations (ripple, page entrance, count-up, icon chips),
   adapted to the sidebar layout. No dock / drawer / pull-to-refresh.
   =================================================================== */
@media (min-width: 901px) {
  html, body { background:#0B141A; }
  .tri-app {
    --bg:#0B141A; --panel:#182229; --panel2:#202C33; --line:#2A3942;
    --text:#F1EFE8; --muted:#8E989D;
    --brass:#E3AC47; --brass-hi:#F2C766; --brass-lo:#C98E2B; --brass-soft:rgb(var(--brass-rgb) / .14);
    --teal:#4FA595; --coral:#E27A60; --sky:#6DB2DC; --hairline:rgb(var(--ink) / .06);
    --ease:cubic-bezier(.22,.8,.32,1); --spring:cubic-bezier(.34,1.45,.64,1);
    background:var(--bg);
  }
  .tri-app:has(.shell)::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(70% 40% at 20% 0%, rgb(var(--brass-rgb) / .06), transparent 62%),
      url('wa-doodle.svg') 0 0 / 260px 260px, var(--bg); }
  .tri-app .shell { position:relative; z-index:1; }

  /* sidebar */
  .sidebar { width:236px; background:linear-gradient(180deg,var(--side-a) 0%,var(--side-b) 100%); border-right:1px solid var(--hairline);
    box-shadow:10px 0 40px -20px rgb(var(--sh) / .7); }
  .brand { border-bottom:1px solid var(--hairline); padding:22px 18px; }
  .nav { padding:14px 12px; gap:4px; }
  .nav-item { position:relative; overflow:hidden; border-radius:14px; padding:11px 14px; gap:12px; font-size:.88rem;
    transition:background .2s, color .2s, transform .2s var(--spring); }
  .nav-item:hover { background:rgb(var(--ink) / .05); color:var(--text); transform:translateX(3px); }
  .nav-item svg.icon { transition:transform .25s var(--spring); }
  .nav-item:hover svg.icon { transform:scale(1.12); }
  .nav-item.active { background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); color:var(--on-brass);
    box-shadow:0 10px 22px -10px rgb(var(--brass-rgb) / .65); transform:none; }
  .nav-item.active svg.icon { fill:rgba(27,20,10,.2); }
  .sidebar-foot { border-top:1px solid var(--hairline); }

  /* top bar */
  .topbar { padding:16px 30px; background:linear-gradient(180deg, rgb(var(--bar-a) / .96), rgb(var(--bar-b) / .9));
    border-bottom:1px solid var(--hairline); transition:box-shadow .3s var(--ease); position:relative; z-index:5; }
  .topbar.scrolled { box-shadow:0 12px 30px -10px rgb(var(--sh) / .7); }
  .topbar h2 { font-size:1.4rem; letter-spacing:-.012em; }
  .badge-role { background:var(--brass-soft); border:1px solid rgb(var(--brass-rgb) / .28); color:var(--accent-text); font-weight:600; }
  .icon-btn { position:relative; overflow:hidden; background:rgb(var(--ink) / .05); border:1px solid var(--hairline);
    color:var(--text); transition:transform .2s var(--spring), background .2s; }
  .icon-btn:hover { background:var(--brass-soft); color:var(--accent-text); }
  .icon-btn:active { transform:scale(.88); }
  .icon-btn:hover svg { transform:rotate(60deg); }
  .icon-btn svg { transition:transform .4s var(--ease); }

  .content { padding:26px 30px 60px; }
  .content.tab-anim { animation:none; }
  .section-title { font-family:'Fraunces', serif; font-size:1.1rem; letter-spacing:-.005em; margin:30px 2px 14px; }

  /* cards */
  .card { background:linear-gradient(165deg,var(--card-a) 0%,var(--card-b) 100%); border:1px solid var(--hairline); border-radius:22px;
    padding:20px; box-shadow:0 16px 34px -18px rgb(var(--sh) / .75), inset 0 1px 0 rgb(var(--ink) / .045); }
  .card[style*="border-color:var(--brass)"]:not(:has(> table)) {
    background:radial-gradient(120% 90% at 100% 0%, rgb(var(--brass-rgb) / .22), transparent 60%), linear-gradient(150deg,var(--hero-a),var(--hero-b));
    border:1px solid rgb(var(--brass-rgb) / .38) !important; box-shadow:0 20px 40px -18px rgb(var(--brass-rgb) / .35), inset 0 1px 0 rgb(var(--ink) / .08); }
  .card[style*="border-color:var(--brass)"]:not(:has(> table)) .kpi-num { color:var(--hero-text); }
  .kpi-label { display:flex; align-items:center; gap:10px; font-size:.8rem; margin-bottom:14px; }
  .kpi-chip { width:34px; height:34px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; background:var(--brass-soft); color:var(--accent-text); }
  .kpi-chip.tone-teal  { background:rgba(79,165,149,.16);  color:#86D3C2; }
  .kpi-chip.tone-coral { background:rgba(226,122,96,.16);  color:#F0A18D; }
  .kpi-chip.tone-sky   { background:rgba(109,178,220,.16); color:#A4D3EF; }
  .kpi-num { font-size:2rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .progress-track { height:10px; background:rgb(var(--ink) / .07); }
  .progress-fill { background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi)); border-radius:20px; }

  /* status pills */
  .tag { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 10px; }
  .tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }

  /* tables */
  th { text-transform:none; letter-spacing:0; font-size:.78rem; border-bottom:1px solid var(--hairline); padding:10px 12px; }
  td { padding:13px 12px; border-bottom:1px solid var(--hairline); }
  tbody tr { transition:background .2s; }
  tbody tr:hover { background:rgb(var(--ink) / .035); }
  tbody tr > td:first-child { font-weight:600; }

  /* buttons */
  .btn { position:relative; overflow:hidden; border-radius:12px; background:var(--panel2); border:1px solid rgb(var(--ink) / .08);
    transition:transform .22s var(--spring), box-shadow .25s, filter .2s, border-color .2s; }
  .btn:hover { border-color:rgb(var(--brass-rgb) / .5); }
  .btn:active { transform:scale(.96); }
  .btn-brass { background:linear-gradient(135deg,var(--brass-hi),var(--brass-lo)); border:none; color:var(--on-brass);
    box-shadow:0 10px 22px -10px rgb(var(--brass-rgb) / .65), inset 0 1px 0 rgba(255,255,255,.4); }
  .btn-brass:hover { filter:brightness(1.06); box-shadow:0 14px 26px -10px rgb(var(--brass-rgb) / .75), inset 0 1px 0 rgba(255,255,255,.4); }
  .btn-teal { background:linear-gradient(135deg,#6CC4B2,#3F8F80); border:none; }
  .btn-danger { background:linear-gradient(135deg,#EE8E76,#C4513A); border:none; color:#2A0C06; }
  .btn-ghost { background:transparent; border:1px solid rgb(var(--ink) / .12); }
  .ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.3); transform:scale(0);
    animation:rippleOut .6s var(--ease) forwards; pointer-events:none; }
  .btn-brass .ripple, .btn-teal .ripple, .nav-item.active .ripple { background:rgba(255,255,255,.4); }
  @keyframes rippleOut { to { transform:scale(1); opacity:0; } }

  /* inputs */
  .field input, .field select, .field textarea, .login-form input, select.inline, input.inline {
    background:var(--input-bg); border:1.5px solid var(--line); border-radius:12px; padding:10px 14px;
    transition:border-color .2s, box-shadow .25s, background .2s; }
  .field input:focus, .field select:focus, .field textarea:focus, .login-form input:focus, select.inline:focus, input.inline:focus {
    outline:none; border-color:var(--brass); background:var(--input-focus); box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .14); }
  .tri-app :focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }

  /* centred dialog (edit flat / pay now) */
  .sheet-overlay { background:rgba(5,8,10,.66); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
  .sheet { background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b)); border:1px solid var(--hairline); border-radius:26px;
    box-shadow:0 40px 90px rgb(var(--sh) / .65); animation:dialogIn .4s var(--ease) both; }
  @keyframes dialogIn { from { opacity:0; transform:translate(-50%,-47%) scale(.95); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
  .sheet-foot { border-top:1px solid var(--hairline); }

  /* toast */
  .toast { border:1px solid rgb(var(--ink) / .08); border-left:4px solid var(--brass); border-radius:14px; background:rgb(var(--toast) / .97);
    box-shadow:0 18px 40px -8px rgb(var(--sh) / .7); transform:translateY(-16px) scale(.97); transition:opacity .25s, transform .4s var(--spring); }
  .toast.show { transform:translateY(0) scale(1); }

  /* page entrance after a menu click */
  @keyframes riseIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .content.tab-anim > *, .content.tab-anim .grid > .card, .content.tab-anim tbody > tr {
    animation:riseIn .55s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms); }
  .content.tab-anim .grid { animation:none; }
}

/* ===================================================================
   WHATSAPP LIGHT — component overrides (phones + desktop)
   =================================================================== */
.tri-app:has(.shell)::before { background:
    radial-gradient(110% 34% at 0% 0%, rgb(var(--brass-rgb) / .05), transparent 62%),
    url('wa-doodle-light.svg') 0 0 / 260px 260px, #EFEAE2 !important; }

/* green WhatsApp-style header */
.tri-app:has(.shell) .topbar { background:linear-gradient(180deg, rgb(var(--bar-a)), rgb(var(--bar-b))); border-bottom:none; color:#fff; }
.tri-app:has(.shell) .topbar.scrolled { background:rgb(var(--bar-b)); }
.tri-app:has(.shell) .topbar h2 { color:#fff; }
.tri-app:has(.shell) .topbar .meta, .tri-app:has(.shell) .topbar-name { color:rgba(255,255,255,.78); }
.tri-app:has(.shell) .topbar .hamburger-btn, .tri-app:has(.shell) .topbar .icon-btn { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.2); color:#fff; }
.tri-app:has(.shell) .topbar .icon-btn:hover { background:rgba(255,255,255,.26); color:#fff; }
.tri-app:has(.shell) .topbar .badge-role { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); color:#fff; }

/* brand icons were hard-coded gold */
.tri-app:has(.shell) .brand svg, .tri-app:has(.shell) .drawer-header svg { color:var(--brass) !important; }

/* sidebar / drawer / dock on white */
.tri-app:has(.shell) .sidebar { border-right:1px solid var(--hairline); box-shadow:10px 0 40px -24px rgb(var(--sh) / .5); }
.tri-app:has(.shell) .nav-item.active, .tri-app:has(.shell) .btn-brass { color:#fff; }
.tri-app:has(.shell) .btn-brass .ripple, .tri-app:has(.shell) .nav-item.active .ripple { background:rgba(255,255,255,.4); }
.tri-app:has(.shell) .btn-brass { box-shadow:0 10px 22px -10px rgb(var(--brass-rgb) / .7), inset 0 1px 0 rgba(255,255,255,.35); }
.tri-app:has(.shell) .bottomnav { border-color:var(--hairline); }
.tri-app:has(.shell) .drawer { box-shadow:24px 0 60px -20px rgb(var(--sh) / .55); }
.tri-app:has(.shell) .nav-badge, .tri-app:has(.shell) .bnav-icon-wrap .nav-badge { color:#fff; border-color:#fff; }

/* icon chips + status pills readable on white */
.tri-app:has(.shell) .kpi-chip { background:rgb(var(--brass-rgb) / .13); color:#00806A; }
.tri-app:has(.shell) .kpi-chip.tone-teal  { background:rgba(0,168,132,.14);  color:#00806A; }
.tri-app:has(.shell) .kpi-chip.tone-coral { background:rgba(226,85,62,.13);  color:#C4452F; }
.tri-app:has(.shell) .kpi-chip.tone-sky   { background:rgba(45,130,183,.13); color:#2373A3; }
.tri-app:has(.shell) .tag-green { background:rgba(0,168,132,.14); color:#00775F; }
.tri-app:has(.shell) .tag-amber { background:rgba(230,160,20,.18); color:#946300; }
.tri-app:has(.shell) .tag-red   { background:rgba(226,85,62,.14);  color:#B23A25; }
.tri-app:has(.shell) .tag-grey  { background:#E9EDEF; color:#54656F; }
.tri-app:has(.shell) .tag::before { box-shadow:none; }

/* cards & lists: soft paper look */
.tri-app:has(.shell) .card, .tri-app:has(.shell) tbody tr { box-shadow:0 1px 2px rgb(var(--sh) / .12), 0 10px 24px -14px rgb(var(--sh) / .35); }
.tri-app:has(.shell) .card[style*="border-color:var(--brass)"]:not(:has(> table)) { border:1px solid rgba(0,168,132,.35) !important; }
.tri-app:has(.shell) tfoot tr { background:rgb(var(--brass-rgb) / .1); border-color:rgb(var(--brass-rgb) / .25); }
.tri-app:has(.shell) .progress-track { background:rgba(17,27,33,.08); }
.tri-app:has(.shell) .notice-card { background:#fff; }
.tri-app:has(.shell) .sheet { box-shadow:0 30px 80px -10px rgb(var(--sh) / .5); }
.tri-app:has(.shell) .sheet-overlay, .tri-app:has(.shell) .drawer-overlay.show { background:rgba(17,27,33,.45); }
.tri-app:has(.shell) .sheet-handle { background:rgba(17,27,33,.2); }
.tri-app:has(.shell) select.inline, .tri-app:has(.shell) input.inline { color:var(--text); }

/* toast lives outside .tri-app, so it needs literal colours */
html:has(.shell) .toast { background:rgba(255,255,255,.98); color:#111B21; border:1px solid rgba(17,27,33,.08);
  border-left:4px solid #00A884; box-shadow:0 18px 40px -10px rgba(40,60,70,.45); }
.tri-app:has(.shell) .ripple { background:rgb(var(--ink) / .14); }
.tri-app:has(.shell) .topbar .ripple { background:rgba(255,255,255,.35); }
.tri-app:has(.shell) .btn-brass .ripple, .tri-app:has(.shell) .btn-teal .ripple, .tri-app:has(.shell) .nav-item.active .ripple { background:rgba(255,255,255,.4); }


/* ===================================================================
   LOGIN SCREEN — LIGHT (WhatsApp-green) THEME + ANIMATION
   Same theme as the app after login. Building photo, towers and the
   sign-in form are unchanged; only colours + motion are new.
   =================================================================== */
:root:has(.login-wrap) { --card-a:#FFFFFF; --card-b:#FBFBF9; --sheet-a:#FFFFFF; --sheet-b:#F7F8FA; --input-bg:#FFFFFF; --input-focus:#FFFFFF;
  --on-brass:#FFFFFF; --accent-text:#008069; --brass-rgb:0 168 132; --toast:255 255 255; --sh:70 90 100; --ink:17 27 33; color-scheme:light; }
html:has(.login-wrap), body:has(.login-wrap) { background:#EFEAE2; color-scheme:light; }
.tri-app:has(.login-wrap) { --bg:#EFEAE2; --panel:#FFFFFF; --panel2:#F0F2F5; --line:#D9DEE1; --text:#111B21; --muted:#54656F;
  --brass:#00A884; --brass-hi:#25D366; --brass-lo:#008069; --brass-soft:rgba(0,168,132,.12); --teal:#00A884; background:#EFEAE2; }

/* building photo stays; just washed with a light cream veil instead of the dark one */
.tri-app:has(.login-wrap) .login-bg::before { background:
    linear-gradient(180deg, rgba(239,234,226,.50), rgba(239,234,226,.82) 55%, rgba(239,234,226,.97) 100%),
    url('building-bg.jpg?v=2') center 30% / cover no-repeat; }
.tri-app:has(.login-wrap) .login-bg::after { mix-blend-mode:soft-light; opacity:.9;
  background:linear-gradient(115deg, transparent 30%, rgba(37,211,102,.35) 45%, transparent 60%); background-size:220% 220%; }

/* floating particles -> soft green bubbles */
.tri-app:has(.login-wrap) .particle { background:radial-gradient(circle,#B8F1D2,#25D366 75%);
  box-shadow:0 0 10px 1px rgba(0,168,132,.45); }

/* towers: white buildings, green lit windows */
.tri-app:has(.login-wrap) .tower { background:linear-gradient(180deg,#FFFFFF,#EAF0EE); border-color:#D3DBD8;
  box-shadow:0 14px 30px -12px rgba(40,70,60,.35); animation:towerBob 5.5s ease-in-out infinite; }
.tri-app:has(.login-wrap) .tower:nth-child(2) { animation-delay:-1.8s; }
.tri-app:has(.login-wrap) .tower:nth-child(3) { animation-delay:-3.6s; }
.tri-app:has(.login-wrap) .win { background:#D5DCDA; }
.tri-app:has(.login-wrap) .win.lit { background:#00A884; box-shadow:0 0 7px rgba(0,168,132,.65); }
@keyframes towerBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* heading */
.tri-app:has(.login-wrap) .login-title { background:linear-gradient(100deg,#005C4B 0%,#00A884 45%,#25D366 60%,#005C4B 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,168,132,.2)); animation:titleShine 6s ease-in-out infinite; }
@keyframes titleShine { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.tri-app:has(.login-wrap) .login-divider { background:linear-gradient(90deg,transparent,#00A884,transparent);
  animation:dividerGrow 1.1s .35s cubic-bezier(.22,.8,.32,1) both; }
@keyframes dividerGrow { from { width:0; opacity:0; } to { width:56px; opacity:1; } }
.tri-app:has(.login-wrap) .login-sub, .tri-app:has(.login-wrap) .login-hint { color:#3B4A54; }

/* form: frosted white card feel + staggered entrance */
.tri-app:has(.login-wrap) .login-form { padding:20px 18px; border-radius:16px; width:320px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 20px 44px -22px rgba(30,60,55,.45), 0 2px 6px rgba(30,60,55,.08); }
.tri-app:has(.login-wrap) .login-form > * { animation:formItemIn .6s cubic-bezier(.22,.8,.32,1) both; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(1) { animation-delay:.35s; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(2) { animation-delay:.45s; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(3) { animation-delay:.55s; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(4) { animation-delay:.65s; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(5) { animation-delay:.75s; }
.tri-app:has(.login-wrap) .login-form > *:nth-child(n+6) { animation-delay:.85s; }
@keyframes formItemIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.tri-app:has(.login-wrap) .login-form input { background:#fff; border:1px solid #D3DBD8; color:#111B21;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.tri-app:has(.login-wrap) .login-form input::placeholder { color:#8696A0; }
.tri-app:has(.login-wrap) .login-form input:focus { background:#fff; border-color:#00A884;
  box-shadow:0 0 0 4px rgba(0,168,132,.16); transform:translateY(-1px); }

/* sign-in button: green gradient, shimmer sweep, gentle pulse */
.tri-app:has(.login-wrap) .btn-brass { position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#00A884,#008069); border-color:#008069;
  box-shadow:0 12px 24px -10px rgba(0,168,132,.7), inset 0 1px 0 rgba(255,255,255,.35);
  animation:formItemIn .6s .65s cubic-bezier(.22,.8,.32,1) both, btnPulse 2.8s 1.6s ease-in-out infinite;
  transition:transform .2s, filter .2s; }
.tri-app:has(.login-wrap) .btn-brass::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);
  animation:btnShine 3.6s 1.8s ease-in-out infinite; pointer-events:none; }
.tri-app:has(.login-wrap) .btn-brass:hover { transform:translateY(-1px); }
.tri-app:has(.login-wrap) .btn-brass:active { transform:scale(.97); }
@keyframes btnShine { 0% { left:-60%; } 55%,100% { left:130%; } }
@keyframes btnPulse { 0%,100% { box-shadow:0 12px 24px -10px rgba(0,168,132,.7), 0 0 0 0 rgba(0,168,132,.35); }
  50% { box-shadow:0 12px 24px -10px rgba(0,168,132,.7), 0 0 0 8px rgba(0,168,132,0); } }

.tri-app:has(.login-wrap) .link-btn { color:#008069; }
/* inline status colours (set in JS) need to read on a light background */
.tri-app:has(.login-wrap) [style*="#8fd19e"] { color:#00775F !important; }
.tri-app:has(.login-wrap) [style*="#e88"] { color:#C4452F !important; }

@media (max-width:900px) { .tri-app:has(.login-wrap) .login-form { width:100%; max-width:340px; } }
@media (prefers-reduced-motion: reduce) {
  .tri-app:has(.login-wrap) .tower, .tri-app:has(.login-wrap) .login-title, .tri-app:has(.login-wrap) .login-divider,
  .tri-app:has(.login-wrap) .login-form > *, .tri-app:has(.login-wrap) .btn-brass, .tri-app:has(.login-wrap) .btn-brass::after { animation:none !important; }
}

/* ---- GameRush tab (embedded game) ---- */
.content.games-tab { padding:0 !important; overflow:hidden; background:#14104a !important; }
.games-wrap { position:relative; width:100%; height:100%; min-height:420px; }
.games-frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#14104a; }
@media (max-width: 900px) {
  /* phones: fill the space between the fixed top bar and the floating bottom nav */
  .content.games-tab { overflow:hidden !important; flex:none;
    height:calc(100vh - var(--topbar-h, calc(68px + env(safe-area-inset-top))) - 92px - env(safe-area-inset-bottom));
    height:calc(100dvh - var(--topbar-h, calc(68px + env(safe-area-inset-top))) - 92px - env(safe-area-inset-bottom)); }
  .games-wrap { height:100%; min-height:0; }
}

/* ---- Login page "Play Game" button + full-screen game overlay ---- */
.zl-play { width:100%; margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px;
  padding:11px 16px; border-radius:10px; border:1.5px solid #226DB4; background:#fff; color:#226DB4; font-size:.95rem; font-weight:700;
  cursor:pointer; transition:background .15s, color .15s, transform .1s; }
.zl-play:hover { background:#226DB4; color:#fff; }
.zl-play:active { transform:scale(.98); }
body.game-open { overflow:hidden; }
.game-overlay { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; background:#14104a; }
.game-overlay-bar { flex:none; display:flex; align-items:center; gap:12px; padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:linear-gradient(180deg,#2677C2,#1F63A6); color:#fff; }
.game-overlay-back { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.16);
  color:#fff; border-radius:999px; padding:8px 16px; font-size:.9rem; font-weight:600; cursor:pointer; }
.game-overlay-title { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem; }
.game-overlay-frame { flex:1; width:100%; min-height:0; border:0; display:block; background:#14104a; }