/* reading.css — Dashas, interpretation, cards, panchanga, ashtakavarga, vargas, Lal Kitab
   Extracted from the single-file UI; loaded by index.html in order. */
  /* ============================ DASHA ============================ */
  .dasha-cur {
    font-size:18px; padding:15px 19px; border-radius:var(--radius-sm); margin:0 0 18px;
    background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 16%, var(--surface)), color-mix(in srgb,var(--gold) 9%, transparent));
    border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); display:flex; align-items:center; gap:11px; flex-wrap:wrap;
    box-shadow:var(--shadow-sm);
  }
  .dasha-cur .lbl { color:var(--muted); font-size:13px; font-variant:small-caps; letter-spacing:.8px; }
  .dasha-cur b { color:var(--accent-2); font-weight:700; font-family:var(--mono); }
  .tl { font-size:15.5px; }
  .tl details { margin:8px 0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
  .tl summary { cursor:pointer; padding:13px 16px; list-style:none; display:flex; align-items:center; gap:10px; font-size:16px; transition:background .12s; }
  .tl summary:hover { background:var(--surface-2); }
  .tl summary::-webkit-details-marker { display:none; }
  .tl summary::before { content:"❖"; color:var(--gold); font-size:11px; }
  .tl summary b { color:var(--accent); font-weight:700; }
  .tl summary .muted { font-family:var(--mono); }
  .tl details[open] summary { border-bottom:1px solid var(--line); }
  .tl .lvl2 { padding:9px 18px 9px 40px; color:var(--muted); font-size:15px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:12px; }
  .tl .lvl2 b { color:var(--accent-2); }
  .tl .lvl2 .muted { font-family:var(--mono); font-variant-numeric:tabular-nums; }

  /* ============================ INTERP ============================ */
  .interp p { line-height:1.8; margin:12px 0; color:var(--ink); font-size:18px; }
  .interp .lead { font-size:19.5px; line-height:1.9; color:var(--ink); }
  .interp .lead::first-letter { font-family:var(--head); font-size:58px; float:left; line-height:.82; padding:5px 12px 0 0; color:var(--accent-2); text-shadow:0 1px 0 #ffffff70; }
  .func-line { display:flex; flex-wrap:wrap; gap:11px 20px; align-items:center; font-size:16px; }
  .func-line .good { color:var(--good); } .func-line .bad { color:var(--bad); }
  .func-line .yk { background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--gold); padding:4px 12px; border-radius:4px; font-weight:700; }

  .yoga { border-left:3px solid var(--gold); padding:14px 18px; margin:12px 0; background:linear-gradient(90deg, color-mix(in srgb,var(--gold) 11%,transparent), color-mix(in srgb,var(--gold) 5%,transparent)); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:16px; box-shadow:var(--shadow-sm); }
  .yoga-favourable { border-left-color:#2e7d32; }
  .yoga-unfavourable { border-left-color:#c62828; }
  .yoga-mixed { border-left-color:var(--gold); }
  .ypol { font-size:10.5px; font-variant:small-caps; letter-spacing:.5px; border-radius:4px; padding:0 6px; margin-left:7px; vertical-align:middle; }
  .ypol-favourable { color:#2e7d32; border:1px solid color-mix(in srgb,#2e7d32 40%,var(--line)); }
  .ypol-unfavourable { color:#c62828; border:1px solid color-mix(in srgb,#c62828 40%,var(--line)); }
  .ypol-mixed { color:#a4690f; border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); }
  .yoga b { color:var(--accent-2); font-size:17px; font-family:var(--head); }
  .yoga .cat { color:var(--faint); font-size:13px; font-weight:600; font-variant:small-caps; letter-spacing:.4px; }
  .yoga .rule { color:var(--muted); font-size:14px; font-style:italic; display:block; margin:5px 0; }

  .dline { padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:16px; line-height:1.65; }
  .dline:last-child { border-bottom:0; }
  .dline b { color:var(--accent); }
  .dline.active { background:color-mix(in srgb,var(--accent-2) 10%,transparent); padding:11px 14px; border-radius:4px; border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent); }
  .dline.active b { color:var(--accent-2); }

  details.pl { margin:9px 0; font-size:15.5px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
  details.pl summary { cursor:pointer; padding:13px 16px; list-style:none; display:flex; align-items:center; gap:9px; transition:background .12s; }
  details.pl summary:hover { background:var(--surface-2); }
  details.pl summary::-webkit-details-marker { display:none; }
  details.pl summary::before { content:"❖"; color:var(--gold); font-size:11px; }
  details.pl[open] summary { border-bottom:1px solid var(--line); }
  details.pl .body { color:var(--muted); padding:14px 18px; line-height:1.7; font-size:15.5px; }

  /* ====== BEGINNER-FIRST READING CARDS (planets / houses) ====== */
  .read-card {
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
    padding:22px 24px; margin:16px 0;
    box-shadow:var(--shadow-sm);
    position:relative; overflow:hidden;
    transition:box-shadow .2s, transform .2s, border-color .2s;
  }
  /* slim saffron→gold spine on each card edge */
  .read-card::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:linear-gradient(180deg, var(--accent), var(--gold));
    opacity:.55; transition:opacity .2s;
  }
  .read-card:hover {
    box-shadow:var(--shadow-lift); transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--gold) 50%, var(--line));
  }
  .read-card:hover::before { opacity:1; }
  .read-card .rc-summary {
    font-family:var(--head); font-weight:600; font-size:21px; line-height:1.5;
    color:var(--ink); display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  }
  .read-card .rc-summary .rc-glyph { color:var(--accent-2); font-family:var(--mono); font-weight:700; font-size:17px; }
  .read-card .rc-summary .rc-text { flex:1; min-width:0; }
  .read-card .rc-beginner {
    font-size:19px; line-height:1.85; color:var(--ink); margin:14px 0 0;
  }
  .read-card .rc-note {
    font-size:17px; line-height:1.7; color:var(--muted); margin:12px 0 0;
    padding:10px 15px; border-left:3px solid var(--gold);
    background:color-mix(in srgb,var(--gold) 9%,transparent); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  }
  .read-card .rc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .read-card .rc-chips .chip { font-size:13.5px; padding:5px 13px; }
  .read-card details.classical {
    margin:14px 0 0; border:1px solid var(--line-soft); border-radius:4px;
    background:var(--surface-2); overflow:hidden;
  }
  .read-card details.classical summary {
    cursor:pointer; list-style:none; padding:11px 15px; font-size:13.5px;
    color:var(--accent-2); font-variant:small-caps; letter-spacing:.5px; font-weight:600;
    display:flex; align-items:center; gap:8px; transition:background .12s;
  }
  .read-card details.classical summary:hover { background:color-mix(in srgb,var(--accent-2) 8%,transparent); }
  .read-card details.classical summary::-webkit-details-marker { display:none; }
  .read-card details.classical summary::before { content:"❖"; color:var(--gold); font-size:11px; }
  .read-card details.classical[open] summary { border-bottom:1px solid var(--line-soft); }
  .read-card details.classical .cl-body { padding:14px 17px; font-size:16.5px; line-height:1.75; color:var(--muted); }
  .read-card .rc-verdict { margin-left:2px; }

  /* ====== "NEW TO ASTROLOGY? START HERE" CONCEPTS PANEL ====== */
  .starter {
    border:1px solid var(--gold); border-radius:var(--radius-lg); margin:0 0 24px; overflow:hidden;
    background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 10%,var(--surface)), color-mix(in srgb,var(--gold) 5%,transparent));
    box-shadow:var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent);
  }
  .starter > summary {
    cursor:pointer; list-style:none; padding:16px 20px;
    display:flex; align-items:center; gap:12px; transition:background .14s;
  }
  .starter > summary::-webkit-details-marker { display:none; }
  .starter > summary:hover { background:color-mix(in srgb,var(--gold) 12%,transparent); }
  .starter > summary .st-icon { color:var(--gold); flex:0 0 auto; }
  .starter > summary .st-title { font-family:var(--head); font-size:21px; font-weight:600; color:var(--accent); }
  .starter > summary .st-hint { font-size:16px; color:var(--muted); margin-left:auto; }
  .starter > summary .st-chev { color:var(--gold); font-size:13px; transition:transform .16s; }
  .starter[open] > summary .st-chev { transform:rotate(90deg); }
  .starter[open] > summary { border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,transparent); }
  .starter .st-body { padding:10px 22px 20px; }
  .starter .st-lead { font-size:18px; line-height:1.7; color:var(--ink); margin:12px 0 18px; }
  .starter dl.concepts { margin:0; display:grid; gap:14px; }
  .starter dl.concepts > div {
    padding:15px 18px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s;
  }
  .starter dl.concepts > div:hover { box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .starter dl.concepts dt {
    font-family:var(--head); font-weight:600; font-size:18px; color:var(--accent-2);
    text-transform:capitalize; margin:0 0 5px;
  }
  .starter dl.concepts dd { margin:0; font-size:17px; line-height:1.7; color:var(--ink); }

  .verdict { font-size:12px; font-weight:700; letter-spacing:.5px; font-variant:small-caps; padding:3px 10px; border-radius:4px; }
  .verdict.good { color:var(--good); background:color-mix(in srgb,var(--good) 15%,transparent); border:1px solid var(--good); }
  .verdict.bad  { color:var(--bad);  background:color-mix(in srgb,var(--bad) 12%,transparent);  border:1px solid var(--bad); }
  .verdict.mix  { color:var(--gold); background:color-mix(in srgb,var(--gold) 14%,transparent); border:1px solid var(--gold); }
  .glossary { display:grid; gap:9px; margin-top:8px; }
  .gloss { font-size:15px; line-height:1.6; color:var(--muted); padding:11px 14px; background:var(--surface); border-radius:var(--radius-sm); border:1px solid var(--line-soft); box-shadow:var(--shadow-sm); }
  .gloss b { color:var(--accent); font-family:var(--head); }

  .transit-chips, .aspect-grid { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
  .chip { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 13px; font-size:14px; color:var(--muted); box-shadow:var(--shadow-sm); transition:.14s; }
  .chip:hover { border-color:color-mix(in srgb,var(--gold) 50%,var(--line)); box-shadow:var(--shadow-lift); }
  .chip.k-full { color:#2e7d32; border-color:color-mix(in srgb,#2e7d32 35%,var(--line)); background:color-mix(in srgb,#2e7d32 8%,var(--paper)); font-variant:small-caps; font-weight:600; padding:4px 11px; }
  /* k-soft: a calm amber for an active dosha — a tendency to note, not an alarm */
  .chip.k-soft { color:#9a6a16; border-color:color-mix(in srgb,#b8860b 35%,var(--line)); background:color-mix(in srgb,#b8860b 9%,var(--paper)); font-variant:small-caps; font-weight:600; padding:4px 11px; }
  .transit-chips .chip b { color:var(--ink); }
  .aspect-grid .chip b { color:var(--accent); font-family:var(--mono); }

  .pill { display:inline-block; padding:4px 13px; border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); border-radius:20px; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.3px; vertical-align:middle; font-variant:small-caps; background:color-mix(in srgb,var(--gold) 7%,var(--surface)); }
  .disclaimer { margin-top:22px; padding:16px 18px; background:var(--surface-2); border-radius:var(--radius-sm); border:1px solid var(--line-soft); font-size:13.5px; color:var(--faint); font-style:italic; line-height:1.6; }
  .err { color:var(--bad); padding:16px 18px; background:color-mix(in srgb,var(--bad) 10%,transparent); border:1px solid color-mix(in srgb,var(--bad) 30%,transparent); border-radius:4px; }

  /* ============================ EMPTY STATE ============================ */
  .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 30px; color:var(--muted); }
  .empty .glyph { width:116px; height:116px; opacity:.85; margin-bottom:24px; color:var(--accent); filter:drop-shadow(0 8px 16px #5c3a1022); }
  .empty h2 { font-size:28px; color:var(--accent); margin:0 0 12px; font-weight:600; letter-spacing:.3px; text-shadow:0 1px 0 #ffffff70; }
  .empty h2 .deva { font-family:var(--deva); color:var(--gold); font-size:21px; }
  .empty p { max-width:520px; line-height:1.8; font-size:16.5px; margin:0; }
  .empty .kbd { color:var(--accent-2); font-weight:600; font-variant:small-caps; }
  .sample-hero { margin-top:30px; padding:14px 30px; font-size:16px; font-weight:600; font-family:var(--head);
    color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none; border-radius:9px;
    cursor:pointer; box-shadow:0 6px 18px #5c3a1033; transition:transform .15s, box-shadow .15s; letter-spacing:.3px; }
  .sample-hero:hover { transform:translateY(-2px); box-shadow:0 9px 24px #5c3a1044; }
  .sample-sub { margin-top:12px !important; font-size:13px !important; color:var(--gold); opacity:.85; }

  /* ============================ TERMS / TOOLTIPS ============================ */
  .term { border-bottom:1px dotted var(--faint); cursor:help; }
  .term:hover { border-bottom-color:var(--accent-2); color:var(--accent-2); }

  /* ============================ TIER BADGES + SCHOOL TAGS ============================ */
  .tier { display:inline-block; padding:3px 10px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:.4px; font-variant:small-caps; vertical-align:middle; cursor:help; border:1px solid transparent; }
  .tier.computed       { background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,transparent); }
  .tier.classical-rule { background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); border-color:color-mix(in srgb,var(--gold) 40%,transparent); }
  .tier.ai-summary     { background:var(--surface-2); color:var(--muted); border-color:var(--line); }
  .school-tag { display:inline-block; padding:3px 10px; border-radius:4px; font-size:12px; font-weight:600; letter-spacing:.2px; vertical-align:middle; margin-left:5px; font-variant:small-caps;
    background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
  .claim-line { line-height:1.7; margin:9px 0; font-size:15.5px; }
  .claim-line .ctext { color:var(--ink); }
  .tier-legend { display:grid; gap:9px; margin:6px 0 20px; }
  .tier-legend .row { display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--muted); line-height:1.5; }
  .tier-legend .row .tier { flex:0 0 auto; margin-top:1px; }

  /* ============================ STATUS PILLS ============================ */
  .status-pill { display:inline-block; padding:4px 13px; border-radius:20px; font-size:12.5px; font-weight:700; letter-spacing:.3px; font-variant:small-caps; }
  .status-pill.present { background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); }
  .status-pill.absent  { background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); border:1px solid color-mix(in srgb,var(--good) 35%,transparent); }
  .status-pill.divergent { background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); }

  /* ============================ INFO / REMEDY / CONDITIONAL CARDS ============================ */
  .info-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:19px 22px; margin-bottom:18px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; }
  .info-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .info-card .ic-head { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:11px; }
  .info-card .ic-head h4 { margin:0; font-size:17.5px; font-weight:600; color:var(--accent); }
  .info-card .ic-body { font-size:15.5px; line-height:1.7; color:var(--muted); }
  .info-card .ic-body p { margin:8px 0; }
  .ic-sub { font-size:13px; color:var(--accent-2); font-variant:small-caps; letter-spacing:.7px; font-weight:700; margin:16px 0 7px; }
  .ref-list { list-style:none; padding:0; margin:6px 0; display:grid; gap:8px; }
  .ref-list li { font-size:14.5px; line-height:1.55; color:var(--muted); padding:10px 14px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); }
  .cancel-list { list-style:none; padding:0; margin:6px 0; display:grid; gap:7px; }
  .cancel-list li { font-size:14.5px; color:var(--good); padding:8px 14px; background:color-mix(in srgb,var(--good) 12%,transparent); border-radius:var(--radius-sm); }
  .cancel-list li::before { content:"✓ "; font-weight:700; }

  .remedy-grid { display:grid; gap:10px 20px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  .remedy-grid .rg-item { font-size:14.5px; }
  .remedy-grid .rg-item .k { color:var(--faint); font-size:11.5px; font-variant:small-caps; letter-spacing:.5px; display:block; }
  .remedy-grid .rg-item .v { color:var(--ink); }
  .remedy-primary { border-left:3px solid var(--gold); }
  .caution-flag { font-size:14.5px; color:var(--bad); padding:10px 14px; background:color-mix(in srgb,var(--bad) 10%,transparent); border-radius:var(--radius-sm); margin:7px 0; border:1px solid color-mix(in srgb,var(--bad) 25%,transparent); }
  .mantra { font-style:italic; color:var(--accent-2); font-family:var(--head); }

  /* conditional rules — deepest inferences, given prominence */
  .cond-card { border-left:3px solid var(--accent); padding:15px 18px; margin:12px 0; background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 9%,transparent), color-mix(in srgb,var(--accent) 4%,transparent)); border-radius:0 var(--radius-sm) var(--radius-sm) 0; box-shadow:var(--shadow-sm); }
  .cond-card .claim-line { margin:0; }

  /* ============================ PANCHANGA ============================ */
  .pch-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  .pch-cell { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s; }
  .pch-cell:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
  .pch-cell .k { font-size:12px; color:var(--accent-2); font-variant:small-caps; letter-spacing:.7px; font-weight:700; }
  .pch-cell .v { font-size:20px; color:var(--ink); font-weight:600; margin-top:5px; font-family:var(--head); }
  .pch-cell .sub { font-size:14px; color:var(--muted); margin-top:3px; }

  /* ============================ ASHTAKAVARGA ============================ */
  .sav-row { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; margin:6px 0 4px; }
  .sav-cell { text-align:center; border-radius:var(--radius-sm); padding:11px 4px; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-sm); transition:transform .14s; }
  .sav-cell:hover { transform:translateY(-2px); }
  .sav-cell .sgn { font-size:12px; color:var(--faint); font-weight:700; font-variant:small-caps; letter-spacing:.3px; }
  .sav-cell .num { font-size:21px; font-weight:700; margin-top:4px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .sav-cell.good { background:color-mix(in srgb,var(--good) 14%,transparent); border-color:color-mix(in srgb,var(--good) 40%,transparent); }
  .sav-cell.good .num { color:var(--good); }
  .sav-cell.accent { background:color-mix(in srgb,var(--gold) 12%,transparent); border-color:color-mix(in srgb,var(--gold) 35%,transparent); }
  .sav-cell.accent .num { color:var(--gold); }
  .sav-cell.bad { background:color-mix(in srgb,var(--bad) 10%,transparent); border-color:color-mix(in srgb,var(--bad) 35%,transparent); }
  .sav-cell.bad .num { color:var(--bad); }
  .sav-cell.muted-cell .num { color:var(--muted); }
  table.bav-table td.bnum { text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; }
  table.bav-table td.bav-total { font-weight:700; color:var(--accent-2); text-align:center; font-family:var(--mono); }
  table.bav-table th.bav-total { color:var(--accent-ink); }

  /* ============================ FRIENDSHIP GRID ============================ */
  table.rel-table td, table.rel-table th { text-align:center; font-size:11.5px; padding:7px 6px; }
  table.rel-table tbody tr:nth-child(even), table.rel-table tbody tr:nth-child(odd) { background:transparent; }
  table.rel-table td.rl-self { background:repeating-linear-gradient(45deg,var(--line-soft),var(--line-soft) 4px,transparent 4px,transparent 8px); }
  .rl-gf  { background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); font-weight:700; }
  .rl-f   { background:color-mix(in srgb,var(--good) 10%,transparent); color:var(--good); }
  .rl-n   { background:var(--surface-2); color:var(--muted); }
  .rl-e   { background:color-mix(in srgb,var(--bad) 10%,transparent); color:var(--bad); }
  .rl-ge  { background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad); font-weight:700; }
  .rel-row-head { font-weight:700; color:var(--ink); }

  /* ============================ DIVISIONAL CARDS ============================ */
  .varga-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 21px; margin-bottom:16px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; }
  .varga-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .varga-card .vc-head { display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:9px; }
  .varga-card .vc-head .div { font-family:var(--mono); color:var(--gold); font-weight:700; }
  .varga-card .vc-head h4 { margin:0; font-size:17.5px; color:var(--accent); }
  .varga-card .vc-shows { font-size:14.5px; color:var(--muted); font-style:italic; margin:0 0 9px; }
  .varga-card .vc-meta { display:flex; flex-wrap:wrap; gap:9px 20px; font-size:14px; color:var(--muted); margin:4px 0 10px; }
  .varga-card .vc-meta b { color:var(--ink); font-family:var(--mono); }
  details.varga-card > summary.vc-head { cursor:pointer; list-style:none; margin-bottom:0; }
  details.varga-card > summary.vc-head::-webkit-details-marker { display:none; }
  details.varga-card[open] > summary.vc-head { margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:9px; }
  .varga-card .vc-area { font-size:13.5px; color:var(--muted); font-style:italic; }
  .varga-card .vc-body p { margin:0 0 9px; font-size:14.5px; line-height:1.6; }
  .vc-grid { display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; margin-top:8px; }
  @media (max-width:620px){ .vc-grid { grid-template-columns:1fr; } }
  .varga-diamond { width:100%; max-width:230px; height:auto; }
  .varga-card .vc-constr, .varga-card .vc-how { color:var(--ink); }
  .varga-card .vc-body .lbl { display:inline-block; font-variant:small-caps; letter-spacing:.6px; font-size:12px; color:var(--gold); font-weight:700; margin-right:6px; }
  .vp-table { width:100%; margin-top:8px; font-size:14px; }
  .vp-table th { text-align:left; font-size:11.5px; font-variant:small-caps; letter-spacing:.5px; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--line); }
  .vp-table td { padding:4px 8px; border-bottom:1px solid color-mix(in srgb,var(--line) 50%, transparent); }
  .vp-table tr.vg td { background:color-mix(in srgb,var(--gold) 12%, transparent); }
  .vg-tag { font-size:10.5px; color:var(--gold); font-variant:small-caps; letter-spacing:.5px; border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); border-radius:4px; padding:0 5px; margin-left:5px; }

  /* ============================ LAL KITAB (distinct tradition) ============================ */
  .lalkitab {
    border:1px solid var(--accent-2);
    border-radius:var(--radius-lg); padding:24px 26px;
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent-2) 9%, var(--surface)), color-mix(in srgb,var(--accent-2) 5%, var(--surface)));
    box-shadow:var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 22%, transparent);
  }
  .lalkitab > h2 { color:var(--accent-2); border-bottom-color:var(--accent-2); }
  .lalkitab .lk-intro { font-size:16.5px; line-height:1.75; color:var(--ink); margin:6px 0 18px; }
  .lk-list { list-style:none; padding:0; margin:6px 0 18px; display:grid; gap:7px; }
  .lk-list li { font-size:15px; padding:10px 14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-sm); color:var(--muted); }
  .lk-list li b { color:var(--accent); }
  .lk-debt { padding:14px 17px; margin:9px 0; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); }
  .lk-debt.active { border-color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 8%,transparent); }
  .lk-debt .dh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
  .lk-debt .dh h4 { margin:0; font-size:16px; color:var(--accent); }
  .lk-debt .meaning { font-size:15px; color:var(--ink); line-height:1.65; margin:5px 0; }
  .lk-debt .hint { font-size:14.5px; color:var(--muted); font-style:italic; margin:5px 0; }
  .lk-totka { display:grid; gap:6px; list-style:none; padding:0; margin:5px 0; }
  .lk-totka li { font-size:14.5px; color:var(--ink); padding:7px 13px; background:color-mix(in srgb,var(--gold) 10%,transparent); border-radius:var(--radius-sm); }
  .lk-totka.donate li { background:color-mix(in srgb,var(--good) 10%,transparent); color:var(--good); }
  .lk-totka.avoid li { background:color-mix(in srgb,var(--bad) 9%,transparent); color:var(--bad); }
  .lk-totka.avoid li::before { content:"✕ "; font-weight:700; }
  .lk-prio { border-left:3px solid var(--accent-2); padding:12px 15px; margin:8px 0; background:var(--surface); border-radius:0 4px 4px 0; }
  .lk-prio h4 { margin:0 0 8px; font-size:16px; color:var(--accent-2); }

  /* ============================ SAVE PDF BUTTON ============================ */
  .pdf-btn { margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line)); color:var(--muted);
    border-radius:24px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:.16s; font-family:var(--sans); font-variant:small-caps; letter-spacing:.4px; box-shadow:var(--shadow-sm); }
  .pdf-btn:hover { color:var(--accent); border-color:var(--gold); box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .pdf-btn svg { display:block; }

  /* ============================ RESPONSIVE ============================ */
  @media (max-width:1080px) { .grid2 { grid-template-columns:1fr; } }
  @media (max-width:840px) {
    .reader { grid-template-columns:1fr; }
    .margin-index { display:none; }
    .index-top { display:block; margin:10px 0 18px; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
    .index-top .it-cluster { border-bottom:1px solid var(--line-soft); }
    .index-top .it-cluster:last-child { border-bottom:0; }
    .index-top .it-head { display:flex; align-items:center; gap:10px; width:100%; background:var(--surface); border:0; cursor:pointer; text-align:left;
      padding:13px 16px; color:var(--ink); font-family:var(--head); font-size:17px; }
    .index-top .it-head .motif { width:21px; height:21px; color:var(--gold); flex:0 0 auto; }
    .index-top .it-head .chev { margin-left:auto; color:var(--gold); font-size:10px; transition:transform .16s; }
    .index-top .it-cluster.open .it-head .chev { transform:rotate(90deg); }
    .index-top .it-cluster.open .it-head { color:var(--accent); background:var(--surface-2); }
    .index-top .it-subs { display:none; overflow-x:auto; white-space:nowrap; padding:8px 10px; background:var(--surface-2); }
    .index-top .it-cluster.open .it-subs { display:block; }
    .index-top .it-subs button { display:inline-block; background:var(--surface); border:1px solid var(--line); color:var(--muted);
      border-radius:20px; padding:8px 16px; margin:0 6px 0 0; font-size:14px; cursor:pointer; font-family:var(--sans); }
    .index-top .it-subs button.active { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
    .colophon, .results { margin-left:16px; margin-right:16px; padding-left:16px; padding-right:16px; }
    .chart-head h2 { font-size:26px; }
  }