/* SKY-1633: app report/panel CSS, copied verbatim from app.html inline <style> (lines 27-710).
   Shared by /app (app.html keeps its own inline copy) and /sample (sample.html). If app.html
   styles change, re-extract and regenerate src/demo-sample.json. Em dash forbidden. */
/* Flash prevention */
html.l-wait body { visibility: hidden }
[hidden] { display: none !important }

/* ---- CSS bridge: old var names -> new design tokens ---- */
:root {
  --brand:      var(--primary);
  --brand2:     #3b3ab5;
  --bg-elev:    var(--surface);
  --bg-inset:   var(--surface-2);
  --text:       var(--ink);
  --muted:      var(--ink-soft);
  --accent:     var(--primary);
  --radius:     var(--r);
  --hover:      var(--surface-2);
  --bg-grad:    none;
  --line:       var(--border);
  --shadow:     0 4px 24px rgba(20,23,43,.07);
  /* WCAG AA status colors for light mode */
  --green:      #15803d;
  --red:        #b91c1c;
  --retro:      #b91c1c;
  --ecl:        #92400e;
  /* --gold inherits from design-system site.css (#8a6410 light / #D9B765 dark, AA-compliant). */
  --hi:         #15803d; --hi-bd: #86efac; --hi-bg: #f0fdf4;
  --mid:        #92400e; --mid-bd: #fde68a; --mid-bg: #fffbeb;
  --lo:         #374151; --lo-bd: #d1d5db; --lo-bg: #f9fafb;
}
[data-theme="dark"] {
  --bg-elev:    #1a1730;
  --bg-inset:   #110e24;
  --text:       #e8e6f0;
  --muted:      #8b87a8;
  --hover:      #201d3a;
  --line:       #2e2a4a;
  --shadow:     0 8px 32px rgba(0,0,0,.45);
  --green:      #3fb950;
  --red:        #ff5470;
  --retro:      #ff5470;
  --ecl:        #d4a017;
  --hi:         #22c55e; --hi-bd: #166534; --hi-bg: rgba(34,197,94,.12);
  --mid:        #f59e0b; --mid-bd: #92400e; --mid-bg: rgba(245,158,11,.12);
  --lo:         #9ca3af; --lo-bd: #374151; --lo-bg: rgba(75,85,99,.15);
}

/* ---- Dark mode box header colors (vivid) ---- */
[data-theme="dark"] .bx-pos .bxh  { color: #3fb950 }
[data-theme="dark"] .bx-warn .bxh { color: #ff5470 }
[data-theme="dark"] .bx-do .bxh   { color: #3fb950 }
[data-theme="dark"] .bx-no .bxh   { color: #ff5470 }
[data-theme="dark"] .bx-health .bxh { color: #3fb6d9 }
[data-theme="dark"] .bx-coll .bxh { color: #9d7bff }
[data-theme="dark"] .dodont .dd-do { border-left-color: #3fb950 }
[data-theme="dark"] .dodont .dd-no { border-left-color: #ff5470 }

/* ---- Dark mode star field ---- */
[data-theme="dark"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 78% 9%,  rgba(255,255,255,.5),  transparent 55%),
    radial-gradient(1.5px 1.5px at 32% 64%, rgba(232,196,118,.55), transparent 55%),
    radial-gradient(1px 1px at 88% 46%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1px 1px at 55% 30%, rgba(255,255,255,.4),  transparent 55%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(170,160,255,.5), transparent 55%),
    radial-gradient(1px 1px at 67% 86%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1px 1px at 42% 7%,  rgba(255,255,255,.35), transparent 55%),
    radial-gradient(1.5px 1.5px at 95% 72%, rgba(232,196,118,.4), transparent 55%),
    radial-gradient(1px 1px at 22% 41%, rgba(255,255,255,.3),  transparent 55%)
}

/* ---- Layout ---- */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0 }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans), system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.55;
  padding-bottom: 54px;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: background-color .25s, color .25s;
}
body > main { flex: 1 0 auto }
body > footer { flex-shrink: 0 }
a { color: var(--primary) }
.wrap { max-width: 940px; margin: 0 auto; padding: 0 16px; width: 100% }

/* ---- Boot spinner ---- */
.boot-loading { display: flex; align-items: center; justify-content: center; min-height: 58vh }
.boot-loading .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: bspin .8s linear infinite }
@keyframes bspin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .boot-loading .spin { animation: none } }

/* ---- Inline button spinner (uzun async butonlar) ---- */
.btn-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: bspin .7s linear infinite }
button[disabled] .btn-spin { opacity: .9 }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation: none } }

/* ---- Tam ekran yukleme overlay'i (computeReport suresince) ---- */
.load-overlay { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px) }
.load-overlay .spin { width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--primary); animation: bspin .8s linear infinite }
.load-overlay .load-txt { font-size: 14px; color: var(--ink); letter-spacing: .2px }
@media (prefers-reduced-motion: reduce) { .load-overlay .spin { animation: none } }

/* ---- App header (compact, 56px) ---- */
.site-header { height: 56px; padding: 0 16px; position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border) }
.brand { font-family: var(--font-display), Georgia, serif; font-size: 18px; font-weight: 800;
  letter-spacing: .4px; white-space: nowrap; text-decoration: none; color: var(--ink);
  display: flex; align-items: center; gap: 6px }
.brand .g { color: var(--gold) }
.brand small { display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 400; letter-spacing: .4px; font-style: italic }
.top-actions { display: flex; gap: 8px; align-items: center }
.lang-sel { height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 13px; padding: 0 8px; cursor: pointer; max-width: 130px }
.lang-sel:hover { border-color: var(--primary) }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .15s }
.icon-btn:hover { border-color: var(--primary); transform: translateY(-1px) }
.icon-btn.active { border-color: var(--primary); color: var(--primary) }
.btn-mini { height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 600; padding: 0 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: .15s; font-family: inherit; white-space: nowrap }
.btn-mini:hover { border-color: var(--primary); transform: translateY(-1px) }
.btn-mini.gold { background: #e8c66b; border-color: #e8c66b; color: #241d3a }
.btn-mini.gold:hover { filter: brightness(1.07) }
.btn-mini .acct-em { max-width: 120px; overflow: hidden; text-overflow: ellipsis }

/* ---- App home (modal backdrop content) ---- */
.app-home { max-width: 620px; margin: 0 auto; text-align: center; padding: 74px 16px 40px }
.app-home .ah-glyph { font-size: 46px; color: var(--gold); margin-bottom: 14px }
.app-home .ah-title { font-family: var(--font-display), Georgia, serif; font-weight: 800;
  font-size: clamp(34px,6vw,52px); letter-spacing: -.5px; margin: 0; color: var(--ink) }
.app-home .ah-title b { color: var(--primary) }
.app-home .ah-sub { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 16px auto 26px; max-width: 540px }
.app-home .ah-cta { font-size: 16px; padding: 14px 30px }

/* ---- Modals ---- */
.modal-ov { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start;
  justify-content: center; padding: 42px 16px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); animation: fade .18s ease }
.modal-box { width: 100%; max-width: 780px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 28px 70px -28px rgba(0,0,0,.3); padding: 16px 20px 20px; position: relative }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px }
.modal-close { font-size: 14px }
.sh { font-family: var(--font-display), Georgia, serif; font-weight: 700; font-size: 15px; color: var(--ink) }
body.modal-open { overflow: hidden }
.modal-box .formwrap { margin: 12px 0 0 }
.modal-box .form { border: 0; box-shadow: none; background: transparent; padding: 6px 0 0; margin-top: 4px }
@keyframes fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1 } }

/* ---- Account modal actions ---- */
.acct-action { display: block; width: 100%; text-align: left; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); border-radius: 12px; padding: 13px 15px;
  margin-top: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s }
.acct-action:hover { border-color: var(--primary) }
.acct-action.danger { color: var(--red) }
.acct-action.danger:hover { border-color: var(--red) }

/* ---- City autocomplete ---- */
.citypick { position: relative }
.city-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.2) }
.city-opt { padding: 9px 13px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 10px; align-items: center }
.city-opt:last-child { border-bottom: 0 }
.city-opt:hover, .city-opt.active { background: var(--surface-2) }
.city-opt .city-cc { color: var(--ink-soft); font-size: 12px; white-space: nowrap }

/* ---- Form ---- */
.formwrap { margin: 16px 0 6px }
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; margin-top: 8px }
.f-span2 { grid-column: span 2; min-width: 0 }
.form.collapsed { display: none }
.form .ftitle { grid-column: 1/-1; font-size: 13px; color: var(--ink-soft); margin: -2px 0 2px; letter-spacing: .3px }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.field label { font-size: 12px; color: var(--ink-soft) }
.bm-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap }
.bm-row > input[type=date] { flex: 1 1 150px }
.bm-time { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px }
.chk-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft) }
.chk-inline input { width: auto }
.about-toggle { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 14px; color: var(--ink); font-family: inherit; font-size: 13.5px; cursor: pointer;
  width: 100%; text-align: start; margin-top: 4px }
.about-toggle:hover { border-color: var(--primary) }
.about-toggle .at-chev { color: var(--ink-soft); transition: transform .2s }
.about-toggle[aria-expanded="true"] .at-chev { transform: rotate(180deg) }
.about-sec { grid-column: 1/-1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; align-items: end }
input, select { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  border-radius: 10px; padding: 10px 11px; font-size: 14px; font-family: inherit; width: 100% }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) }
.btn { grid-column: 1/-1; background: var(--primary); color: #fff; border: none;
  padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 650; cursor: pointer;
  letter-spacing: .3px; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 60%, transparent) }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px) }
.btn:active { transform: none }
.row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px }
.hidden { display: none !important }
.chk { display: flex; flex-direction: row; align-items: center; gap: 7px }
.chk input { width: auto }
.consent label a { color: var(--primary) }

/* ---- Tabs ---- */
.tabs { position: sticky; top: 56px; z-index: 30; display: flex; gap: 4px; padding: 8px 0; margin: 6px 0 4px;
  overflow-x: auto; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px) }
.tab { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: .15s }
.tab:hover { color: var(--ink) }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff }
.panel { display: none; animation: fade .2s ease }
.panel.active { display: block }
.tab .ti { margin-right: 5px }
.tab .tl { display: inline }

/* ---- Cards ---- */
.card, .summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px; margin: 12px 0; box-shadow: var(--shadow) }
.bigtrio { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px }
.bt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px; text-align: center }
.bt .l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px }
.bt .v { font-size: 19px; font-weight: 700; margin-top: 3px }
table { width: 100%; border-collapse: collapse; font-size: 13px }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border) }
th { color: var(--ink-soft); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .5px }
td .rx { color: var(--red); font-weight: 700; font-size: 11px }
.note { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px }
.note b { color: var(--ink) }
.schools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
@media (max-width: 680px) { .schools { grid-template-columns: 1fr } }
.school { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px }
.school .sh { color: var(--primary); font-weight: 650; font-size: 13.5px; margin-bottom: 7px }
.school .sb { font-size: 13px; line-height: 1.65 }
.school .sb b { color: var(--ink); font-weight: 600 }
.purpose-hero { background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 12px;
  padding: 15px 17px; font-size: 15px; line-height: 1.6; margin: 8px 0 }
.purpose-hero b { color: var(--ink) }
.psplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 }
@media (max-width: 680px) { .psplit { grid-template-columns: 1fr } }
.pcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px }
.pcard.pp { border-left: 3px solid var(--green) }
.pcard.pn { border-left: 3px solid var(--red) }
.pcard.ps { border-left: 3px solid var(--mid); margin-top: 0 }
.pcard .ph { font-weight: 650; font-size: 13px; color: var(--primary); margin-bottom: 6px }
.pcard .pb { font-size: 13px; line-height: 1.6 }
.pcard .pb b { color: var(--ink) }
.pcard .pb .pi { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 12.5px; font-style: italic }
.kissadan { background: color-mix(in srgb, var(--gold) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, var(--border)); border-radius: 12px; padding: 14px 16px; margin-top: 12px }
.kissadan .kh { color: var(--primary); font-weight: 700; font-size: 14px; margin-bottom: 6px }
.kissadan .kb { font-size: 13.5px; line-height: 1.7 }
.kissadan .kb b { color: var(--ink) }
.explain { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 11px; padding: 12px 14px; font-size: 12.5px; line-height: 1.75; margin: 8px 0 14px }
.explain b { color: var(--ink) }
.fam { display: grid; gap: 11px; margin: 10px 0 }
.frow { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px }
.frow .fk { font-size: 14.5px }
.frow .fk b { color: var(--ink) }
.frow .fexp { font-size: 12.5px; margin: 5px 0 7px }
.frow .fexp b { color: var(--primary) }
.frow .fd { font-size: 12px; color: var(--ink-soft); background: var(--surface); border-radius: 9px; padding: 7px 10px; margin-bottom: 9px }
.frow .fd b { color: var(--ink) }
.frow .ftl { font-size: 12px; color: var(--primary); margin-bottom: 6px; font-weight: 600 }
.tline { border-left: 2px solid var(--border); padding: 6px 0 6px 10px; margin: 6px 0 }
.tline.high { border-left-color: var(--hi) }
.tline.mid  { border-left-color: var(--mid) }
.tline.low  { border-left-color: var(--lo) }
.tline .th { font-size: 12.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px }
.tline .th .pct { font-size: 11px; color: var(--primary); white-space: nowrap }
.tline .tx { font-size: 12px; color: var(--ink-soft); margin-top: 3px }
.tline .tx b { color: var(--ink) }
.tline .tx i { color: var(--primary); font-style: normal }
.hsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
@media (max-width: 680px) { .hsplit { grid-template-columns: 1fr } }
.lots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
@media (max-width: 680px) { .lots { grid-template-columns: 1fr } }
.lot { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 12.5px }
.lot b { color: var(--primary) }
.lot .lt { color: var(--ink-soft); font-size: 11.5px }

/* ---- Calendar toolbar ---- */
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; align-items: center }
.pill { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 13px }
.pill b { color: var(--primary) }
.pill.green b { color: var(--green) }
.pill.red b { color: var(--red) }
.filters { position: sticky; top: 104px; z-index: 20; padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px) }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; cursor: pointer;
  color: var(--ink); font-size: 13px; font-weight: 600; transition: .12s }
.filter-toggle:hover { border-color: var(--primary) }
.filter-toggle .ft-ico { color: var(--primary) }
.filter-toggle .ft-chev { color: var(--ink-soft); transition: transform .2s }
.filter-toggle.open .ft-chev { transform: rotate(180deg) }
.filter-dd { position: fixed; top: 54px; right: 8px; z-index: 55; width: min(330px, calc(100vw - 16px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px;
  box-shadow: 0 12px 34px rgba(0,0,0,.2) }
.filter-dd[hidden] { display: none }
[dir="rtl"] .filter-dd { right: auto; left: 8px }
.fd-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--border) }
.fd-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-bottom: 9px; font-weight: 600 }
.filter-panel-grid { display: flex; flex-wrap: wrap; gap: 7px }
.fbtn { background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; cursor: pointer; transition: .12s; white-space: nowrap }
.fbtn:hover { color: var(--ink) }
.fbtn.active { background: var(--primary); border-color: var(--primary); color: #fff }

/* ---- Month headings and today marker ---- */
.month-anchor { position: relative; height: 0; visibility: hidden; scroll-margin-top: 116px }
.month-h { position: sticky; top: 104px; z-index: 15; scroll-margin-top: 120px; margin: 24px 0 13px;
  text-align: center; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 3px 14px rgba(0,0,0,.08); padding: 11px 16px }
.month-h .mh-pill { font-family: var(--font-display), Georgia, serif; color: var(--primary);
  font-weight: 800; font-size: 19px; letter-spacing: .5px }
@media (max-width: 560px) { .month-h .mh-pill { font-size: 17px } }
.todaymark { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--primary); font-size: 12.5px; font-weight: 700 }
.todaymark::before, .todaymark::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent) }
.todaymark.pulse { animation: tm-pulse 1.2s ease 3 }
@keyframes tm-pulse { 0%, 100% { text-shadow: none; transform: scale(1) } 50% { text-shadow: 0 0 14px var(--primary); transform: scale(1.06) } }
@media (prefers-reduced-motion: reduce) { .todaymark.pulse { animation: none } }

/* ---- Month rail ---- */
.month-rail { position: fixed; right: 7px; top: 118px; bottom: 74px; z-index: 25; display: flex;
  flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 2px;
  touch-action: none; user-select: none }
.month-rail::before { content: ""; position: absolute; right: 10px; top: -4px; bottom: -4px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent) }
.mr-item { display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 0;
  position: relative; z-index: 1; transition: .15s }
.mr-item .mr-lbl { opacity: 0; transform: translateX(5px); transition: .15s; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px }
.mr-item .mr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; transition: .15s; outline: 3px solid var(--bg) }
.month-rail:hover .mr-lbl { opacity: 1; transform: none }
.mr-item:hover .mr-dot { background: var(--primary) }
.mr-item.active { color: var(--primary) }
.mr-item.active .mr-lbl { opacity: 1; transform: none; color: var(--primary); border-color: var(--primary) }
.mr-item.active .mr-dot { background: var(--primary); transform: scale(1.6) }
.month-rail.scrubbing .mr-lbl { opacity: 0 }
.month-rail.scrubbing .mr-item.active .mr-lbl { opacity: 1 }
[dir="rtl"] .month-rail { right: auto; left: 7px; align-items: flex-start }
[dir="rtl"] .month-rail::before { right: auto; left: 10px }
[dir="rtl"] .mr-item { flex-direction: row-reverse }

/* ---- Event cards ---- */
.event { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; margin: 10px 0; overflow: hidden; transition: .15s }
.event:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) }
.event.high {
  border-color: var(--primary); border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface) 55%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent), 0 8px 26px -10px color-mix(in srgb, var(--primary) 40%, transparent);
}
[dir="rtl"] .event.high { border-left: 1px solid var(--primary); border-right: 4px solid var(--primary);
  background: linear-gradient(270deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface) 55%) }
.ehead { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; user-select: none }
.ehead:hover { background: var(--surface-2) }
.datebadge { flex: 0 0 auto; text-align: center; width: 52px }
.datebadge .d { font-size: 21px; font-weight: 800; line-height: 1 }
.datebadge .m { font-size: 9.5px; color: var(--ink-soft); text-transform: uppercase; margin-top: 2px }
.icon { font-size: 20px; width: 30px; text-align: center }
.etitle { flex: 1; min-width: 0 }
.etitle .t { font-weight: 650; font-size: 15px }
.etitle .s { font-size: 12px; color: var(--ink-soft); margin-top: 2px }
.etitle .s.dur { color: var(--primary); margin-top: 3px }
.cluster-note { background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 8px; padding: 8px 11px; margin: 12px 0 11px; font-size: 12.5px; line-height: 1.42 }
.dodont { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap }
.dodont .dd { flex: 1; min-width: 180px; background: color-mix(in srgb, var(--ink-soft) 5%, transparent); border-radius: 8px; padding: 8px 11px }
.dodont .ddh { font-weight: 700; font-size: 12.5px; margin-bottom: 5px }
.dodont .dd-do { border-left: 3px solid var(--green) }
.dodont .dd-no { border-left: 3px solid var(--red) }
.dodont ul { margin: 0; padding-left: 17px }
.dodont li { font-size: 12.5px; margin: 3px 0; line-height: 1.35 }
@media (max-width: 560px) { .dodont { flex-direction: column } }

/* ---- Badges ---- */
.tag { font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; color: var(--primary); white-space: nowrap }
.tag.ecl { color: var(--ecl); border-color: color-mix(in srgb, var(--ecl) 40%, var(--border)) }
.ibadge { font-size: 11px; border-radius: 7px; padding: 3px 8px; white-space: nowrap; border: 1px solid; font-weight: 600; cursor: help }
.ibadge.high { color: var(--hi); border-color: var(--hi-bd); background: var(--hi-bg) }
.ibadge.mid  { color: var(--mid); border-color: var(--mid-bd); background: var(--mid-bg) }
.ibadge.low  { color: var(--lo); border-color: var(--lo-bd); background: var(--lo-bg) }
.chev { color: var(--ink-soft); transition: transform .2s }
.event.open .chev { transform: rotate(90deg) }
.ebody { display: none; padding: 4px 15px 16px; border-top: 1px solid var(--border) }
.event.open .ebody { display: block }

/* ---- Sectioned card (overview + box grid) ---- */
.sec-info { margin-top: 12px; background: color-mix(in srgb, var(--ink-soft) 5%, transparent);
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px }
.sech { font-weight: 700; font-size: 12.5px; letter-spacing: .4px; color: var(--primary);
  margin-bottom: 7px; text-transform: uppercase }
.ilist { list-style: none; margin: 0; padding: 0 }
.ilist li { font-size: 13.5px; line-height: 1.5; padding: 6px 0; border-bottom: 1px dashed var(--border) }
.ilist li:last-child { border-bottom: 0 }
.ilist b { color: var(--ink); font-weight: 600 }
.punchbar { margin-top: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; font-weight: 600 }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.bx { border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; background: color-mix(in srgb, var(--ink-soft) 4%, transparent) }
.bxh { font-weight: 700; font-size: 12px; letter-spacing: .4px; margin-bottom: 6px; text-transform: uppercase; opacity: .95 }
.bx ul { margin: 0; padding-left: 16px }
.bx li { font-size: 13px; line-height: 1.45; margin: 4px 0 }
.bx p { margin: 0; font-size: 13px; line-height: 1.5 }
.bx b { color: var(--ink); font-weight: 600 }
/* WCAG AA box header colors (light mode) */
.bx-pos { background: color-mix(in srgb, #15803d 7%, transparent); border-color: color-mix(in srgb, #15803d 25%, var(--border)) } .bx-pos .bxh { color: #15803d }
.bx-warn { background: color-mix(in srgb, #b91c1c 6%, transparent); border-color: color-mix(in srgb, #b91c1c 22%, var(--border)) } .bx-warn .bxh { color: #b91c1c }
.bx-do { border-color: color-mix(in srgb, #15803d 25%, var(--border)) } .bx-do .bxh { color: #15803d }
.bx-no { border-color: color-mix(in srgb, #b91c1c 22%, var(--border)) } .bx-no .bxh { color: #b91c1c }
.bx-health { background: color-mix(in srgb, #0369a1 6%, transparent); border-color: color-mix(in srgb, #0369a1 22%, var(--border)) } .bx-health .bxh { color: #0369a1 }
.bx-advice { background: color-mix(in srgb, var(--primary) 6%, transparent); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) } .bx-advice .bxh { color: var(--primary) }
.bx-coll { margin-top: 10px; background: color-mix(in srgb, #5b21b6 7%, transparent); border-color: color-mix(in srgb, #5b21b6 25%, var(--border)) } .bx-coll .bxh { color: #5b21b6 }
.bx-punch { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)) } .bx-punch .bxh { color: var(--primary) } .bx-punch p { font-weight: 600 }
.bx-full { grid-column: 1/-1 }
.bx-empty { color: var(--ink-soft); font-style: italic }
/* Natal reading */
.natal-read .nr-house { margin: 6px 0 0 }
.nr-asp { list-style: none; margin: 0; padding: 0 }
.nr-asp li { padding: 8px 0; border-bottom: 1px dashed var(--border) }
.nr-asp li:last-child { border-bottom: 0 }

/* ---- One-color rule: chart/purpose/schools/family panels ---- */
#tab-harita .bx p, #tab-harita .bx li, #tab-harita .nr-house, #tab-harita .nr-asp li, #tab-harita .nr-orb,
#tab-harita .note, #tab-harita td, #tab-harita .bt .l,
#tab-amac p, #tab-amac li, #tab-amac .note, #tab-amac .fexp, #tab-amac td, #tab-amac .sb,
#tab-ekoller p, #tab-ekoller li, #tab-ekoller .note, #tab-ekoller td, #tab-ekoller .sb,
#tab-aile p, #tab-aile li, #tab-aile .note, #tab-aile .fexp, #tab-aile td, #tab-aile .tx, #tab-aile .sb
{ color: var(--text) !important; font-size: 13.5px !important; line-height: 1.6 }
#tab-harita .bx span, #tab-harita .note span, #tab-harita td span,
#tab-amac span, #tab-ekoller .sb span, #tab-ekoller .note span, #tab-aile span
{ color: inherit !important; font-size: inherit !important }
#tab-harita .bx b, #tab-harita .note b, #tab-amac b, #tab-ekoller b, #tab-aile b { color: inherit }
@media (max-width: 560px) { .bgrid { grid-template-columns: 1fr } }

/* ---- Subtabs (daily) ---- */
.subtabs { display: flex; gap: 5px; margin: 6px 0 12px; flex-wrap: wrap }
.subtab { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .12s }
.subtab:hover { color: var(--ink) }
.subtab.active { background: var(--primary); border-color: var(--primary); color: #fff }
.subpanel { display: none }
.subpanel.active { display: block; animation: fade .18s ease }
.subpanel.active > :first-child { margin-top: 12px }
.subpanel .daily { margin-top: 0 }
.daily { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px }
.daily .dh { color: var(--primary); font-weight: 700; font-size: 13px; margin-bottom: 7px; letter-spacing: .3px }
.daily .dsub { color: var(--ink-soft); font-weight: 400; font-size: 11px }
.daily .dl { font-size: 12.5px; line-height: 1.6; padding: 6px 0; border-bottom: 1px dashed var(--border) }
.daily .dl:last-child { border-bottom: 0 }
.daily .dl b { color: var(--ink) }
.daily .d-ok { border-left: 3px solid var(--green); padding-left: 9px; border-bottom: 0;
  background: color-mix(in srgb, var(--green) 6%, transparent); border-radius: 8px; margin-bottom: 4px }
.daily .d-no { border-left: 3px solid var(--red); padding-left: 9px; border-bottom: 0;
  background: color-mix(in srgb, var(--red) 6%, transparent); border-radius: 8px; margin-bottom: 4px }
.daily .d-mid { border-left: 3px solid var(--lo); padding-left: 9px; border-bottom: 0; margin-bottom: 4px }
.empty { color: var(--ink-soft); text-align: center; padding: 40px }

/* ---- Prediction log buttons ---- */
.blist { list-style: none; margin: 12px 0 0; padding: 0 }
.bitem { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border) }
.bitem .x { flex: 1; font-size: 14px }
.bitem .x b { color: var(--ink); font-weight: 600 }
.toggles { display: flex; gap: 6px; flex: 0 0 auto }
.tg { width: 31px; height: 31px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); transition: .12s }
.tg:hover { border-color: var(--primary) }
.tg.tick.on  { background: var(--green); border-color: var(--green); color: #04210f }
.tg.cross.on { background: var(--red); border-color: var(--red); color: #2a060d }
.bitem.done { opacity: .95 }
.bitem.failed { opacity: .5 }
.meta { margin-top: 14px; display: grid; gap: 8px }
.meta div { font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px }
.meta .h { color: var(--red) }
.meta .a { color: var(--green) }
.meta .v { color: var(--primary) }
.exp { font-size: 12.5px; border-left: 3px solid var(--border) }
.exp.high { border-left-color: var(--hi) }
.exp.mid  { border-left-color: var(--mid) }
.exp.low  { border-left-color: var(--lo) }
.exp b { color: var(--ink) }
.punch { font-size: 13.5px !important; font-style: italic; color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border)) !important }

/* ---- Saved charts list ---- */
.charts-sec { padding: 11px 0 2px; border-bottom: 1px dashed var(--border) }
.cs-title { font-weight: 700; font-size: 12.5px; letter-spacing: .4px; color: var(--primary); text-transform: uppercase; margin-bottom: 5px }
.chart-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px dashed var(--border); font-size: 13px }
.chart-row:last-child { border-bottom: 0 }
.chart-row.active .cr-label { color: var(--primary); font-weight: 700 }
.cr-actions { display: flex; gap: 6px; flex: 0 0 auto }
.cr-open { border: 1px solid var(--border); background: var(--surface-2); color: var(--primary);
  border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit }
.cr-open:hover { border-color: var(--primary) }
.cr-del { border: 1px solid var(--border); background: var(--surface-2); color: var(--red);
  border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 12px }
.cr-del:hover { border-color: var(--red) }
.med-note { margin-top: 7px !important; border-top: 1px dashed var(--border); padding-top: 6px; font-style: italic }
.advice-note { margin-top: 9px; font-size: 11.5px; color: var(--ink-soft); font-style: italic; text-align: center }

/* ---- Today hero, year strip, chart wheel ---- */
.today-hero { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin: 10px 0 4px; position: relative; overflow: hidden }
.today-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 5%, transparent), transparent 35%, transparent 70%, color-mix(in srgb, var(--primary) 5%, transparent)) }
.th-head { font-family: var(--font-display), Georgia, serif; font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 9px }
.th-row { display: flex; flex-wrap: wrap; gap: 7px }
.th-pill { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12.5px }
.th-pill.ok   { border-color: color-mix(in srgb, var(--green) 50%, var(--border)) }
.th-pill.warn { border-color: color-mix(in srgb, var(--red) 50%, var(--border)) }
.th-next { margin-top: 10px; font-size: 13px; color: var(--primary) }
.year-strip { display: flex; align-items: flex-end; gap: 3px; margin: 8px 0 2px; padding: 9px 10px 6px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 12px }
.ys-m { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0;
  cursor: pointer; color: var(--ink-soft); font-size: 9.5px; padding: 2px 0; border-radius: 8px; position: relative; transition: .12s }
.ys-m:hover { color: var(--ink); background: var(--surface-2) }
.ys-bar { width: 60%; max-width: 22px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 40%, transparent)) }
.ys-m.now .ys-l { color: var(--primary); font-weight: 800 }
.ys-m.now .ys-bar { background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 40%, transparent)) }
.ys-ecl { position: absolute; top: -4px; right: 14%; color: var(--primary); font-size: 10px }
.wheel-card .wheel-wrap { display: flex; justify-content: center; padding: 6px 0 2px }
.wheel { width: min(360px,86vw); height: auto }
.w-ring { fill: none; stroke: var(--border); stroke-width: 1 }
.w-faint { opacity: .5; stroke-dasharray: 3 4 }
.w-spoke { stroke: var(--border); stroke-width: .7; opacity: .8 }
.w-glyph { font-size: 15px; fill: var(--primary); text-anchor: middle; dominant-baseline: central }
.w-pl { font-size: 16px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-weight: 600 }
.w-axis { stroke: var(--primary); stroke-width: 1.4 }
.w-mc { stroke-dasharray: 5 4 }
.w-axlbl { font-size: 9px; fill: var(--primary); font-weight: 700 }
.w-tick { stroke: var(--ink-soft); stroke-width: .6; opacity: .45 }
.w-asp { stroke-width: 1.5; opacity: .8; stroke-linecap: round }
.w-asp:hover { stroke-width: 2.6; opacity: 1 }
.w-asp-soft { stroke: #0369a1 }
.w-asp-hard { stroke: #b91c1c }
.w-asp-dash { stroke-dasharray: 5 4 }
[data-theme="dark"] .w-asp-soft { stroke: #3fb6d9 }
[data-theme="dark"] .w-asp-hard { stroke: #e05656 }
.w-legend { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: var(--ink-soft); padding: 2px 0 4px; flex-wrap: wrap }
.w-legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 1px }
.w-lg-soft { background: #0369a1 }
.w-lg-hard { background: #b91c1c }
[data-theme="dark"] .w-lg-soft { background: #3fa9c9 }
[data-theme="dark"] .w-lg-hard { background: #d05b5b }

/* ---- Trial bar + paywall ---- */
.buy-btn { flex: none; background: #e8c66b; color: #241d3a; border: 0; border-radius: 10px;
  padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; transition: .15s }
.buy-btn:hover { filter: brightness(1.08) }
.buy-btn:disabled { opacity: .6; cursor: default }
.trial-link { background: none; border: 0; color: var(--primary); cursor: pointer; font-size: 12.5px;
  text-decoration: underline; font-family: inherit; padding: 0 0 0 8px }
.paywall { text-align: center; padding: 34px 20px 30px; margin: 14px 0;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)) }
.paywall .pw-lock { font-size: 34px; margin-bottom: 8px }
.paywall .pw-title { font-family: var(--font-display), Georgia, serif; font-weight: 800; font-size: 21px; margin-bottom: 6px }
.paywall .pw-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.55; max-width: 440px; margin: 0 auto 16px }
.paywall .pw-btn, .paywall-banner .pw-btn { background: #e8c66b; color: #241d3a; border: 0;
  border-radius: 12px; padding: 13px 28px; font-weight: 800; font-size: 15.5px; cursor: pointer; font-family: inherit; transition: .15s }
.paywall .pw-btn:hover, .paywall-banner .pw-btn:hover { filter: brightness(1.08); transform: translateY(-1px) }
.paywall .pw-btn:disabled, .paywall-banner .pw-btn:disabled { opacity: .6; cursor: default }
.paywall .pw-note { color: var(--ink-soft); font-size: 11.5px; margin-top: 10px }
.paywall-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  margin: 18px 0 6px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 16px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)) }
.paywall-banner .pwb-text { display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1 }
.paywall-banner .pwb-text b { font-family: var(--font-display), Georgia, serif; font-size: 16.5px }
.paywall-banner .pwb-text span { color: var(--ink-soft); font-size: 13px }
/* SKY-1709: free chart-tab locked placeholder where a paid section would be. Muted, dashed, with a
   "available in the full version" note so the customer sees what they are missing in the chart. */
.locked-feature { border-style: dashed !important; opacity: .85; }
.locked-feature .lf-title { color: var(--ink-soft); }
.locked-feature .lf-note { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
  color: #b8902f; background: color-mix(in srgb, #e8c66b 18%, transparent); border-radius: 999px; padding: 3px 12px; }

/* ---- RTL support ---- */
[dir="rtl"] .brand small { direction: rtl }
[dir="rtl"] .datebadge { margin-left: 0 }
[dir="rtl"] .chev { margin-left: 0; margin-right: auto }
[dir="rtl"] td { flex-direction: row-reverse }

/* ---- Footer ---- */
#results { scroll-margin-top: 64px }
footer { text-align: center; color: var(--ink-soft); font-size: 11.5px; margin-top: 30px; padding: 0 16px; line-height: 1.7 }
.foot-legal { display: inline-block; margin-top: 4px }
.foot-legal a { color: var(--ink-soft); text-decoration: underline }
.foot-legal a:hover { color: var(--ink) }

/* ---- Mobile (max 560px) ---- */
@media (max-width: 560px) {
  .app-home { padding: 48px 14px 30px }
  .app-home .ah-sub { font-size: 15px }
  .btn-mini { padding: 0 10px; font-size: 12.5px }
  .btn-mini .lbl-full { display: none }
  .btn-mini .acct-em { max-width: 74px }
  .th-pill { font-size: 11.5px; padding: 4px 9px }
  .ys-l { display: none }
  .year-strip { gap: 2px; padding: 8px 8px 5px }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) }
  .wrap { padding: 0 11px }
  #results { scroll-margin-top: 54px }
  .site-header { height: 50px; padding: 0 12px }
  .brand { font-size: 15px }
  .brand small { display: none }
  .icon-btn { width: 34px; height: 34px }
  /* Tabs -> fixed bottom bar */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; margin: 0; gap: 2px;
    overflow: visible; padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 95%, transparent);
    box-shadow: 0 -6px 20px -12px rgba(0,0,0,.12) }
  .tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; border: none;
    background: transparent; color: var(--ink-soft); padding: 5px 2px; border-radius: 10px }
  .tab.active { background: transparent; color: var(--primary) }
  .tab .ti { margin: 0; font-size: 19px; line-height: 1 }
  .tab .tl { font-size: 9.5px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
  .filters { top: 50px; padding: 9px 0 }
  .month-anchor { scroll-margin-top: 62px }
  .month-h { top: 50px; scroll-margin-top: 58px; padding: 8px 0; margin: 20px 0 11px }
  .month-rail { top: 78px; bottom: 64px; right: 3px }
  .month-rail .mr-dot { width: 10px; height: 10px }
  #timeline { padding-right: 18px }
  [dir="rtl"] #timeline { padding-right: 0; padding-left: 18px }
  .stats { font-size: 12px; gap: 6px }
  .form { grid-template-columns: 1fr; padding: 14px; gap: 11px }
  .f-span2 { grid-column: auto }
  .row2 { grid-template-columns: 1fr }
  input, select { font-size: 16px; padding: 11px 12px }
  .summary, .card { padding: 14px }
  .bigtrio { gap: 7px }
  .bt { padding: 10px }
  .bt .v { font-size: 17px }
  table thead { display: none }
  table, tbody, tr, td { display: block; width: 100% }
  tbody tr { border: 1px solid var(--border); border-radius: 11px; margin-bottom: 9px; padding: 9px 12px; background: var(--surface-2) }
  td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px }
  td::before { content: attr(data-l); color: var(--ink-soft); font-size: 11.5px; font-weight: 500 }
  td:first-child { font-weight: 700; font-size: 15.5px; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 4px }
  td:first-child::before { content: "" }
  .ehead { flex-wrap: wrap; row-gap: 8px; padding: 12px 13px; gap: 10px }
  .datebadge { width: 46px }
  .datebadge .d { font-size: 19px }
  .etitle { flex: 1 1 60%; min-width: 0 }
  .etitle .t { font-size: 14.5px }
  .ibadge { font-size: 10.5px; padding: 3px 7px }
  .ibadge .lvfull { display: none }
  .chev { margin-left: auto }
  .ebody { padding: 4px 13px 16px }
  .tg { width: 42px; height: 42px; font-size: 18px; border-radius: 10px }
  .bitem { padding: 11px 0; gap: 12px }
  .bitem .x { font-size: 13.5px }
  .fbtn { padding: 8px 13px; font-size: 13px }
  .explain, .school .sb, .frow .fexp, .frow .fd, .tline .tx, .note, .meta div { font-size: 12.5px }
  .purpose-hero { font-size: 14px; padding: 13px }
  .pcard .pb, .kissadan .kb { font-size: 13px }
  .modal-ov { padding: 14px 8px }
  .modal-box { padding: 13px 13px 16px }
  footer { padding: 0 16px 6px }
}

/* ---- prefers-reduced-motion guard ---- */
@media (prefers-reduced-motion: reduce) {
  .tab, .icon-btn, .btn-mini, .buy-btn, .fbtn, .cr-open, .tg, .acct-action { transition: none }
  .panel.active, .subpanel.active, .modal-ov, .event { animation: none }
  .about-toggle .at-chev { transition: none }
}