/* portal.css — U.CASH Portal design system (dark default + light toggle).
   Premium gold/glass/sharp DNA shared with pay.u.cash + swap.u.cash. */

/* ---------- DARK (default) ---------- */
:root{
  --bg:#000; --bg-2:#0d0d0d;
  --panel:rgba(255,255,255,.035);
  --ink:#fff; --mut:rgba(255,255,255,.60); --mut-2:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.09); --line-gold:rgba(204,153,51,.22);
  --g:#cc9933; --g2:#e6b347; --g3:#b38829; --g-ink:#e6b347;
  --radius:0;
  --shadow-card:0 24px 60px -24px rgba(0,0,0,.85);
  --glow:0 0 38px rgba(204,153,51,.20);
  --maxw:1080px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sel-bg:#cc9933; --sel-ink:#000;
  --in:#5fd07a; --out:#ff7a6b; --ok:#5fd07a; --bad:#ff7a6b;
}
/* ---------- LIGHT ---------- */
html.light{
  --bg:#faf7f2; --bg-2:#fff;
  --panel:#fff;
  --ink:#1c1a17; --mut:#6b665e; --mut-2:#9a938a;
  --line:#ece4d6; --line-gold:rgba(163,122,41,.25);
  --g:#a37a29; --g2:#c69a3f; --g3:#8a6620; --g-ink:#6b4f15;
  --shadow-card:0 1px 3px rgba(28,26,23,.06);
  --glow:0 0 28px rgba(163,122,41,.10);
  --sel-bg:#a37a29; --sel-ink:#fff;
  --in:#1f9d48; --out:#c0392b; --ok:#1f9d48; --bad:#c0392b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:dark}
html.light{color-scheme:light}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--sel-bg); color:var(--sel-ink)}
a{color:var(--g2); text-decoration:none}
a:hover{color:var(--g-ink)}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.center{max-width:560px; margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; font-size:16px}
.brand img{height:26px; width:auto; display:block}
.brand .portal{color:var(--mut); font-weight:500; font-size:13px}
.nav-actions{display:flex; align-items:center; gap:14px}

/* theme toggle */
.theme-toggle{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; color:var(--ink); transition:border-color .15s
}
.theme-toggle:hover{border-color:var(--g)}
.theme-toggle svg{width:18px; height:18px}

/* ---------- hero ---------- */
.hero{position:relative; padding:72px 0 56px; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(204,153,51,.16), transparent 70%),
    radial-gradient(40% 35% at 78% 30%, rgba(204,153,51,.10), transparent 70%);
}
html.light .hero::before{background:radial-gradient(55% 45% at 50% 0%, rgba(163,122,41,.12), transparent 70%)}
.eyebrow{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g2); margin-bottom:14px
}
.eyebrow .dot{display:inline-block; width:6px; height:6px; background:var(--g); border-radius:50%; margin-right:8px; vertical-align:middle; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.grad-gold{
  background:linear-gradient(100deg,var(--g3),var(--g2) 45%,#fff6e0 68%,var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html.light .grad-gold{background:linear-gradient(100deg,var(--g3),var(--g2) 60%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero h1{font-size:clamp(34px,6vw,52px); margin-bottom:14px}
.hero .lead{font-size:18px; color:var(--mut); max-width:480px; margin:0 auto 30px}
.hero .lead strong{color:var(--ink); font-weight:600}

/* hero two-column on wide screens: text + card */
@media(min-width:880px){
  .hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; text-align:left}
  .hero-grid .lead{margin-left:0}
  .hero-grid .eyebrow{margin-bottom:14px}
}

/* ---------- glass card ---------- */
.glass{
  background:var(--panel);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-gold);
  box-shadow:var(--shadow-card);
  padding:28px;
}
.glass h2{font-size:22px; margin-bottom:4px}
.glass .sub{color:var(--mut); font-size:14px; margin:0 0 22px}
.card-stack > * + *{margin-top:16px}
section.hero + .wrap{padding-bottom:72px}

/* ---------- forms ---------- */
label{display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); margin:0 0 7px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 13px; font-size:15px; font-family:var(--sans);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:var(--mut-2)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--g); box-shadow:0 0 0 1px var(--g)}
.field{margin-bottom:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius); border:1px solid transparent;
  padding:12px 20px; font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s;
}
.btn-gold{background:var(--g); color:#000}
.btn-gold:hover{background:var(--g2); color:#000}
html.light .btn-gold{color:#fff}
html.light .btn-gold:hover{color:#fff}
.btn-ghost{background:transparent; color:var(--mut); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--g); color:var(--g2)}
.btn-block{display:flex; width:100%}
.btn-sm{padding:7px 13px; font-size:13px}

/* ---------- alerts ---------- */
.note,.err{padding:11px 13px; border-radius:var(--radius); font-size:14px; margin-bottom:16px; border:1px solid transparent}
.note{background:color-mix(in srgb,var(--ok) 14%, transparent); border-color:color-mix(in srgb,var(--ok) 35%, transparent); color:var(--ok)}
.err{background:color-mix(in srgb,var(--bad) 14%, transparent); border-color:color-mix(in srgb,var(--bad) 35%, transparent); color:var(--bad)}
.muted{color:var(--mut)}
.small{font-size:13px}
.links-row{margin-top:16px; font-size:14px; color:var(--mut)}
.links-row a{margin:0 6px}

/* ---------- dashboard ---------- */
.bal-card .bal{font-family:var(--mono); font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1}
.bal-card .bal .unit{font-family:var(--sans); font-size:15px; color:var(--mut); font-weight:500; margin-left:8px; letter-spacing:0}
.bal-card .meta{color:var(--mut); font-size:13px; margin-top:10px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.bal-card .consistency{color:var(--mut-2); font-size:12px; margin-top:8px}

/* ---------- pills ---------- */
.pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:capitalize; border:1px solid transparent}
.pill.active{background:color-mix(in srgb,var(--ok) 16%, transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%, transparent)}
.pill.banned{background:color-mix(in srgb,var(--bad) 16%, transparent); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 30%, transparent)}
.pill.frozen{background:color-mix(in srgb,var(--g) 18%, transparent); color:var(--g2); border-color:color-mix(in srgb,var(--g) 35%, transparent)}
.pill.inactive{background:var(--panel); color:var(--mut); border-color:var(--line)}
.pill.Completed{background:color-mix(in srgb,var(--ok) 16%, transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%, transparent)}
.pill.Processing{background:var(--panel); color:var(--mut); border-color:var(--line)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line)}
th{color:var(--mut); font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase}
td.num,th.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
td.in{color:var(--in)} td.out{color:var(--out)}
.tbl-empty{color:var(--mut); padding:18px 10px}

/* ---------- pager ---------- */
.pager{display:flex; flex-wrap:wrap; gap:5px; margin-top:18px}
.pager a,.pager span{padding:6px 11px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); font-size:13px; min-width:34px; text-align:center}
.pager a:hover{border-color:var(--g); color:var(--g2)}
.pager .cur{background:var(--g); color:#000; border-color:var(--g)}
html.light .pager .cur{color:#fff}
.pager .gap{border-color:transparent; color:var(--mut-2)}

/* ---------- admin specifics ---------- */
.stats{display:flex; gap:28px; flex-wrap:wrap}
.stats .stat b{display:block; font-family:var(--mono); font-size:24px}
.stats .stat span{color:var(--mut); font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-top:4px}
.filters > div label{margin-bottom:5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.form-inline{display:flex; gap:8px; align-items:end; flex-wrap:wrap}
hr.soft{border:0; border-top:1px solid var(--line); margin:16px 0}

footer.foot{text-align:center; color:var(--mut-2); font-size:12px; padding:28px 0 40px}

/* theme-aware brand logo (dark mode shows the light logo, light mode the dark logo) */
.brand .logo-d{display:block} .brand .logo-l{display:none}
html.light .brand .logo-d{display:none} html.light .brand .logo-l{display:block}

/* ---------- nice-to-haves: password toggle, validation, link hover ---------- */
.pw-field{position:relative}
.pw-field input{padding-right:44px}
.pw-toggle{position:absolute; right:2px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:var(--mut); cursor:pointer; padding:9px; line-height:0; display:inline-flex}
.pw-toggle:hover{color:var(--g2)}
.pw-toggle svg{width:18px; height:18px}
.hint{font-size:12px; margin:-6px 0 12px; min-height:15px}
.hint.ok{color:var(--ok)} .hint.bad{color:var(--bad)}
a:hover{text-decoration:underline}
.brand:hover,.brand,.btn,.btn:hover,.theme-toggle,.theme-toggle:hover{text-decoration:none}

/* ---------- MOBILE FRIENDLY (logged-in dashboard + admin) ---------- */
@media(max-width:640px){
  /* topbar: condense, truncate email */
  .topbar .wrap{height:auto; padding:10px 14px; flex-wrap:wrap; gap:6px}
  .nav-actions{gap:8px; flex-wrap:wrap}
  .nav-actions .muted.small{max-width:130px; font-size:11px}
  .brand img{height:22px}
  .brand .portal{font-size:11px}

  /* balance card: slightly smaller */
  .bal-card .bal{font-size:30px}

  /* stats: stack */
  .stats{gap:18px}
  .stats .stat b{font-size:20px}

  /* responsive table → stacked cards */
  .rtable thead{display:none}
  .rtable, .rtable tbody, .rtable tr, .rtable td{display:block; width:100%}
  .rtable tr{margin-bottom:10px; border:1px solid var(--line-gold); padding:6px 12px}
  .rtable td{display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:5px 0; text-align:right; font-size:14px}
  .rtable td::before{content:attr(data-label); color:var(--mut); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-right:auto}
  .rtable td.num{font-variant-numeric:tabular-nums}

  /* reduce card padding on mobile */
  .glass{padding:18px}
  .hero{padding:48px 0 36px}
  .hero h1{font-size:30px}
  .hero .lead{font-size:16px}

  /* pager: tighter */
  .pager a, .pager span{padding:5px 8px; font-size:12px}
}

/* ---------- multi-asset balance card grid ---------- */
.bal-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:14px}
.bal-grid .glass{padding:20px; display:flex; flex-direction:column; gap:6px}
.asset-sym{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:7px}
.asset-sym::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%}
.asset-sym.ucash::before{background:var(--g2)}
.asset-sym.btc::before{background:#f7931a}
.asset-sym.eth::before{background:#627eea}
.asset-sym.usdt::before{background:#26a17b}
.asset-sym.usdc::before{background:#2775ca}
.bal-grid .amt{font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.bal-grid .amt .unit{font-family:var(--sans); font-size:12px; color:var(--mut); font-weight:500; margin-left:4px}
@media(max-width:640px){ .bal-grid{grid-template-columns:repeat(2,1fr)} }