:root{
  --top-fixed: 90px;

  --tg-safe-top: 0px;

  --top-block-offset: 44px;

      --font-main: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
      --bg: #06101f;
      --card: rgba(255,255,255,.07);
      --card2: rgba(255,255,255,.05);
      --stroke: rgba(255,255,255,.10);
      --stroke2: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.94);
      --muted: rgba(255,255,255,.62);
      --muted2: rgba(255,255,255,.50);
      --good: rgba(120, 255, 196, .95);
      --bad: rgba(255, 120, 120, .95);
      --primary: rgba(120, 160, 255, .95);
      --shadow: 0 12px 40px rgba(0,0,0,.45);

      /* Premium glass surfaces */
      --glass: rgba(255,255,255,.055);
      --glass2: rgba(255,255,255,.038);
      --glassStroke: rgba(255,255,255,.11);
      --glassStroke2: rgba(255,255,255,.16);
      --shadowSoft: 0 18px 60px rgba(0,0,0,.38);

      /* Accent rails (left stripe) */
      --railA: rgba(120,160,255,.95);
      --railB: rgba(120,255,196,.78);
      --railC: rgba(255,140,200,.52);

      --r12: 12px;
      --r16: 16px;
      --r20: 20px;
      --r24: 24px;

      --px: 16px;
      --tabbar-h: 78px;
      /* Extra breathing room above the bottom menu to visually match the top spacing */
      --bottom-extra: 16px;
      --topSafe: env(safe-area-inset-top, 0px);
      --botSafe: env(safe-area-inset-bottom, 0px);
    }

    *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
    html,body{ height:100%; }
    html{ background: var(--bg); }
    body{ background-color: var(--bg); }


    /* Background layers (safe: never intercept touches) */
    body::before{
      content:"";
      position:fixed; inset:0;
      background:
        radial-gradient(1200px 800px at 70% 0%, rgba(60,110,255,.25), transparent 55%),
        radial-gradient(900px 700px at 15% 30%, rgba(120,255,196,.12), transparent 55%),
        radial-gradient(1000px 900px at 60% 90%, rgba(255,140,200,.08), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.42));
      filter:saturate(110%);
      pointer-events:none;
      z-index:-2;
    }
    body::after{
      content:"";
      position:fixed; inset:0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity:.18;
      pointer-events:none;
      z-index:-1;
    }

    html{
      /* Prevent iOS/Telegram WebView from auto-resizing text (looks like random "zoom" on first paint) */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body{
      margin:0;
      font-family: var(--font-main);
      color: var(--text);
      background: var(--bg);
      overflow:hidden;
      touch-action: manipulation;
    }

    /* Background */

    /* Shell */
    /* App shell: fixed to the initial layout viewport height.
       This keeps the bottom menu from moving with the iOS keyboard.
       Content scrolls inside .screens. */
    .app{
      /* Solid background on the app shell so overscroll always reaches
         the very top edge (BotFather-style), without any visible "cut". */
      background-color: var(--bg);

      position:fixed;
      left:0; right:0; top:0;
      /* Make sure the shell always covers the full viewport (including iOS safe-area).
         --appH is stabilized by boot.js, but on some devices it can be slightly smaller than 100vh.
         This prevents black "corners" at the bottom. */
      height: max(100vh, var(--appH, 100vh));
      z-index:0;
      display:flex;
      flex-direction:column;
      /* Safe-area spacing belongs to topbar/tabbar, not the whole app shell.
         Otherwise you get a visible "upper boundary" during overscroll. */
      padding-top: 0;
      padding-bottom: 0;
      /* Match the stable baseline: the app shell is fixed and clips nothing
         visually at the top; the bounce happens inside .screens. */
      overflow:hidden;
    }

    .topbar{
      pointer-events:auto;
      position:sticky;
      top:0;
      z-index:10;
      padding: calc(var(--topSafe) + 10px) var(--px) 12px;
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      background: rgba(10,16,28,.38);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .topbarInner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .brand{
      display:flex; flex-direction:column;
      line-height:1.15;
    }
    .brand .t1{ font-weight:700; font-size:15px; letter-spacing:.2px; }
    .brand .t2{ font-size:12px; color:var(--muted); margin-top:2px; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border: 0;
      background: rgba(255,255,255,.06);
      box-shadow: 0 8px 28px rgba(0,0,0,.35);
    }
    .pill .dot{
      width:8px; height:8px; border-radius:99px;
      background: var(--good);
      box-shadow: 0 0 18px rgba(120,255,196,.45);
    }
    .pill .txt{
      font-size:12px;
      color: rgba(255,255,255,.76);
    }

    /* Screens */
    .screens{
      flex:1;
      overflow:auto;
      /* Allow native iOS "rubber band" bounce inside Telegram WebView */
      overscroll-behavior-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Bottom spacing tuned to visually match the top spacing */
      padding: calc(16px + 80px) var(--px) calc(var(--tabbar-h) + var(--botSafe) + var(--bottom-extra)) var(--px);
      scroll-behavior:smooth;
    }
    .screen{
      display:none;
      /*
        Always allow a tiny scroll range so iOS "rubber band" works
        even when content visually fits in the viewport.
      */
      min-height: calc(100% + 1px);
    }
    .screen.active{ display:block; }

    .sectionTitle{
      font-size:14px;
      letter-spacing:.2px;
      color: rgba(255,255,255,.80);
      margin: 8px 2px 12px;
      font-weight: 700;
    }

    /* Cards */
    .card{
      border-radius: var(--r24);
      background: var(--glass);
      border: 1px solid var(--glassStroke);
      box-shadow: var(--shadowSoft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .card::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.20), transparent 60%),
        radial-gradient(700px 280px at 80% 20%, rgba(255,255,255,.12), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
      opacity:.48;
      pointer-events:none;
      z-index:0;
    }
    .card::after{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:4px;
      background: linear-gradient(180deg, var(--railA), var(--railB));
      opacity:.55;
      filter: blur(.0px);
      pointer-events:none;
      z-index:0;
    }
    .cardInner{
      position:relative;
      z-index:1;
      padding: 16px 16px;
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .muted{ color: var(--muted); }

    .mt8{ margin-top:8px; }
    .mt12{ margin-top:12px; }
    .mt16{ margin-top:16px; }
    .mt20{ margin-top:20px; }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top: 12px;
    }

    /* Recipient form: extra vertical spacing between fields so
       error outlines/shadows never overlap the next label. */
    #screen-recipient .field{
      margin-top: 16px;
      /* Keep label->control spacing consistent across all recipient fields
         (Name / UPI ID / QR / Bank fields).
         In Telegram WebView, outline+offset can visually touch labels if the gap is too small. */
      /* Requested: reduce spacing (halve) and enforce via flex gap so it
         applies to ALL recipient fields, including UPI ID and QR UPI. */
      /* Requested: set label-to-control spacing to 7px */
      gap: 7px;
    }
    .field label{
      font-size:12px;
      color: rgba(255,255,255,.72);
      font-weight: 650;
      letter-spacing:.2px;
    }
    .input{
      width:100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      /* Input surfaces must read clearly as inputs (not buttons) */
      background: rgba(0,0,0,.56);
      color: var(--text);
      font-size: 16px;
      padding: 14px 14px;
      outline:none;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -10px 20px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(0,0,0,.36);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* Make selects visually identical to inputs (no native chrome). */
    select.input{
      -webkit-appearance:none;
      appearance:none;
      padding-right: 42px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M7 10l5 5 5-5%27 stroke=%27%23FFFFFF%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 opacity=%270.75%27/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position: right 12px center;
      background-size: 16px 16px;
    }

    /* Remove number spinners so number inputs look like normal fields. */
    .input[type=number]::-webkit-outer-spin-button,
    .input[type=number]::-webkit-inner-spin-button{
      -webkit-appearance: none;
      margin: 0;
    }
    .input[type=number]{
      -moz-appearance: textfield;
    }

    /* Invalid (required) input highlight. DO NOT use !important here,
       otherwise the blink animation cannot override box-shadow. */
    /*
      Invalid (required) state.
      We intentionally keep it as a *clean outline only* (no red fill/glow),
      because the attention effect is handled by the blink animation.
      This removes the "static red + blinking" double-visual some screens had.
    */
    /*
      IMPORTANT: we do NOT show any "static" invalid outline here.
      All required-field attention is driven by blink + hold classes.
      This prevents the old behaviour where a static red outline appears
      at the start of the blink and disappears when the animation ends.
    */
    .input.invalid{
      outline: none;
      outline-offset: 0;
    }

    /*
      Blink + Hold styling
      - No legacy static outline.
      - Hold fades in smoothly (so it feels like a 3rd blink that becomes static).
    */
    .input.blinkRed,
    .input.holdRed{
      outline: 2px solid rgba(255,60,60,0.0);
      outline-offset: 2px;
      transition: outline-color 0.45s ease;
    }
    .input.holdRed{ outline-color: rgba(255,60,60,.75); }

    /* Required-field attention blink (e.g., bank picker) */
    /* Two blinks. Starts neutral and ends neutral. */
    @keyframes blinkRedOutline{
      0%   { outline-color: rgba(255,60,60,0.0); }
      12%  { outline-color: rgba(255,60,60,.85); }
      25%  { outline-color: rgba(255,60,60,0.0); }
      37%  { outline-color: rgba(255,60,60,.85); }
      50%  { outline-color: rgba(255,60,60,0.0); }
      100% { outline-color: rgba(255,60,60,0.0); }
    }
    /* One animation run = two blinks inside */
    .input.blinkRed{ animation: blinkRedOutline .85s ease-in-out 1; }

    /* Generic required-field highlight for non-input elements (wraps, chips, blocks) */
    .reqInvalid{
      outline: none;
      outline-offset: 0;
    }
    .reqBlink,
    .reqHoldRed{
      outline: 2px solid rgba(255,60,60,0.0);
      outline-offset: 2px;
      border-radius: 14px;
      transition: outline-color 0.45s ease;
    }
    .reqHoldRed{ outline-color: rgba(255,60,60,.75); }
    .reqBlink{ animation: blinkRedOutline .85s ease-in-out 1; }

    .input:focus{
      border-color: rgba(120,160,255,.48);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -10px 20px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(120,160,255,.28),
        0 0 0 3px rgba(120,160,255,.12);
    }

    /* Saved requisites (non-editable) */
    .inputLocked{
      opacity: .72;
      filter: saturate(.92);
    }

    .input.inputLocked:focus{
      border-color: rgba(255,255,255,.02);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    }

    /* Input with inline clear (×) button */
    .inputClearWrap{
      position: relative;
      width: 100%;
    }
    .inputClearInput{
      padding-right: 44px;
    }
    .inputClearBtn{
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.18);
      color: rgba(255,255,255,0.92);
      font-size: 18px;
      line-height: 1;
      display: none; /* shown only when input has value */
    }
    .inputClearBtn:active{
      transform: translateY(-50%) scale(0.98);
    }

    .hint{
      font-size:12px;
      color: rgba(255,255,255,.62);
      line-height:1.45;
      margin-top:10px;
    }

    /* Buttons */
    .btn{
  touch-action: manipulation;

      width:100%;
      border-radius: 16px;
      border: 1px solid rgba(120,160,255,.30);
      background: linear-gradient(180deg, rgba(120,160,255,.32), rgba(120,160,255,.18));
      color: rgba(255,255,255,.92);
      font-weight: 750;
      letter-spacing:.2px;
      padding: 14px 14px;
      font-size: 15px;
      box-shadow: 0 18px 60px rgba(0,0,0,.32);
      cursor:pointer;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .btn::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
      opacity:.55;
      pointer-events:none;
    }
    .btn:active{ transform: scale(.99); }

    /* Make every <button> feel consistent on press (like "Continue").
       Keep disabled buttons static. */
    button:active{ transform: scale(.99); }
    button:disabled:active{ transform: none; }
    .btnGhost{
      width:100%;
      border-radius: 16px;
      /* Keep visual consistency: all buttons must have an outline (including Back). */
      border: 1px solid var(--glassStroke2);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      color: rgba(255,255,255,.88);
      font-weight: 700;
      padding: 14px 14px;
      font-size: 15px;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      transition: transform .12s ease, filter .12s ease;
    }
    .btnGhost::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
      opacity:.42;
      pointer-events:none;
    }
    /* Make ALL button styles press consistently (like Continue). */
    .btnGhost:active,
    .btnDanger:active,
    .btnDangerGhost:active,
    .btn.ghost:active{
      transform: scale(.99);
    }

    /* Emphasized destructive / cancel actions */
    .btnDanger{
      width:100%;
      border-radius: 16px;
      border: 1px solid rgba(255,90,90,.26);
      background: linear-gradient(180deg, rgba(255,90,90,.22), rgba(255,90,90,.14));
      color: rgba(255,255,255,.94);
      font-weight: 780;
      letter-spacing:.2px;
      padding: 14px 14px;
      font-size: 15px;
      box-shadow: 0 18px 60px rgba(0,0,0,.30);
      cursor:pointer;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .btnDanger::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 55%);
      opacity:.45;
      pointer-events:none;
    }
    .btnDangerGhost{
      width:100%;
      border-radius: 16px;
      border: 1px solid rgba(255,90,90,.26);
      background: linear-gradient(180deg, rgba(255,90,90,.12), rgba(255,90,90,.08));
      color: rgba(255,255,255,.90);
      font-weight: 740;
      padding: 14px 14px;
      font-size: 15px;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .btnDangerGhost::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.40;
      pointer-events:none;
    }

    /* Emphasized positive / accept actions */
    .btnSuccess{
      width:100%;
      border-radius: 16px;
      border: 1px solid rgba(120,255,196,.26);
      background: linear-gradient(180deg, rgba(120,255,196,.22), rgba(120,255,196,.14));
      color: rgba(255,255,255,.94);
      font-weight: 820;
      letter-spacing:.2px;
      padding: 14px 14px;
      font-size: 15px;
      box-shadow: 0 18px 60px rgba(0,0,0,.30);
      cursor:pointer;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .btnSuccess::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 240px at 30% 0%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 55%);
      opacity:.45;
      pointer-events:none;
    }
    .btnSuccess:active{ transform: scale(.99); }
    .btnSuccess:disabled{ opacity:.55; cursor: not-allowed; }
    .btn.ghost{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
    }
    .btnStack{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top: 16px;
    }

    .btnRow{
      display:flex;
      gap:10px;
      align-items:stretch;
    }
    .btnRow > button{ flex:1; min-width:0; }
    .btnRow--singleLine > button{
      white-space: nowrap;
      font-size: 14px;
      padding-left: 12px;
      padding-right: 12px;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .switchRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      border-radius:18px;
      border:1px solid var(--glassStroke2);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .switchRowText{ min-width:0; }
    .switchRowTitle{
      font-size:14px;
      font-weight:760;
      line-height:1.2;
      color:rgba(255,255,255,.94);
    }
    .switchRowSub{
      margin-top:4px;
      font-size:12px;
      line-height:1.35;
      color:rgba(255,255,255,.62);
    }
    .iosSwitch{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:52px;
      min-width:52px;
      height:32px;
      cursor:pointer;
      flex:0 0 auto;
    }
    .iosSwitch input{
      position:absolute;
      inset:0;
      opacity:0;
      margin:0;
      cursor:pointer;
    }
    .iosSwitchTrack{
      position:relative;
      display:block;
      width:52px;
      height:32px;
      border-radius:999px;
      background: rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .iosSwitchTrack::after{
      content:"";
      position:absolute;
      top:3px;
      left:3px;
      width:24px;
      height:24px;
      border-radius:50%;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
      box-shadow: 0 4px 12px rgba(0,0,0,.28);
      transition: transform .18s ease;
    }
    .iosSwitch input:checked + .iosSwitchTrack{
      background: linear-gradient(180deg, rgba(52,199,89,.95), rgba(52,199,89,.82));
      border-color: rgba(52,199,89,.8);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(52,199,89,.18);
    }
    .iosSwitch input:checked + .iosSwitchTrack::after{
      transform: translateX(20px);
    }
    .iosSwitch input:focus-visible + .iosSwitchTrack{
      outline: 2px solid rgba(120,160,255,.55);
      outline-offset: 2px;
    }
    .iosSwitch input:disabled + .iosSwitchTrack{
      opacity:.55;
      cursor:not-allowed;
    }
    .statusBtnStack #stPrimary{ display:none; }
    .statusTopActions{ margin-top:0; }

    /* Unified image preview size (proofs / QR) */
    .imgThumb{
      width:100%;
      height:180px;
      max-height:180px;
      object-fit: contain;
      display:block;
      margin:0 auto;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
    }


    /* Home card compactness */
    .homeCard{ padding: 14px 14px; }
    /* Keep the amount card on Home and Create visually identical in height. */
    #screen-home .homeCard,
    #screen-create .homeCard{ min-height: 354px; }
    .homeCard .homeOptions{ gap:8px; margin-top:10px; }
    .homeCard .homeOption{ padding: 12px 12px; border-radius:14px; }
    .homeCard .kvs{ gap:8px; margin-top:8px; }
    .homeCard .kv{ padding:10px 10px; border-radius:12px; }
    .homeCard .divider{ margin:10px 0; }
    .homeCard .btnStack{ margin-top: 12px; gap:8px; }

    /* Home options */
    .homeOptions{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:12px;
    }
    .homeOption{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 14px;
      border-radius: 16px;
      border: 1px solid var(--glassStroke);
      background: var(--glass2);
      box-shadow: 0 14px 40px rgba(0,0,0,.20);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .homeOption::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.38;
      pointer-events:none;
      z-index:0;
    }
    .homeOption > *{ position:relative; z-index:1; }
    .homeOption.active{
      border-color: rgba(120,160,255,.55);
      background: rgba(120,160,255,.10);
      box-shadow: 0 0 0 3px rgba(120,160,255,.14), 0 18px 60px rgba(0,0,0,.22);
    }
    .homeOption.active::before{
      background:
        linear-gradient(180deg, var(--railA), var(--railB)) 0 0/4px 100% no-repeat,
        radial-gradient(800px 240px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
      opacity:.55;
    }
    .homeOption .left{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .homeOption .ttl{ font-weight:750; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .homeOption .sub{ font-size:12px; color: rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .homeOption .homeRadio{ font-size:18px; opacity:.8; }

    /* Quote block */
    .kvs{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top: 10px;
    }
    .kv{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--glassStroke);
      background: var(--glass2);
      box-shadow: 0 12px 34px rgba(0,0,0,.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .kv::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.34;
      pointer-events:none;
      z-index:0;
    }
    .kv > *{ position:relative; z-index:1; }
    .kv .k{ font-size:12px; color: rgba(255,255,255,.62); }
    .kv .k .sub{ display:block; font-size:11px; margin-top:2px; opacity:.72; }
    .kv .v{ font-size:13px; font-weight:700; color: rgba(255,255,255,.90); }

    /* Rate note should be subtle and consistent with other key text */
    #homeRateInfo, #createRateInfo{ opacity:1; color: rgba(255,255,255,.62); font-size:11px; }

    /* Status steps states */
    .kv.done{
      border-color: rgba(80, 220, 140, .35);
      background: rgba(80, 220, 140, .12);
      opacity: .92;
    }
    .kv.done::before{
      background:
        linear-gradient(180deg, rgba(120,255,196,.95), rgba(120,160,255,.55)) 0 0/4px 100% no-repeat,
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.40;
    }
    .kv.current{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.07);
    }
    .kv.current::before{
      background:
        linear-gradient(180deg, var(--railA), var(--railB)) 0 0/4px 100% no-repeat,
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
      opacity:.46;
    }

    .kv.cancelled{
      border-color: rgba(255, 70, 95, .45);
      background: rgba(255, 70, 95, .14);
      opacity: .92;
    }
    .kv.cancelled::before{
      background:
        linear-gradient(180deg, rgba(255,120,120,.95), rgba(255,140,200,.55)) 0 0/4px 100% no-repeat,
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.40;
    }

    /* Tabs */
    .tabbar{
      pointer-events:auto;
      position:fixed !important;
      left:0; right:0;
      bottom:0 !important;
      padding-bottom: var(--botSafe);
      /* No solid backdrop behind the menu; keep the area around the rounded tabbarInner transparent */
      background: transparent;
      z-index:20;
      transform: translateY(var(--kb, 0px)) !important; /* keep tabbar behind keyboard (no lift) */
      will-change: transform;
    }
    .tabbarInner{
      margin: 10px var(--px);
      border-radius: 22px;
      border: 0;
      /* Menu block: ~50% transparency */
      background: rgba(10,16,28,.85);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow: 0 18px 55px rgba(0,0,0,.45);
      overflow:hidden;
    }
    .tabs{
      display:flex;
      align-items:stretch;
      justify-content:space-between;
      gap: 0;
      height: var(--tabbar-h);
    }
    .tab{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      cursor:pointer;
      user-select:none;
      position:relative;
      color: rgba(255,255,255,.70);
      touch-action: manipulation;
    }

    .tab.hidden{ display:none; }

    .tab .badge{
      position:absolute;
      top:8px;
      right:18px;
      min-width:18px;
      height:18px;
      padding:0 6px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:800;
      letter-spacing:.2px;
      color: rgba(255,255,255,.95);
      background: rgba(255,70,95,.92);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      pointer-events:none;
    }

    /* Requests badge should be green (active transfers in work) */
    #requestsBadge{
      background: rgba(40, 200, 110, .92);
    }

    /* Create badge should be yellow dot (draft in progress) */
    .badgeYellow{
      /* Darker warm yellow (like car door) */
      background: rgba(200, 145, 23, .98) !important;
      min-width:12px;
      width:12px;
      height:12px;
      padding:0;
      border-radius:999px;
      font-size:0;          /* no inner dot/text */
      color: transparent;
      border: none;
    }
    .tab.active{
      color: rgba(255,255,255,.95);
    }
    .tab .tIcon{
      width:22px; height:22px;
      opacity:.92;
    }
    .tab .tLabel{
      font-size:11px;
      font-weight:650;
      letter-spacing:.2px;
      opacity:.95;
    }
    .tab .dot{
      position:absolute;
      bottom:10px;
      width:6px; height:6px;
      border-radius:99px;
      background: rgba(120,160,255,.95);
      opacity:0;
      box-shadow: 0 0 14px rgba(120,160,255,.55);
    }
    .tab.active .dot{ opacity:1; }

    /* Misc */
    .divider{
      height:1px;
      background: rgba(255,255,255,.08);
      margin: 12px 0;
    }

    /* Work sub-tabs (inside Work screen) */
    .workTabs{
      margin-top: 12px;
      display:flex;
      align-items:stretch;
      gap: 8px;
      padding: 6px;
      border-radius: 16px;
      border: 0;
      background: rgba(10,16,28,.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
    }
    .workTab{
      flex:1;
      height: 34px;
      border-radius: 12px;
      border: 0;
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .2px;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
      position: relative;
    }

    /* Small badge for Work sub-tabs (use same look as bottom-nav badges) */
    .workTab .badge{
      position:absolute;
      top:-6px;
      right:-6px;
      min-width:18px;
      height:18px;
      padding:0 6px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:800;
      letter-spacing:.2px;
      color: rgba(255,255,255,.95);
      background: rgba(255,70,95,.92);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      pointer-events:none;
    }
    .workTab.active{
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
    }

    
    /* Language selector (Home) */
	    .homeLangSlot{ display:flex; align-items:flex-start; justify-content:flex-end; }

    /* In the header rows (Home/Create), align the right-side slot to the top, not vertically centered. */
    #screen-home .homeCard > .row,
    #screen-create .cardInner > .row{
      align-items:flex-start;
    }

    /* Nudge the chip slightly down to match the title baseline visually. */
    .langWrap.langWrapInline{ margin-top: 2px; }
    .langWrap{
      position:relative;
      z-index:5;
      width: 180px;
      max-width: 70%;
      margin-left: auto;
      margin-bottom: 12px;
      padding: 0;
      border-radius: 14px;
      border: 0;
      /* Opaque chip for better readability (avoid "see-through" look). */
      background: rgba(10,16,28,.92);
      overflow:hidden;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    }
	    /* Inline variant used in the Home header (instead of a full-width block) */
	    .langWrap.langWrapInline{
	      display:inline-flex;
	      width:auto;
	      max-width:none;
	      margin:0;
	      border-radius: 999px;
	      overflow: visible;
	    }
	    .langWrap.langWrapInline .langHead{ padding: 6px 4px; gap:6px; }
	    .langWrap.langWrapInline .langLabel{ overflow:hidden; text-overflow:ellipsis; }
	    /* Show the label text next to the flag in inline mode */
	    .langWrap.langWrapInline .langLabel{ display:block; font-size:12px; font-weight:750; color: rgba(255,255,255,.78); line-height:1; white-space:nowrap; }
	    .langWrap.langWrapInline .langFlag{ width:28px; height:28px; border-radius:999px; overflow:hidden; }
	    .langWrap.langWrapInline .langMenu{
	      position:absolute;
	      right:0;
	      left:auto;
	      top: calc(100% - 1px);
	      width: 100%;
	      min-width: 168px;
	      border-radius: 0 0 14px 14px;
	      overflow:hidden;
	      box-shadow: none;
	      border: 0;
	      border-top: 0;
	      background: rgba(10,16,28,.92);
	      /* Smooth dropdown without affecting layout */
	      max-height: none;
	      transform: translateY(-10px) scale(0.98);
	      opacity: 0;
	      visibility: hidden;
	      pointer-events: none;
	      transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 220ms cubic-bezier(.22,1,.36,1);
	      will-change: transform, opacity;
	    }
	    /* When open, visually connect head + menu into one piece (not a separate chip) */
	    .langWrap.langWrapInline.open{
	      border-radius: 14px;
	      overflow: visible;
	    }
	    .langWrap.langWrapInline.open .langHead{
	      border-bottom-left-radius: 0;
	      border-bottom-right-radius: 0;
	    }
	    .langWrap.langWrapInline.open .langMenu{
	      transform: translateY(0) scale(1);
	      opacity: 1;
	      visibility: visible;
	      pointer-events: auto;
	    }
    .langHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 12px;
    }
    .langLabel{
      font-size:12px;
      font-weight:750;
      letter-spacing:.2px;
      color: rgba(255,255,255,.78);
      white-space: nowrap;
      user-select: none;
    }

    /* Language selector right side: code + globe (no emoji) */
    .langRight{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
    .langCode{
      height: 26px;
      min-width: 34px;
      padding: 0 10px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:900;
      letter-spacing:.9px;
      color: rgba(255,255,255,.86);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .langGlobe{
      width:28px;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(255,255,255,.88);
      opacity: .95;
      flex: 0 0 28px;
      pointer-events:none;
    }
    .langGlobe svg{ display:block; }

    /* Selected language flag (non-emoji), rendered as SVG in a circle */
    .langFlag{
      width:28px;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 28px;
      border-radius: 999px;
      overflow: hidden;
      pointer-events:none;
    }
    .langFlag svg{ display:block; }

	    .langMenu{
      max-height:0;
      opacity:0;
      transform: translateY(-4px);
      transition: max-height 180ms ease, opacity 180ms ease, transform 180ms ease;
      overflow:hidden;
      border-top: 1px solid rgba(255,255,255,.10);
	      background: rgba(10,16,28,.92);
    }
    .langWrap.open .langMenu{
      max-height: 140px;
      opacity:1;
      transform: translateY(0);
    }

    /* Month picker (Admin → Finance).
       Same "one continuous chip" behaviour as Language (no visual split). */
    .monthWrap{
      position: relative;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      width: auto;
      max-width: none;
      margin: 0;
      height: 40px; /* reserve layout height (dropdown is an overlay) */
      z-index: 5;
    }
    .monthWrap.open{ z-index: 50; }
    .monthWrap .langPanel{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      border-radius: 14px;
      border: 0;
      background: rgba(10,16,28,.92);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
      overflow: hidden;
      --monthMenuH: 260px;
      max-height: 40px;
      transition: max-height 220ms cubic-bezier(.22,1,.36,1), border-radius 220ms cubic-bezier(.22,1,.36,1);
      will-change: max-height;
    }
    .monthWrap.open .langPanel{
      border-radius: 18px;
      max-height: calc(40px + var(--monthMenuH));
    }
    .monthWrap .langHead{ padding: 10px 12px; }
    .monthWrap .langLabel{ color: rgba(255,255,255,.92); font-weight:850; }
    .monthWrap.open .langHead{
      border-bottom: 1px solid rgba(255,255,255,.06);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .monthWrap .langMenu{
      position: static;
      width: 100%;
      background: transparent;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: none;
      max-height: var(--monthMenuH);
      overflow: auto;
      border-top: 0;
      padding: 6px 0;
    }
    .monthWrap:not(.open) .langMenu{ pointer-events: none; }
    .monthWrap .langItem{ font-size:13px; }
    .monthWrap .langItem.active{ background: rgba(255,255,255,.08); }
    .langItem{
      width:100%;
      text-align:left;
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border:0;
      background: transparent;
      color: rgba(255,255,255,.92);
      font-size:13px;
      font-weight:750;
      cursor:pointer;
    }
    .langBadge{
      width: 34px;
      height: 24px;
      border-radius: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:900;
      letter-spacing:.8px;
      color: rgba(255,255,255,.88);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      flex: 0 0 auto;
    }
    .langItem:active{ background: rgba(255,255,255,.06); }

    .bankBtns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .bankBtn{
      height:32px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      font-size:12px;
      font-weight:750;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
    }
    .bankBtn.active{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.12); }


    /* Requests screen layout */
    .reqTop{ display:flex; flex-direction:column; gap:12px; }
    .reqTabs{
      display:flex;
      gap:8px;
      padding:6px;
      border-radius:16px;
      border: 0;
      background: rgba(10,16,28,.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
    }
    .reqTab{
      flex:1;
      height:34px;
      border-radius:12px;
      border: 0;
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      font-size:12px;
      font-weight:750;
      letter-spacing:.2px;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
    }
    .reqTab.active{
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
    }
    .reqPagesWrap{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
    }
    .reqPages{
      display:flex;
      gap:8px;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }
    .reqPages::-webkit-scrollbar{ display:none; }
    .reqPageBtn{
      min-width:34px;
      height:34px;
      padding:0 10px;
      border-radius:12px;
      border: 0;
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
    }
    .reqPageBtn.active{
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.14);
    }
    .reqBody{ margin-top: 6px; }
    .reqEmpty{
      padding: 10px 4px;
      font-size: 13px;
      line-height: 1.45;
    }
    .reqList{ margin-top: 10px; }

/* Requests / History list */
    .historyItem{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      border-radius:16px;
      border: 1px solid var(--glassStroke);
      background: var(--glass2);
      box-shadow: 0 14px 40px rgba(0,0,0,.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      margin-bottom:10px;
      cursor:pointer;
      user-select:none;
      touch-action: manipulation;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .historyItem::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, var(--railA), var(--railB)) 0 0/3px 100% no-repeat,
        radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
      opacity:.20;
      pointer-events:none;
      z-index:0;
    }
    .historyItem > *{ position:relative; z-index:1; }
    .historyItem:active{ transform: scale(.99); }
    .hLeft{ flex:1; min-width:0; }
    .hTop{
      font-size:15px;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .hSub{ margin-top:6px; font-size:13px; }
    .hRight{
      flex:0 0 auto;
      font-size:20px;
      line-height:1;
      opacity:.7;
    }

  
/* --- hard fixes: never let background layers intercept taps --- */
.bg, .noise, .bg * , .noise * { pointer-events: none !important; }
.bg { z-index: -2 !important; }
.noise { z-index: -1 !important; }
/* Don't override the app shell positioning (it's fixed). */
.app { z-index: 1; }

/* --- Modal (draft prompt) --- */
.modal{position:fixed;inset:0;display:none;z-index:9999;}
.modal.active{display:block;}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);} 
.modalSheet{position:absolute;left:12px;right:12px;bottom:12px;border-radius:22px;padding:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:blur(18px);} 
.modalTitle{font-weight:900;font-size:15px;}
.modalText{margin-top:8px;color:rgba(255,255,255,.75);font-size:12.5px;line-height:1.35;white-space:pre-line;}
.modalBtns{margin-top:12px;display:flex;gap:10px;flex-direction:column;}

/* ===== Premium in-app notifications (toast + app modal) ===== */
.toastHost{
  position: fixed;
  left: 12px;
  right: 12px;
  /*
    Toasts must align with the top edge of the main "create transfer" block.
    JS sets --toastTop dynamically (stable during scroll).
  */
  top: var(--toastTop, calc(var(--topSafe) + 12px));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
body.kb-open .toastHost{
  top: var(--toastTop, calc(var(--topSafe) + 12px));
}

.toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
}
.toast.show{ transform: translateY(0); opacity: 1; }
.toast.hide{ transform: translateY(10px); opacity: 0; }

.toastIcon{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: rgba(120, 160, 255, .26);
  border: 1px solid rgba(120, 160, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.toast--success .toastIcon{
  background: rgba(120, 255, 196, .22);
  border-color: rgba(120, 255, 196, .35);
}
.toast--error .toastIcon{
  background: rgba(255, 120, 120, .20);
  border-color: rgba(255, 120, 120, .34);
}
.toast--warn .toastIcon,
.toast--warning .toastIcon{
  background: rgba(255, 210, 120, .20);
  border-color: rgba(255, 210, 120, .34);
}

.toastText{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,.92);
  word-break: break-word;
}

.toastClose{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.toastClose:active{ transform: scale(.98); }

.modalSheet--app{
  padding: 18px;
}


/* Step 5 hardening: loading state for buttons */
.btn.is-loading, button.is-loading {
  opacity: 0.75;
  filter: saturate(0.9);
}

/* Simple numeric pagination (Admin → Users) */
.pageTabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
.pageBtn{
  padding:10px 14px;
  min-width:44px;
  text-align:center;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pageBtn:active{ transform: scale(0.98); }
.pageBtn.active{
  font-weight: 800;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}
.pageDots{ display:inline-block; padding:0 6px; opacity:.65; }

/* Payment requisites rows */
.payRows{ display:flex; flex-direction:column; gap:12px; }
.payRow{
  display:flex; align-items:stretch; gap:10px;
}
.payRowText{
  flex:1; padding:12px 14px; border-radius:16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.payRowLabel{ font-size:12px; opacity:.72; }
.payRowValue{ font-size:14px; font-weight:800; margin-top:2px; letter-spacing:.2px; }
.iconBtn{
  width:52px; min-width:52px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}
.iconBtn:active{ transform: scale(.98); }

/* --- Clear (x) button for inputs --- */
.inputWrap{ position:relative; display:block; }
.hasClear{ padding-right:40px !important; }
.clearBtn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
}
.clearBtn svg{ opacity:.9; }
.inputWrap.hasValue .clearBtn{ display:flex; }
.clearBtn:active{ transform: translateY(-50%) scale(.98); }

/* bank list (client payment) */
.bankList{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.bankItem{
  width:100%; text-align:left;
  padding:12px 14px; border-radius:16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:space-between;
}
.bankItem.active{ border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.10); }
.bankItem .sub{ font-size:12px; opacity:.70; }

/* Admin → Queue: add vertical gaps between transfer cards.
   Use container gap (more reliable than margins across Telegram/iOS WebViews). */
#adminOpenCashList,
#adminAgentQueueList{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Admin/Operator lists (Office queue uses #operatorList) */
#operatorList,
#operatorHistoryList{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Fallback spacing if flex-gap is not applied in some WebViews */
#adminOpenCashList > *:not(:last-child),
#adminAgentQueueList > *:not(:last-child){
  margin-bottom: 12px;
}

#operatorList > *:not(:last-child),
#operatorHistoryList > *:not(:last-child){
  margin-bottom: 12px;
}

.sectionTitle{display:none !important;}

.topbar{display:none !important;}




/* iOS keyboard done bar */


.rate-subtext {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}






/* ===== NAV_OPTION_A: menu stays in place; keyboard may cover it (iOS-safe) ===== */
html, body {
  height: 100%;
  overflow: hidden;
}

/* Use largest viewport height so it does NOT shrink when keyboard appears */
.app {
  position: relative;
  height: 100lvh;
  max-height: 100lvh;
  display: flex;
  flex-direction: column;
}

/* Scroll happens only inside screens */
.screens {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* space so content doesn't hide behind the always-on-top tabbar */
  padding-bottom: 90px;
}

/* IMPORTANT: not fixed. Absolute inside .app locks to layout, not visual viewport */
.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: auto;
}


/* ===== NAV_OPTION_A_HARDLOCK: lock app height to initial viewport; ignore keyboard shrink ===== */
:root { --appH: 100vh; }

.app {
  height: var(--appH) !important;
  max-height: var(--appH) !important;
}

/* ===== FINAL: Keyboard-safe layout lock (prevents bottom menu lifting) =====
   Keep the whole app as a fixed flex column (layout viewport). Only .screens scrolls.
   This prevents iOS/Telegram WebView from lifting the bottom menu with the keyboard.
*/
html, body {
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

.app{
  position: fixed !important;
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Background must start at the very top edge.
     Safe-area spacing is handled inside .topbar. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.screens{
  flex: 1 1 auto !important;
  /*
    Use scroll (not auto) so iOS bounce works even on short pages.
    Keep content stopping 2.5px above the bottom menu.
  */
  overflow-y: scroll !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Keep bottom spacing visually symmetric with the top.
     Top safe-area is already applied in the sticky topbar. */
  padding: calc(16px + 80px) var(--px) calc(var(--tabbar-h) + var(--botSafe) + var(--bottom-extra)) var(--px) !important;
  scroll-padding-bottom: calc(var(--tabbar-h) + var(--botSafe) + var(--bottom-extra)) !important;
}

.tabbar{
      pointer-events:auto;
      position:fixed !important;
      left:0; right:0;
      bottom:0 !important;
      padding-bottom: var(--botSafe);
      z-index:20;
      transform: translateY(var(--kb, 0px)) !important; /* keep tabbar behind keyboard (no lift) */
      will-change: transform;
    }


    /* Keyboard-driven tabbar animation (Wallet-style): never move with keyboard, only slide in/out */
    .tabbar{
      transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
      will-change: transform, opacity;
    }
    body.kb-open .tabbar{
      transform: translateY(110%);
      opacity: 0;
      pointer-events: none;
    }
    body.kb-closed .tabbar{
      transform: translateY(0);
      opacity: 1;
    }


/* Active state for segmented tabs */
.btnGhost.active{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}


/* Language picker legacy styles removed; the selector is now a single expanding block. */


/* Profile modern */

.profileCard{ overflow:hidden; }
.profileHero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.profileHeader{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.profileLeft{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  min-width:0;
  gap:10px; /* keep same rhythm as chips/cards below */
}
.profileTopRow{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.profileNameInline{
  min-width:0;
  display:flex;
  align-items:flex-start;
  padding-top:2px; /* aligns name visually with avatar top */
}
.profileRow{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
}
.profileNameTop{
  padding-left:0;
}
.profileAvatar{
  width:50px;height:50px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  letter-spacing:.4px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  user-select:none;
}
.profileAvatar.hasPhoto{
  padding:0;
  overflow:hidden;
}
.profileAvatar .avatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profileHeroText{ flex:1; min-width:0; }
.profileNameStack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.profileUsername{
  font-size:12px;
  margin-top:3px;
  line-height:1.2;
  font-weight:700;
  color: rgba(255,255,255,.60);
  max-width: 210px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profileName{ font-weight:950;font-size:16px;line-height:1.1; }
.profileSub{ font-size:12px;margin-top:3px; }

.idPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 0;
  background: rgba(10,16,28,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  max-width: 100%;
}
.profileLeft .idPill{ max-width: 230px; }
.idPillTall{ height:50px; padding: 0 10px; }
.idPillCompact{
  height:34px;
  padding: 0 10px;
  border-radius: 16px;
}
.idPillText{
  flex: 1;
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Match the small label style (like "Всего переводов") */
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 11px;
}
.iconBtnInPill{
  width:22px;
  height:22px;
}

/* Make the copy icon itself smaller inside Telegram ID pill */
#pCopyId svg{ width:14px; height:14px; }
.profileRole{
  flex:0 0 auto;
  font-size:12px;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,28,.20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  margin-left:auto;
  margin-top: 2px; /* visually aligns with name baseline */
}
.profileChips{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.chip{
  padding:10px 12px;
  border-radius:16px;
  border: 1px solid var(--glassStroke);
  background: var(--glass2);
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.chip::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
  opacity:.45;
  pointer-events:none;
  z-index:0;
}
.chip > *{ position:relative; z-index:1; }
.chipK{ font-size:11px; font-weight:800; color: rgba(255,255,255,.70); }
.chipV{ margin-top:6px; font-size:13px; font-weight:900; }

/* Chip with inline action (e.g., unlink agent) */
.chipVRow{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chipVRow .chipV{ margin-top:0; }

/* Chip with stacked action (used in Profile → Personal agent) */
.chipVCol{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.chipVCol .chipV{ margin-top:0; }
.chipMiniBtn{
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
}
.chipMiniBtn:active{ transform: scale(.98); }
.profileStatsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.statCard{
  padding:12px 12px;
  border-radius:18px;
  border: 1px solid var(--glassStroke);
  background: var(--glass2);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.statCard::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
  opacity:.40;
  pointer-events:none;
  z-index:0;
}
.statCard > *{ position:relative; z-index:1; }
.statTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.statK{ font-size:11px; font-weight:800; color: rgba(255,255,255,.70); }
.statV{ margin-top:8px; font-size:18px; font-weight:950; letter-spacing:.2px; }
.statHint{ margin-top:6px; font-size:12px; color: rgba(255,255,255,.65); line-height:1.35; }
.progress{
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 0;
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0%;
  background: rgba(255,255,255,.22);
}
.profileInviteTitle{ font-weight:950; font-size:14px; }
.profileInviteSub{ margin-top:6px; font-size:12.5px; line-height:1.35; }
.profileInviteRow{ margin-top:10px; display:flex; gap:10px; align-items:center; }
.profileInviteInput{ flex:1; min-width:0; }
.profileInviteBtn{ height:44px; width:auto; flex:0 0 auto; padding: 0 14px; }
.profileActivityTitle{ font-weight:950; font-size:14px; }
.profileActivityList{ margin-top:10px; }
.activityItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border: 1px solid var(--glassStroke);
  background: var(--glass2);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom:10px;
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.activityItem::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--railA), var(--railB)) 0 0/3px 100% no-repeat,
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
  opacity:.28;
  pointer-events:none;
  z-index:0;
}
.activityItem > *{ position:relative; z-index:1; }
.activityItem:active{ transform: scale(.99); }
.aLeft{ flex:1; min-width:0; }
.aTop{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aSub{ margin-top:4px; font-size:12px; color: rgba(255,255,255,.70); }
.aRight{ opacity:.8; }
.profileActions{ margin-top: 12px; display:flex; gap:10px; flex-direction:column; }
.profileFooter{ margin-top:12px; font-size:12.5px; line-height:1.45; }
@media (max-width:370px){
  .profileChips{ grid-template-columns:1fr; }
  .profileStatsGrid{ grid-template-columns:1fr; }
}


/* Bank requisites smooth expand/collapse */
.bankDetails{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .24s ease, opacity .18s ease;
}
.bankDetails.open{
  max-height:520px;
  opacity:1;
}
.bankDetailsInner{
  padding-top:2px;
}

    /* Rate helper text (same tone as other kv labels, but smaller) */
    .kv .k .sub.rateHelp{
      margin-top: 4px;
      font-size: 11px;
      font-weight: 650;
      color: rgba(255,255,255,.65);
      line-height: 1.2;
    }


	    /* Panel that expands downward as one pill (without affecting layout) */
	    .langWrap.langWrapInline{ position: relative; width:139px; }
	    .langWrap.langWrapInline{ overflow: visible; background: transparent; box-shadow:none; }
	    .langWrap.langWrapInline .langPanel{
	      position:absolute;
	      right:0;
	      top:0;
	      width:139px;
	      min-width:139px;
	      border-radius: 999px;
	      border: 0;
	      background: rgba(10,16,28,.92);
	      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
	      overflow:hidden;
	      max-height: 40px;
	      transition: max-height 220ms cubic-bezier(.22,1,.36,1);
	      will-change: max-height;
	    }
	    .langWrap.langWrapInline.open .langPanel{
	      border-radius: 18px;
	      max-height: 200px;
	    }
	    .langWrap.langWrapInline .langHead{ padding: 6px 4px; gap:6px; }
	    .langWrap.langWrapInline .langLabel{ overflow:hidden; text-overflow:ellipsis; }
	    .langWrap.langWrapInline.open .langHead{ border-bottom: 1px solid rgba(255,255,255,.06); }
	    /* Menu is inside the same panel now */
	    .langWrap.langWrapInline .langMenu{
	      position: static;
	      width: 100%;
	      background: transparent;
	      opacity: 1;
	      visibility: visible;
	      pointer-events: auto;
	      transform: none;
	      transition: none;
	    }



	    .langWrap.langWrapInline:not(.open) .langMenu{ pointer-events:none; }



/* Payment: bank picker + requisites spacing */
.payBankPicker{ margin-bottom:12px; }
.payBankDetails{ margin-top:12px; }
.payBankDetails .payRow{ margin-top:0; }



/* Settings modules */
.glassCard{
  border-radius: var(--r20);
  background: var(--glass2);
  border: 1px solid var(--glassStroke);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.glassCard::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--railA), var(--railB)) 0 0/4px 100% no-repeat,
    radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 280px at 80% 20%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
  opacity:.42;
  pointer-events:none;
  z-index:0;
}
.glassCard > *{ position:relative; z-index:1; }

/* ===== Staff role design pass ===== */
.roleCard{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.055);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.roleCard::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(860px 220px at 16% 0%, rgba(255,255,255,.08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 48%);
  pointer-events:none;
  z-index:0;
}
.roleCard > *{ position:relative; z-index:1; }
.roleCard.listRow{ padding:13px 14px; cursor:pointer; user-select:none; touch-action:manipulation; }
.roleCard.transferCard,
.roleCard.profileCard{ padding:14px; }
.roleCardHead{ display:flex; align-items:flex-start; gap:10px; }
.roleCardMain{ min-width:0; flex:1; }
.roleCardEyebrow,
.roleSectionEyebrow{
  font-size:10px;
  line-height:1.2;
  letter-spacing:.32px;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.roleCardId{
  font-size:12px;
  line-height:1.28;
  font-weight:800;
  color:rgba(255,255,255,.94);
  white-space:normal;
  word-break:break-word;
}
.roleCardAmount{
  margin-top:8px;
  font-size:16px;
  line-height:1.22;
  letter-spacing:-.01em;
  font-weight:800;
  color:rgba(255,255,255,.97);
  white-space:normal;
  word-break:break-word;
}
.roleCardSubline,
.roleCardNote,
.rolePanelNote,
.roleSummaryNote{
  font-size:11px;
  line-height:1.45;
  white-space:normal;
  word-break:break-word;
}
.roleCardSubline{ margin-top:6px; color:rgba(255,255,255,.72); }
.roleCardNote,
.rolePanelNote,
.roleSummaryNote{ color:rgba(255,255,255,.58); }
.roleMetaLine{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:7px;
}
.roleTag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}
.roleArrow{
  flex:0 0 auto;
  align-self:center;
  font-size:14px;
  line-height:1;
  color:rgba(255,255,255,.38);
}
.roleCardSection,
.roleInnerBox,
.rolePanelSection{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.roleSimpleList,
.roleTransferList,
.roleInfoGrid,
.roleDetailLines,
.roleHistoryList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.roleInfoRow,
.roleStatRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.roleInfoLabel,
.roleStatLabel{
  min-width:98px;
  font-size:11px;
  line-height:1.35;
  color:rgba(255,255,255,.56);
}
.roleInfoValue,
.roleStatValue{
  flex:1;
  font-size:12px;
  line-height:1.42;
  font-weight:700;
  text-align:right;
  color:rgba(255,255,255,.92);
  white-space:normal;
  word-break:break-word;
}
.roleInfoValue.linkValue button,
.roleInfoValue.linkValue a{
  background:none;
  border:none;
  padding:0;
  color:rgba(255,255,255,.92);
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}
.roleDetailLines{
  gap:6px;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.90);
}
.roleDetailRow{ display:flex; align-items:flex-start; gap:10px; }
.roleFieldBlock{ margin-top:12px; }
.roleFieldBlock .field:first-child{ margin-top:0; }
.rolePreview{ margin-top:10px; }
.roleMiniTitle,
.rolePanelTitle{
  font-size:13px;
  line-height:1.3;
  font-weight:800;
  color:rgba(255,255,255,.94);
}
.roleCardActions{ margin-top:12px; }

.roleActionRow{
  display:flex;
  align-items:stretch;
  gap:8px;
  flex-wrap:wrap;
}
.roleActionBtn{
  flex:1 1 0;
  min-width:0;
  min-height:46px;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  font-size:13px;
}
.roleActionStack{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.roleProofSection{ margin-top:12px; }
.roleProofHint{ margin-top:6px; }
.roleProofField{ margin-top:10px; }
.roleProofSection .roleActionRow{ margin-top:10px; }
.roleQueueEmpty{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.62);
  font-size:12px;
  line-height:1.45;
}
#workOperatorPanel #operatorQueue,
#workOperatorPanel #operatorHistory,
#workOperatorPanel #operatorInfo,
#adminOfficeSection,
#adminAgentQueueWrap{
  margin-top:2px;
}
#workOperatorPanel #operatorQueue > .divider,
#workOperatorPanel #operatorHistory > .divider,
#workOperatorPanel #operatorInfo > .divider{
  display:none;
}
#workOperatorPanel .field > label,
#adminOfficeSection .field > label,
#adminAgentQueueWrap .field > label{
  font-size:11px;
  color:rgba(255,255,255,.60);
}
#workOperatorPanel .input,
#adminOfficeSection .input,
#adminAgentQueueWrap .input{
  background:rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.08);
}
#operatorHistoryList .roleCard,
#operatorList .roleCard,
#adminAgentQueueList .roleCard{
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.rolePanelHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.roleSummaryGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.roleSummaryCell{
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  padding:10px 12px;
  min-width:0;
}
.roleSummaryCell.primary{
  grid-column:1 / -1;
  background:rgba(255,255,255,.055);
}
.roleSummaryValue{
  margin-top:5px;
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  color:rgba(255,255,255,.96);
  white-space:normal;
  word-break:break-word;
}
.roleSummaryValue.small{ font-size:14px; }
.roleFieldInline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.btnInlineCompact{
  width:auto;
  flex:0 0 auto;
  min-width:88px;
  padding-inline:16px;
  white-space:nowrap;
}

.btnInlineCompact--sm{
  min-width:96px;
  padding-inline:14px;
  font-size:14px;
}

.roleFieldInline--keep{
  grid-template-columns:minmax(0,1fr) auto;
}

.roleFieldInline--actionTight{
  grid-template-columns:minmax(0,1fr) 96px;
}

.roleFieldInline--actionTight > .input,
.inlineInputActionRow .inputClearWrap,
.inlineInputActionRow > *{
  min-width:0;
}

.inlineInputActionRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:10px;
  align-items:center;
  width:100%;
}

.inlineInputActionRow .btn,
.inlineInputActionRow .btnGhost,
.inlineInputActionRow .btnDangerGhost,
.inlineInputActionRow .btnDanger{
  width:100%;
  min-width:0;
  white-space:nowrap;
}

.roleSectionLead{ margin-top:6px; }
.roleHistoryRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.roleHistoryRow:first-child{ border-top:none; padding-top:0; }
.roleHistoryMain{ min-width:0; flex:1; }
.roleHistoryTitle{
  font-size:12px;
  line-height:1.34;
  font-weight:800;
  color:rgba(255,255,255,.92);
}
.roleHistoryMeta{
  margin-top:4px;
  font-size:11px;
  line-height:1.42;
  color:rgba(255,255,255,.58);
}
.roleHistoryTime{
  flex:0 0 auto;
  font-size:11px;
  line-height:1.3;
  color:rgba(255,255,255,.52);
  white-space:nowrap;
}
.adminSummaryCard{ margin-top:10px; }
.adminSummaryHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.adminSummaryMeta{
  margin-top:6px;
  font-size:11px;
  line-height:1.45;
  color:rgba(255,255,255,.60);
}
.adminFieldGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.adminFieldGrid .field{ margin-top:0; }
.adminBankToggle{
  width:100%;
  padding:0;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:none;
  border:none;
  color:inherit;
  text-align:left;
}
.adminBankToggle .roleArrow{
  margin-top:2px;
  font-size:16px;
}
.adminInlineStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.adminInlineStatus .roleTag{ min-height:22px; }
.adminSectionSpacer{ margin-top:12px; }

#adminUsersList,
#adminBanksList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#adminUsersList > .roleCard.listRow,
#adminBanksList > .roleCard.adminSummaryCard,
#adminUserCard > .roleCard.profileCard{
  margin-top:0;
}
#adminUsersList > .roleCard.listRow{ margin-bottom:10px; }
#adminUsersList > .roleCard.listRow:last-child{ margin-bottom:0; }
#adminBanksList > .roleCard.adminSummaryCard{ margin-bottom:10px; }
#adminBanksList > .roleCard.adminSummaryCard:last-child{ margin-bottom:0; }
@media (max-width: 480px){
  .adminFieldGrid{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .roleSummaryGrid{ grid-template-columns:1fr; }
  .roleSummaryCell.primary{ grid-column:auto; }
  .roleFieldInline{ grid-template-columns:1fr; }
  .roleFieldInline--keep{ grid-template-columns:minmax(0,1fr) auto !important; }
  .roleFieldInline--actionTight{ grid-template-columns:minmax(0,1fr) 96px !important; }
  .inlineInputActionRow{ grid-template-columns:minmax(0,1fr) 96px; }
  .adminActionRow--pair{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.roleMetricStrip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.roleMetricCell{
  min-width:0;
  padding:2px 0;
}
.roleMetricCell + .roleMetricCell{
  border-left:1px solid rgba(255,255,255,.07);
  padding-left:12px;
}
.roleMetricLabel{
  font-size:10px;
  line-height:1.2;
  letter-spacing:.32px;
  text-transform:uppercase;
  color:rgba(255,255,255,.50);
}
.roleMetricValue{
  margin-top:6px;
  font-size:16px;
  line-height:1.18;
  font-weight:800;
  color:rgba(255,255,255,.96);
  white-space:normal;
  word-break:break-word;
}
.roleMetricValue.small{ font-size:14px; }
.adminBankMeta{
  margin-top:8px;
  font-size:11px;
  line-height:1.45;
  color:rgba(255,255,255,.58);
  white-space:normal;
  word-break:break-word;
}
.adminActionRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.adminActionRow--pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:stretch;
  gap:10px;
  width:100%;
}
.adminActionRow--pair > .btn,
.adminActionRow--pair > .btnGhost,
.adminActionRow--pair > .btnDangerGhost,
.adminActionRow--pair > .btnDanger{
  width:100%;
  min-width:0;
}
#adminFinanceList,
#adminAgentsList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#adminFinanceList > .roleCard.profileCard,
#adminAgentsList > .roleCard.profileCard{
  margin-top:0;
}
#adminToolsPageBanks > .settingsModule,
#adminToolsPageFinance > .settingsModule,
#adminToolsPageAgents > .settingsModule{
  margin-top:0;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:visible;
  isolation:auto;
}
#adminToolsPageBanks > .settingsModule::before,
#adminToolsPageFinance > .settingsModule::before,
#adminToolsPageAgents > .settingsModule::before,
#adminToolsPageBanks > .settingsModule::after,
#adminToolsPageFinance > .settingsModule::after,
#adminToolsPageAgents > .settingsModule::after{
  display:none;
}
@media (max-width: 480px){
  .roleMetricStrip{ grid-template-columns:1fr; gap:12px; }
  .roleMetricCell + .roleMetricCell{
    border-left:none;
    border-top:1px solid rgba(255,255,255,.07);
    padding-left:0;
    padding-top:12px;
  }
}

.settingsModule{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--r24);
  /* Slightly denser glass to avoid “dark corner” bleed-through on empty modules */
  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}
.settingsModule::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 280px at 80% 20%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
  opacity:.48;
  pointer-events:none;
  z-index:0;
}
.settingsModule::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, rgba(120,160,255,.95), rgba(120,255,196,.75));
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.settingsModule > *{ position:relative; z-index:1; }

.settingsModule--banks::before{
  background: linear-gradient(180deg, rgba(120,255,196,.95), rgba(120,160,255,.65));
}
.settingsModule--finance::before{
  background: linear-gradient(180deg, rgba(120,160,255,.95), rgba(255,140,200,.55));
}
.settingsModule--agents::before{
  background: linear-gradient(180deg, rgba(255,140,200,.75), rgba(120,255,196,.55));
}


/* Admin Tools menu */
.toolsMenuGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.toolsMenuBtn{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:none;
}
.toolsMenuBtn:active{ transform:scale(.992); }
#adminToolsHeader .iconBtn{
  width:36px;
  height:36px;
  border-radius: 12px;
}

/* Smooth collapsible */
.collapse{
  overflow:hidden;
  max-height:0px;
  opacity:0;
  transform: translate3d(0,-6px,0);
  will-change: max-height, opacity, transform;
  transition:
    max-height .32s cubic-bezier(.2,.8,.2,1),
    opacity .22s cubic-bezier(.2,.8,.2,1),
    transform .22s cubic-bezier(.2,.8,.2,1);
}
.collapse.open{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .collapse{ transition:none; }
}

/* Skeleton placeholders (no "Loading…" text) */
.skeletonRow{
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: skeletonShimmer 1.1s linear infinite;
}
@keyframes skeletonShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .skeletonRow{ animation:none; }
}


/* Simple list items for dropdowns */
.selectItem{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  font-weight: 700;
  padding: 12px 12px;
  font-size: 14px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.selectItem:active{ transform: scale(.99); }

/* --- Status accents (rails + pills) --- */
:root{
  --st-warnA: rgba(255, 214, 130, .95);
  --st-warnB: rgba(255, 140, 200, .55);
  --st-infoA: rgba(120, 160, 255, .98);
  --st-infoB: rgba(170, 140, 255, .70);
  --st-progA: rgba(120, 255, 196, .86);
  --st-progB: rgba(120, 160, 255, .92);
  --st-goodA: rgba(120, 255, 196, .96);
  --st-goodB: rgba(120, 160, 255, .70);
  --st-badA: rgba(255, 120, 120, .98);
  --st-badB: rgba(255, 140, 200, .65);
}

/* Generic helpers */
.dotSep{ opacity:.75; padding: 0 6px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .95em; opacity:.95; }

/* Status -> rail gradient (applies to items where we set data-status) */
[data-status="waiting_payment"],
[data-status="cash_created"]{
  --railA: var(--st-warnA);
  --railB: var(--st-warnB);
}

[data-status="paid"],
[data-status="proof_submitted"],
[data-status="waiting_agent_confirm"]{
  --railA: var(--st-infoA);
  --railB: var(--st-infoB);
}

[data-status="cash_picked_up"],
[data-status="in_progress"],
[data-status="processing"]{
  --railA: var(--st-progA);
  --railB: var(--st-progB);
}

[data-status="sent"]{
  --railA: var(--st-goodA);
  --railB: var(--st-goodB);
}

[data-status="cancelled"],
[data-status="canceled"]{
  --railA: var(--st-badA);
  --railB: var(--st-badB);
}

/* Status pill */
.statusPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 5px 10px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  font-weight: 850;
  font-size: 11px;
  letter-spacing: .2px;
  line-height: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.statusPill::before{
  content:"";
  width:8px; height:8px;
  border-radius:99px;
  background: var(--railA);
  box-shadow: 0 0 18px rgba(120,160,255,.28);
  flex:0 0 auto;
}
.statusPill.mini{ padding: 4px 9px; font-size: 10.5px; }

/* Make the status screen card respect status rails when we mark it */
.statusCard::after{ opacity: .68; }



.adminSummaryCard--bankCompact{
  padding:8px 10px;
  border-radius:18px;
}
.adminBankToggle--compact{
  align-items:center;
  gap:8px;
  min-height:0;
}
.adminBankToggle--compact .roleCardMain{
  min-width:0;
}
.adminBankSummaryHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.adminBankSummaryHead .roleCardId{
  margin:0;
  min-width:0;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.adminBankStatusTag{
  min-height:20px;
  padding:0 8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.2px;
  flex:0 0 auto;
}
.adminBankPrimaryLine{
  margin-top:2px;
  font-size:12px;
  line-height:1.2;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#adminBanksList > .roleCard.adminSummaryCard.adminSummaryCard--bankCompact{
  margin-bottom:8px;
}
#adminBanksList > .roleCard.adminSummaryCard.adminSummaryCard--bankCompact:last-child{
  margin-bottom:0;
}
@media (max-width: 480px){
  .adminSummaryCard--bankCompact{
    padding:8px 10px;
  }
  .adminBankToggle--compact .roleArrow{
    margin-top:0;
  }
}


/* Home logo */
.homeHeroLogoWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: -40.5px 0 5px;
  padding: 0;
}
.homeHeroLogo{
  display:block;
  width:min(100%, 72px);
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.28));
  pointer-events:none;
  user-select:none;
}


/* Global fixed logo: stays in one place on every page and does not affect page scrolling */
:root{
  --fixed-logo-top: calc(var(--topSafe) + 4px);
  --fixed-logo-width: 72px;
  --fixed-logo-space: 5px;
}

.appFixedLogoWrap{
  position:absolute;
  left:50%;
  top:var(--fixed-logo-top);
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
  user-select:none;
}

.appFixedLogo{
  display:block;
  width:min(100%, var(--fixed-logo-width));
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.28));
  pointer-events:none;
  user-select:none;
}

/* Hide the old Home-only in-flow logo so it no longer stretches the page */
#screen-home .homeHeroLogoWrap{
  display:none !important;
}

/* Reserve stable space under the fixed logo without breaking vertical scroll */
.app .screens{
  padding-top: calc(16px + 80px + var(--fixed-logo-space)) !important;
}

/* Keep the Home card close to the fixed logo, like before */
#screen-home > .card:first-of-type{
  margin-top: -3px;
}


/* ===== CANONICAL MOBILE SHELL HARDENING (Android/iOS Telegram WebView) =====
   Final authoritative viewport/layout rules. Keep them at the very end so they
   win over older experimental blocks above.
*/
:root{
  --shellH: var(--appH, 100vh);
  --fixed-logo-top: calc(var(--topSafe) + 8px);
  --fixed-logo-width: 72px;
  --fixed-logo-space: -30px;
  --tabbar-visual-gap: 8px;
}

html,
body{
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

body{
  position: relative;
}

.app{
  position: fixed !important;
  inset: 0 !important;
  height: var(--shellH) !important;
  min-height: var(--shellH) !important;
  max-height: var(--shellH) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--bg) !important;
}

.appFixedLogoWrap{
  position: fixed !important;
  left: 50% !important;
  top: var(--fixed-logo-top) !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
}

.appFixedLogo{
  width: var(--fixed-logo-width) !important;
  max-width: min(72px, calc(100vw - 32px)) !important;
}

.screens,
.app .screens{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: calc(var(--fixed-logo-top) + var(--fixed-logo-width) + var(--fixed-logo-space)) !important;
  padding-right: var(--px) !important;
  padding-left: var(--px) !important;
  padding-bottom: calc(var(--tabbar-h) + var(--botSafe) + var(--tabbar-visual-gap) + 18px) !important;
  scroll-padding-top: calc(var(--fixed-logo-top) + var(--fixed-logo-width) + 12px) !important;
  scroll-padding-bottom: calc(var(--tabbar-h) + var(--botSafe) + var(--tabbar-visual-gap) + 18px) !important;
}

.tabbar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--botSafe) + var(--tabbar-visual-gap)) !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  z-index: 20 !important;
}

.tabbarInner{
  margin: 0 var(--px) !important;
}

body.kb-open .tabbar{
  transform: translateY(calc(100% + 18px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.kb-closed .tabbar{
  transform: translateY(0) !important;
  opacity: 1 !important;
}