:root{
    --bg:#101A2E; --panel:#16223B; --card:#1B2842; --card-raised:#1F2E4B; --card-alt:#152137; --nav-bg:#0D1626;
    --border:#2C3E5C; --border-soft:#263652;
    --text:#F5F7FA; --text-dim:#D6DCE5; --text-mute:#93A1B8; --text-faint:#8493AD;
    --blue:#1F8BFF; --blue-light:#3B9EFF; --blue-dim:#60A5FA; --on-accent:#FFFFFF;
    --accent-deep:#0F6FD9; --accent-glow:rgba(31,139,255,0.45); --on-danger:#FFFFFF; --red-deep:#C93634;
    --green:#22C55E; --green-light:#4ADE80; --green-bg:#0F2318; --green-bg2:#123321;
    --red:#E24B4A; --red-light:#FF6B6B; --red-bg:#2A1015; --red-bg2:#3A1B1B;
    --amber:#F59E0B; --amber-light:#FBBF24;
    --tray-bg:rgba(255,255,255,0.025); --tray-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    --radius-lg:12px; --radius-md:10px; --radius-sm:8px; --radius-card:12px;
    --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Code','Roboto Mono',Consolas,monospace;
    --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
    --font-sans:'Archivo','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  html[data-theme="light"]{
    --bg:#EEF1F6; --panel:#FFFFFF; --card:#FFFFFF; --card-raised:#FFFFFF; --card-alt:#F4F6F9; --nav-bg:#FFFFFF;
    --border:#DFE4EC; --border-soft:#E9EDF2;
    --text:#0F172A; --text-dim:#334155; --text-mute:#64748B; --text-faint:#66768E;
    --blue:#1F8BFF; --blue-light:#2563EB; --blue-dim:#3B82F6; --on-accent:#FFFFFF;
    --accent-deep:#1650A8; --accent-glow:rgba(31,139,255,0.40); --on-danger:#FFFFFF; --red-deep:#DC2626;
    --green:#16A34A; --green-light:#15803D; --green-bg:#DCFCE7; --green-bg2:#BBF7D0;
    --red:#DC2626; --red-light:#B91C1C; --red-bg:#FEE2E2; --red-bg2:#FECACA;
    --amber:#D97706; --amber-light:#B45309;
    --tray-bg:rgba(15,23,42,0.035); --tray-shadow:0 10px 28px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  /* Violet — a genuinely violet ground with near-white cards floating on it.
     The accent avoids green, red and amber, since those already carry meaning
     (win / lose / ROI). Muted text is dark enough to clear AA on BOTH the
     violet background and the lighter cards. */
  html[data-theme="violet"]{
    --bg:#D6CCF7; --panel:#FBFAFE; --card:#FBFAFE; --card-raised:#FFFFFF; --card-alt:#F0EBFD; --nav-bg:#FBFAFE;
    --border:#C0B2EE; --border-soft:#D3C9F3;
    --text:#241C4A; --text-dim:#463C7A; --text-mute:#564D88; --text-faint:#5C5290;
    --blue:#5B2FD6; --blue-light:#7248E8; --blue-dim:#5427CE; --on-accent:#FFFFFF;
    --accent-deep:#4527B0; --accent-glow:rgba(91,47,214,0.45); --on-danger:#FFFFFF; --red-deep:#B3242F;
    --green:#0A6E4C; --green-light:#0A6E4C; --green-bg:#D8F0E5; --green-bg2:#C6E8D8;
    --red:#B3242F; --red-light:#B3242F; --red-bg:#FBE4E6; --red-bg2:#F8D3D7;
    --amber:#8A5A0D; --amber-light:#8A5A0D;
    --tray-bg:rgba(46,28,110,0.045); --tray-shadow:0 10px 28px rgba(46,28,110,0.14), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  /* Glass — frosted panels over a fixed colour gradient. Unlike the flat themes,
     surfaces here are translucent, so every panel colour is an rgba() that
     composites over whatever gradient stop sits behind it. Text tones were
     chosen against the LIGHTEST stop (the worst case) so they stay readable
     everywhere on the page. */
  html[data-theme="glass"]{
    --bg:#416AC8; --panel:rgba(10,18,46,0.50); --card:rgba(10,18,46,0.50);
    --card-raised:rgba(16,28,64,0.60); --card-alt:rgba(6,12,32,0.44); --nav-bg:rgba(8,15,38,0.68);
    --border:rgba(255,255,255,0.22); --border-soft:rgba(255,255,255,0.12);
    --text:#FFFFFF; --text-dim:#E6EDFA; --text-mute:#CBD8F0; --text-faint:#B8C8E8;
    --blue:#3B9EFF; --blue-light:#A8D0FE; --blue-dim:#C2DEFF; --on-accent:#FFFFFF;
    --accent-deep:#1568C4; --accent-glow:rgba(59,158,255,0.55); --on-danger:#2B0A0F; --red-deep:#FB7185;
    --green:#34D399; --green-light:#7FEFC4; --green-bg:rgba(16,185,129,0.20); --green-bg2:rgba(16,185,129,0.26);
    --red:#FB7185; --red-light:#FFB3BC; --red-bg:rgba(244,63,94,0.20); --red-bg2:rgba(244,63,94,0.26);
    --amber:#FBBF24; --amber-light:#FFDD6B;
    --tray-bg:rgba(255,255,255,0.04); --tray-shadow:0 12px 34px rgba(6,10,30,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  }
  /* the gradient that actually gives the glass something to refract */
  /* The background is a real blurred glass layer (filter:blur — not just
     soft gradient stops, so it reads as out-of-focus glass) with a diagonal
     sheen simulating light glancing across the surface. A touch more colour
     movement than the first pass so it feels alive, not just tinted. */
  html[data-theme="glass"] body{ position:relative; background:#3A5AAE; }
  html[data-theme="glass"] body::before{
    content:''; position:fixed; inset:-15%; z-index:0;
    background:
      radial-gradient(50% 42% at 14% 10%,  #5B6FE0 0%, transparent 66%),
      radial-gradient(46% 38% at 90% 16%,  #3E7ECF 0%, transparent 64%),
      radial-gradient(55% 46% at 42% 102%, #2D82B8 0%, transparent 68%),
      radial-gradient(42% 38% at 82% 88%,  #6A5FE8 0%, transparent 60%),
      #416AC8;
    filter:blur(55px) saturate(130%);
  }
  html[data-theme="glass"] body::after{
    content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 47%, transparent 64%);
  }
  html[data-theme="glass"] #app-shell{ position:relative; z-index:2; background:transparent; }
  html[data-theme="glass"] main{ background:transparent; }
  html[data-theme="glass"] .card,
  html[data-theme="glass"] .stat-card,
  html[data-theme="glass"] #topbar,
  html[data-theme="glass"] #bottomnav,
  html[data-theme="glass"] .modal-sheet,
  html[data-theme="glass"] .login-panel{
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
  }
  /* light catches the top edge of frosted panels more strongly than flat ones */
  html[data-theme="glass"] .card,
  html[data-theme="glass"] .stat-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(10,4,30,0.28), 0 0 30px -10px rgba(120,140,235,0.35); }
  html[data-theme="glass"] .card-hero{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 12px 32px rgba(10,4,30,0.36), 0 0 40px -8px rgba(120,140,235,0.45); }
  html[data-theme="glass"] .input{ background:rgba(5,11,30,0.5); }
  html[data-theme="glass"] .nav-action{ background:linear-gradient(180deg,#2F8AE8,#1568C4); box-shadow:0 4px 18px rgba(59,158,255,0.55); }
  html[data-theme="glass"] .btn-primary{ background:linear-gradient(180deg,#2F8AE8,#1568C4); }

  /* Private — a quiet, restrained palette after a private-bank statement:
     neutral charcoal (not blue-tinted), warm ivory text, a muted gold accent
     used sparingly, and a serif for titles only. Decoration is REMOVED here
     rather than added: no coloured card stripes, no rotated stamp badges,
     no entry numbers, no ruled-paper texture — meaning carries the page,
     not ornament. */
  html[data-theme="private"]{
    --bg:#0B0B0D; --panel:#131315; --card:#131315; --card-raised:#17171A; --card-alt:#141416; --nav-bg:#0B0B0D;
    --border:rgba(255,255,255,0.08); --border-soft:rgba(255,255,255,0.05);
    --text:#F5F1EA; --text-dim:#C9C4B8; --text-mute:#8C8779; --text-faint:#8A8578;
    --blue:#C8A862; --blue-light:#D8BC7F; --blue-dim:#B08F4E; --on-accent:#141210;
    --accent-deep:#A8863E; --accent-glow:rgba(200,168,98,0.35); --on-danger:#FFFFFF;
    --green:#7BA88C; --green-light:#7BA88C; --green-bg:rgba(123,168,140,0.15); --green-bg2:rgba(123,168,140,0.22);
    --red:#C97169; --red-light:#C97169; --red-bg:rgba(201,113,105,0.15); --red-bg2:rgba(201,113,105,0.22); --red-deep:#9C463F;
    --amber:#D8BC7F; --amber-light:#D8BC7F;
    --tray-bg:rgba(255,255,255,0.018); --tray-shadow:0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  html[data-theme="private"] .page-title,
  html[data-theme="private"] .login-title,
  html[data-theme="private"] .brand-name,
  html[data-theme="private"] .login-brand-name{
    font-family:var(--font-serif); font-weight:400; letter-spacing:0.005em;
  }
  html[dir="rtl"][data-theme="private"] .brand-name,
  html[dir="rtl"][data-theme="private"] .login-brand-name{ font-family:var(--font-sans); } /* wordmark stays Latin */
  /* quiet surfaces: no coloured accent stripes on cards */
  html[data-theme="private"] .stat-card,
  html[data-theme="private"] .card-hero{ border-inline-start:0.5px solid var(--border); }
  html[data-theme="private"] .card,
  html[data-theme="private"] .stat-card{ box-shadow:none; }
  /* flat, unrotated result tags instead of the stamped badge elsewhere */
  html[data-theme="private"] .badge{
    border:none; background:none; padding:0; letter-spacing:0.02em; transform:none; font-family:var(--font-mono);
  }
  html[data-theme="private"] .entry-no{ display:none; }
  html[data-theme="private"] .ledger-list{ background-image:none; }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family:var(--font-sans);
    min-height:100vh; height:100vh; display:flex; justify-content:center;
    -webkit-font-smoothing:antialiased; overflow:hidden;
  }
  #app-shell{
    width:100%; max-width:440px; height:100vh;
    display:flex; flex-direction:column; position:relative;
    background:var(--bg);
  }
  #topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:0.5px solid var(--border);
    position:sticky; top:0; background:var(--nav-bg); backdrop-filter:blur(10px);
    z-index:20;
  }
  .brand{display:flex; align-items:center; gap:8px;}
  .brand-mark img{width:24px; height:24px; display:block;}
  .brand-name{font-size:15px; font-weight:700; letter-spacing:-0.01em;}
  .brand-name span:first-child{color:var(--text);}
  .brand-name span:last-child{color:var(--blue-light);}
  #topbar .balance-chip{
    font-size:11px; color:var(--text-mute); background:var(--card);
    border:0.5px solid var(--border); padding:6px 10px; border-radius:20px;
    display:flex; align-items:center; gap:6px;
  }
  #topbar .balance-chip b{color:var(--text); font-weight:600; font-family:var(--font-mono);}
  main{flex:1; padding:16px 16px 24px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
  .view{display:none; animation:fadein .25s ease;}
  .view.active{display:block;}
  @keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  .eyebrow{font-size:11px; font-weight:600; color:var(--blue-light); letter-spacing:0.06em; margin-bottom:4px;}
  .page-title{font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.01em;}
  .page-sub{font-size:12px; color:var(--text-mute); margin-top:4px; line-height:1.5;}
  .page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px;}

  .btn{
    border:none; cursor:pointer; font-family:inherit; border-radius:var(--radius-sm);
    font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:transform .12s ease, filter .12s ease, opacity .12s ease;
    min-height:44px; /* iOS touch target minimum */
  }
  .btn:disabled, .btn[aria-disabled="true"]{ opacity:0.55; cursor:not-allowed; transform:none; }
  .btn:disabled:active, .btn[aria-disabled="true"]:active{ transform:none; }

  /* Keyboard users get a clear ring; mouse/touch users never see it. */
  :focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; border-radius:4px; }
  .btn:focus-visible, .nav-item:focus-visible, .toggle-opt:focus-visible,
  .filter-tab:focus-visible, .theme-opt:focus-visible, .input:focus-visible{
    outline:2px solid var(--blue-light); outline-offset:2px;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:linear-gradient(180deg,var(--blue-light),var(--blue)); color:var(--on-accent); padding:13px; font-size:15px; width:100%;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:var(--card-alt); border:0.5px solid var(--border); color:var(--text-dim); padding:11px; font-size:12px;}
  .btn-ghost:hover{background:var(--card);}
  .btn-danger-outline{background:var(--red-bg); border:1px solid var(--red); color:var(--red-light); padding:11px; font-size:12px; font-weight:600;}
  .btn-danger-solid{background:var(--red-deep); color:var(--on-danger); padding:11px; font-size:12px; font-weight:600;}
  .btn-chip{background:var(--card-alt); border:0.5px solid var(--border); color:var(--text); padding:8px 14px; font-size:11px; min-height:44px;}

  .card{
    background:var(--card); border-radius:var(--radius-card); padding:16px; margin-bottom:14px;
    border:0.5px solid var(--border);
    /* hairline of light along the top edge — reads as a surface, not a flat rectangle */
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  }
  /* the one card that outranks the others */
  .card-hero{ background:var(--card-raised); }
  /* the raised fill lifts the surface, so its supporting line needs one step more
     weight to stay above the 4.5:1 contrast floor */
  .card-hero .stat-foot{ color:var(--text-mute); }
  /* Light theme reads elevation as shadow, not as a light edge. */
  html[data-theme="light"] .card,
  html[data-theme="light"] .stat-card{ box-shadow:0 1px 2px rgba(15,23,42,0.06); }
  html[data-theme="light"] .card-hero{ box-shadow:0 2px 8px rgba(15,23,42,0.10); }
  html[data-theme="violet"] .card,
  html[data-theme="violet"] .stat-card{ box-shadow:0 1px 3px rgba(46,28,110,0.12); }
  html[data-theme="violet"] .card-hero{ box-shadow:0 4px 16px rgba(46,28,110,0.18); }
  html[data-theme="violet"] #bottomnav{ box-shadow:0 -2px 12px rgba(46,28,110,0.12); }
  /* A soft backing panel that groups a page's cards into one visual unit,
     instead of each card floating loose directly on the page background.
     Individual cards inside keep their own look untouched — this only adds
     a shared backdrop and shadow behind the group. */
  .card-tray{
    background:var(--tray-bg); border-radius:calc(var(--radius-card) + 6px);
    padding:12px; margin-bottom:14px; box-shadow:var(--tray-shadow);
  }
  html[data-theme="glass"] .card-tray{
    -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  }
  .card-tray > .card:last-child,
  .card-tray > .stat-grid:last-child{ margin-bottom:0; }

  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}

  .stat-card{
    background:var(--card); border:0.5px solid var(--border);
    border-inline-start:3px solid var(--blue-dim);
    border-radius:var(--radius-card); padding:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .stat-label{font-size:11px; color:var(--text-mute); margin-bottom:6px;}
  .stat-value{font-size:20px; font-weight:600; color:var(--text); font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
  .stat-foot{font-size:10px; color:var(--text-faint); margin-top:4px;}

  .field{margin-bottom:14px;}
  .jalali-hint{font-size:11px; color:var(--blue-light); margin-top:6px; text-align:center;}
  .field-label{font-size:11px; color:var(--text-mute); margin-bottom:6px; display:block;}
  .input, select.input{
    width:100%; background:var(--card-alt); border:0.5px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 12px; font-size:16px; color:var(--text); font-family:inherit;
    -webkit-appearance:none; appearance:none; box-sizing:border-box; margin:0; box-shadow:none;
  }
  .input:focus{outline:none; border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(59,158,255,0.15);}
  .input::placeholder{color:var(--text-faint);}
  input[type="date"].input{ position:relative; }
  input[type="date"].input::-webkit-date-and-time-value{ text-align:center; margin:0; }
  input[type="date"].input::-webkit-calendar-picker-indicator{
    position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
    background:transparent; color:transparent; cursor:pointer; opacity:0;
  }
  input[type="date"].input::-webkit-inner-spin-button{ display:none; }
  input[type="date"].input::-webkit-clear-button{ display:none; }
  .toggle-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .toggle-opt{
    border-radius:var(--radius-sm); padding:12px; min-height:44px; text-align:center; font-size:15px; font-weight:700;
    letter-spacing:0.02em; cursor:pointer; border:1px solid var(--border); background:var(--card-alt); color:var(--text-mute);
    display:flex; align-items:center; justify-content:center; gap:6px; user-select:none;
  }
  .toggle-opt i{font-size:15px;}
  .toggle-opt.on-green{background:var(--green-bg2); border-color:var(--green); color:var(--green-light);}
  .toggle-opt.on-red{background:var(--red-bg); border-color:var(--red); color:var(--red-light);}
  .toggle-opt.on-amber{background:var(--amber-bg, rgba(245,158,11,0.14)); border-color:var(--amber); color:var(--amber-light);}
  .result-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .result-grid-3{grid-template-columns:1fr 1fr 1fr;}

  .row-list-header{display:flex; align-items:center; background:var(--card-alt); border-radius:6px; padding:8px 10px; margin-bottom:2px;}
  .row-list-header span{font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--text-faint); letter-spacing:0.1em; text-transform:uppercase;}
  .bet-row{display:flex; justify-content:space-between; align-items:center; padding:11px 2px; border-bottom:0.5px solid var(--border-soft); gap:8px;}
  .bet-row:last-child{border-bottom:none;}
  .bet-row .meta{font-size:12px; color:var(--text-dim); font-weight:600;}
  .bet-row .meta small{color:var(--text-mute); font-weight:400;}
  .badge{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.1em; padding:2px 7px; border-radius:3px; display:inline-block; border:1.5px solid; background:transparent;}
  .badge-win{border-color:var(--green-light); color:var(--green-light); transform:rotate(-5deg);}
  .badge-lose{border-color:var(--red-light); color:var(--red-light); transform:rotate(4deg);}
  .badge-void{border-color:var(--text-faint); color:var(--text-faint); transform:rotate(2deg);}
  .badge-deposit{border-color:var(--red-light); color:var(--red-light); transform:rotate(-4deg);}
  .badge-withdraw{border-color:var(--green-light); color:var(--green-light); transform:rotate(4deg);}
  .amount{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--font-mono);}
  .entry-no{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); margin-inline-end:8px;}
  .ledger-list{background-image:repeating-linear-gradient(to bottom, transparent, transparent 36px, var(--border-soft) 37px); background-position:0 4px;}
  .amount.pos{color:var(--green-light);}
  .amount.neg{color:var(--red-light);}
  .row-actions{display:flex; align-items:center; gap:12px;}
  .row-actions i{color:var(--text-faint); font-size:15px; cursor:pointer;}
  .row-actions i:hover{color:var(--text);}

  .empty-state{display:flex; flex-direction:column; align-items:center; padding:30px 16px 24px; text-align:center;}
  .empty-state i{font-size:26px; color:var(--text-faint); margin-bottom:12px;}
  .empty-title{font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:5px;}
  .empty-hint{font-size:11px; color:var(--text-faint); line-height:1.55; max-width:240px;}
  .empty-action{margin-top:16px; padding:9px 16px; font-size:12px; width:auto;}

  .search-box{background:var(--card-alt); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 12px; display:flex; align-items:center; gap:8px; margin-bottom:10px;}
  .search-box i{font-size:14px; color:var(--text-faint);}
  .search-box input{background:none; border:none; color:var(--text); font-size:12px; width:100%; font-family:inherit;}
  .search-box input:focus{outline:none;}
  .search-box input::placeholder{color:var(--text-faint);}
  .filter-tabs{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:16px;}
  .filter-tab{background:var(--card-alt); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:9px; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; font-weight:600; color:var(--text-mute); letter-spacing:0.03em; cursor:pointer; font-family:inherit;}
  .filter-tab.active{background:var(--blue); border-color:var(--blue); color:var(--on-accent);}

  .theme-opt{border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:9px; margin-bottom:8px; min-height:44px; cursor:pointer; background:none; width:100%; font-family:inherit; display:block; text-align:inherit;}
  .theme-opt.selected{border-color:var(--blue-light);}
  .theme-swatch{border-radius:5px; height:18px; margin-bottom:6px;}
  .theme-opt-label{font-size:11px; color:var(--text-dim); text-align:center;}
  .theme-opt.selected .theme-opt-label{color:var(--text); font-weight:600;}

  .section-title{font-size:13px; font-weight:700; color:var(--text); padding-bottom:10px; margin-bottom:14px; border-bottom:0.5px solid var(--border);}
  .danger-card{background:var(--red-bg); border:0.5px solid var(--red-bg2); border-radius:var(--radius-card); padding:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}
  .danger-card .section-title{color:var(--red-light); border-bottom-color:var(--red-bg2);}
  .danger-text{font-size:11px; color:var(--text-dim); margin-bottom:12px; line-height:1.6;}

  #bottomnav{
    flex-shrink:0; width:100%; background:var(--nav-bg); backdrop-filter:blur(14px);
    border-top:0.5px solid var(--border); padding:0 4px calc(6px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end; z-index:30;
  }
  .nav-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text-mute); cursor:pointer; padding:9px 0 7px; min-height:48px; border:none; background:none; font-family:inherit; position:relative;}
  .nav-item::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:22px; height:3px; border-radius:0 0 3px 3px; background:transparent;
  }
  .nav-item.active::before{background:var(--blue-light);}
  .nav-item i{font-size:17px;}
  .nav-item span{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;}
  @media (max-width:340px){
    .nav-item span{font-size:8.5px; letter-spacing:0;}
  }
  .nav-item.active{color:var(--blue-light);}

  /* Centre action: the one place in the app that uses elevation and a gradient,
     so it reads as the primary thing you do here. */

  /* Add Bet option C: attached segmented blue energy ring. */
  #bottomnav .nav-action{position:relative;isolation:isolate;overflow:visible;transition:transform .16s ease,filter .2s ease;}
  #bottomnav .nav-action::before{content:"";position:absolute;inset:-5px;border-radius:50%;padding:4px;background:conic-gradient(from 18deg,#164e89 0deg 88deg,#2b9cf4 92deg 142deg,#73ccff 147deg 176deg,#1c6fbd 181deg 268deg,#123e73 273deg 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:addBetSegmentRing 3.6s linear infinite;pointer-events:none;filter:drop-shadow(0 0 4px rgba(67,178,255,.58));z-index:-1;}
  #bottomnav .nav-action::after{content:"";position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle at 34% 27%,#69c7ff 0%,#248fee 29%,#1264c5 68%,#0c438c 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.30),inset 0 -7px 10px rgba(0,21,63,.45),0 5px 16px rgba(23,119,234,.42);z-index:-1;}
  #bottomnav .nav-action:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08);}
  #bottomnav .nav-action:active{transform:translateY(1px) scale(.94);}
  #bottomnav .nav-action i{position:relative;z-index:1;color:#fff;text-shadow:0 1px 2px rgba(0,30,90,.55);}
  @keyframes addBetSegmentRing{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){#bottomnav .nav-action::before{animation:none;opacity:.7;}#bottomnav .nav-action{transition:none;}}
  .nav-action{
    justify-self:center; align-self:center;
    width:52px; height:52px; margin-top:-22px;
    border:3px solid var(--nav-bg); border-radius:50%;
    background:linear-gradient(180deg,var(--blue),var(--accent-deep));
    color:var(--on-accent); cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px var(--accent-glow);
    transition:transform .12s ease, filter .12s ease;
  }
  .nav-action i{font-size:24px;}
  .nav-action:hover{filter:brightness(1.08);}
  .nav-action:active{transform:scale(0.94);}
  .nav-action:focus-visible{outline:2px solid var(--blue-light); outline-offset:3px;}

  svg text{font-family:var(--font-sans);}

  #modal-overlay{
    position:fixed; inset:0; background:rgba(2,5,10,0.72); backdrop-filter:blur(3px);
    display:none; align-items:flex-end; justify-content:center; z-index:100;
  }
  #modal-overlay.show{display:flex;}
  .modal-sheet{
    width:100%; max-width:440px; background:var(--panel); border-radius:20px 20px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom)); border:0.5px solid var(--border); border-bottom:none;
    animation:slideup .25s ease;
  }
  @keyframes slideup{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
  .modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
  .modal-head .title{font-size:15px; font-weight:700; color:var(--text);}
  .modal-head i{font-size:17px; color:var(--text-faint); cursor:pointer;}

  #toast-stack{position:fixed; top:14px; left:50%; transform:translateX(-50%); width:100%; max-width:410px; padding:0 16px; z-index:200; display:flex; flex-direction:column; gap:8px; pointer-events:none;}
  .toast{
    background:var(--green-bg); border:0.5px solid var(--green); border-radius:var(--radius-md);
    padding:11px 13px; display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--text);
    animation:toastin .25s ease, toastout .3s ease 2.2s forwards; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  .toast.err{background:var(--red-bg); border-color:var(--red);}
  .toast i{font-size:17px; color:var(--green-light);}
  .toast.err i{color:var(--red-light);}
  @keyframes toastin{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
  @keyframes toastout{to{opacity:0; transform:translateY(-10px);}}


  ::-webkit-scrollbar{display:none;}
  *{-ms-overflow-style:none; scrollbar-width:none;}

  /* RTL SUPPORT */
  html[dir="rtl"] body{font-family:'Estedad','Vazirmatn','Segoe UI',Tahoma,sans-serif;}
  html[lang="ar"] body{font-family:'Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;}
  html[lang="ur"] body{font-family:'Noto Nastaliq Urdu','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;}
  html[lang="zh"] body{font-family:'Noto Sans SC',var(--font-sans);}
  html[lang="ja"] body{font-family:'Noto Sans JP',var(--font-sans);}
  html[lang="ko"] body{font-family:'Noto Sans KR',var(--font-sans);}
  html[lang="hi"] body{font-family:'Noto Sans Devanagari',var(--font-sans);}
  html[lang="bn"] body{font-family:'Noto Sans Bengali',var(--font-sans);}
  html[lang="th"] body{font-family:'Noto Sans Thai',var(--font-sans);}

  /* Persian is a connected script: letter-spacing pulls the joins apart, and the
     Latin monospace stack has no Persian glyphs at all (the browser silently falls
     back to whatever it has). So in RTL, text labels drop mono, tracking and
     uppercase — while purely numeric fields keep the tabular mono treatment. */
  html[dir="rtl"] .nav-item span,
  html[dir="rtl"] .row-list-header span,
  html[dir="rtl"] .badge,
  html[dir="rtl"] .login-est,
  html[dir="rtl"] .login-sub,
  html[dir="rtl"] .login-field-label,
  html[dir="rtl"] .eyebrow,
  html[dir="rtl"] .toggle-opt,
  html[dir="rtl"] .filter-tab{
    font-family:'Estedad','Vazirmatn','Segoe UI',Tahoma,sans-serif;
    letter-spacing:normal;
    text-transform:none;
  }
  /* Estedad's Arabic glyphs occupy roughly 60% of the em box against Archivo's
     ~73% cap height, so Persian reads about 10% smaller at an identical px.
     One consistent +1px lift across every small label — the sizes where the gap
     actually costs legibility. Headings and figures are large enough already. */
  html[dir="rtl"] .nav-item span,
  html[dir="rtl"] .row-list-header span,
  html[dir="rtl"] .badge,
  html[dir="rtl"] .login-est,
  html[dir="rtl"] .login-field-label,
  html[dir="rtl"] .stat-label,
  html[dir="rtl"] .stat-foot,
  html[dir="rtl"] .field-label,
  html[dir="rtl"] .empty-hint,
  html[dir="rtl"] .login-note div,
  html[dir="rtl"] .danger-text,
  html[dir="rtl"] .eyebrow{ font-size:12px; }

  html[dir="rtl"] .page-sub,
  html[dir="rtl"] .login-sub,
  html[dir="rtl"] .bet-row .meta,
  html[dir="rtl"] .filter-tab,
  html[dir="rtl"] .empty-title,
  html[dir="rtl"] .btn-ghost,
  html[dir="rtl"] .btn-chip{ font-size:13px; }

  html[dir="rtl"] .nav-item span{ font-weight:500; }
  html[dir="rtl"] .badge{ font-weight:700; }
  @media (max-width:340px){
    html[dir="rtl"] .nav-item span{ font-size:11px; }
  }
  html[dir="rtl"] .brand-name, html[dir="rtl"] .login-brand-name{font-family:var(--font-sans);}
  html[dir="rtl"] .page-head, html[dir="rtl"] .modal-head,
  html[dir="rtl"] #topbar, html[dir="rtl"] .row-list-header,
  html[dir="rtl"] .bet-row, html[dir="rtl"] .toggle-opt, html[dir="rtl"] .search-box,
  html[dir="rtl"] .empty-state, html[dir="rtl"] .row-actions, html[dir="rtl"] .brand,
  html[dir="rtl"] .login-brand, html[dir="rtl"] .login-note{ direction:rtl; }
  html[dir="rtl"] .password-toggle{ right:auto; left:12px; }
  html[dir="rtl"] .password-field .input{ padding-right:12px; padding-left:42px; }
  html[dir="rtl"] .login-lang{ direction:ltr; }
  html[dir="rtl"] .field-label, html[dir="rtl"] .page-sub,
  html[dir="rtl"] .danger-text, html[dir="rtl"] .stat-foot{ text-align:right; }
  html[dir="rtl"] .stat-label, html[dir="rtl"] .stat-value{ text-align:right; }
  html[dir="rtl"] #toast-stack{ direction:rtl; }

  /* LOGIN SCREEN */
  #login-screen{
    position:fixed; inset:0; z-index:500; overflow-y:auto;
    background:
      radial-gradient(900px 500px at 20% -5%, #16305C 0%, transparent 55%),
      radial-gradient(800px 500px at 90% 10%, #1B2E5A 0%, transparent 50%),
      #0A0F1C;
    display:flex; align-items:flex-start; justify-content:center; padding:40px 18px 60px;
  }
  #login-screen.hidden{display:none;}
  .auth-card{width:100%; max-width:430px; margin:auto;}
  .auth-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:26px;}
  .auth-logo{width:auto; height:76px; margin-bottom:10px; display:block;}
  .auth-brand-name{font-size:30px; font-weight:800; letter-spacing:-0.02em; line-height:1;}
  .auth-brand-name span:first-child{color:#F5F7FA;}
  .auth-brand-name span:last-child{color:#3B9EFF;}
  .auth-title{font-size:26px; font-weight:800; color:#F5F7FA; letter-spacing:-0.01em; margin-top:20px; text-align:center;}
  .auth-sub{font-size:14px; color:#8B96AD; margin-top:8px; text-align:center;}
  .auth-fields{margin-top:30px;}
  .auth-label{font-size:13px; font-weight:700; color:#C9D2E3; margin-bottom:8px; display:block;}
  .auth-input-wrap{position:relative; margin-bottom:20px;}
  .auth-input{
    width:100%; background:rgba(19,27,45,0.66); border:1px solid #26324C; border-radius:12px;
    padding:15px 16px 15px 44px; font-size:16px; color:#F5F7FA; font-family:var(--font-sans);
    -webkit-appearance:none; appearance:none; transition:border-color .15s, background .15s;
  }
  .auth-input:focus{outline:none; border-color:#3B9EFF; background:rgba(19,27,45,0.9);}
  .auth-input::placeholder{color:#5A657D;}
  .auth-input-icon{position:absolute; inset-inline-start:15px; top:50%; transform:translateY(-50%); color:#5A657D; font-size:18px; pointer-events:none;}
  .auth-input-toggle{position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); color:#5A657D; font-size:18px; cursor:pointer;}
  .auth-input.has-toggle{padding-inline-end:44px;}
  .auth-hint{font-size:12px; color:#6B7690; margin-top:-14px; margin-bottom:20px;}
  .auth-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; margin-top:-4px;}
  .auth-check{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;}
  .auth-check input{width:18px; height:18px; accent-color:#3B9EFF; cursor:pointer;}
  .auth-check span{font-size:13px; color:#8B96AD;}
  .auth-link{font-size:13px; font-weight:700; color:#3B9EFF; cursor:pointer; background:none; border:none; font-family:inherit; padding:0;}
  .auth-link:hover{text-decoration:underline;}
  .auth-btn{
    width:100%; background:linear-gradient(180deg,#3B9EFF,#1F7FE8); color:#fff; border:none;
    border-radius:12px; padding:15px; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
    box-shadow:0 6px 18px rgba(31,127,232,0.35); transition:filter .12s, transform .12s;
  }
  .auth-btn:hover{filter:brightness(1.06);}
  .auth-btn:active{transform:scale(0.99);}
  .auth-btn:disabled{opacity:0.65; cursor:not-allowed;}
  .auth-divider{display:flex; align-items:center; gap:12px; margin:24px 0; color:#4A5468; font-size:13px;}
  .auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:#26324C;}
  .auth-switch{text-align:center; font-size:14px; color:#8B96AD;}
  .auth-switch .auth-link{font-size:14px;}
  .auth-legal{text-align:center; font-size:12px; color:#5A657D; margin-top:22px;}
  .auth-legal a{color:#8B96AD; text-decoration:none;}
  .auth-error{background:rgba(226,75,74,0.12); border:1px solid rgba(226,75,74,0.35); color:#FF9B9A; font-size:13px; padding:11px 14px; border-radius:10px; margin-bottom:18px; display:none;}
  .auth-error.show{display:block;}
  .auth-success{background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.35); color:#7EE2A8; font-size:13px; padding:11px 14px; border-radius:10px; margin-bottom:18px; display:none;}
  .auth-success.show{display:block;}
  .auth-lang{display:flex; justify-content:center; gap:4px; margin-top:26px; flex-wrap:wrap;}
  .auth-lang select{background:rgba(19,27,45,0.66); border:1px solid #26324C; border-radius:9px; color:#8B96AD; font-size:13px; padding:7px 10px; font-family:inherit; cursor:pointer;}
  .auth-footer{text-align:center; font-size:12px; color:#4A5468; margin-top:20px;}
  .auth-pane{display:none;}
  .auth-pane.active{display:block;}
  html[dir="rtl"] .auth-input{padding:15px 44px 15px 16px;}
  html[dir="rtl"] .auth-input.has-toggle{padding-inline-start:44px;}
  @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  /* Subscription expired pop-up (blocks the app until renewal) */
  #sub-wall{
    position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
    padding:24px; background:rgba(5,9,18,0.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .sub-wall-card{
    width:100%; max-width:360px; background:var(--card); border:0.5px solid var(--border);
    border-radius:18px; padding:30px 26px; text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
  }
  .sub-wall-icon{
    width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
    background:var(--red-bg); display:flex; align-items:center; justify-content:center;
  }
  .sub-wall-icon i{font-size:26px; color:var(--red-light);}
  .sub-wall-title{font-size:19px; font-weight:700; color:var(--text); margin-bottom:8px;}
  .sub-wall-text{font-size:13.5px; color:var(--text-mute); line-height:1.6; margin-bottom:22px;}
  .sub-wall-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    background:linear-gradient(180deg,#3B9EFF,#1F7FE8); color:#fff; text-decoration:none;
    border-radius:12px; padding:14px; font-size:15px; font-weight:700; min-height:52px;
    box-shadow:0 6px 18px rgba(31,127,232,0.35);
  }
  .sub-wall-btn i{font-size:19px;}
  .sub-wall-logout{
    display:block; width:100%; margin-top:12px; background:none; border:none;
    color:var(--text-faint); font-size:13px; font-family:inherit; cursor:pointer; padding:8px;
  }
  .sub-wall-logout:hover{color:var(--text-mute);}

  /* Trial countdown banner at the top of the app */
  #trial-banner{
    flex-shrink:0; background:var(--amber-bg, rgba(245,158,11,0.14));
    border-bottom:0.5px solid var(--border);
    color:var(--amber-light); font-size:12.5px; font-weight:600;
    padding:9px 14px; text-align:center; display:flex; align-items:center; justify-content:center; gap:7px;
  }
  #trial-banner i{font-size:14px;}
  .spin-icon{display:inline-block;animation:spin 0.8s linear infinite;}

  /* Chart.js mirrors its own layout when it inherits direction:rtl, which pushes
     the plot area off-centre. Charts are numeric, so pin them to LTR in both
     languages and centre the canvas explicitly. */
  .chart-box{direction:ltr; width:100%;}
  .chart-box canvas{display:block;}
  .donut-box{direction:ltr; width:160px; height:160px; margin-inline:auto; position:relative;}
  .donut-box canvas{display:block;}

  /* Script-aware font fallbacks for the 40-language interface. */
  html:lang(he){--font-sans:'Noto Sans Hebrew','Noto Sans',sans-serif;}
  html:lang(hi),html:lang(mr){--font-sans:'Noto Sans Devanagari','Noto Sans',sans-serif;}
  html:lang(bn){--font-sans:'Noto Sans Bengali','Noto Sans',sans-serif;}
  html:lang(ta){--font-sans:'Noto Sans Tamil','Noto Sans',sans-serif;}
  html:lang(te){--font-sans:'Noto Sans Telugu','Noto Sans',sans-serif;}
  html:lang(pa){--font-sans:'Noto Sans Gurmukhi','Noto Sans',sans-serif;}
  html:lang(gu){--font-sans:'Noto Sans Gujarati','Noto Sans',sans-serif;}
  html:lang(th){--font-sans:'Noto Sans Thai','Noto Sans',sans-serif;}
  html:lang(vi),html:lang(ms),html:lang(fil),html:lang(sw){--font-sans:'Noto Sans','Archivo',sans-serif;}

  /* Long translations must wrap rather than escape cards or controls. */
  button,.btn,.nav-label,.stat-label,.metric-label,.settings-label,.section-title,.sub-wall-title,.sub-wall-text{
    overflow-wrap:anywhere; word-break:normal;
  }
  select{max-width:100%;}
  [dir="rtl"] input[type="number"],[dir="rtl"] input[type="date"]{direction:ltr;text-align:end;}