/* TraderPaaji members portal.
 *
 * The owner's brief after living with the first build: it was "all blue and
 * green and very dark" — legible, but nothing to enjoy looking at during a
 * live session. So: a warmer near-black canvas, cards that lift off it, and a
 * COLOUR PER SECTION so the eye finds "gainers" or "sector momentum" by hue
 * before it reads a word. Green and red keep their market meaning and are
 * never spent on decoration.
 *
 * Colour is always paired with a word, an icon and a left-edge bar — a
 * red-green colour-blind trader must be able to use this at speed, so nothing
 * here depends on hue alone.
 */

:root{
  color-scheme:dark;
  --bg:#0a0b10;
  --bg-2:#0f1118;
  --card:#14161f;
  --card-2:#1a1d28;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#f2f5fa;
  --muted:#98a3b8;
  --dim:#6b7689;

  /* Semantic — market direction. Never used for anything else. */
  --up:#22d37a;
  --up-soft:rgba(34,211,122,.13);
  --down:#ff5d6c;
  --down-soft:rgba(255,93,108,.13);

  /* Section identity */
  --momentum:#22d37a;
  --weakness:#ff5d6c;
  --gainers:#3ddc84;
  --losers:#ff7a85;
  --high:#ffc043;
  --low:#9aa3b7;
  --sector:#8b7dff;
  --swing:#31c6f5;
  --news:#ff9f5a;

  --radius:16px;
  --radius-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(139,125,255,.10), transparent 60%),
    radial-gradient(900px 460px at 92% 4%, rgba(34,211,122,.08), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:var(--font); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.centered{display:flex; align-items:center; justify-content:center;
  min-height:100dvh; padding:20px}

.skip{position:absolute; left:-9999px; top:0; background:var(--up);
  color:#04210f; padding:10px 16px; border-radius:0 0 8px 0; font-weight:700}
.skip:focus{left:0; z-index:50}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--swing); outline-offset:2px; border-radius:8px}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 16px}

/* --- sign-in card --------------------------------------------------------- */
.card{width:100%; max-width:470px; background:var(--card);
  border:1px solid var(--line); border-radius:22px; padding:32px 26px;
  box-shadow:var(--shadow)}
.brand{display:flex; gap:14px; align-items:center; margin-bottom:22px}
.mark{display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px;
  background:linear-gradient(140deg,#22d37a,#0f9d58);
  color:#04210f; font-weight:900; border-radius:14px; letter-spacing:.5px;
  box-shadow:0 6px 18px rgba(34,211,122,.28)}
.card h1{font-size:1.35rem; margin:0; letter-spacing:-.01em}
.sub{margin:3px 0 0; color:var(--muted); font-size:.9rem}
.lede{margin:0 0 18px; color:var(--muted)}

.btn-google{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:15px 18px; border-radius:12px; text-decoration:none;
  background:#fff; color:#16181d; font-weight:700; font-size:1rem;
  border:0; transition:transform .12s ease, box-shadow .12s ease;
}
.btn-google:hover{transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(255,255,255,.14)}
.btn-google .g{display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:#4285f4; color:#fff; font-weight:900;
  font-size:.9rem}

.fine{color:var(--dim); font-size:.84rem; margin:16px 0 0}

.notice{padding:13px 15px; border-radius:12px; margin-bottom:18px;
  font-size:.92rem; border:1px solid var(--line); background:var(--card-2)}
.notice.warn{border-color:rgba(255,192,67,.45); background:rgba(255,192,67,.10);
  color:#ffe0a3}
.notice.bad{border-color:rgba(255,93,108,.45); background:var(--down-soft);
  color:#ffc2c8}

/* --- dashboard chrome ----------------------------------------------------- */
.topbar{border-bottom:1px solid var(--line);
  background:rgba(10,11,16,.82); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:10}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:13px; padding-bottom:13px; flex-wrap:wrap}
.brand-inline{display:flex; align-items:center; gap:11px; font-size:1.02rem}
.brand-inline .mark{width:34px; height:34px; flex-basis:34px; font-size:.82rem;
  border-radius:11px}
.who{display:flex; align-items:center; gap:12px; font-size:.9rem}
.btn-quiet{background:var(--card); color:var(--text); font:inherit;
  border:1px solid var(--line-strong); padding:8px 15px; border-radius:10px;
  cursor:pointer; font-size:.88rem}
.btn-quiet:hover{background:var(--card-2); border-color:var(--up)}

main.wrap{padding-top:22px; padding-bottom:48px}

.controls{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:20px}
.tier{border:0; padding:0; margin:0; display:flex; gap:8px}
.btn-tier{background:var(--card); color:var(--muted); font:inherit;
  border:1px solid var(--line); padding:9px 18px; border-radius:999px;
  cursor:pointer; font-size:.9rem; font-weight:600}
.btn-tier:hover{color:var(--text); border-color:var(--line-strong)}
.btn-tier.is-on{background:linear-gradient(135deg,#22d37a,#0f9d58);
  color:#04210f; font-weight:800; border-color:transparent;
  box-shadow:0 6px 18px rgba(34,211,122,.26)}

.freshness{margin:0; font-size:.86rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:8px}
.freshness::before{content:""; width:8px; height:8px; border-radius:50%;
  background:var(--dim)}
.freshness[data-state="live"]{color:var(--up)}
.freshness[data-state="live"]::before{background:var(--up);
  box-shadow:0 0 0 4px var(--up-soft)}
.freshness[data-state="stale"]{color:var(--high)}
.freshness[data-state="stale"]::before{background:var(--high)}
.freshness[data-state="no_data"]{color:var(--dim)}

/* --- panels --------------------------------------------------------------- */
.panel{background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  margin-bottom:18px; position:relative; overflow:hidden}
/* The section's colour as a bar, not only a tint, so its identity survives a
   greyscale screenshot and a colour-blind reader. */
.panel::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:4px; background:var(--tone,var(--line-strong))}
.panel[data-tone="momentum"]{--tone:var(--momentum)}
.panel[data-tone="weakness"]{--tone:var(--weakness)}
.panel[data-tone="gainers"]{--tone:var(--gainers)}
.panel[data-tone="losers"]{--tone:var(--losers)}
.panel[data-tone="high"]{--tone:var(--high)}
.panel[data-tone="low"]{--tone:var(--low)}
.panel[data-tone="sector"]{--tone:var(--sector)}
.panel[data-tone="swing"]{--tone:var(--swing)}
.panel[data-tone="news"]{--tone:var(--news)}

.panel-head{display:flex; align-items:center; gap:11px; margin-bottom:7px;
  flex-wrap:wrap}
.panel h2{font-size:1.08rem; margin:0; letter-spacing:-.01em}
.icon{display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px;
  border-radius:10px; font-size:1rem;
  background:color-mix(in srgb, var(--tone) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--tone) 38%, transparent)}
.tag{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  font-weight:800; color:var(--tone);
  border:1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background:color-mix(in srgb, var(--tone) 12%, transparent);
  padding:3px 9px; border-radius:999px}
.count{margin-left:auto; color:var(--dim); font-size:.8rem;
  font-variant-numeric:tabular-nums}
.muted{color:var(--muted); font-size:.88rem; margin:0 0 12px}
.state{background:var(--card-2); border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm); padding:15px; color:var(--muted);
  font-size:.9rem}

.grid{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:760px){ .grid{grid-template-columns:1fr 1fr} }

/* --- ranked lists --------------------------------------------------------- */
.ranklist{list-style:none; margin:0; padding:0; counter-reset:rank}
.ranklist li{counter-increment:rank; display:flex; align-items:baseline;
  gap:11px; padding:10px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.ranklist li:last-child{border-bottom:0}
.ranklist li::before{content:counter(rank); color:var(--dim);
  font-variant-numeric:tabular-nums; min-width:1.7em; font-size:.8rem;
  font-weight:700}
.ranklist li:nth-child(-n+3)::before{color:var(--tone)}
.sym{font-weight:800; letter-spacing:.02em; font-size:.98rem}
.why{color:var(--muted); font-size:.83rem}

.drill{flex-basis:100%; margin-top:8px}
.drill summary{cursor:pointer; color:var(--tone); font-size:.82rem;
  font-weight:600; list-style:none}
.drill summary::-webkit-details-marker{display:none}
.drill summary::before{content:"▸ "}
.drill[open] summary::before{content:"▾ "}
.drill-line{margin:8px 0 0; font-size:.85rem; color:var(--muted);
  line-height:1.7}
.drill-line strong{color:var(--text); font-weight:700}

.foot{margin-top:30px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--dim); font-size:.79rem}
.foot p{margin:0 0 6px}
.foot strong{color:var(--muted)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* Swing setups: several short lists inside one panel, each named in the
   owner's own language so a pattern is never a bare code. */
.swing-block{padding:12px 0; border-bottom:1px solid var(--line)}
.swing-block:last-child{border-bottom:0; padding-bottom:0}
.swing-title{margin:0 0 5px; font-size:.83rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--swing)}
.swing-names{margin:0; font-size:.95rem; font-weight:700; line-height:1.75;
  overflow-wrap:anywhere}

/* --- multi-page chrome ---------------------------------------------------- */
.brand-inline{text-decoration:none; color:var(--text)}
.subnav{border-top:1px solid var(--line); overflow-x:auto}
.subnav .wrap{display:flex; gap:4px; padding-top:2px; padding-bottom:2px}
.subnav a{color:var(--muted); text-decoration:none; font-size:.88rem;
  font-weight:600; padding:11px 13px; white-space:nowrap;
  border-bottom:2px solid transparent}
.subnav a:hover{color:var(--text)}
.subnav a.on{color:var(--up); border-bottom-color:var(--up)}

.page-head{margin:6px 0 18px}
.page-head h1{margin:0; font-size:1.55rem; letter-spacing:-.02em}
.page-sub{margin:5px 0 0; color:var(--muted); font-size:.92rem; max-width:62ch}

/* --- the hub of tiles ----------------------------------------------------- */
.tiles{display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:20px}
@media (min-width:620px){ .tiles{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .tiles{grid-template-columns:repeat(3,1fr)} }
.tile{display:flex; flex-direction:column; gap:7px; text-decoration:none;
  color:var(--text); background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  position:relative; overflow:hidden;
  transition:transform .12s ease, border-color .12s ease}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--tone,var(--line-strong))}
.tile[data-tone="momentum"]{--tone:var(--momentum)}
.tile[data-tone="swing"]{--tone:var(--swing)}
.tile[data-tone="sector"]{--tone:var(--sector)}
.tile[data-tone="high"]{--tone:var(--high)}
.tile[data-tone="losers"]{--tone:var(--losers)}
.tile[data-tone="news"]{--tone:var(--news)}
.tile:hover{transform:translateY(-2px); border-color:var(--tone)}
.tile .icon{width:38px; height:38px; flex:0 0 38px; font-size:1.15rem}
.tile-title{font-weight:800; font-size:1.02rem}
.tile-sub{color:var(--muted); font-size:.85rem; line-height:1.5}

/* --- option positioning --------------------------------------------------- */
.window-pick{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-size:.85rem; color:var(--muted)}
.window-pick select{background:var(--card); color:var(--text); font:inherit;
  border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px;
  margin-left:6px}
.verdict{margin:0 0 12px; font-size:1.05rem; font-weight:700; line-height:1.45}
.verdict-call_writers{color:var(--down)}
.verdict-put_writers{color:var(--up)}
.verdict-balanced,.verdict-quiet{color:var(--muted)}
.share-bar{display:flex; height:34px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line-strong); margin-bottom:12px}
.share{display:grid; place-items:center; font-size:.78rem; font-weight:800;
  white-space:nowrap; transition:width .25s ease}
.share-call{background:rgba(255,93,108,.32); color:#ffd7db}
.share-put{background:rgba(34,211,122,.30); color:#c9f7dd}
.explain{margin:0; font-size:.92rem; line-height:1.65; color:var(--text)}