:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --stroke:#e2e8f0;
  --stroke-light:#f1f5f9;
  --text:#1e293b;
  --text-secondary:#334155;
  --muted:#64748b;
  --blue:#2563eb;
  --blue-light:#eff6ff;
  --green:#059669;
  --green-light:#ecfdf5;
  --red:#dc2626;
  --red-light:#fef2f2;
  --amber:#d97706;
  --amber-light:#fffbeb;
  --purple:#7c3aed;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg:0 4px 24px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --sidebar-w:272px;
  --header-h:80px;
  --footer-h:48px;
}

[data-theme="dark"]{
  --bg:#0f172a;
  --surface:#1e293b;
  --surface-2:#263248;
  --stroke:#334155;
  --stroke-light:#1a2744;
  --text:#f1f5f9;
  --text-secondary:#cbd5e1;
  --muted:#64748b;
  --blue-light:rgba(37,99,235,.18);
  --green-light:rgba(5,150,105,.15);
  --red-light:rgba(220,38,38,.15);
  --amber-light:rgba(217,119,6,.15);
  --shadow:0 1px 4px rgba(0,0,0,.4),0 4px 20px rgba(0,0,0,.3);
  --shadow-lg:0 4px 28px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}

a{color:inherit; text-decoration:none;}
button,input,select{font:inherit;}

.app{
  height:100%;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}

.sidebar{
  position:relative;
  height:100%;
  padding:20px 12px;
  border-right:1px solid var(--stroke);
  background:var(--surface);
  overflow-y:auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px 20px;
}

.brand__logo{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.brand__logo svg{width:100%;height:100%;}

.brand__title{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand__title strong{font-size:14px;letter-spacing:-.1px;font-weight:700;color:var(--text);}
.brand__title span{font-size:11px;color:var(--muted);margin-top:2px;}

.nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
  padding:0 4px;
}

.nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  background:transparent;
  transition: background .15s ease, border-color .15s ease;
}

.nav-item:hover{
  background:var(--surface-2);
}

.nav-item.is-active{
  background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(37,99,235,.05));
  border-color:rgba(37,99,235,.28);
}
.nav-item.is-active .nav-ico{background:var(--blue);color:#fff;border-color:var(--blue);}
.nav-item.is-active .nav-label strong{color:var(--blue);}

.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.nav-ico{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background:var(--surface-2);
  color:var(--muted);
  flex:0 0 auto;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.nav-label{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.nav-label strong{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

.nav-label span{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-chip{
  font-size:10px;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--muted);
  background:var(--surface-2);
  letter-spacing:.3px;
}

.sidebar-footer{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(220,38,38,.3);
  background:rgba(220,38,38,.12);
}

.sidebar-footer .small{
  font-size:11px;
  color:var(--red);
  line-height:1.45;
  font-weight:600;
}

.sidebar-links{
  display:flex;
  gap:14px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--stroke);
}

.sidebar-links a{
  font-size:11px;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition: color .15s ease;
}
.sidebar-links a:hover{color:#1d4ed8;}

.main{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.header{
  flex:0 0 auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 28px;
  border-bottom:1px solid var(--stroke);
  background:var(--surface);
}

.header-left{display:flex;flex-direction:column;gap:8px;min-width:320px;}

.stats{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.pill{
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--stroke);
  font-size:12px;
  color:var(--text-secondary);
}

.pill .k{color:var(--muted); font-weight:500;}
.pill .v{font-weight:700; letter-spacing:.1px; color:var(--text);}

.progress-wrap{display:flex;align-items:center;gap:10px;}
.progress-label{font-size:11px;color:var(--muted);white-space:nowrap;}
.progress{
  position:relative;
  height:6px;
  width: 240px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--stroke);
}
.progress > span{
  position:absolute;left:0;top:0;bottom:0;
  width: 0%;
  border-radius:999px;
  background: linear-gradient(90deg, #2563eb, #059669);
  transition: width .25s ease;
}

.zoom-controls{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
}
.zoom-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--stroke);
  cursor:pointer;color:var(--text);
  transition:background .15s,border-color .15s;
}
.zoom-btn:hover{background:var(--blue-light);border-color:var(--blue);color:var(--blue);}
.zoom-level{font-size:11px;font-weight:600;color:var(--muted);min-width:36px;text-align:center;}

.lang-toggle{
  display:flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--stroke);
  border-radius:8px;padding:6px 12px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--text);
  transition:background .15s,border-color .15s;
  white-space:nowrap;flex-shrink:0;
}
.lang-toggle:hover{background:var(--blue-light);border-color:var(--blue);}
.lang-toggle .lang-label{letter-spacing:.5px;}

.header-right{display:flex;align-items:center;gap:14px;min-width:320px;justify-content:flex-end;}

.ticker{
  position:relative;
  flex:1 1 auto;
  min-width:240px;
  max-width:520px;
  height: 40px;
  overflow:hidden;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background:var(--surface-2);
}

.ticker:before,
.ticker:after{
  content:"";
  position:absolute;top:0;bottom:0;width:36px;z-index:2;
  pointer-events:none;
}

.ticker:before{left:0;background: linear-gradient(90deg, var(--surface-2), transparent);}
.ticker:after{right:0;background: linear-gradient(270deg, var(--surface-2), transparent);}

.ticker__track{
  position:absolute;left:0;top:0;height:100%;
  display:flex;
  align-items:center;
  gap:20px;
  padding-left:18px;
  padding-right:18px;
  white-space:nowrap;
  animation: ticker 20s linear infinite;
}

@keyframes ticker{
  0%{transform: translateX(0);}
  100%{transform: translateX(-50%);}
}

.t-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);}
.t-sym{font-weight:700;letter-spacing:.2px;color:var(--text);}
.t-price{color:var(--text-secondary);}
.t-chg{font-weight:700;}
.pos{color:var(--green);}
.neg{color:var(--red);}

.content{
  flex:1;
  min-height:0;
  overflow:auto;
  padding: 28px;
  background:var(--bg);
}

.view{display:none;}
.view.is-active{display:block;}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:18px;
}

.card{
  border-radius: var(--radius);
  background:var(--surface);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card-h{
  padding:16px 20px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--stroke-light);
}

.card-h .title{display:flex;flex-direction:column;gap:3px;}
.card-h .title strong{font-size:14px;letter-spacing:-.1px;color:var(--text);}
.card-h .title span{font-size:11px;color:var(--muted);}
.card-h .title i{margin-bottom:-1px;}

.card-b{padding:20px;}

.card-note{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius: 10px;
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:#cbd5e1; box-shadow: var(--shadow);}
.btn:active{box-shadow:none;}

.btn-primary{border-color:var(--blue); background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.28);}
.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af); border-color:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.35);}
.btn-success{border-color:var(--green); background:var(--green); color:#fff;}
.btn-success:hover{background:#047857; border-color:#047857;}
.btn-danger{border-color:var(--red); background:var(--red); color:#fff;}
.btn-danger:hover{background:#b91c1c; border-color:#b91c1c;}

.btn-sm{padding:4px 10px;font-size:12px;min-height:auto;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--surface-2);
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}

.split{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.mono{font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}

.hero{
  grid-column: 1 / -1;
  padding:28px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:24px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 40%, #fafafa 75%, #fdf4ff 100%);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.25);
  background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(37,99,235,.04));
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  width:fit-content;
}

.hero-left{display:flex;flex-direction:column;gap:12px;min-width:280px;}
.hero-left h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--text);}
.hero-left p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:56ch;}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}

.hero-right-tags{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:center;}

.kpi{grid-column: span 3;}
.kpi .value{font-size:26px;font-weight:800;letter-spacing:-.3px;color:var(--text);}
.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px;}

.tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover{background:var(--surface-2);}
.tab.is-active{background:linear-gradient(135deg,#2563eb,#1d4ed8); border-color:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25);}

.lesson{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  padding:14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--stroke);
  background:var(--surface);
  margin-bottom:10px;
}
.lesson strong{font-size:13px;color:var(--text);}
.lesson p{margin:6px 0 0; font-size:12px; color: var(--muted); line-height:1.55;}

.academy-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.academy-controls .left,
.academy-controls .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.input-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.input-icon{
  position:absolute;
  left:12px;
  color:var(--muted);
  pointer-events:none;
}
.input.has-icon{padding-left:34px;}

.seg{
  display:inline-flex;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background:var(--surface);
  overflow:hidden;
}

.seg button{
  border:0;
  background:transparent;
  padding:7px 11px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition: background .15s ease;
}
.seg button:hover{background:var(--surface-2);}
.seg button.is-active{background:var(--blue); color:#fff;}

.academy-lessons-wrap{margin-top:16px;}

.lesson-item{
  padding:16px;
  border-radius: var(--radius-sm);
  border:1px solid var(--stroke);
  background:var(--surface);
  margin-bottom:10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lesson-item:hover{border-color:#cbd5e1; box-shadow: var(--shadow);}

.lesson-top{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:start;
}

.lesson-main strong{display:block;font-size:13px;letter-spacing:-.05px;color:var(--text);}
.lesson-main a strong{transition: color .15s ease;}
.lesson-main a:hover strong{color:var(--blue);}

.lesson-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color: var(--muted);
  font-size:11px;
  line-height:1.35;
}

.lesson-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

.lesson-body{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--stroke-light);
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.7;
}

.lesson-body h4{margin:0 0 8px; font-size:12px; letter-spacing:-.05px; color:var(--text);}
.lesson-body ul{margin:8px 0 0 18px; padding:0; color: var(--muted);}
.lesson-body li{margin:6px 0;}

.progress-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.progress-mini{width: 200px; height:6px; border-radius:999px; overflow:hidden; background:var(--surface-2); border:1px solid var(--stroke);}
.progress-mini > span{display:block; height:100%; width:0%; background: linear-gradient(90deg, #2563eb, #059669); transition: width .25s ease;}

.sim-grid{grid-column: 1 / -1;}

.sim-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.sim-footer{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--red);
}

.chart-wrap{margin:16px 0;}

.chart{
  height: 320px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #f8fafc, #fff);
  position:relative;
  overflow:hidden;
}

/* Chart overlay: live price badge + H/L */
.chart-overlay{
  position:absolute;
  top:10px;left:10px;right:10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  z-index:2;
}
.chart-badge{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);
  border-radius:10px;
  padding:7px 12px;
  border:1px solid var(--stroke);
  min-width:100px;
}
[data-theme="dark"] .chart-badge{background:rgba(30,41,59,.9);}
.chart-badge-sym{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:1px;}
.chart-badge-price{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.3px;}
.chart-badge-chg{font-size:11px;font-weight:700;}
.chart-hl{
  display:flex;flex-direction:column;gap:4px;
  align-items:flex-end;
}
.chart-hl-item{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(4px);
  border-radius:7px;
  padding:3px 8px;
  border:1px solid var(--stroke);
  font-size:10px;
}
[data-theme="dark"] .chart-hl-item{background:rgba(30,41,59,.8);}
.chart-hl-lbl{font-weight:800;font-size:9px;opacity:.55;width:9px;}

.chart svg{position:absolute; inset:12px; width: calc(100% - 24px); height: calc(100% - 24px);}

.chart .gridline{stroke:var(--stroke);stroke-width: 0.5;}

.chart .line{
  fill:none;
  stroke: #2563eb;
  stroke-width: 2;
}

.chart .fill{fill: rgba(37,99,235,.08);}

.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.input, select{
  padding:8px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background:var(--surface);
  color:var(--text);
  outline:none;
  min-width: 130px;
  font-size:12px;
}

.input:focus, select:focus{border-color:var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.10);}

.wallet{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.wbox{
  padding:14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background:var(--surface-2);
  transition:border-color .15s,box-shadow .15s;
}
.wbox:hover{border-color:#94a3b8;box-shadow:0 2px 8px rgba(0,0,0,.06);}

.wbox .k{font-size:11px;color:var(--muted);}
.wbox .v{margin-top:6px;font-weight:800;font-size:17px;color:var(--text);}
.wbox .v-sub{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;}

/* Estimated trade cost row */
.sim-estimate{
  display:flex;align-items:center;gap:8px;
  padding:6px 2px;
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.sim-estimate strong{color:var(--text);font-weight:700;}
.sim-estimate .max-qty{font-size:10px;opacity:.8;}

/* Open positions panel */
.open-positions-wrap{
  margin-top:14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke);
  overflow:hidden;
}
.open-positions-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--stroke);
  font-size:12px;font-weight:700;color:var(--text);
}
.pos-cols{
  display:grid;
  grid-template-columns: 56px 1fr 1fr 1fr 80px;
  gap:6px;
  padding:5px 14px;
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;
  background:var(--surface-2);
  border-bottom:1px solid var(--stroke);
}
.pos-row{
  display:grid;
  grid-template-columns: 56px 1fr 1fr 1fr 80px;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-bottom:1px solid var(--stroke-light);
  font-size:12px;
  transition:background .12s;
}
.pos-row:last-child{border-bottom:none;}
.pos-row:hover{background:var(--surface-2);}
.pos-pnl-cell{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.pos-pnl-pct{font-size:10px;font-weight:700;opacity:.85;}

.market-grid{grid-column: 1 / -1;}

.table{width:100%;border-collapse:separate;border-spacing:0 6px;}

.table th{text-align:left;font-size:11px;color: var(--muted);font-weight:600;padding: 8px 12px;}

.table td{padding: 12px;font-size:12px;color:var(--text-secondary);border-top: 1px solid var(--stroke-light);}

.row{border-radius: 12px;overflow:hidden;border: 1px solid var(--stroke);transition:background .12s;}
.row:hover{background:var(--surface-2);}
.row td:first-child{font-weight:700;color:var(--text);}

.badge-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:10px;}

.badge{
  padding:14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--stroke);
  background:var(--surface);
  position:relative;
  overflow:hidden;
  min-height:76px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.badge:before{
  content:"";
  position:absolute;inset:-40px;
  background: radial-gradient(closest-side, rgba(37,99,235,.06), transparent 60%);
  opacity:.8;
  transform: rotate(12deg);
  pointer-events:none;
}

.badge strong{position:relative;font-size:12px;color:var(--text);}
.badge span{position:relative;font-size:11px;color:var(--muted);line-height:1.4;}

.badge.is-locked{opacity:.45;}
.badge.is-unlocked{border-color:rgba(5,150,105,.45); background:var(--green-light); box-shadow:0 0 0 1px rgba(5,150,105,.12),0 2px 8px rgba(5,150,105,.1);}
.badge.is-unlocked:before{background: radial-gradient(closest-side, rgba(5,150,105,.10), transparent 60%);}

/* Product grid */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}
.product-grid-lg{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:22px 16px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background:var(--surface);
  text-align:center;
  text-decoration:none;
  color:inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  border-color:rgba(37,99,235,.4);
  box-shadow:0 8px 24px rgba(37,99,235,.1);
}

.product-icon{
  width:52px;height:52px;
  border-radius:14px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
}

.product-card strong{font-size:13px;color:var(--text);}
.product-card span{font-size:11px;color:var(--muted);line-height:1.5;}

/* Footer */
.app-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-top:1px solid var(--stroke);
  background:var(--surface);
  font-size:11px;
  color:var(--muted);
  height:var(--footer-h);
  flex:0 0 var(--footer-h);
  position:relative;
  z-index:50;
}

.footer-left{display:flex;align-items:center;gap:8px;}
.footer-left strong{color:var(--text);font-size:11px;}
.footer-left span{font-size:11px;}

.footer-right{display:flex;align-items:center;gap:16px;}
.footer-right a{
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition: color .15s ease;
}
.footer-right a:hover{color:#1d4ed8;}

.toast-wrap{position: fixed;right: 18px;bottom: 18px;display:flex;flex-direction:column;gap:10px;z-index: 999;}

.toast{
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background:var(--surface);
  box-shadow: var(--shadow-lg);
}

.toast strong{font-size:12px;color:var(--text);}
.toast p{margin:6px 0 0; font-size:12px;color:var(--muted);line-height:1.45;}

.toast.toast-success{border-color:var(--green);border-left:3px solid var(--green);}
.toast.toast-info{border-color:var(--blue);border-left:3px solid var(--blue);}
.toast.toast-warn{border-color:var(--amber);border-left:3px solid var(--amber);}

.btn-open-lesson{
  background:var(--blue-light);
  border:1px solid rgba(37,99,235,.20);
  color:var(--blue);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.btn-open-lesson:hover{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.35);
}

.sim-extra{display:grid;grid-template-columns: 1fr 1fr;gap:14px;margin-top:16px;}
.sim-extra-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.sim-extra-col{background:var(--surface-2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:14px;min-height:120px;}
.trade-history-wrap{max-height:200px;overflow-y:auto;}
.table-sm{font-size:12px;width:100%;}
.table-sm th,.table-sm td{padding:5px 8px;}
.portfolio-alloc{display:flex;flex-direction:column;gap:6px;}
.alloc-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.alloc-bar-wrap{flex:1;height:8px;background:var(--stroke-light);border-radius:999px;overflow:hidden;}
.alloc-bar{height:100%;border-radius:999px;transition:width .3s ease;}
.alloc-pct{font-weight:700;min-width:40px;text-align:right;font-size:11px;}
.alloc-label{min-width:50px;font-weight:600;}

/* Ad Banner */
.ad-banner-wrap{display:flex;justify-content:center;padding:24px 0 8px;margin-top:16px;}
.ad-banner{max-width:728px;width:100%;min-height:90px;border-radius:10px;overflow:hidden;}
.ad-placeholder{display:flex;align-items:center;justify-content:center;width:100%;min-height:90px;background:var(--stroke-light);border:1px dashed var(--stroke);border-radius:10px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.5px;}

/* In-section ad banner (centered) */
.section-ad{display:flex;justify-content:center;padding:20px 0 4px;}

/* In-section footer */
.section-footer{display:flex;justify-content:center;align-items:center;gap:18px;padding:14px 0 4px;font-size:12px;}
.section-footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .15s;}
.section-footer a:hover{color:var(--fg);}

/* Lesson/product page ad banner */
.lesson-ad-banner{max-width:728px;margin:32px auto 0;padding:0 24px;}
.lesson-ad-banner .ad-banner{width:100%;}

/* Profile XP progress bar */
.xp-bar-section{
  margin-top:20px;padding:16px 18px;
  background:var(--surface-2);
  border:1px solid var(--stroke);
  border-radius:var(--radius-sm);
}
.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.xp-bar-label{font-size:12px;font-weight:700;color:var(--text);}
.xp-bar-nums{font-size:11px;color:var(--muted);font-weight:600;}
.xp-bar-track{height:10px;background:var(--stroke-light);border-radius:999px;overflow:hidden;border:1px solid var(--stroke);}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#059669);border-radius:999px;transition:width .4s ease;width:0%;}

/* Profile rank journey */
.rank-journey-wrap{margin-top:20px;}
.rank-journey-title{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.rank-journey{display:flex;align-items:flex-start;}
.rank-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;}
.rank-step:not(:last-child):after{content:'';position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--stroke);z-index:0;}
.rank-step.is-done:not(:last-child):after{background:var(--green);}
.rank-step.is-current:not(:last-child):after{background:linear-gradient(90deg,var(--blue),var(--stroke));}
.rank-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--stroke);background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:700;position:relative;z-index:1;color:var(--muted);transition:border-color .2s,background .2s,box-shadow .2s;}
.rank-step.is-done .rank-dot{border-color:var(--green);background:var(--green-light);color:var(--green);}
.rank-step.is-current .rank-dot{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.18);}
.rank-name{font-size:10px;font-weight:600;color:var(--muted);text-align:center;line-height:1.3;padding:0 2px;}
.rank-step.is-current .rank-name{color:var(--blue);font-weight:800;}
.rank-step.is-done .rank-name{color:var(--green);font-weight:700;}
.rank-lvl{font-size:9px;color:var(--muted);text-align:center;opacity:.7;}

/* Dark mode toggle */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:var(--surface-2);border:1px solid var(--stroke);
  border-radius:8px;padding:0;cursor:pointer;
  color:var(--text);
  transition:background .15s,border-color .15s,color .15s,transform .2s;
  flex-shrink:0;
}
.theme-toggle:hover{background:var(--blue-light);border-color:rgba(37,99,235,.3);color:var(--blue);transform:scale(1.08);}

/* Profile stat cards */
.profile-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{padding:16px 14px;border-radius:var(--radius-sm);border:1px solid var(--stroke);background:var(--surface-2);text-align:center;transition:border-color .15s,box-shadow .15s;}
.stat-card:hover{border-color:#94a3b8;box-shadow:var(--shadow);}
.stat-card .stat-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;margin:0 auto 10px;border:1px solid var(--stroke);}
.stat-card .stat-val{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--text);line-height:1;}
.stat-card .stat-val.is-text{font-size:14px;font-weight:700;letter-spacing:-.2px;margin-top:6px;}
.stat-card .stat-label{font-size:11px;color:var(--muted);margin-top:6px;}

/* Market category filter */
.market-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.market-filter-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--stroke);background:var(--surface);
  color:var(--text-secondary);font-size:12px;font-weight:600;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.market-filter-btn:hover{background:var(--surface-2);}
.market-filter-btn.is-active{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:var(--blue);color:#fff;}

/* Tip of the day */
.tip-card{
  padding:14px 18px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(124,58,237,.05));
  border:1px solid rgba(37,99,235,.15);
  display:flex;gap:14px;align-items:flex-start;
}
.tip-icon{width:36px;height:36px;border-radius:10px;background:var(--blue-light);border:1px solid rgba(37,99,235,.18);display:grid;place-items:center;flex-shrink:0;}
.tip-content{flex:1;}
.tip-label{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}
.tip-text{font-size:13px;color:var(--text-secondary);line-height:1.6;}

/* Dark mode overrides */
[data-theme="dark"] .hero{background:linear-gradient(135deg,rgba(37,99,235,.15) 0%,rgba(5,150,105,.08) 50%,rgba(15,23,42,0) 100%);}
[data-theme="dark"] .chart{background:linear-gradient(180deg,#1a2744,var(--surface));}
[data-theme="dark"] .ticker:before{background:linear-gradient(90deg,var(--surface-2),transparent);}
[data-theme="dark"] .ticker:after{background:linear-gradient(270deg,var(--surface-2),transparent);}
[data-theme="dark"] .tip-card{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.08));border-color:rgba(37,99,235,.2);}
[data-theme="dark"] .sidebar-footer{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);}
[data-theme="dark"] .hero-badge{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(37,99,235,.1));border-color:rgba(37,99,235,.35);}

@media (max-width: 980px){
  :root{--sidebar-w: 72px;}
  .nav-label, .nav-chip, .brand__title{display:none;}
  .sidebar-footer{display:none;}
  .brand{justify-content:center;padding:10px 0 16px;}
  .nav-item{justify-content:center;padding:10px;}
  .nav-left{justify-content:center;}
  .header{flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px;min-height:auto;}
  .header-right{justify-content:flex-start;}
  .progress{width: 100%;}
  .header-left{min-width:0;}
  .header-right{min-width:0;}
  .content{padding:16px;}
  .app-footer{padding:0 16px;}
}

@media (max-width: 720px){
  body{overflow:auto;}
  .app{grid-template-columns: 1fr; grid-template-rows: 1fr 64px;}
  .sidebar{order:2;height:64px;padding: 6px 6px;border-right:none;border-top: 1px solid var(--stroke);}
  .brand{display:none;}
  .nav{flex-direction:row;justify-content:space-around;gap:2px;margin-top:0; padding:0;}
  .nav-item{padding:8px; border-radius:10px; flex:1; justify-content:center;}
  .main{order:1;}
  .content{overflow:auto;padding:12px;}
  .grid{grid-template-columns:1fr;}
  .grid > *{grid-column: 1 / -1 !important;}
  .kpi{grid-column: 1 / -1 !important;}
  .badge-grid{grid-template-columns: repeat(2, 1fr);}
  .wallet{grid-template-columns: repeat(2, 1fr);}
  .lesson-top{grid-template-columns: 1fr;}
  .lesson-actions{justify-content:flex-start;}
  .progress-mini{width:100%;}
  .hero{flex-direction:column;}
  .hero-right-tags{flex-direction:row;align-items:center;flex-wrap:wrap;}
  .product-grid{grid-template-columns: repeat(2, 1fr);}
  .product-grid-lg{grid-template-columns: repeat(2, 1fr);}
  .sim-controls{flex-direction:column;align-items:stretch;}
  .sim-extra{grid-template-columns:1fr;}
  .academy-controls{flex-direction:column;align-items:stretch;}
  .ticker{display:none;}
  .app-footer{flex-direction:column;gap:4px;height:auto;padding:10px 16px;text-align:center;}
}