/* Jyotish Studio. Tokens first, then layout, then components. */
:root {
  --bg: #0b0f1c; --bg2: #10162a; --panel: rgba(22, 30, 54, .72); --panel-solid: #161e36; --line: rgba(148, 163, 214, .14); --line2: rgba(148, 163, 214, .26);
  --ink: #e8ebf7; --ink2: #aab2d0; --ink3: #737ca0;
  --gold: #f2b544; --gold2: #ffd486; --gold-soft: rgba(242, 181, 68, .14);
  --good: #3ec9a7; --good-soft: rgba(62, 201, 167, .14); --bad: #f0697e; --bad-soft: rgba(240, 105, 126, .14); --mid: #8ea2ff; --mid-soft: rgba(142, 162, 255, .14);
  --shadow: 0 10px 40px rgba(0, 0, 0, .35); --r: 16px; --r2: 10px;
  --f-display: 'Fraunces', Georgia, serif; --f-ui: 'Inter', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f1e7; --bg2: #efe7d8; --panel: rgba(255, 252, 245, .85); --panel-solid: #fffcf5; --line: rgba(60, 48, 30, .12); --line2: rgba(60, 48, 30, .24);
  --ink: #221c14; --ink2: #5a5040; --ink3: #8c8170;
  --gold: #b87708; --gold2: #8a5800; --gold-soft: rgba(184, 119, 8, .12);
  --good: #0f8a6c; --good-soft: rgba(15, 138, 108, .12); --bad: #c23a52; --bad-soft: rgba(194, 58, 82, .1); --mid: #4c5fd6; --mid-soft: rgba(76, 95, 214, .1);
  --shadow: 0 8px 30px rgba(80, 60, 20, .12);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 86% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 58% 34%, #fff4 50%, transparent 51%),
    radial-gradient(900px 600px at 85% -10%, rgba(242, 181, 68, .08), transparent 60%), radial-gradient(800px 700px at -10% 110%, rgba(142, 162, 255, .08), transparent 60%); }
:root[data-theme="light"] body::before { opacity: .9; background: radial-gradient(900px 600px at 85% -10%, rgba(184, 119, 8, .08), transparent 60%), radial-gradient(800px 700px at -10% 110%, rgba(76, 95, 214, .06), transparent 60%); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold); }
.mono { font-family: var(--f-mono); font-feature-settings: 'tnum'; }
.muted { color: var(--ink2); } .faint { color: var(--ink3); }
.good { color: var(--good); } .bad { color: var(--bad); } .gold { color: var(--gold); }

/* ---------- shell ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 76px 1fr; height: 100vh; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); }
.logo { width: 42px; height: 42px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 12px; background: conic-gradient(from 200deg, var(--gold), #f0697e, #8ea2ff, var(--gold)); color: #0b0f1c; font: 600 25px/1 "Noto Sans Devanagari", "Kohinoor Devanagari", var(--f-display); box-shadow: 0 0 24px rgba(242, 181, 68, .35); }
.rail button { width: 58px; padding: 8px 0 6px; border: 0; border-radius: 12px; background: none; color: var(--ink3); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; letter-spacing: .02em; transition: .15s; }
.rail button svg { width: 21px; height: 21px; }
.rail button:hover { color: var(--ink); background: var(--line); }
.rail button.on { color: var(--gold); background: var(--gold-soft); }
.rail .spacer { flex: 1; }
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(10px); flex-wrap: wrap; }
.top h1 { font: 600 19px var(--f-display); margin: 0 auto 0 0; letter-spacing: -.01em; }
.top h1 small { font: 400 12px var(--f-ui); color: var(--ink3); margin-left: 8px; }
.content { flex: 1; overflow: auto; padding: 24px; scroll-behavior: smooth; }
.content > .view { max-width: 1320px; margin: 0 auto; animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- controls ---------- */
.sel, .inp { background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 10px; outline: none; min-width: 0; }
.sel:focus, .inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line2); border-radius: 11px; background: var(--panel-solid); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 8px; cursor: pointer; color: var(--ink2); font-size: 12.5px; white-space: nowrap; }
.seg button.on { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.btn { border: 1px solid var(--line2); background: var(--panel-solid); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 500; transition: .15s; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--gold); }
.btn.primary { background: linear-gradient(135deg, var(--gold), #e8924a); color: #1a1205; border: 0; font-weight: 650; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.icon-btn { border: 1px solid var(--line2); background: var(--panel-solid); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.icon-btn svg { width: 17px; height: 17px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); }

/* ---------- panels ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); backdrop-filter: blur(14px); min-width: 0; }
.card h2 { font: 600 16px var(--f-display); margin: 0 0 12px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.card h2 .tag { margin-left: auto; }
.card h3 { font: 600 13px var(--f-ui); margin: 14px 0 8px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink3); font-weight: 600; }
.big { font: 600 34px/1.1 var(--f-display); letter-spacing: -.02em; }
.huge { font: 600 46px/1 var(--f-display); letter-spacing: -.03em; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--line); color: var(--ink2); white-space: nowrap; }
.tag.good { background: var(--good-soft); color: var(--good); } .tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.gold { background: var(--gold-soft); color: var(--gold); } .tag.mid { background: var(--mid-soft); color: var(--mid); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr { height: 1px; background: var(--line); margin: 14px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }
.empty { padding: 40px; text-align: center; color: var(--ink3); }
.note { font-size: 12px; color: var(--ink3); margin-top: 10px; }

/* hero */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 70%); pointer-events: none; }
.glyph { font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', var(--f-ui); }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kv > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid) 60%, transparent); }
.kv b { display: block; font: 600 15px var(--f-display); margin-top: 2px; }

/* bars & meters */
.bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold2)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bar.good > i { background: linear-gradient(90deg, #2fae8f, var(--good)); } .bar.bad > i { background: linear-gradient(90deg, #d14d63, var(--bad)); } .bar.mid > i { background: linear-gradient(90deg, #6b7fe8, var(--mid)); }
.meter { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; margin: 6px 0; }
.meter .mono { text-align: right; color: var(--ink2); }
.prog { position: relative; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.prog > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold), #e8924a); border-radius: 99px; }

/* tables */
.dq-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.dq-seg { min-width: 58px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--line2); background: var(--line); color: var(--ink2); cursor: pointer; font: 12px var(--f-ui); text-align: left; }
.dq-seg span { font: 11px var(--f-mono, monospace); color: var(--ink3); }
.dq-seg.good { background: var(--good-soft); color: var(--good); } .dq-seg.bad { background: var(--bad-soft); color: var(--bad); } .dq-seg.gold { background: var(--gold-soft); color: var(--gold); }
.dq-seg.on { outline: 2px solid currentColor; outline-offset: 1px; } .dq-seg.now b::after { content: ' ●'; font-size: 9px; vertical-align: middle; }
.plain p { margin: 4px 0 10px; color: var(--ink2); font-size: 13.5px; line-height: 1.6; }
.plain ul { margin: 4px 0 12px; padding-left: 18px; color: var(--ink2); font-size: 13.5px; line-height: 1.55; } .plain li { margin-bottom: 6px; }
.gloss { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; } .gloss summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.gloss dl { display: grid; grid-template-columns: 190px 1fr; gap: 6px 14px; margin: 10px 0 0; } .gloss dt { font-weight: 600; } .gloss dd { margin: 0; color: var(--ink2); }
@media (max-width: 700px) { .gloss dl { grid-template-columns: 1fr; } }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-weight: 600; color: var(--ink3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 8px; border-bottom: 1px solid var(--line2); }
table.t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--gold-soft); }
table.t tr.sel td { background: var(--gold-soft); }

/* life areas */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.area { cursor: pointer; transition: transform .15s, border-color .15s; display: flex; flex-direction: column; gap: 10px; }
.area:hover { transform: translateY(-2px); border-color: var(--line2); }
.area.feat { grid-column: span 2; background: linear-gradient(135deg, var(--gold-soft), transparent 60%), var(--panel); }
.area .head { display: flex; align-items: center; gap: 12px; }
.area .title { font: 600 15px var(--f-display); }
.area p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.factor { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.8px; }
.factor:last-child { border-bottom: 0; }
.pts { font: 600 12px var(--f-mono); padding: 2px 6px; border-radius: 6px; text-align: center; }
.pts.p { background: var(--good-soft); color: var(--good); } .pts.n { background: var(--bad-soft); color: var(--bad); } .pts.z { background: var(--line); color: var(--ink2); }
.win { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.8px; }
.win:last-child { border-bottom: 0; }
.win .when { font: 600 13px var(--f-mono); }

/* charts */
.chart-wrap { display: flex; justify-content: center; }
.chart-wrap svg { width: 100%; max-width: 460px; height: auto; }
.planet-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* timeline */
.tl-wrap { position: relative; }
.tl-wrap canvas { width: 100%; display: block; border-radius: 12px; cursor: crosshair; }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 12px; min-width: 220px; max-width: 320px; }
.tip b { font-family: var(--f-display); font-size: 14px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); align-items: center; }
.ramp { width: 120px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--line), var(--gold), #ff6b4a); }

/* traits */
.trait { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid) 50%, transparent); }
.trait .src { font-size: 11px; color: var(--ink3); margin-top: 6px; }
.trait h4 { margin: 0 0 4px; font: 600 13.5px var(--f-ui); }
.trait p { margin: 0; font-size: 13px; color: var(--ink2); }
.cols { columns: 2 340px; column-gap: 14px; } .cols > * { break-inside: avoid; margin-bottom: 12px; }

/* reading (markdown) */
.md { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 1.7; }
.md h1 { font: 600 32px/1.2 var(--f-display); letter-spacing: -.02em; margin: 0 0 6px; }
.md h2 { font: 600 22px var(--f-display); margin: 34px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.md h3 { font: 600 17px var(--f-display); margin: 22px 0 8px; }
.md table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; display: block; overflow-x: auto; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.md th { color: var(--ink3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.md code { font-family: var(--f-mono); font-size: 12.5px; background: var(--line); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--panel-solid); border: 1px solid var(--line); padding: 12px; border-radius: 10px; overflow: auto; }
.md li { margin: 4px 0; }
.md strong { color: var(--ink); }

/* forms */
.form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.form .span2 { grid-column: span 2; } .form .span4 { grid-column: 1 / -1; }
.ac { position: relative; }
.ac-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; }
.ac-list div { padding: 8px 10px; cursor: pointer; font-size: 13px; } .ac-list div:hover { background: var(--gold-soft); }
.evrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; margin-bottom: 8px; }

.loading { position: fixed; inset: auto 24px 24px auto; z-index: 60; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 99px; padding: 8px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--gold); animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--panel-solid); border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); }

@media (max-width: 1100px) { .g-hero, .g3, .g4 { grid-template-columns: 1fr 1fr; } .area.feat { grid-column: span 1; } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail { grid-row: 2; flex-direction: row; overflow-x: auto; padding: 6px; border-right: 0; border-top: 1px solid var(--line); }
  .logo, .rail .spacer { display: none; }
  .g2, .g3, .g4, .g-hero, .form, .kv { grid-template-columns: 1fr; } .form .span2 { grid-column: auto; }
  .content { padding: 16px; } .evrow { grid-template-columns: 1fr 1fr; } .win { grid-template-columns: 1fr; }
}

/* ---------- website: sign-in and document pages ---------- */
body.auth-page { overflow: auto; background: radial-gradient(1200px 600px at 15% -10%, var(--gold-soft), transparent 60%), var(--bg); }
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; max-width: 1040px; margin: 0 auto; padding: 40px 24px; }
.auth-pitch h1 { font: 700 44px/1.05 var(--f-display); margin: 18px 0 8px; letter-spacing: -.02em; }
.auth-pitch .lead { font-size: 18px; color: var(--ink2); margin: 0 0 22px; }
.auth-pitch ul { margin: 0; padding-left: 18px; color: var(--ink2); line-height: 1.9; }
.auth-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.auth-tabs { align-self: flex-start; }
.btn.google { justify-content: center; padding: 11px; font-weight: 600; text-decoration: none; color: var(--ink); }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink3); font-size: 12px; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.auth-card .btn.primary { justify-content: center; padding: 11px; }
.err { color: var(--bad); font-size: 13px; margin: 0; }
.small { font-size: 12px; margin: 0; }
.doc { max-width: 760px; margin: 40px auto; padding: 32px; line-height: 1.65; } .doc h1 { font: 700 32px var(--f-display); margin: 8px 0; } .doc h2 { font: 600 18px var(--f-display); margin-top: 26px; }
@media (max-width: 820px) { .auth { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; } .auth-pitch h1 { font-size: 34px; } .doc { margin: 16px; padding: 22px; } }
[hidden] { display: none !important; }