/* ============================================================
   FlashDex — console shell
   Shared by the member app (/app/) and the operator console (/admin/).

   Same tokens as the marketing site's flashdex.css, so the three
   surfaces read as one product. Colour still means one thing:
     emerald  brand, links, positive action
     gold     live / pending / needs attention
     green    realised value
     red      loss, danger, destructive
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap');

:root{
  --primary:#34D399; --on-primary:#032117;
  --primary-container:rgba(52,211,153,.14);
  --secondary:#F5B74C; --secondary-container:rgba(245,183,76,.13);
  --tertiary:#4ADE80;
  --error:#FF6E6E; --error-container:rgba(255,110,110,.13);

  --bg:#07060E;
  --surface:#0C0B16;
  --surface-2:#100F1C;
  --surface-3:#151325;
  --on-surface:#EDEBF7;
  --on-surface-variant:#A7A2C4;
  --outline:#5A5578;
  --outline-variant:#282542;

  --font:'Roboto',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
  --r-s:8px; --r-m:12px; --r-full:999px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --ease:cubic-bezier(.2,0,0,1);
  --rail:236px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--on-surface);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 88% -8%, rgba(52,211,153,.10), transparent 62%),
    radial-gradient(45% 38% at 4% 8%, rgba(245,183,76,.06), transparent 62%),
    var(--bg);
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
svg{display:block;}
::selection{background:var(--primary);color:var(--on-primary);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* The hidden attribute has to beat every explicit display rule below.
   .shell sets display:grid, which silently overrides the UA stylesheet's
   [hidden]{display:none} and leaves the whole console rendered behind the
   sign-in gate. */
[hidden]{display:none!important;}

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;}
.rail{
  border-right:1px solid var(--outline-variant);background:var(--surface);
  padding:var(--s3) var(--s2);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:var(--s1);overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);}
.brand b{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.brand .mark{width:26px;height:26px;color:var(--primary);flex:none;filter:drop-shadow(0 0 7px rgba(52,211,153,.5));}
.lm-ring{transform-box:fill-box;transform-origin:center;animation:spin 10s linear infinite;}
.lm-bolt{transform-box:fill-box;transform-origin:center;animation:flash 4s ease-in-out infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes flash{0%,86%,100%{transform:scale(1);opacity:1;}90%{transform:scale(.82);opacity:.45;}94%{transform:scale(1.14);}}

.rail .grp{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--outline);margin:var(--s2) 0 6px;padding-left:10px;
}
.rail a.nav{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-s);
  color:var(--on-surface-variant);font-size:14px;transition:.15s var(--ease);cursor:pointer;
}
.rail a.nav:hover{background:var(--surface-3);color:var(--on-surface);}
.rail a.nav.on{background:var(--primary-container);color:var(--primary);font-weight:500;}
.rail a.nav .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none;}
.rail .spacer{flex:1;}
.rail .who{
  border-top:1px solid var(--outline-variant);padding-top:var(--s2);margin-top:var(--s2);
  font-family:var(--mono);font-size:11px;color:var(--on-surface-variant);word-break:break-all;
}

.main{padding:var(--s3) var(--s4);min-width:0;}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);}
.head h1{font-size:clamp(21px,2.3vw,28px);font-weight:700;letter-spacing:-.02em;}
.head p{color:var(--on-surface-variant);font-size:14px;margin-top:4px;}

/* ------------------------------------------------------------
   Cards, stats, tables
   ------------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s2);margin-bottom:var(--s3);}
.card{
  background:var(--surface-2);border:1px solid var(--outline-variant);
  border-radius:var(--r-m);padding:var(--s2) 18px;min-width:0;
}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);}
.card .v{
  margin-top:10px;font-size:clamp(19px,2vw,27px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card .d{margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--outline);}
.card .v.g{color:var(--tertiary);} .card .v.y{color:var(--secondary);} .card .v.r{color:var(--error);}

.panel{
  background:var(--surface-2);border:1px solid var(--outline-variant);
  border-radius:var(--r-m);padding:var(--s2) 18px;margin-bottom:var(--s2);min-width:0;
}
.panel > h2{font-size:16px;font-weight:500;margin-bottom:var(--s2);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}

.tw{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--secondary);
  padding:9px 10px;border-bottom:1px solid rgba(245,183,76,.28);white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid rgba(40,37,66,.8);vertical-align:middle;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:rgba(255,255,255,.02);}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
td.mono,.mono{font-family:var(--mono);}
.muted{color:var(--on-surface-variant);}
.dim{color:var(--outline);}
.pos{color:var(--tertiary);} .neg{color:var(--error);} .warn{color:var(--secondary);}
.empty{padding:34px 10px;text-align:center;color:var(--outline);font-family:var(--mono);font-size:12.5px;}

/* ------------------------------------------------------------
   Pills, buttons, forms
   ------------------------------------------------------------ */
.pill{
  display:inline-block;padding:3px 9px;border-radius:var(--r-full);white-space:nowrap;
  border:1px solid var(--outline-variant);font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-variant);
}
.pill.ok{color:var(--tertiary);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.09);}
.pill.pend{color:var(--secondary);border-color:rgba(245,183,76,.38);background:var(--secondary-container);}
.pill.bad{color:var(--error);border-color:rgba(255,110,110,.4);background:var(--error-container);}
.pill.rank{color:var(--primary);border-color:rgba(52,211,153,.4);background:var(--primary-container);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 17px;border:1px solid transparent;border-radius:var(--r-full);
  font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s var(--ease);white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-fill{background:var(--primary);color:var(--on-primary);}
.btn-fill:hover:not(:disabled){filter:brightness(1.1);}
.btn-out{border-color:var(--outline);color:var(--on-surface);background:transparent;}
.btn-out:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
.btn-danger{border-color:rgba(255,110,110,.5);color:var(--error);background:transparent;}
.btn-danger:hover:not(:disabled){background:var(--error-container);}
.btn-sm{padding:5px 11px;font-size:12px;}

label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:7px;}
input,select,textarea{
  width:100%;padding:10px 13px;background:var(--surface-3);
  border:1px solid var(--outline-variant);border-radius:var(--r-s);
  color:var(--on-surface);font-size:14px;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);}
.field{margin-bottom:var(--s2);}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.row > .field{flex:1;min-width:150px;margin-bottom:0;}

.note{
  padding:11px 14px;border-radius:var(--r-s);font-size:13px;margin-bottom:var(--s2);
  border:1px solid var(--outline-variant);background:var(--surface-3);
}
.note.ok{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08);color:var(--tertiary);}
.note.bad{border-color:rgba(255,110,110,.4);background:var(--error-container);color:var(--error);}
.note.warn{border-color:rgba(245,183,76,.38);background:var(--secondary-container);color:var(--secondary);}

/* progress bar, used for the earnings cap */
.bar{height:7px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin-top:10px;}
.bar > i{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .5s var(--ease);}
/* Near the ceiling the bar stops being good news: at 100% the member has
   stopped earning entirely, so it must not stay a cheerful green. */
.bar.warn > i{background:linear-gradient(90deg,var(--secondary),#E08A2E);}
.bar.full > i{background:linear-gradient(90deg,#E08A2E,var(--error));}

/* ------------------------------------------------------------
   Member dashboard — hero
   One thing leads the page. Everything else is secondary by size.
   ------------------------------------------------------------ */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s2);margin-bottom:var(--s2);}
.hero > .panel{margin:0;display:flex;flex-direction:column;justify-content:space-between;}
.hero .lead{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-surface-variant);}
.bignum{
  font-size:clamp(38px,5.4vw,58px);font-weight:700;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;margin:14px 0 8px;color:var(--tertiary);
}
.bignum.sm{font-size:clamp(26px,3.2vw,36px);color:var(--on-surface);}
.hero .sub{font-size:13.5px;color:var(--on-surface-variant);}
.hero .acts{display:flex;gap:10px;margin-top:var(--s2);flex-wrap:wrap;}

/* ring for the cap */
.ring{display:flex;align-items:center;gap:18px;margin:var(--s2) 0;}
.ring svg{width:96px;height:96px;flex:none;transform:rotate(-90deg);}
.ring .track{fill:none;stroke:var(--surface-3);stroke-width:9;}
.ring .fill{fill:none;stroke:var(--primary);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease);}
.ring.warn .fill{stroke:var(--secondary);}
.ring.full .fill{stroke:var(--error);}
.ring .pc{font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ring .of{font-family:var(--mono);font-size:11.5px;color:var(--on-surface-variant);margin-top:4px;}

/* ------------------------------------------------------------
   Income breakdown — a stacked bar beats a table for "where did
   my money come from", which is the question members actually ask.
   ------------------------------------------------------------ */
.split{display:flex;height:13px;border-radius:var(--r-full);overflow:hidden;background:var(--surface-3);margin:var(--s2) 0 var(--s2);}
.split > span{display:block;height:100%;transition:width .6s var(--ease);}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px 18px;}
.legend .item{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.legend .swatch{width:10px;height:10px;border-radius:3px;margin-top:5px;flex:none;}
.legend .lbl{font-size:13px;color:var(--on-surface-variant);line-height:1.35;}
.legend .amt{display:block;color:var(--on-surface);font-weight:500;font-variant-numeric:tabular-nums;}

/* compact stat strip, replaces a second row of oversized cards */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:var(--outline-variant);border:1px solid var(--outline-variant);border-radius:var(--r-m);overflow:hidden;}
.strip > div{background:var(--surface-2);padding:14px 16px;min-width:0;}
.strip .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);}
.strip .v{margin-top:7px;font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.strip .d{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--outline);}

/* next milestone */
.miles{display:flex;flex-direction:column;gap:10px;}
.mile{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--outline-variant);border-radius:var(--r-s);background:var(--surface-3);}
.mile.done{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.06);}
.mile .n{font-family:var(--mono);font-size:12px;color:var(--secondary);min-width:26px;}
.mile .t{flex:1;font-size:13.5px;min-width:0;}
.mile .t b{color:var(--on-surface);}

@media (max-width:900px){ .hero{grid-template-columns:1fr;} }

/* ------------------------------------------------------------
   Sign-in
   ------------------------------------------------------------ */
.gate{min-height:100vh;display:grid;place-items:center;padding:var(--s3);}
.gate .box{width:100%;max-width:400px;background:var(--surface-2);border:1px solid var(--outline-variant);border-radius:var(--r-m);padding:var(--s4) var(--s3);}
.gate .brand{justify-content:center;margin-bottom:var(--s3);}
.gate h1{font-size:19px;font-weight:500;text-align:center;margin-bottom:6px;}
.gate .sub{text-align:center;color:var(--on-surface-variant);font-size:13px;margin-bottom:var(--s3);}
.gate .btn{width:100%;margin-top:6px;}
.gate .alt{text-align:center;margin-top:var(--s2);font-size:13px;color:var(--on-surface-variant);}
.gate .alt a{color:var(--primary);cursor:pointer;}

/* ------------------------------------------------------------
   Genealogy
   ------------------------------------------------------------ */
.tree{font-family:var(--mono);font-size:12.5px;}
.tree .node{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);
  border-left:2px solid var(--outline-variant);margin-bottom:3px;background:var(--surface-3);
}
.tree .node:hover{border-left-color:var(--primary);}
.tree .node .code{color:var(--primary);min-width:78px;}
.tree .node .meta{color:var(--outline);font-size:11px;}

.levelrow{display:flex;align-items:center;gap:12px;padding:9px 10px;border-bottom:1px solid rgba(40,37,66,.8);font-family:var(--mono);font-size:12.5px;}
.levelrow .lv{color:var(--secondary);min-width:44px;}
.levelrow .ct{min-width:70px;color:var(--on-surface);}
.levelrow .pc{min-width:56px;text-align:right;}
.levelrow .q{margin-left:auto;}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  .rail{
    position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--outline-variant);padding:12px var(--s2);
  }
  .rail .brand{margin-bottom:0;margin-right:var(--s2);}
  .rail .grp,.rail .spacer,.rail .who{display:none;}
  .rail a.nav{padding:7px 11px;font-size:13px;}
  .main{padding:var(--s2) var(--s2) var(--s4);}
}
@media (max-width:560px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .card{padding:13px;}
  .card .v{font-size:18px;}
  .head{align-items:flex-start;}
  table{font-size:12.5px;}
  th,td{padding:8px 7px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}