/* Pro checkbox styling (site-wide) */
input[type="checkbox"]{
  accent-color:#10b981; /* brand green */
  width:16px; height:16px; border-radius:4px;
  box-shadow:0 0 0 0 rgba(16,185,129,0);
  transition: box-shadow .18s ease, transform .12s ease;
}
input[type="checkbox"]:focus{ outline:0; box-shadow:0 0 0 6px rgba(16,185,129,.12); }
input[type="checkbox"]:active{ transform: scale(.96); }
/* ================================
   TradeNova — Global Stylesheet
   Replace your entire style.css with this
   ================================ */

/* ==== Base / Foundation ==== */
:root{
  --bg:#0b0f14; --panel:#0f1720; --muted:#8892a6; --text:#e5ecf5;
  --accent:#10b981; --danger:#ef4444; --warn:#f59e0b;
  --gold:#fcd34d; /* added */
}
*{box-sizing:border-box}
html,body{
  margin:0; height:100%;
  background:var(--bg); color:var(--text);
  font-size:1rem;              /* follows html */
  line-height:1.5;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

a{color:inherit;text-decoration:none}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:24px}
.grid{display:grid;gap:16px}
.row{display:grid;gap:16px}
.row.cols-2{grid-template-columns:1fr 1fr}
.row.cols-3{grid-template-columns:1.2fr 2fr 1.2fr}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid #121a23;
  position:sticky; top:0; background:rgba(11,15,20,.9);
  backdrop-filter:saturate(1.2) blur(8px); z-index:50
}
.topbar.topbar-lg{ padding:16px 24px; gap:24px }
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.search{flex:1}
.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:#cfd6e4; font-weight:600 }
.mainnav a:hover{ color:#fff }
.auth-actions{ display:flex; gap:10px }

/* Buttons & inputs */
.btn{
  padding:10px 14px; border-radius:10px; background:#18202b;
  border:1px solid #263244; color:var(--text); cursor:pointer
}
.btn:hover{ filter:brightness(1.05) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#04140e; font-weight:700 }
.btn.ghost{ background:#0c131b; border:1px solid #253141; color:#cfd6e4 }
.btn-lg{ padding:14px 18px; font-weight:700; border-radius:12px }
.w-full{ width:100% }

/* NEW: gold button + header icon buttons */
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#0b0f14; font-weight:700 }
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid #263244; border-radius:10px;
  background:#18202b; color:#e5ecf5; text-decoration:none
}
.iconbtn:hover{ filter:brightness(1.06) }

.input{
  width:100%; padding:12px 14px; background:#0c131b;
  border:1px solid #253141; border-radius:10px; color:var(--text)
}
.input:focus{ outline:none; border-color:#2f3f52; box-shadow:0 0 0 2px rgba(16,185,129,0.15) }
.input-lg{ padding:14px 16px; font-size:16px; border-radius:12px }

/* Cards, tables, badges, notices */
.card{
  background:var(--panel); border:1px solid #1b2430; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.card .hd{ padding:14px 16px; border-bottom:1px solid #1b2430; font-weight:600 }
.card .bd{ padding:16px }

.table{ width:100%; border-collapse:collapse }
.table th,.table td{ padding:10px; border-bottom:1px solid #1b2430; color:#cfd6e4 }

.badge{ padding:4px 8px; border-radius:8px }
.badge.green{ background:rgba(16,185,129,.15); color:var(--accent) }
.badge.red{ background:rgba(239,68,68,.15); color:var(--danger) }

.notice{
  padding:10px 14px; border:1px dashed #2b3748; border-radius:12px;
  background:#0c131b; color:#9fb1c9
}
.notice.danger{
  background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.35); color:#ffb4b4
}

/* =========================
   Auth — Premium Layout
   ========================= */
.auth-bg{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,0.15), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(59,130,246,0.10), transparent 60%),
    var(--bg);
}

.auth-wrap{
  max-width: 1100px; margin: 40px auto;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 28px; padding: 0 20px;
}

.auth-brand{
  background: linear-gradient(180deg, #0f1720 0%, #0b1119 100%);
  border: 1px solid #1b2430; border-radius: 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.brand-inner{ padding: 36px }
.brand-mark{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.brand-mark img{ width:28px; height:28px }
.brand-mark h1{ margin:0; font-size:22px; font-weight:700 }
.brand-sub{ color:#9fb1c9; margin:6px 0 16px 0 }
.brand-points{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.brand-points li{
  padding:8px 10px; border:1px solid #1b2430; border-radius:10px; color:#cfd6e4;
  background: #0c131b;
}

/* Glass card */
.glass{
  background: rgba(17,24,39,0.6);
  border:1px solid #1b2430; border-radius:18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px) saturate(1.1);
}
.auth-card{ display:flex; align-items:center }
.auth-card-inner{ width:100%; padding: 32px }
.auth-title{ margin:0 0 16px 0; font-size:20px; font-weight:700 }

.form-grid{ display:grid; gap:12px }
.pw-field{ display:grid; gap:6px }
.pw-input{ position:relative }
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer; font-size:16px; color:#9fb1c9;
}
.link, .link-muted{ text-decoration:none; cursor:pointer }
.link{ color:#e5ecf5 }
.link-muted{ color:#9fb1c9 }
.link:hover{ text-decoration:underline }
.muted{ color:#9fb1c9 }

.auth-row{ display:flex; justify-content:space-between; align-items:center; margin:4px 0 8px }
.auth-row.center{ justify-content:center; gap:8px }

/* =========================
   Landing / Tier-1 Hero
   ========================= */
.landing-bg{
  background:
    radial-gradient(900px 600px at 70% 0%, rgba(253, 224, 71, 0.06), transparent 60%),
    radial-gradient(1000px 800px at -10% 110%, rgba(16,185,129,0.08), transparent 60%),
    var(--bg);
}

.hero-grid{
  display:grid; gap:32px; align-items:start;
  grid-template-columns: 1.2fr 1fr; padding-top:24px;
}
.hero-left{ padding: 40px 8px 24px 8px }
.hero-big{
  font-size: clamp(40px, 9vw, 108px);
  line-height: 0.92; letter-spacing: -0.5px; margin: 0 0 22px 0;
}
.hero-form{ display:flex; gap:12px; margin: 8px 0 14px 0 }

.alt-sign{ display:flex; gap:16px; align-items:center; margin-top:10px }
.oauth-icons{ display:flex; gap:10px }

.hero-right{ position:relative }
.mkts{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.mkts li{
  display:grid; grid-template-columns: 70px 1fr auto; gap:10px;
  align-items:center; padding:10px 12px; border:1px solid #1b2430; border-radius:12px;
  background:#0c131b;
}
.mkts .sym{ font-weight:700; color:#e5ecf5 }
.mkts .price{ color:#cfd6e4 }
.newslist{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.newslist a{ color:#cfd6e4 }
.newslist a:hover{ text-decoration:underline }

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
}
@media (max-width: 960px){
  .auth-wrap{ grid-template-columns: 1fr }
  .auth-brand{ order:2 }
  .auth-card{ order:1 }
}

/* Force auth buttons to the far right in the top bar */
.auth-actions { margin-left: auto; display: flex; gap: 10px; }

/* ===== Dashboard Layout ===== */
.dash-grid{
  display:grid; grid-template-columns: 240px 1fr 360px; gap:16px; align-items:start;
}
.sidebar .side-nav{ display:grid; gap:8px }
.sidebar .side-nav a{ color:#cfd6e4; padding:8px 10px; border:1px solid #1b2430; border-radius:10px; background:#0c131b }
.sidebar .side-nav a.active{ background:#16202c; border-color:#263244 }

.watchlist{ list-style:none; padding:0; margin:8px 0 0 0; display:grid; gap:8px }
.watchlist li{ display:flex; align-items:center; justify-content:space-between; border:1px solid #1b2430; border-radius:10px; padding:8px 10px; background:#0c131b }

/* Orderbook grid */
.orderbook{ display:grid; grid-template-columns: 1fr 1fr; gap:16px }

/* Simple modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px); z-index:90;
}
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100 }
.modal-card{ width: 420px; }

/* ===== App shell ===== */
.app-grid{ display:grid; grid-template-columns: 240px 1fr 320px; gap:16px; align-items:start; }
.rightcol{ display:grid; gap:16px; }
.sidebar .side-nav{ display:grid; gap:8px }
.sidebar .side-nav a{ color:#cfd6e4; padding:8px 10px; border:1px solid #1b2430; border-radius:10px; background:#0c131b }
.sidebar .side-nav a.active{ background:#16202c; border-color:#263244 }
.orderbook{ display:grid; grid-template-columns: 1fr 1fr; gap:16px }

/* ===== Post-login Home (Binance-style) ===== */
.home-grid{
  display:grid; grid-template-columns: 1.2fr 0.9fr; gap:24px; align-items:start; padding-top:20px;
}
.home-left{ padding: 8px 0; }
.home-big{
  font-size: clamp(36px, 8vw, 92px);
  line-height: .95; letter-spacing:-.5px; margin: 0 0 18px 0;
}
.gold-text{ color: var(--gold); }
.home-balance .bd{ padding:18px }
.balance-row{ display:flex; align-items:baseline; gap:12px; margin:6px 0 8px }
.est-btc{ font-size:40px; font-weight:800 }
.est-fiat{ color:#cfd6e4; font-weight:600 }
.stat-line{ color:#9fb1c9 }
.home-actions{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }
.home-tickernote{ margin-top:16px; color:#9fb1c9 }

@media (max-width:980px){
  .home-grid{ grid-template-columns: 1fr; }
}
/* ===== Header user menu ===== */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; width:36px; border-radius:10px;
  background:#0c131b; border:1px solid #253141; color:#cfd6e4; cursor:pointer;
}
.icon-btn:hover{ filter:brightness(1.05) }
.notif-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  padding:0 6px; border-radius:9px; background:var(--accent); color:#04140e;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:1px solid #0a141f;
}
.userbox{ position:relative }
.avatar-btn{
  display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px;
  background:#0c131b; border:1px solid #253141; color:#e5ecf5; cursor:pointer;
}
.avatar{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#17212c; border:1px solid #2a374a; font-weight:800 }
.menu{
  position:absolute; right:0; top: calc(100% + 8px); width:260px;
  background:var(--panel); border:1px solid #1b2430; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); display:none; z-index:60;
}
.menu.open{ display:block }
.menu-hd{ padding:12px 12px 6px 12px; border-bottom:1px solid #1b2430 }
.menu-hd .email{ font-weight:700 }
.menu-row{ padding:10px 12px; border-bottom:1px solid #1b2430 }
.menu-row .menu-balance{ font-weight:800; font-size:16px }
.menu-links{ padding:8px 8px 10px 8px; display:grid; gap:4px }
.menu-links a{
  padding:8px 10px; border-radius:8px; color:#cfd6e4; display:block;
}
.menu-links a:hover{ background:#16202c; color:#fff }
.tiny{ font-size:12px }
/* ===== Header user menu (for topbar_app.php) ===== */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; width:36px; border-radius:10px;
  background:#0c131b; border:1px solid #253141; color:#cfd6e4; cursor:pointer;
}
.icon-btn:hover{ filter:brightness(1.05) }
.notif-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  padding:0 6px; border-radius:9px; background:var(--accent); color:#04140e;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:1px solid #0a141f;
}
.userbox{ position:relative }
.avatar-btn{
  display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px;
  background:#0c131b; border:1px solid #253141; color:#e5ecf5; cursor:pointer;
}
.avatar{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#17212c; border:1px solid #2a374a; font-weight:800 }
.menu{
  position:absolute; right:0; top: calc(100% + 8px); width:260px;
  background:var(--panel); border:1px solid #1b2430; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); display:none; z-index:60;
}
.menu.open{ display:block }
.menu-hd{ padding:12px 12px 6px 12px; border-bottom:1px solid #1b2430 }
.menu-hd .email{ font-weight:700 }
.menu-row{ padding:10px 12px; border-bottom:1px solid #1b2430 }
.menu-row .menu-balance{ font-weight:800; font-size:16px }
.menu-links{ padding:8px 8px 10px 8px; display:grid; gap:4px }
.menu-links a{ padding:8px 10px; border-radius:8px; color:#cfd6e4; display:block }
.menu-links a:hover{ background:#16202c; color:#fff }
.tiny{ font-size:12px }
/* Header notification bar */
/* Header notification bar (shows under the sticky topbar) */
.notifybar{
  position: fixed; left:0; right:0; top:0;            /* we’ll set the real top in JS */
  padding:10px 14px; text-align:center; z-index: 2000; /* higher than the topbar */
  background:#0f1720; border-bottom:1px solid #1b2430; color:#cfd6e4;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transform: translateY(-100%);                        /* hidden by default */
  transition: transform .2s ease;
}
.notifybar.ok{ background: rgba(16,185,129,0.15); color:#d7fff0; border-bottom-color: rgba(16,185,129,0.35) }
.notifybar.err{ background: rgba(239,68,68,0.15); color:#ffd7d7; border-bottom-color: rgba(239,68,68,0.35) }

/* ——— Global type/zoom normalization ——— */
html { font-size: 16px; }

@media (max-width: 1600px) { html { font-size: 15px; } }
@media (max-width: 1440px) { html { font-size: 14px; } }

html{
  /* global base — same feel as before */
  font-size: 14px;
}

body{
  margin:0; height:100%;
  background:var(--bg); color:var(--text);
  font-size: 1rem;            /* follows html (14px) */
  line-height: 1.5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}


/* Tighter scale for 1280px and below */
@media (max-width: 1280px) { html { font-size: 13px; } }
@media (max-width: 1150px) { html { font-size: 12.5px; } }
@media (max-width: 1024px) { html { font-size: 12px; } }

/* Slightly denser components when space is tight */
@media (max-width: 1280px) {
  .card { padding: 12px; }
  .btn  { padding: 8px 12px; font-size: .95rem; }
  .input, .select { height: 36px; font-size: .95rem; }
  /* If you have a TradingView wrapper, shrink height a touch */
  .tv-container, .tv-chart { height: 420px !important; }
}

/* Tighter scale for medium-width desktops */
@media (max-width:1280px){ html { font-size: 13px; } }
@media (max-width:1150px){ html { font-size: 12.5px; } }
@media (max-width:1024px){ html { font-size: 12px; } }

/* Slightly denser components when space is tight */
@media (max-width:1280px){
  .card{ padding:12px; }
  .btn{ padding:8px 12px; font-size:.95rem; }
  .input, .select{ height:36px; font-size:.95rem; }
}
/* Medium desktops (tighten progressively) */
@media (max-width: 1280px){ html { font-size: 13px; } }
@media (max-width: 1150px){ html { font-size: 12.5px; } }
@media (max-width: 1024px){ html { font-size: 12px; } }

/* Slightly denser components when space is tight */
@media (max-width: 1280px){
  .card{ padding:12px; }
  .btn{ padding:8px 12px; font-size:.95rem; }
  .input, .select{ height:36px; font-size:.95rem; }
}
/* =========================
   Markets page — compact skin
   ========================= */
.markets-compact .container{ max-width:1280px; }
.markets-compact .grid,
.markets-compact .row{ gap:12px; }

.markets-compact h1,
.markets-compact .page-title{
  font-size:28px; line-height:1.15; margin:8px 0 10px;
}

/* chips / pills (top ticker & filters) */
.markets-compact .pill,
.markets-compact .filters .chip{ padding:6px 10px; font-size:12px; border-radius:999px; }

/* cards tighter */
.markets-compact .card{ border-radius:12px; }
.markets-compact .card .hd{ padding:10px 12px; }
.markets-compact .card .bd{ padding:12px; }

/* table density */
.markets-compact .table th,
.markets-compact .table td{ padding:8px 10px; }

/* two-column layout with a slimmer sticky right rail */
.markets-compact .markets-grid{ display:grid; grid-template-columns: 1fr 340px; gap:16px; }
.markets-compact .right-rail{ width:340px; position:sticky; top:86px; }

/* laptop squeeze + tablet collapse */
@media (max-width:1280px){
  .markets-compact .markets-grid{ grid-template-columns: 1fr 320px; }
  .markets-compact h1, .markets-compact .page-title{ font-size:26px; }
}
@media (max-width:1024px){
  .markets-compact .markets-grid{ grid-template-columns: 1fr; }
  .markets-compact .right-rail{ position:static; width:auto; }
}

/* quick trade card not huge */
.markets-compact .quicktrade .input{ height:36px; font-size:.95rem; }
.markets-compact .quicktrade .btn{ padding:8px 12px; font-size:.95rem; }