/* ============================================================
   REVENUE EXCHANGE WORLD — Design System
   Matched to the REW gold logo (#C8A256 gradient family)
   Ink black #0E0C08 · Gold #E3C878→#A87F2E · Champagne #F3E7C8
   ============================================================ */
:root{
  --black:#0E0C08; --black-2:#171410; --black-3:#221D14;
  --line-d:#2E2617; --gold:#C8A256; --gold-hi:#E3C878; --gold-lo:#A87F2E;
  --champagne:#F3E7C8; --paper:#FAF8F3; --card:#FFFFFF; --line:#E9E2D2;
  --ink:#1C1810; --muted:#7A7259; --green:#1F9D5B; --green-soft:#E7F5EC;
  --amber:#D98E04; --amber-soft:#FCF1DC; --red:#C93B3B; --red-soft:#FBEAEA;
  --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(14,12,8,.06),0 10px 30px rgba(14,12,8,.08);
  --grad-gold:linear-gradient(135deg,#E3C878 0%,#C8A256 45%,#A87F2E 100%);
  --fd:"Plus Jakarta Sans",system-ui,sans-serif; --fb:"Inter",system-ui,sans-serif; --fm:"JetBrains Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--fb);background:var(--black);color:var(--champagne);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

h1,h2,h3,.display{font-family:var(--fd);font-weight:700;line-height:1.14;letter-spacing:-.022em}
h1{font-size:clamp(2.7rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.35rem}
.lede{font-size:1.1rem;color:#B5AA8B;max-width:58ch;font-weight:300}
.eyebrow{font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.goldtext{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--fm)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:10px;
  border:1px solid transparent;font-weight:600;font-size:.95rem;letter-spacing:.02em;transition:.18s}
.btn-gold{background:var(--grad-gold);color:#171410;box-shadow:0 8px 24px rgba(200,162,86,.28)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(200,162,86,.4)}
.btn-outline{border-color:#4A3F26;color:var(--champagne)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-dark{background:var(--black-2);color:var(--champagne);border-color:var(--line-d)}
.btn-sm{padding:9px 18px;font-size:.85rem;border-radius:8px}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(14,12,8,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo img{height:40px;width:auto}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:.92rem;color:#B5AA8B;font-weight:400;transition:color .15s}
.nav-links a:hover{color:var(--gold-hi)}
.nav-cta{display:flex;gap:10px;align-items:center}

/* ---- Hero ---- */
.hero{padding:96px 0 80px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 78% -10%,rgba(200,162,86,.14),transparent 62%),
    radial-gradient(600px 400px at 4% 100%,rgba(200,162,86,.07),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:60px;align-items:center}
.hero .lede{margin:24px 0 34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-family:var(--fm);font-size:.8rem;color:#8C8267}
.hero-note b{color:var(--gold-hi)}
.hair{width:64px;height:1px;background:var(--grad-gold);margin-bottom:22px}

/* gold ledger card (signature) */
.ledger{background:linear-gradient(160deg,#1C1811,#131009 60%);border:1px solid #3A2F1A;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(227,200,120,.14);overflow:hidden}
.ledger-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2E2617;
  font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8C8267}
.live{display:inline-flex;align-items:center;gap:8px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(200,162,86,.7);animation:pulse 1.9s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(200,162,86,0)}100%{box-shadow:0 0 0 0 rgba(200,162,86,0)}}
.ledger-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #2E2617}.ls{padding:18px;border-right:1px solid #2E2617}.ls:last-child{border-right:0}
.ls .k{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#8C8267}
.ls .v{font-family:var(--fd);font-size:1.75rem;color:#fff;margin-top:2px}
.ls .v.gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.ledger-feed{height:225px;overflow:hidden;position:relative;padding:8px 20px;font-family:var(--fm);font-size:.78rem}
.ledger-feed::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(transparent,#131009);pointer-events:none}
.frow{display:flex;justify-content:space-between;gap:10px;padding:6.5px 0;border-bottom:1px dashed #2A2313;white-space:nowrap;animation:drop .35s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
.frow .b{color:var(--gold-hi)}.frow .w{color:#7BD88F}.frow .c{color:#E8C97E}.frow .t{color:#6B6248}

/* ---- Sections ---- */
.section{padding:96px 0}
.section-head{max-width:620px;margin-bottom:56px}
.section-head .lede{margin-top:16px}
.s-dark2{background:var(--black-2);border-block:1px solid var(--line-d)}

.strip{border-block:1px solid var(--line-d);padding:22px 0;background:var(--black-2)}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.strip span{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#6B6248}
.strip .names{display:flex;gap:36px;flex-wrap:wrap;font-family:var(--fd);font-size:1.15rem;color:#8C8267}

.cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--radius);overflow:hidden}
.gcard{background:var(--black);padding:34px 30px;transition:background .2s}
.gcard:hover{background:#161209}
.gcard .n{font-family:var(--fm);font-size:.7rem;color:var(--gold);letter-spacing:.16em}
.gcard h3{margin:14px 0 10px;color:#F5EEDC}
.gcard p{font-size:.93rem;color:#A79C7E;font-weight:300}

.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--radius);overflow:hidden}
.steps4 .gcard{padding:30px 26px}

.revwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.klist{list-style:none;display:grid;gap:18px;margin-top:28px}
.klist li{display:flex;gap:14px;font-weight:300;color:#CBC0A2}
.klist li b{color:#F5EEDC;font-weight:600}
.klist li::before{content:"—";color:var(--gold);flex-shrink:0}
.sharecard{background:var(--grad-gold);border-radius:18px;padding:3px;box-shadow:0 30px 70px rgba(200,162,86,.22)}
.sharecard-in{background:#14100A;border-radius:16px;padding:36px}
.sbar{display:flex;height:58px;border-radius:10px;overflow:hidden;margin:26px 0 12px;font-family:var(--fm);font-weight:600;font-size:.92rem}
.sbar .you{background:var(--grad-gold);color:#171007;display:grid;place-items:center}
.sbar .net{background:#2A2313;color:#8C8267;display:grid;place-items:center}
.slegend{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.72rem;color:#8C8267;letter-spacing:.08em}
.snote{margin-top:22px;padding-top:20px;border-top:1px dashed #3A2F1A;font-size:.9rem;color:#CBC0A2;font-weight:300}
.snote b{color:var(--gold-hi)}

.statband{background:var(--black-2);border-block:1px solid var(--line-d);padding:70px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;text-align:center}
.statgrid .v{font-family:var(--fd);font-size:3rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.statgrid .k{font-family:var(--fm);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8C8267;margin-top:6px}

.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line-d)}
.faq summary{padding:22px 8px;font-family:var(--fd);font-size:1.3rem;color:#F5EEDC;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--fm);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fb{padding:0 8px 22px;color:#A79C7E;font-weight:300;max-width:64ch}

.cta{border:1px solid #3A2F1A;background:
  radial-gradient(600px 260px at 50% -30%,rgba(200,162,86,.22),transparent 60%),var(--black-2);
  border-radius:22px;padding:72px 48px;text-align:center}
.cta p{margin:16px auto 34px;max-width:48ch;color:#B5AA8B;font-weight:300}

.footer{border-top:1px solid var(--line-d);padding:64px 0 34px;background:var(--black)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--line-d)}
.footer p{font-size:.88rem;color:#8C8267;max-width:32ch;font-weight:300;margin-top:14px}
.footer h4{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer ul{list-style:none;display:grid;gap:11px;font-size:.9rem;color:#A79C7E}
.footer ul a:hover{color:var(--gold-hi)}
.fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;font-family:var(--fm);font-size:.72rem;color:#6B6248;letter-spacing:.06em}

/* ============================================================
   AUTH + FORM PAGES (dark)
   ============================================================ */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(700px 400px at 50% -10%,rgba(200,162,86,.13),transparent 60%),var(--black)}
.auth-card{width:100%;max-width:480px;background:var(--black-2);border:1px solid var(--line-d);border-radius:18px;padding:42px 40px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.auth-card.wide{max-width:640px}
.auth-card .logo{display:flex;justify-content:center;margin-bottom:26px}
.auth-card h1{font-size:1.9rem;text-align:center;color:#F5EEDC}
.auth-card .sub{text-align:center;color:#8C8267;font-size:.92rem;margin:8px 0 30px;font-weight:300}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#A79C7E;margin-bottom:8px}
.input,select.input,textarea.input{width:100%;padding:13px 16px;background:#0F0C07;border:1px solid #3A2F1A;border-radius:9px;color:var(--champagne);font-family:var(--fb);font-size:.95rem;transition:border .15s}
.input:focus{border-color:var(--gold);outline:none}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.auth-foot{text-align:center;margin-top:22px;font-size:.88rem;color:#8C8267}
.auth-foot a{color:var(--gold-hi)}
.flash{padding:13px 18px;border-radius:9px;margin-bottom:20px;font-size:.9rem}
.flash-ok{background:rgba(31,157,91,.14);border:1px solid rgba(31,157,91,.4);color:#7BD88F}
.flash-err{background:rgba(201,59,59,.13);border:1px solid rgba(201,59,59,.4);color:#F09B9B}

/* ============================================================
   APP (dashboard + admin) — light content, dark gold sidebar
   ============================================================ */
/* minmax(0,1fr) everywhere a content column exists — without it a wide
   table forces the grid wider than the viewport and the whole page
   "breaks" (horizontal scroll / crushed layout) on both PC and mobile. */
.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;background:var(--paper);color:var(--ink)}
.main{min-width:0}
.side{background:var(--black);color:#CBC0A2;padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .logo{padding:2px 10px 20px;border-bottom:1px solid var(--line-d);margin-bottom:14px}
.side .logo img{height:36px}
.snav{display:grid;gap:3px}
.snav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;font-size:.93rem;color:#A79C7E;transition:.15s}
.snav a:hover{background:#1C1811;color:#F5EEDC}
.snav a.active{background:var(--grad-gold);color:#171007;font-weight:600}
.snav .lbl{font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#6B6248;padding:16px 13px 6px}
.sfoot{margin-top:auto;border-top:1px solid var(--line-d);padding-top:14px}
.suser{display:flex;gap:10px;align-items:center;padding:6px 10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;color:#171007;font-weight:700;font-size:.8rem;flex-shrink:0}
.suser .n{color:#F5EEDC;font-weight:500;font-size:.9rem;line-height:1.25}
.suser .e{font-size:.72rem;color:#8C8267;font-family:var(--fm)}
.sfoot .out{display:block;text-align:center;margin-top:10px;font-size:.8rem;color:#8C8267;padding:8px;border:1px solid var(--line-d);border-radius:8px}
.sfoot .out:hover{color:#F09B9B;border-color:#5A2E2E}

.main{padding:30px 34px 70px}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.topbar h1{font-size:2rem;color:var(--ink)}
.topbar .sub{font-family:var(--fm);font-size:.78rem;color:var(--muted);margin-top:4px}
.tactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sel{padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:var(--fb);font-size:.9rem;color:var(--ink)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.74rem;font-weight:600;font-family:var(--fm)}
.bg-green{background:var(--green-soft);color:#14683C}
.bg-gold{background:#F6EDD6;color:#8A6A24}
.bg-amber{background:var(--amber-soft);color:#8F5E03}
.bg-red{background:var(--red-soft);color:#932A2A}
.bg-gray{background:#EFECE4;color:#6B6455}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;min-width:0}
.card .k{font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .v{font-family:var(--fd);font-size:2rem;font-weight:600;margin-top:6px;color:var(--ink)}
.card .d{font-family:var(--fm);font-size:.74rem;margin-top:6px;color:var(--muted)}
.card .d.up{color:var(--green)}.card .d.down{color:var(--red)}
.card.hero-card{background:linear-gradient(150deg,#1C1811,#0E0C08);border-color:#3A2F1A}
.card.hero-card .k{color:#A79C7E}
.card.hero-card .v{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.hero-card .d{color:#8C8267}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:24px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.phead h3{font-size:1.25rem;color:var(--ink)}
.phead .hint{font-family:var(--fm);font-size:.74rem;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.two-eq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.chartbox{position:relative;height:290px;min-width:0}canvas{width:100%;height:100%}

table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{text-align:left;font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:13px;border-bottom:1px solid #F2EEE3;vertical-align:middle;overflow-wrap:break-word;min-width:0}
tbody tr:hover{background:#FBF9F3}
td.num,th.num{text-align:right;font-family:var(--fm);font-size:.85rem}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:0}

.btn-ink{background:var(--ink);color:#F5EEDC}
.btn-ink:hover{background:#000}
.btn-line{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--gold-lo)}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-xs{padding:6px 12px;font-size:.78rem;border-radius:7px}

.app .field label{color:var(--muted)}
.app .input,.app select.input,.app textarea.input{background:#fff;border-color:var(--line);color:var(--ink)}
.app .input:focus{border-color:var(--gold-lo)}
.app .flash-ok{background:var(--green-soft);border-color:#BCE3CC;color:#14683C}
.app .flash-err{background:var(--red-soft);border-color:#F0C7C7;color:#932A2A}

.modal-bg{position:fixed;inset:0;background:rgba(14,12,8,.55);display:none;place-items:center;z-index:100;padding:20px}
.modal-bg.open{display:grid}
.modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:92vh;overflow:auto;padding:30px}
.modal h3{margin-bottom:6px}
.modal .msub{color:var(--muted);font-size:.88rem;margin-bottom:20px}

.copybox{display:flex;gap:8px;align-items:center;background:#FBF9F3;border:1px dashed var(--gold-lo);border-radius:9px;padding:12px 14px;font-family:var(--fm);font-size:.82rem;word-break:break-all}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:2rem;margin-bottom:8px}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .hero-grid,.revwrap,.two{grid-template-columns:1fr}
  .cardgrid{grid-template-columns:repeat(2,1fr)}
  .steps4,.cards{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;gap:8px}
  .side .logo{border:0;padding:0 12px 0 4px;margin:0}
  .snav{display:flex}.snav .lbl{display:none}.sfoot{display:none}
}
@media(max-width:700px){
  .nav-links{display:none}
  .cardgrid,.steps4,.cards,.grid2{grid-template-columns:1fr}
  .section{padding:64px 0}.hero{padding:60px 0 48px}
  .fgrid{grid-template-columns:1fr}
  .main{padding:20px 16px 56px}
  .cta{padding:52px 24px}
  .auth-card{padding:32px 24px}
}

/* ============================================================
   v2 — professional app shell refinements
   ============================================================ */
.i{width:18px;height:18px;flex-shrink:0}
.side{width:100%;background:linear-gradient(180deg,#12100B,#0B0906);border-right:1px solid #241E12}
.side .logo{display:flex;justify-content:flex-start}
.snav a{font-weight:400;border:1px solid transparent}
.snav a.active{box-shadow:0 6px 18px rgba(200,162,86,.3)}
.snav a:not(.active):hover{border-color:#241E12}
.sfoot .out{display:flex;align-items:center;justify-content:center;gap:8px}

.topbar{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.topbar h1{letter-spacing:-.01em}
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--fm);font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;vertical-align:middle}
.chip-up{background:var(--green-soft);color:#14683C}
.chip-down{background:var(--red-soft);color:#932A2A}
.chip-flat{background:#EFECE4;color:#8A8272}
.card{transition:box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.card:hover{box-shadow:var(--shadow)}
.card .cicon{position:absolute;top:18px;right:18px;color:#D9CDAA;opacity:.55}
.card .cicon .i{width:22px;height:22px}
.card.hero-card .cicon{color:#5E4E28;opacity:1}
.card.hero-card::after{content:"";position:absolute;inset:auto -30px -50px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(200,162,86,.16),transparent 65%)}

.hbar{height:7px;border-radius:99px;background:#F0ECDF;overflow:hidden;margin-top:6px}
.hbar i{display:block;height:100%;border-radius:99px;background:var(--grad-gold)}
.hbar.green i{background:linear-gradient(90deg,#2FB86E,#1F9D5B)}
.progress-meta{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.7rem;color:var(--muted);margin-top:7px}

.searchbox{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 14px;min-width:250px;color:var(--muted)}
.searchbox input{border:0;outline:0;font-family:var(--fb);font-size:.9rem;width:100%;color:var(--ink);background:transparent}

.action-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.action-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.18s;color:var(--ink)}
.action-card:hover{border-color:var(--gold-lo);transform:translateY(-2px);box-shadow:var(--shadow)}
.action-card .aico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#F6EDD6;color:#8A6A24;flex-shrink:0}
.action-card.warn .aico{background:var(--amber-soft);color:#8F5E03}
.action-card b{display:block;font-size:1.05rem}
.action-card span{font-size:.78rem;color:var(--muted);font-family:var(--fm)}

.rowbar{display:flex;align-items:center;gap:10px}
.rowbar .hbar{flex:1;margin:0;min-width:60px}
.rowbar .val{font-family:var(--fm);font-size:.82rem;white-space:nowrap}

td .subtxt{font-family:var(--fm);font-size:.74rem;color:var(--muted)}
thead th{position:sticky;top:0;background:#fff;z-index:2}
.panel .tscroll{max-height:520px;overflow-y:auto}

.greet{font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo);margin-bottom:4px}
@media(max-width:1024px){.action-strip{grid-template-columns:1fr}}

/* ============================================================
   v3.7 — mobile experience
   ============================================================ */
@media(max-width:1024px){
  .side{position:sticky;top:0;z-index:50;padding:8px 10px;gap:4px;border-bottom:1px solid #241E12}
  .side .logo img{height:28px}
  .side .logo{padding:0 8px}
  .snav{gap:4px}
  .snav a{padding:8px 11px;font-size:.8rem;white-space:nowrap;gap:6px}
  .snav a .i{width:15px;height:15px}
  .sfoot{display:flex!important;flex-direction:row;align-items:center;gap:8px;border-top:1px solid #241E12;margin-top:4px;padding-top:6px}
  .sfoot .suser{display:none}
  .sfoot .out{flex:1;font-size:.78rem;padding:8px}
  .main{padding:20px 16px 60px}
}
@media(max-width:700px){
  .topbar .tactions{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .cards{gap:10px}
  .card{padding:15px 16px}
  .card .v{font-size:1.4rem}
  .card .d{font-size:.72rem}
  .panel{padding:16px 13px}
  .phead{flex-wrap:wrap;gap:8px}
  .chartbox{height:215px}
  table{font-size:.82rem}
  thead th{padding:8px 9px;font-size:.58rem}
  tbody td{padding:9px 9px}
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .copybox{font-size:.72rem;padding:10px 11px}
  .modal{padding:18px 14px;border-radius:12px}
  .flash{font-size:.84rem;padding:11px 13px}
  .sel,.input{font-size:.88rem;padding:10px 12px}
  .btn{padding:11px 18px}
  .btn-sm{padding:9px 14px}
  .action-card b{font-size:.95rem}
}

/* ============================================================
   v3.9.1 — responsive hardening (mobile fixes)
   · pstats3 / pinvform replace inline grid styles that were
     overriding every media query (content clipped on phones)
   · report tables scroll instead of crushing on small screens
   · live-stats numbers shrink to fit 320px phones
   ============================================================ */
.pstats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.pinvform{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}
@media(max-width:700px){
  .pstats3{grid-template-columns:1fr}
  .pinvform{grid-template-columns:1fr}
  .ls{padding:12px 10px}
  .ls .v{font-size:1.15rem}
  .ledger-head{font-size:.62rem}
  .tscroll table{min-width:640px}   /* readable columns + horizontal swipe */
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:400px){
  .gcard p,.gcard h3,.gcard a,.copybox{overflow-wrap:anywhere}   /* long emails/addresses never clip */
}

/* ============================================================
   v3.9.14 — smoother + fully responsive polish
   · tablet (768px) and phone (480px) breakpoints
   · filter forms stack, modals go near-fullscreen, charts resize
   · soft transitions on cards/buttons/links everywhere
   ============================================================ */
*{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.panel,.card,.modal,.copybox{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card:hover{transform:translateY(-2px)}
.btn{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease}
.btn:active{transform:scale(.97)}
a{transition:color .15s ease}
.snav a{transition:background .15s ease,border-color .15s ease}
.hbar i{transition:width .4s ease}
input.input:focus,.sel:focus{box-shadow:0 0 0 3px rgba(200,162,86,.18)}
.sel,.input{transition:border-color .15s ease,box-shadow .15s ease}
@media(max-width:768px){
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .k{padding-right:44px}   /* label never runs under the corner icon on 2-up cards */
  .two{grid-template-columns:1fr}
  .main{padding:16px 12px 60px}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .topbar .tactions{width:100%}
  .topbar .tactions form{flex:1}
  .topbar .tactions .sel{width:100%}
  .phead{flex-direction:column;align-items:flex-start;gap:6px}
  .searchbox{min-width:0;width:100%}
  .panel{padding:16px 12px;border-radius:12px}
  .chartbox{height:230px}
  .flash{font-size:.85rem}
  .modal{max-width:100%;padding:18px 14px;border-radius:14px;margin:0}
  .modal-bg{padding:10px;align-items:start}
  table{font-size:.8rem}
  .tscroll table{min-width:600px}
}
@media(max-width:480px){
  .cards{grid-template-columns:1fr}
  .card{padding:14px}
  .card .v{font-size:1.25rem}
  .card .cicon{top:12px;right:12px}
  .card .k{padding-right:36px}
  .side{padding:6px}
  .snav a{padding:8px 9px;font-size:.76rem}
  .greet{font-size:.62rem}
  .topbar h1{font-size:1.35rem}
  .topbar .sub{font-size:.7rem}
  .action-strip{grid-template-columns:1fr}
  .btn{padding:10px 14px;font-size:.85rem}
  .btn-xs{padding:6px 10px;font-size:.72rem}
  .chartbox{height:200px}
  .empty{padding:30px 12px}
  .ls .v{font-size:1rem}
}
@media print{
  .side,.tactions,.action-strip{display:none!important}
  .main{padding:0}
  .panel{border:1px solid #ddd;box-shadow:none}
}

/* ============================================================
   v4.0 — professional invoices + full responsive rebuild
   · form grids (.payform/.auform/.addform/.ivtform) collapse on
     small screens — no more inline styles fighting media queries
   · content grids use minmax(0,…) so wide tables can never push
     the layout off-screen (the "breaks on PC" bug)
   · mobile nav, topbar and tables hardened for 320px phones
   ============================================================ */
.payform{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end}
.addform{display:grid;grid-template-columns:2fr 2fr auto;gap:12px;align-items:end}
.auform{display:grid;grid-template-columns:1.8fr 1.2fr 1.4fr 1.4fr 1fr auto;gap:12px;align-items:end}
.ivtform{grid-template-columns:1.6fr 1.4fr 1fr 1fr .9fr 1fr auto}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){
  .payform{grid-template-columns:1fr 1fr}
  .auform{grid-template-columns:1fr 1fr 1fr}
  .ivtform{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
  .payform,.addform,.auform,.ivtform{grid-template-columns:1fr}
  .two-eq{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .app{grid-template-columns:minmax(0,1fr)}
  .snav{min-width:0}
  .side{min-width:0}
}
/* keep action buttons usable inside narrow table cells */
td .btn{white-space:nowrap}
td form{min-width:0}
/* filter strips on report pages wrap instead of overflowing */
form[style*="flex"]{max-width:100%}
.field{min-width:0}

/* ============================================================
   v4.2 — sidebar: full menu always reachable + fully responsive
   ============================================================ */
.side{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2E2617 transparent}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:#2E2617;border-radius:4px}
.side::-webkit-scrollbar-track{background:transparent}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.side-drop{display:contents}   /* transparent on desktop — .snav/.sfoot stay flex children of .side */
.side-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;border:1px solid #2E2617;background:#1C1811;color:#E3C878;cursor:pointer}
.side-burger:hover{border-color:#4A3F26}
.side-shade{display:none}
@media(max-width:1024px){
  .side{position:sticky;top:0;z-index:60;height:auto;overflow:visible;padding:12px 14px;box-shadow:0 6px 24px rgba(14,12,8,.25)}
  .side .logo{border:0;padding:0;margin:0}
  .side-burger{display:inline-flex}
  .side .side-drop{display:none}
  .side.open{z-index:61}
  .side.open .side-drop{display:block;position:absolute;top:100%;left:0;right:0;background:#12100B;border:1px solid #2E2617;border-top:0;border-radius:0 0 14px 14px;padding:10px 12px 12px;max-height:calc(100vh - 76px);overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,.5)}
  .side.open .side-drop .snav{display:grid}
  .side.open .side-drop .snav .lbl{display:block}
  .side.open .side-drop .sfoot{display:block!important;margin-top:12px;border-top:1px solid #2E2617;border-radius:0;padding:12px 4px 4px;position:static}
  .side.open .side-drop .suser{display:flex}
  .side.open .side-drop .out{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
  .side-shade{display:none;position:fixed;inset:0;background:rgba(14,12,8,.5);z-index:55}
  .side.open ~ .side-shade, body.menu-open .side-shade{display:block}
}
@media(max-width:700px){
  .modal{padding:20px 16px;border-radius:12px;max-width:96vw}
  .modal-bg{padding:10px}
  .topbar .tactions{width:100%;justify-content:flex-start}
  .pstats3{grid-template-columns:1fr!important;gap:8px}
}
/* v4.2 — never allow document-level horizontal scroll (mobile) */
html,body{max-width:100%;overflow-x:hidden}
.phead .hint{min-width:0;overflow-wrap:anywhere}
.idc-tag{max-width:58%;overflow:hidden;text-overflow:ellipsis}
.idc-foot>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* v4.2.1 — grid hardening: no column can ever push past the viewport */
.two-eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1024px){.two,.two-eq{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.cards{grid-template-columns:1fr}}
.topbar .tactions{flex-wrap:wrap;gap:8px}

/* v4.3 — compact tables + small-screen helpers */
table.compact{font-size:.78rem}
table.compact th{padding:8px 8px}
table.compact td{padding:8px 8px}
table.compact .hbar{height:6px}
@media(max-width:700px){.hide-sm{display:none}}