/* Fenzy design system — dark blue. Shared by landing, auth and workspace. */

:root{
  --bg:#080c15;
  --bg-2:#0a1020;
  --surface:#0d1424;
  --surface-2:#111a2c;
  --surface-3:#16203a;
  --line:rgba(150,175,215,.13);
  --line-soft:rgba(150,175,215,.075);
  --text:#e9effa;
  --text-2:#a5b4cf;
  --text-3:#6f8099;
  --blue:#2f6df6;
  --blue-2:#5b96ff;
  --blue-soft:rgba(47,109,246,.12);
  --up:#33d69f;
  --down:#f96a72;
  --warn:#f2b544;
  --r:12px;
  --r-lg:18px;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.14;letter-spacing:-.022em;font-weight:700}
p{margin:0}
em{font-style:normal;color:var(--blue-2)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(47,109,246,.35)}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(150,175,215,.16);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(150,175,215,.3);background-clip:content-box}

/* semantic colour helpers (green/red kept for existing workspace markup) */
.up,.green{color:var(--up)}
.down,.red{color:var(--down)}

/* ── buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:9px;white-space:nowrap;
  background:var(--blue);color:#fff;font-size:14px;font-weight:600;
  border:1px solid transparent;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.btn:hover{background:#3b7bff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:rgba(150,175,215,.07);border-color:rgba(150,175,215,.3)}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn.sm{height:36px;padding:0 15px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── labels, tags, pills ─────────────────────────────── */
.tag{
  display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
}
.badge,.status-pill,.verified{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  padding:4px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line);background:rgba(150,175,215,.06);color:var(--text-2);
}
.badge{border-color:rgba(91,150,255,.28);background:var(--blue-soft);color:var(--blue-2)}
.badge.live,.status-pill.on,.verified{
  border-color:rgba(51,214,159,.3);background:rgba(51,214,159,.09);color:var(--up);
}

/* ── data table ──────────────────────────────────────── */
.trade-table{overflow:auto;border:1px solid var(--line-soft);border-radius:var(--r)}
.trade-table table{width:100%;border-collapse:collapse;min-width:640px}
.trade-table th{
  position:sticky;top:0;z-index:1;text-align:left;padding:11px 13px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;
}
.trade-table td{padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:13px;white-space:nowrap}
.trade-table td small{display:block;font-size:10.5px;color:var(--text-3)}
.trade-table tbody tr:last-child td{border-bottom:0}
.trade-table tbody tr:hover{background:rgba(91,150,255,.05)}
.trade-table .r{text-align:right}
.trade-table .num{font-family:var(--mono);font-size:12.5px}
.trade-table .dim{color:var(--text-3)}

.side{display:inline-block;min-width:42px;text-align:center;padding:3px 7px;border-radius:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em}
.side.buy{background:rgba(51,214,159,.11);color:var(--up);border:1px solid rgba(51,214,159,.24)}
.side.sell{background:rgba(249,106,114,.1);color:var(--down);border:1px solid rgba(249,106,114,.22)}
.reason{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--text-2);padding:3px 7px;border-radius:5px;background:rgba(150,175,215,.07);border:1px solid var(--line-soft)}

/* ── form fields ─────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field>span,.control-label,.select-label{
  display:block;margin-bottom:8px;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
input[type=text],input[type=password],input[type=number],input[type=tel],select{
  width:100%;height:44px;padding:0 13px;border-radius:9px;
  background:rgba(8,12,21,.6);border:1px solid var(--line);color:var(--text);
  font-size:14px;outline:0;transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,109,246,.16)}
input::placeholder{color:var(--text-3)}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* ── flash / notices ─────────────────────────────────── */
.flash{
  margin-bottom:20px;padding:12px 16px;border-radius:var(--r);font-size:13.5px;
  border:1px solid rgba(91,150,255,.3);background:var(--blue-soft);color:var(--blue-2);
}
.flash.submitted,.flash.saved{border-color:rgba(51,214,159,.3);background:rgba(51,214,159,.08);color:var(--up)}
.flash.error,.flash.broker_fields,.flash.multiplier{border-color:rgba(249,106,114,.32);background:rgba(249,106,114,.08);color:var(--down)}
.flash.pending,.flash.initialize,.flash.not_active{border-color:rgba(242,181,68,.3);background:rgba(242,181,68,.08);color:var(--warn)}
.error{
  margin-bottom:18px;padding:12px 14px;border-radius:var(--r);font-size:13px;
  border:1px solid rgba(249,106,114,.32);background:rgba(249,106,114,.08);color:#ffa3a8;
}

/* ── brand lockup ────────────────────────────────────── */
.brand,.client-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:.13em}
.brand img,.client-brand img{width:26px;height:26px;object-fit:contain}
.brand b,.brand span span,.client-brand span{color:var(--blue-2)}

/* ── reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}