:root{
  --bg:#EDE8DD; --bg-2:#E7E1D4; --card:#F7F3EA; --card-2:#FCEFE6;
  --line:#211D17; --line-soft:#C9C0AE;
  --ink:#211D17; --ink-2:#5C554A; --ink-3:#8C8475; --ink-4:#B8AE9C;
  --accent:#B4471F; --accent-ink:#8F371A; --live:#2E6F4F;
  --green:#2E6F4F; --yellow:#B07A12; --red:#C0392B; --blue:#2E5FA3; --sc:#7A5BB0;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:inherit}
.eyebrow{font-family:'Newsreader',serif; font-style:italic; color:var(--ink-3)}
.mono{font-family:var(--mono)}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:999;
  padding:0.75rem 1.25rem; border-radius:8px; font-size:0.85rem; font-weight:600;
  opacity:0; transition:opacity 0.3s; pointer-events:none; color:#fff;
}
.toast.show{opacity:1}

/* ── Overlays (login / password modal) ─────────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(33,29,23,0.55);
}
#loginScreen{background:var(--bg)}

.panel{
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
}
.panel-pad{padding:2rem}
.panel-sm{max-width:380px; width:100%; margin:0 1rem}

.brand{
  font-weight:800; letter-spacing:0.12em; font-size:2rem; color:var(--accent);
  text-align:center;
}
.brand-sub{color:var(--ink-3); font-size:0.75rem; text-align:center; margin-top:0.25rem}

.field{margin-bottom:1rem}
.field label{display:block; font-size:0.75rem; color:var(--ink-3); margin-bottom:0.35rem}
.field-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}

input,select{
  background:var(--bg); border:1.5px solid var(--line-soft); border-radius:8px;
  padding:0.55rem 0.75rem; color:var(--ink); outline:none; width:100%;
  font-family:inherit; font-size:0.9rem;
}
input:focus,select:focus{border-color:var(--accent)}

.err-msg{color:var(--red); font-size:0.75rem; margin-bottom:0.75rem}
.ok-msg{color:var(--green); font-size:0.75rem}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  cursor:pointer; border-radius:8px; padding:0.55rem 1.25rem; font-size:0.85rem;
  font-weight:700; border:1.5px solid transparent; transition:opacity 0.15s, background 0.15s;
  font-family:inherit;
}
.btn:hover{opacity:0.85}
.btn:disabled{opacity:0.4; cursor:not-allowed}
.btn-block{width:100%}
.btn-primary{background:var(--accent); color:#fff}
.btn-danger{background:var(--red); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line-soft); color:var(--ink-2)}
.btn-xs{padding:0.3rem 0.7rem; font-size:0.72rem}
.btn-flex{flex:1}

/* ── App shell ──────────────────────────────────────────────────────── */
.toprule{
  position:sticky; top:0; z-index:40; border-bottom:1.5px solid var(--line);
  background:rgba(237,232,221,0.92); backdrop-filter:blur(8px);
}
.toprule-inner{
  max-width:1080px; margin:0 auto; padding:0 20px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
}
.toprule-name{font-weight:800; letter-spacing:0.12em; font-size:1.1rem; color:var(--accent)}
.toprule-right{display:flex; align-items:center; gap:0.75rem}
.nav-user{font-size:0.75rem; color:var(--ink-3)}

.pill{
  display:inline-flex; align-items:center; gap:0.35rem; border-radius:999px;
  padding:0.2rem 0.7rem; font-size:0.65rem; font-weight:800; letter-spacing:0.08em;
}
.pill-admin{background:rgba(46,111,79,0.15); color:var(--green)}

.tabbar{border-bottom:1.5px solid var(--line)}
.tabbar-inner{max-width:1080px; margin:0 auto; padding:0 20px; display:flex; gap:0.25rem; overflow-x:auto}
.tab{
  padding:0.65rem 1rem; border-bottom:2px solid transparent; color:var(--ink-3);
  font-size:0.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.tab.active{border-bottom-color:var(--accent); color:var(--accent)}

.content{max-width:1080px; margin:0 auto; padding:1.5rem 20px 2rem; display:flex; flex-direction:column; gap:1.5rem}

/* ── Section heads ──────────────────────────────────────────────────── */
.sec-head{font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem}

/* ── Cards / grids ──────────────────────────────────────────────────── */
.card{background:var(--card); border:1.5px solid var(--line); border-radius:12px}
.card-pad{padding:1.25rem}
.card-pad-lg{padding:1.5rem}

.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; font-size:0.85rem}
.stat-label{font-size:0.7rem; color:var(--ink-3); margin-bottom:0.2rem}
.stat-val{font-weight:700}
.stat-val-lg{font-size:1.3rem; font-weight:800}
.stat-sub{font-size:0.7rem; color:var(--ink-4); margin-top:0.15rem}

.split{display:grid; grid-template-columns:1fr 2fr; gap:1.5rem}

.pos{color:var(--green)} .neg{color:var(--red)}

/* ── Tags / signal badges ──────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; border-radius:999px; padding:0.15rem 0.65rem;
  font-size:0.65rem; font-weight:800; letter-spacing:0.06em;
}
.tag-strong-buy{background:rgba(46,111,79,0.18); color:var(--green)}
.tag-buy       {background:rgba(46,111,79,0.12); color:var(--green)}
.tag-neutral   {background:rgba(140,132,117,0.15); color:var(--ink-2)}
.tag-caution   {background:rgba(176,122,18,0.15); color:var(--yellow)}
.tag-sell      {background:rgba(192,57,43,0.15); color:var(--red)}
.tag-hold      {background:rgba(46,95,163,0.15); color:var(--blue)}

/* ── Spinner ────────────────────────────────────────────────────────── */
.spinner-row{display:flex; align-items:center; gap:0.5rem; color:var(--ink-3); font-size:0.85rem; padding:1rem}
.spinner{
  border:2px solid var(--line-soft); border-top-color:var(--accent); border-radius:50%;
  width:1.1rem; height:1.1rem; animation:spin 0.6s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Star (watchlist) ───────────────────────────────────────────────── */
.star-btn{
  background:none; border:none; cursor:pointer; font-size:1rem; line-height:1;
  padding:0.2rem; opacity:0.5; color:var(--ink-3);
}
.star-btn:hover{opacity:1}
.star-btn.watched{opacity:1; color:var(--yellow)}

/* ── Tables ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:0.8rem}
.tbl thead th{
  color:var(--ink-3); font-weight:700; text-align:left; padding:0.6rem 0.85rem;
  border-bottom:1.5px solid var(--line); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
}
.tbl td{padding:0.55rem 0.85rem; border-bottom:1px solid var(--line-soft)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .num{font-family:var(--mono)}
.tbl-foot{padding:0.5rem 1rem; font-size:0.7rem; color:var(--ink-4); border-top:1.5px solid var(--line)}
.tbl-head-bar{
  padding:0.9rem 1.25rem; border-bottom:1.5px solid var(--line);
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-3);
  display:flex; align-items:center; justify-content:space-between;
}
.muted-cell{color:var(--ink-4)}

/* ── Coin cards (Market tab) ───────────────────────────────────────── */
.coin-card{display:flex; flex-direction:column; gap:0.75rem; padding:1.1rem}
.coin-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; flex-wrap:wrap}
.coin-id{display:flex; align-items:center; gap:0.6rem}
.coin-icon{width:32px; height:32px; border-radius:50%}
.coin-name{font-weight:700}
.coin-sym{color:var(--ink-3); font-size:0.75rem; font-weight:500}
.coin-price{color:var(--ink-2); font-size:0.9rem; font-family:var(--mono)}
.coin-right{display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap}
.coin-meta{margin-top:0.4rem; font-size:0.75rem; color:var(--ink-3)}
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; font-size:0.7rem; text-align:center}
.ind-box{background:var(--bg-2); border-radius:8px; padding:0.5rem}
.ind-box-label{color:var(--ink-3); margin-bottom:0.15rem}
.ind-box-val{font-weight:700}

/* ── Gauge ──────────────────────────────────────────────────────────── */
.gauge-col{display:flex; flex-direction:column; align-items:center}
.gauge-val{font-size:2.1rem; font-weight:800; margin-top:-0.6rem; font-family:var(--mono)}
.gauge-label{font-size:0.85rem; font-weight:700; margin-top:0.15rem}
.gauge-interp{font-size:0.72rem; color:var(--ink-3); margin-top:0.6rem; text-align:center; padding:0 0.5rem}
.gauge-sub{display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-top:1rem; width:100%; font-size:0.7rem}
.gauge-sub-item{text-align:center}
.gauge-sub-item .l{color:var(--ink-3)}
.gauge-sub-item .v{font-weight:700}
.score-bar-row{display:flex; align-items:center; gap:0.5rem}
.score-bar{flex:1; height:6px; border-radius:999px; background:var(--bg-2)}
.score-bar-fill{height:6px; border-radius:999px; background:var(--accent); transition:width 0.5s}
.score-val{font-size:0.7rem; font-weight:700; color:var(--accent)}
.score-reasons{margin:0.5rem 0 0; padding:0; list-style:none; font-size:0.7rem; color:var(--ink-3)}
.score-reasons li{margin-top:0.2rem}

/* ── Form grids ─────────────────────────────────────────────────────── */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.form-col{display:flex; flex-direction:column; gap:0.75rem}
.btn-row{display:flex; gap:0.75rem}
.inline-msg{display:flex; align-items:center; font-size:0.85rem; color:var(--ink-3)}

/* ── Stat cards (backtest) ─────────────────────────────────────────── */
.bt-meta{font-size:0.75rem; color:var(--ink-3); margin-bottom:0.75rem}
.bt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-bottom:1rem}
.bt-stat{background:var(--bg-2); border-radius:8px; padding:0.75rem}
.bt-stat-head{font-size:0.65rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem}
.bt-stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; text-align:center; font-size:0.7rem}
.bt-stat-row .l{color:var(--ink-3)}
.bt-stat-row .v{font-weight:700}
.bt-none{color:var(--ink-4); font-size:0.8rem}
.bt-recent-head{font-size:0.7rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem}
.bt-recent-wrap{max-height:220px; overflow-y:auto}

/* ── Portfolio selector bar ────────────────────────────────────────── */
.pf-bar{padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.pf-bar-left{display:flex; align-items:center; gap:0.75rem; flex:1; min-width:200px}
.pf-bar-left label{font-size:0.75rem; color:var(--ink-3); white-space:nowrap}
.pf-bar-left select{max-width:200px}
.pf-bar-right{display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap}
.pf-bar-right input{width:130px}

/* ── Recommendation cards ──────────────────────────────────────────── */
.rec-card{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
  padding:0.9rem; display:flex; flex-direction:column; gap:0.3rem;
}
.rec-top{display:flex; align-items:center; justify-content:space-between; gap:0.5rem; flex-wrap:wrap}
.rec-coin{font-weight:700; font-size:0.9rem}
.rec-coin .sym{color:var(--ink-3); font-size:0.7rem; font-weight:500}
.rec-actions{display:flex; align-items:center; gap:0.5rem}
.rec-plain{font-size:0.9rem}
.rec-detail{font-size:0.75rem; color:var(--ink-3)}
.rec-summary{font-size:0.9rem; color:var(--ink-2); margin:0 0 1rem}
.rec-list{display:flex; flex-direction:column; gap:0.75rem}

/* ── News cards ─────────────────────────────────────────────────────── */
.news-list{display:flex; flex-direction:column; gap:0.75rem}
.news-card{
  display:flex; gap:1rem; align-items:flex-start; padding:1rem;
  text-decoration:none; color:inherit;
}
.news-thumb{width:48px; height:48px; border-radius:6px; object-fit:cover; flex-shrink:0}
.news-title{font-weight:700; font-size:0.88rem; line-height:1.35; margin-bottom:0.3rem}
.news-desc{font-size:0.78rem; color:var(--ink-3); margin-bottom:0.4rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.news-meta{font-size:0.7rem; color:var(--ink-4)}

/* ── History chart ──────────────────────────────────────────────────── */
.chart-foot{display:flex; justify-content:space-between; font-size:0.72rem; color:var(--ink-3); margin-top:0.4rem}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{
  max-width:1080px; margin:0.5rem auto 0; padding:1rem 20px; text-align:center;
  font-size:0.72rem; color:var(--ink-3); border-top:1.5px solid var(--line);
}

@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .bt-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none}
}