/* ---- Base reset ---- */
    *, ::before, ::after { box-sizing: border-box; border: 0 solid var(--line); }
    html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
    body { line-height: inherit; }
    h1, h2, h3, h4, p, blockquote { margin: 0; }
    h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
    button, input, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
    button { background: transparent; cursor: pointer; -webkit-appearance: button; }
    img, svg, video { display: block; vertical-align: middle; }
    img, video { max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: inherit; }
    b, strong { font-weight: bolder; }
    textarea { resize: vertical; }
    input::placeholder, textarea::placeholder { opacity: 1; color: var(--mut); }
    [hidden] { display: none; }
    :root {
      --bg:#090C0A;--card:#131914;--ink:#F3F7F1;--mut:#8F9C93;--line:#263029;--soft:rgba(197,248,42,.12);--soft-hover:rgba(197,248,42,.2);
      --green:#C5F82A;--deep:#0E1410;--lime:#C5F82A;--sky:#C5F82A;--red:#FF6B5E;
      --hero:linear-gradient(135deg,#0E1B12 0%,#173B25 100%);--arch:linear-gradient(180deg,#173B25 0%,#131914 100%);
      --sh:0 10px 28px rgba(0,0,0,.45);color-scheme:dark;
    }
    :root[data-theme="light"] {
      --bg:#F2F5F0;--card:#FFFFFF;--ink:#10231A;--mut:#5E6D64;--line:#DAE3DB;--soft:rgba(11,122,75,.10);--soft-hover:rgba(11,122,75,.18);
      --green:#0B7A4B;--deep:#0E1B12;--lime:#C5F82A;--sky:#0B7A4B;--red:#D3362A;
      --hero:linear-gradient(135deg,#F7FBEA 0%,#E3F4B8 100%);--arch:linear-gradient(180deg,#E6F0E3 0%,#F2F5F0 100%);
      --sh:0 8px 24px rgba(16,35,26,.10);color-scheme:light;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg);
      color: var(--ink);
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .top-header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 236px;
      background: linear-gradient(165deg,#090C0A 0%,#0E1B12 55%,#173B25 100%);
      border-bottom-left-radius: 50% 34px;
      border-bottom-right-radius: 50% 34px;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .top-header-bg.compact {
      height: 112px;
      border-bottom-left-radius: 50% 22px;
      border-bottom-right-radius: 50% 22px;
    }

    @media (min-width: 768px) {
      .top-header-bg {
        height: 256px;
        border-bottom-left-radius: 50% 44px;
        border-bottom-right-radius: 50% 44px;
      }
      .top-header-bg.compact {
        height: 120px;
      }
    }

    .top-header-bg::after {
      content: "";
      position: absolute;
      top: -60px;
      right: 8%;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(197, 248, 42, 0.12) 0%, transparent 70%);
      border-radius: 50%;
    }

    .brand-wordmark {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
      font-style: italic;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .balance-card {
      background: linear-gradient(135deg,#173B25 0%,#0E1B12 100%);
      border-radius: 26px;
      border: 1px solid rgba(200, 241, 105, 0.35);
      box-shadow: 0 14px 32px rgba(4, 34, 20, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.22);
      position: relative;
      overflow: hidden;
    }

    .balance-card::before {
      content: "";
      position: absolute;
      top: -45%;
      left: -15%;
      width: 75%;
      height: 150%;
      background: radial-gradient(ellipse at center, rgba(200, 241, 105, 0.16) 0%, transparent 70%);
      transform: rotate(-18deg);
      pointer-events: none;
    }

    .promo-banner {
      border-radius: 24px;
      background: var(--hero);
      box-shadow: var(--sh);
      position: relative;
      overflow: hidden;
      min-height: 170px;
      border: 1px solid var(--line);
    }

    @media (min-width: 768px) {
      .promo-banner {
        min-height: 196px;
      }
    }

    .action-tile {
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 20px;
      transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, box-shadow 0.18s ease;
    }

    .action-tile:hover {
      background: var(--soft-hover);
      transform: translateY(-2px);
      box-shadow: var(--sh);
    }

    .action-tile:active {
      transform: scale(0.96);
    }

    .sb-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--sh);
    }

    .match-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--sh);
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .match-card:hover {
      transform: translateY(-2px);
    }

    .match-card-arch {
      position: absolute;
      bottom: -36px;
      left: 50%;
      transform: translateX(-50%);
      width: 255px;
      height: 78px;
      background: var(--arch);
      border-top-left-radius: 140px 78px;
      border-top-right-radius: 140px 78px;
      z-index: 0;
      pointer-events: none;
    }

    .vs-pill {
      background: linear-gradient(90deg, #0b7a4b 0%, #3aa634 100%);
      box-shadow: 0 3px 8px rgba(11, 122, 75, 0.25);
    }

    .mobile-bottom-dock {
      background: var(--card);
      border-radius: 34px;
      box-shadow: 0 10px 30px rgba(7, 56, 42, 0.14);
      padding: 6px;
      border: 1px solid var(--line);
    }

    .nav-tab {
      transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
      border-radius: 24px;
    }

    .nav-tab.active {
      background: var(--deep);
      color: #ffffff;
      padding: 9px 14px;
      box-shadow: 0 6px 14px rgba(7, 56, 42, 0.25);
    }

    .nav-tab:not(.active) {
      color: var(--mut);
      padding: 9px 8px;
    }

    .desktop-nav-pill {
      transition: all 0.18s ease;
      border-radius: 9999px;
      color: rgba(255, 255, 255, 0.84);
    }

    .desktop-nav-pill:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
    }

    .desktop-nav-pill.active {
      background: #ffffff;
      color: #07382a;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    }

    .sb-input {
      width: 100%;
      height: 46px;
      border-radius: 14px;
      border: 1.5px solid var(--line);
      background: var(--bg);
      color: var(--ink);
      padding: 0 14px;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      transition: border-color 0.15s ease;
    }

    .sb-input:focus {
      outline: none;
      border-color: var(--sky);
    }

    .pitch-board {
      background: linear-gradient(180deg, #0d693f 0%, #0a5432 50%, #0d693f 100%);
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .pitch-board::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.28);
    }

    .pitch-board::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 74px;
      height: 74px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.28);
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .modal-animate {
      animation: fadeUp 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .bg-\[\#0b7a4b\],.bg-\[\#07382a\],.hover\:bg-\[\#09643d\]:hover,.hover\:bg-\[\#0b523d\]:hover,.hover\:bg-\[\#73d5f8\]:hover{background:var(--lime)!important;color:#0B1405!important}
    .vs-pill{background:var(--lime)!important;color:#0B1405!important;box-shadow:none}
    .nav-tab.active,.desktop-nav-pill.active{background:var(--lime);color:#0B1405}
    .sb-input::placeholder{color:var(--mut)}
    select.sb-input option{background:var(--card);color:var(--ink)}

    /* ---- Icons, buttons ---- */
    .ic { display: inline-block; vertical-align: -0.2em; flex: none; }
    button { transition: transform .08s, filter .15s, background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
    button:active { transform: scale(.97); }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
    button.bg-\[\#0b7a4b\], button.bg-\[\#07382a\] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(197,248,42,.7); }
    button.bg-\[\#0b7a4b\]:hover, button.bg-\[\#07382a\]:hover { filter: brightness(1.07); }
    button.border.border-\[var\(--line\)\]:hover { background: var(--soft); border-color: var(--lime); }
    .seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--mut); white-space: nowrap; flex: none; }
    .seg-btn:not(.on):hover { color: var(--ink); background: var(--soft); }
    .seg-btn.on { background: var(--lime); color: #0B1405; box-shadow: 0 6px 14px -8px rgba(197,248,42,.8); }
    .grow { flex: 1; min-width: 0; }
    /* ---- Feed / post cards ---- */
    .feed { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
    .pcard { background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--sh); }
    .pc-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
    .pc-who { flex: 1; min-width: 0; }
    .pc-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15.5px; color: var(--ink); text-align: left; max-width: 100%; }
    .pc-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pc-vf { width: 17px; height: 17px; border-radius: 50%; background: var(--lime); color: #0B1405; display: inline-flex; align-items: center; justify-content: center; flex: none; }
    .pc-meta { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
    .pc-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--mut); }
    .pc-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--soft); color: var(--green); font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
    .pc-tag.mute { background: var(--line); color: var(--mut); }
    .poster2 { margin: 0 12px; border-radius: 22px; padding: 18px 16px 16px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(380px 200px at 100% 0%, rgba(197,248,42,.24), transparent 65%), linear-gradient(135deg, #0E1B12, #14331F); }
    .pz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
    .pz-chip { background: var(--lime); color: #0B1405; font-weight: 800; font-size: 11px; letter-spacing: .6px; border-radius: 8px; padding: 4px 8px; }
    .pz-time { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; }
    .pz-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 0; }
    .pz-match + .pz-match { border-top: 1px dashed rgba(255,255,255,.2); }
    .pz-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-weight: 800; font-size: 13px; line-height: 1.2; min-width: 0; }
    .pz-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .pz-mid b { background: var(--lime); color: #0B1405; font-size: 12px; border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
    .pz-mid i { font-style: normal; font-weight: 800; font-size: 18px; color: rgba(255,255,255,.55); letter-spacing: 1px; }
    .pz-foot { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 2px dashed rgba(255,255,255,.22); }
    .pz-foot::before, .pz-foot::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); }
    .pz-foot::before { left: -26px; } .pz-foot::after { right: -26px; }
    .pz-price { font-weight: 800; font-size: 30px; color: var(--lime); line-height: 1; }
    .pz-sub { font-size: 12px; color: #B2BFB6; font-weight: 600; margin-top: 3px; }
    .pz-pay { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--lime); color: #0B1405; font-weight: 800; font-size: 14px; border-radius: 14px; padding: 12px 18px; box-shadow: 0 8px 18px -8px rgba(197,248,42,.7); }
    .pz-pay.off { background: rgba(255,255,255,.12); color: #B2BFB6; box-shadow: none; }
    .pq { margin: 0 12px; border-radius: 22px; min-height: 190px; padding: 26px 22px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 800; font-size: 21px; line-height: 1.35; position: relative; overflow: hidden; }
    .pq::after { content: ''; position: absolute; right: -50px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; border: 22px solid rgba(197,248,42,.12); }
    .pq > div { position: relative; z-index: 1; word-break: break-word; }
    .pc-foot { display: flex; align-items: center; gap: 4px; padding: 10px 12px 14px; }
    .pc-act { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 12px; color: var(--mut); font-weight: 700; font-size: 14px; }
    .pc-act:hover { background: var(--soft); color: var(--ink); }
    .pc-act.on { color: #FF5C8A; } .pc-act.on svg { fill: currentColor; }
    .pc-view { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 12px; min-height: 42px; padding: 0 14px; font-weight: 800; font-size: 13px; color: var(--ink); }
    .pc-view:hover { border-color: var(--lime); background: var(--soft); }
    /* ---- Cinema cards ---- */
    .ccard { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px; color: inherit; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh); transition: transform .12s, border-color .15s; }
    .ccard:hover { transform: translateY(-2px); border-color: var(--lime); }
    .cc-top { display: flex; align-items: center; gap: 14px; }
    .cc-info { flex: 1; min-width: 0; }
    .cc-name { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 16.5px; }
    .cc-name .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cc-loc { display: flex; align-items: center; gap: 5px; color: var(--mut); font-size: 13px; font-weight: 600; margin-top: 3px; }
    .cc-go { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
    .cc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .tg { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 800; background: var(--soft); color: var(--green); }
    .tg.am { background: rgba(245,158,11,.15); color: #b45309; }
    :root[data-theme="dark"] .tg.am { color: #fcd34d; }
    .tg.lime { background: var(--lime); color: #0B1405; }
    .cc-next { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--mut); }
    .cc-next b { margin-left: auto; color: var(--ink); font-size: 15px; }
    /* ---- Tactics ---- */
    .lcard { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh); }
    .lc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .lc-by { display: inline-flex; align-items: center; gap: 6px; background: var(--soft); color: var(--green); font-weight: 800; font-size: 12px; border-radius: 999px; padding: 5px 11px; }
    .lc-time { color: var(--mut); font-size: 12px; font-weight: 600; }
    .lc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
    .lc-t { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; text-align: center; }
    .lc-vs { font-weight: 800; font-size: 20px; color: var(--mut); letter-spacing: 1px; }
    .xi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; color: #fff; border-radius: 18px; }
    .xi-col h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #C5F82A; font-weight: 800; }
    .xi-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 700; }
    .xi-row:last-child { border-bottom: 0; }
    .xi-n { width: 22px; height: 22px; border-radius: 50%; background: rgba(197,248,42,.2); color: #C5F82A; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
    .xi-col.r { text-align: right; } .xi-col.r .xi-row { flex-direction: row-reverse; }
    /* ---- Cinema posts tab ---- */
    .pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pstat { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
    .pstat span { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
    .pstat b { display: block; font-size: 22px; font-weight: 800; line-height: 1; }
    .pstat small { color: var(--mut); font-size: 12px; font-weight: 700; }
    @media (max-width: 520px) { .pstats { grid-template-columns: 1fr; } }
    .compose { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh); }
    .cp-head { display: flex; align-items: center; gap: 12px; }
    .mypost { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
    .mp-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
    .mp-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; word-break: break-word; }
    .mp-sub { color: var(--mut); font-size: 12.5px; margin-top: 2px; }
    .mp-meta { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: 12px; font-weight: 600; margin-top: 6px; }
    .mp-likes { display: inline-flex; align-items: center; gap: 4px; }
    .mp-del { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); color: var(--red); display: flex; align-items: center; justify-content: center; flex: none; }
    .mp-del:hover { background: rgba(255,107,94,.12); }
    /* ---- Scanner + verdict ---- */
    .scan-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; border-radius: 18px; background: var(--lime); color: #0B1405; font-weight: 800; font-size: 17px; box-shadow: 0 10px 22px -10px rgba(197,248,42,.7); }
    .or-line { text-align: center; color: var(--mut); font-size: 12.5px; font-weight: 700; margin: 12px 0; }
    .demo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 2px dashed var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 14px; color: var(--mut); font-size: 12px; font-weight: 600; }
    .demo-row button { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 12px; color: var(--ink); }
    .demo-row button:hover { border-color: var(--lime); background: var(--soft); }
    .vcard { border-radius: 24px; padding: 18px; border: 1px solid var(--line); background: var(--card); }
    .vcard.v-ok { background: var(--soft); border-color: rgba(197,248,42,.45); }
    .vcard.v-bad { background: rgba(255,107,94,.12); border-color: rgba(255,107,94,.45); }
    .v-head { display: flex; align-items: center; gap: 14px; }
    .v-ci { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--lime); color: #0B1405; }
    .v-bad .v-ci { background: var(--red); color: #fff; }
    .v-title { font-weight: 800; font-size: 22px; }
    .v-ok .v-title { color: var(--green); } .v-bad .v-title { color: var(--red); }
    .v-sub { color: var(--mut); font-size: 13px; font-weight: 600; margin-top: 2px; }
    .v-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
    .v-l { font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .5px; }
    .v-grid b { font-size: 14px; }
    .v-matches { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
    .v-m { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 13.5px; }
    .v-m span { flex: 1; }
    .v-empty { color: var(--mut); margin-bottom: 8px; display: flex; justify-content: center; }
    #cam { display: none; position: fixed; inset: 0; background: #000; z-index: 80; flex-direction: column; }
    #cam.on { display: flex; }
    #cam video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
    .cam-frame { position: absolute; left: 50%; top: 42%; width: 240px; height: 240px; transform: translate(-50%, -50%); border: 4px solid var(--lime); border-radius: 26px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
    .cam-bar { padding: 16px; background: #000; color: #fff; text-align: center; }
    .cam-msg { font-weight: 700; margin-bottom: 10px; }

    /* ---- Utility classes (compiled, no Tailwind runtime) ---- */
    .-top-0\.5{top:-0.125rem}
    .-translate-x-1\/2{--tw-tx:-50%;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-sc,1))}
    .-translate-y-1\/2{--tw-ty:-50%;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-sc,1))}
    .absolute{position:absolute}
    .backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
    .backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
    .bg-\[\#062b1a\]\/95{background-color:rgba(6,43,26,0.95)}
    .bg-\[\#07382a\]{background-color:#07382a}
    .bg-\[\#0B1405\]{background-color:#0B1405}
    .bg-\[\#0b7a4b\]{background-color:#0b7a4b}
    .bg-\[\#6fd19c\]\/45{background-color:rgba(111,209,156,0.45)}
    .bg-\[\#C5F82A\]{background-color:#C5F82A}
    .bg-\[\#c0392b\]{background-color:#c0392b}
    .bg-\[\#ff4b4b\]{background-color:#ff4b4b}
    .bg-\[var\(--card\)\]{background-color:var(--card)}
    .bg-\[var\(--lime\)\]{background-color:var(--lime)}
    .bg-\[var\(--line\)\]{background-color:var(--line)}
    .bg-\[var\(--soft\)\]{background-color:var(--soft)}
    .bg-amber-500\/15{background-color:rgba(245,158,11,0.15)}
    .bg-black\/60{background-color:rgba(0,0,0,0.6)}
    .bg-rose-500\/15{background-color:rgba(244,63,94,0.15)}
    .bg-white{background-color:#fff}
    .bg-white\/15{background-color:rgba(255,255,255,0.15)}
    .bg-white\/\[0\.09\]{background-color:rgba(255,255,255,0.09)}
    .bg-white\/\[0\.12\]{background-color:rgba(255,255,255,0.12)}
    .block{display:block}
    .border-\[\#0b7a4b\]{border-color:#0b7a4b}
    .border-\[var\(--line\)\]{border-color:var(--line)}
    .border-dashed{border-style:dashed}
    .border-white\/15{border-color:rgba(255,255,255,0.15)}
    .border-white\/\[0\.12\]{border-color:rgba(255,255,255,0.12)}
    .border-white\/\[0\.1\]{border-color:rgba(255,255,255,0.1)}
    .bottom-0{bottom:0}
    .divide-\[var\(--line\)\]>:not([hidden])~:not([hidden]){border-color:var(--line)}
    .divide-y>:not([hidden])~:not([hidden]){border-top-width:1px}
    .fixed{position:fixed}
    .flex{display:flex}
    .flex-1{flex:1 1 0%}
    .flex-col{flex-direction:column}
    .flex-wrap{flex-wrap:wrap}
    .font-bold{font-weight:700}
    .font-extrabold{font-weight:800}
    .font-semibold{font-weight:600}
    .gap-0\.5{gap:0.125rem}
    .gap-1{gap:0.25rem}
    .gap-1\.5{gap:0.375rem}
    .gap-2{gap:0.5rem}
    .gap-2\.5{gap:0.625rem}
    .gap-3{gap:0.75rem}
    .gap-3\.5{gap:0.875rem}
    .gap-4{gap:1rem}
    .gap-5{gap:1.25rem}
    .grid{display:grid}
    .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
    .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .h-10{height:2.5rem}
    .h-11{height:2.75rem}
    .h-3{height:0.75rem}
    .h-5{height:1.25rem}
    .h-7{height:1.75rem}
    .h-8{height:2rem}
    .h-\[176px\]{height:176px}
    .h-\[19px\]{height:19px}
    .h-\[42px\]{height:42px}
    .h-\[58px\]{height:58px}
    .hidden{display:none}
    .inline-block{display:inline-block}
    .inline-flex{display:inline-flex}
    .inset-0{inset:0}
    .items-center{align-items:center}
    .items-end{align-items:flex-end}
    .items-start{align-items:flex-start}
    .items-stretch{align-items:stretch}
    .justify-between{justify-content:space-between}
    .justify-center{justify-content:center}
    .justify-end{justify-content:flex-end}
    .leading-\[0\]{line-height:0}
    .leading-\[1\.08\]{line-height:1.08}
    .leading-none{line-height:1}
    .leading-relaxed{line-height:1.625}
    .leading-snug{line-height:1.375}
    .leading-tight{line-height:1.25}
    .left-0{left:0}
    .left-1\/2{left:50%}
    .left-3\.5{left:0.875rem}
    .max-h-\[90vh\]{max-height:90vh}
    .max-w-3xl{max-width:48rem}
    .max-w-4xl{max-width:56rem}
    .max-w-\[1200px\]{max-width:1200px}
    .max-w-full{max-width:100%}
    .max-w-lg{max-width:32rem}
    .max-w-md{max-width:28rem}
    .max-w-xl{max-width:36rem}
    .min-h-screen{min-height:100vh}
    .min-w-0{min-width:0}
    .opacity-0{opacity:0}
    .opacity-100{opacity:1}
    .opacity-75{opacity:0.75}
    .opacity-90{opacity:0.9}
    .overflow-hidden{overflow:hidden}
    .overflow-x-auto{overflow-x:auto}
    .overflow-y-auto{overflow-y:auto}
    .pointer-events-auto{pointer-events:auto}
    .pointer-events-none{pointer-events:none}
    .relative{position:relative}
    .right-0{right:0}
    .right-0\.5{right:0.125rem}
    .ring-2{box-shadow:0 0 0 2px var(--tw-ring-color,#3b82f6)}
    .select-none{-webkit-user-select:none;user-select:none}
    .self-start{align-self:flex-start}
    .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
    .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
    .shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
    .shrink-0{flex-shrink:0}
    .text-\[\#062e1c\]{color:#062e1c}
    .text-\[\#07382a\]{color:#07382a}
    .text-\[\#0B1405\]{color:#0B1405}
    .text-\[\#C5F82A\]{color:#C5F82A}
    .text-\[\#cfe9db\]{color:#cfe9db}
    .text-\[\#d6eee2\]{color:#d6eee2}
    .text-\[\#dcf2e6\]{color:#dcf2e6}
    .text-\[\#e5f5ec\]{color:#e5f5ec}
    .text-\[10\.5px\]{font-size:10.5px}
    .text-\[11\.5px\]{font-size:11.5px}
    .text-\[11px\]{font-size:11px}
    .text-\[12\.5px\]{font-size:12.5px}
    .text-\[12px\]{font-size:12px}
    .text-\[13\.5px\]{font-size:13.5px}
    .text-\[13px\]{font-size:13px}
    .text-\[14\.5px\]{font-size:14.5px}
    .text-\[14px\]{font-size:14px}
    .text-\[15px\]{font-size:15px}
    .text-\[16px\]{font-size:16px}
    .text-\[17px\]{font-size:17px}
    .text-\[18px\]{font-size:18px}
    .text-\[19px\]{font-size:19px}
    .text-\[20px\]{font-size:20px}
    .text-\[22px\]{font-size:22px}
    .text-\[23px\]{font-size:23px}
    .text-\[24px\]{font-size:24px}
    .text-\[26px\]{font-size:26px}
    .text-\[28px\]{font-size:28px}
    .text-\[32px\]{font-size:32px}
    .text-\[34px\]{font-size:34px}
    .text-\[var\(--green\)\]{color:var(--green)}
    .text-\[var\(--ink\)\]{color:var(--ink)}
    .text-\[var\(--mut\)\]{color:var(--mut)}
    .text-\[var\(--red\)\]{color:var(--red)}
    .text-amber-700{color:#b45309}
    .text-black{color:#000}
    .text-center{text-align:center}
    .text-left{text-align:left}
    .text-white{color:#fff}
    .top-1\/2{top:50%}
    .top-20{top:5rem}
    .tracking-\[0\.2em\]{letter-spacing:0.2em}
    .tracking-tight{letter-spacing:-.025em}
    .tracking-wide{letter-spacing:.025em}
    .tracking-wider{letter-spacing:.05em}
    .transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
    .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
    .translate-y-0{--tw-ty:0;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-sc,1))}
    .translate-y-2{--tw-ty:0.5rem;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-sc,1))}
    .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .underline{text-decoration:underline}
    .uppercase{text-transform:uppercase}
    .w-10{width:2.5rem}
    .w-11{width:2.75rem}
    .w-12{width:3rem}
    .w-3{width:0.75rem}
    .w-5{width:1.25rem}
    .w-7{width:1.75rem}
    .w-8{width:2rem}
    .w-\[176px\]{width:176px}
    .w-\[1px\]{width:1px}
    .w-\[42px\]{width:42px}
    .w-\[4px\]{width:4px}
    .w-\[54px\]{width:54px}
    .w-\[60\%\]{width:60%}
    .w-\[92\%\]{width:92%}
    .w-full{width:100%}
    .whitespace-nowrap{white-space:nowrap}
    .z-10{z-index:10}
    .z-20{z-index:20}
    .z-30{z-index:30}
    .z-50{z-index:50}
    .p-0{padding:0}
    .p-1{padding:0.25rem}
    .p-1\.5{padding:0.375rem}
    .p-10{padding:2.5rem}
    .p-2\.5{padding:0.625rem}
    .p-3{padding:0.75rem}
    .p-3\.5{padding:0.875rem}
    .p-4{padding:1rem}
    .p-5{padding:1.25rem}
    .p-6{padding:1.5rem}
    .p-8{padding:2rem}
    .mx-auto{margin-left:auto;margin-right:auto}
    .px-0\.5{padding-left:0.125rem;padding-right:0.125rem}
    .px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
    .px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
    .px-3{padding-left:0.75rem;padding-right:0.75rem}
    .px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
    .px-4{padding-left:1rem;padding-right:1rem}
    .px-5{padding-left:1.25rem;padding-right:1.25rem}
    .px-6{padding-left:1.5rem;padding-right:1.5rem}
    .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
    .py-1{padding-top:0.25rem;padding-bottom:0.25rem}
    .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
    .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
    .py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
    .py-3{padding-top:0.75rem;padding-bottom:0.75rem}
    .py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
    .py-4{padding-top:1rem;padding-bottom:1rem}
    .py-5{padding-top:1.25rem;padding-bottom:1.25rem}
    .py-6{padding-top:1.5rem;padding-bottom:1.5rem}
    .mb-0\.5{margin-bottom:0.125rem}
    .mb-1{margin-bottom:0.25rem}
    .mb-2{margin-bottom:0.5rem}
    .mb-2\.5{margin-bottom:0.625rem}
    .mb-3{margin-bottom:0.75rem}
    .mb-4{margin-bottom:1rem}
    .mt-0\.5{margin-top:0.125rem}
    .mt-1{margin-top:0.25rem}
    .mt-1\.5{margin-top:0.375rem}
    .mt-2{margin-top:0.5rem}
    .mt-3{margin-top:0.75rem}
    .mt-4{margin-top:1rem}
    .mt-5{margin-top:1.25rem}
    .pb-12{padding-bottom:3rem}
    .pb-28{padding-bottom:7rem}
    .pb-3{padding-bottom:0.75rem}
    .pb-5{padding-bottom:1.25rem}
    .pl-10{padding-left:2.5rem}
    .pl-3\.5{padding-left:0.875rem}
    .pl-5{padding-left:1.25rem}
    .pr-2{padding-right:0.5rem}
    .pr-2\.5{padding-right:0.625rem}
    .pt-1{padding-top:0.25rem}
    .pt-2{padding-top:0.5rem}
    .pt-3{padding-top:0.75rem}
    .pt-4{padding-top:1rem}
    .border{border-width:1px}
    .rounded-2xl{border-radius:1rem}
    .rounded-\[22px\]{border-radius:22px}
    .rounded-\[26px\]{border-radius:26px}
    .rounded-full{border-radius:9999px}
    .rounded-lg{border-radius:.5rem}
    .rounded-xl{border-radius:.75rem}
    .border-t{border-top-width:1px}
    .border-t-2{border-top-width:2px}
    .rounded-t-\[30px\]{border-top-left-radius:30px;border-top-right-radius:30px}
    .ring-\[\#07382a\]{--tw-ring-color:#07382a}
    .duration-200{transition-duration:200ms}
    .active\:scale-95:active{--tw-sc:0.95;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-sc,1))}
    .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
    .hover\:bg-\[\#09643d\]:hover{background-color:#09643d}
    .hover\:bg-\[\#0b523d\]:hover{background-color:#0b523d}
    .hover\:bg-\[\#73d5f8\]:hover{background-color:#73d5f8}
    .hover\:bg-white\/\[0\.2\]:hover{background-color:rgba(255,255,255,0.2)}
    .hover\:opacity-95:hover{opacity:0.95}
    .hover\:underline:hover{text-decoration:underline}
    @media (min-width:640px){
    .sm\:gap-2\.5{gap:0.625rem}
    .sm\:gap-4{gap:1rem}
    .sm\:gap-5{gap:1.25rem}
    .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .sm\:h-12{height:3rem}
    .sm\:h-6{height:1.5rem}
    .sm\:inline-block{display:inline-block}
    .sm\:items-center{align-items:center}
    .sm\:self-center{align-self:center}
    .sm\:text-\[13\.5px\]{font-size:13.5px}
    .sm\:text-\[14\.5px\]{font-size:14.5px}
    .sm\:text-\[14px\]{font-size:14px}
    .sm\:text-\[16px\]{font-size:16px}
    .sm\:text-\[20px\]{font-size:20px}
    .sm\:text-\[26px\]{font-size:26px}
    .sm\:text-\[32px\]{font-size:32px}
    .sm\:text-\[35px\]{font-size:35px}
    .sm\:w-14{width:3.5rem}
    .sm\:w-6{width:1.5rem}
    .sm\:w-\[56\%\]{width:56%}
    .sm\:p-4{padding:1rem}
    .sm\:p-5{padding:1.25rem}
    .sm\:p-6{padding:1.5rem}
    .sm\:p-7{padding:1.75rem}
    .sm\:p-8{padding:2rem}
    .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
    .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .sm\:px-7{padding-left:1.75rem;padding-right:1.75rem}
    .sm\:py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
    .sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
    .sm\:pl-4{padding-left:1rem}
    .sm\:pl-7{padding-left:1.75rem}
    .sm\:pr-3{padding-right:0.75rem}
    .sm\:pt-5{padding-top:1.25rem}
    .sm\:rounded-\[30px\]{border-radius:30px}
    }
    @media (min-width:768px){
    .md\:flex{display:flex}
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:hidden{display:none}
    .md\:pb-12{padding-bottom:3rem}
    }
    @media (min-width:1024px){
    .lg\:col-span-5{grid-column:span 5 / span 5}
    .lg\:col-span-6{grid-column:span 6 / span 6}
    .lg\:col-span-7{grid-column:span 7 / span 7}
    .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
    .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .lg\:px-8{padding-left:2rem;padding-right:2rem}
    }
    :root[data-theme="dark"] .dark\:bg-\[\#2fbf7d\]{background-color:#2fbf7d}
    :root[data-theme="dark"] .dark\:text-amber-300{color:#fcd34d}
    :root[data-theme="dark"] .dark\:text-white{color:#fff}


    /* ---- Pay again (compact), paid list, success sheet ---- */
    .pa-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; }
    .pa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
    .pa-head > span { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--green); }
    .pa-all { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--mut); padding: 4px 2px; }
    .pa-all:hover { color: var(--ink); }
    .pa-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 0; border-top: 1px solid var(--line); }
    .pa-head + .pa-row { border-top: 0; }
    .pa-info { flex: 1; min-width: 0; }
    .pa-info b { display: block; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pa-info small { display: block; font-size: 11.5px; color: var(--mut); font-weight: 600; margin-top: 1px; }
    .pa-btn { flex: none; background: var(--lime); color: #0B1405; font-weight: 800; font-size: 11.5px; border-radius: 999px; padding: 6px 12px; line-height: 1.2; text-align: center; }
    .back-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; flex: none; }
    .back-btn:hover { border-color: var(--lime); background: var(--soft); }
    .pl-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
    .pl-main { flex: 1; min-width: 0; }
    .pl-main b { display: block; font-size: 15px; font-weight: 800; }
    .pl-loc { display: flex; align-items: center; gap: 5px; color: var(--mut); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
    .pl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .pl-meta span { background: var(--soft); color: var(--green); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
    .pl-next { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12px; font-weight: 600; margin-top: 8px; }
    .pl-act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: none; }
    .pl-act .pa-btn { padding: 8px 14px; font-size: 12px; }
    .pa-link { font-size: 12px; font-weight: 800; color: var(--mut); text-align: center; padding: 4px; }
    .pa-link:hover { color: var(--ink); }
    @media (max-width: 420px) { .pl-row { flex-direction: column; align-items: stretch; } .pl-act { flex-direction: row; } .pl-act .pa-btn, .pl-act .pa-link { flex: 1; } }
    .po { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
    .po-ci { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: #0B1405; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
    .po-t { font-size: 20px; font-weight: 800; }
    .po-s { font-size: 13px; color: var(--mut); font-weight: 600; }
    .po-qr { background: #fff; border-radius: 18px; padding: 6px; line-height: 0; margin: 12px 0 4px; box-shadow: var(--sh); }
    .po-id { font-size: 28px; font-weight: 800; letter-spacing: .2em; color: var(--green); }
    .po-n { font-size: 12.5px; color: var(--mut); font-weight: 600; }
    .po-m { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; margin: 6px 0 12px; }