:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#637083;
  --line:#e1e5ee;
  --shadow:0 10px 28px rgba(15,23,42,.08);

  --green:#1f6f43;
  --green-500:#22c55e;
  --blue:#1d4ed8;
  --gray:#334155;

  --pill-bg:#eefbf4;
  --pill-br:#c7f0db;

  --btn-bg:#f5f7fb;
  --btn-br:#dfe3ef;

  --r-xl:18px;
  --r-lg:14px;
  --r-md:12px;

  --serif: Georgia,"Times New Roman",Times,serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;

  --qa-bg:#f5f1ff;
  --qa-num:#8b5cf6;

  --header-h: 56px;
}

/* Header */
.site-header{ position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid #eceff5; box-shadow:0 1px 0 #eceff5, 0 8px 22px rgba(0,0,0,.03);}
.site-header__inner{ max-width:1168px; margin:0 auto; padding:10px 18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo svg{ width:22px; height:22px }
.brand__title{ font-family:var(--serif); font-size:28px; font-weight:800; margin:0; letter-spacing:.3px }
.brand-ai{ color:#22c55e; font-weight:900 }
.site-header__info{ margin-left:8px; width:28px; height:28px; border-radius:999px; border:1px solid #d6dae4; display:grid; place-items:center; background:#fff; color:#111; cursor:pointer; }
.site-header__info svg{ width:16px; height:16px }

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.45; font-weight:400; }
.page{ max-width:1168px; margin:0 auto; padding:24px 18px 60px; }

/* Title + date (left only) */
.title{ font-family:var(--serif); font-weight:800; font-size:48px; letter-spacing:.2px; text-align:center; margin:12px 0 14px; }
.date-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px }
.chev{ width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; transition:transform .08s ease;}
.chev:active{ transform:scale(.97) }
.chev svg{ width:18px;height:18px }
.date-chip{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#f5f6fa; color:#4a5568; font-weight:600 }

/* Grid + cards */
.grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px }
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:hidden }

/* Document + placeholders */
.doc-card{ display:grid; grid-template-columns:260px 1fr; grid-template-rows:auto auto; gap:16px 16px; padding:16px; }
@media (max-width:720px){ .doc-card{ grid-template-columns:1fr } }
.thumb{ grid-row:1 / 2; grid-column:1 / 2; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.placeholder-card{ width:100%; height:100%; display:grid; place-items:center; text-align:center; background:linear-gradient(180deg,#fff9ea,#ffe9cf); border:2px solid #ffd88b; border-radius:16px; color:#9a612c; padding:16px; }
.placeholder-card svg{ width:44px; height:44px; margin-bottom:10px; stroke:#b7743a }
.placeholder-title{ font-weight:800; }
.placeholder-sub{ font-size:13px; color:#b28357 }
.placeholder-mini{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(180deg,#fff9ea,#ffe9cf); border:2px solid #ffd88b; border-radius:12px; }
.placeholder-mini svg{ width:24px; height:24px; stroke:#b7743a }

.doc-main{ grid-row:1 / 2; grid-column:2 / 3 }
@media (max-width:720px){ .doc-main{ grid-column:1 / -1 } }
.doc-title{ font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.1px; margin:2px 0 10px; }
.pills{ display:flex; flex-wrap:wrap; gap:8px }
.pill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:var(--pill-bg); border:1px solid var(--pill-br); font-size:12px; font-weight:600; color:#075e46; }

.doc-footer{ grid-column:1 / -1; border-top:1px solid var(--line); padding:14px 0 2px; }
.actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r-md); background:var(--btn-bg); border:1px solid var(--btn-br); color:#111827; font-weight:600; text-decoration:none; cursor:pointer; }
.btn svg{ width:16px;height:16px }

/* Section headers */
.panel-head{ background:var(--green); color:#e8fff4; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #174d31; }
.panel-title{ display:flex; align-items:center; gap:10px; font-weight:700 }
.panel-title__text{ display:flex; flex-direction:column }
.dot{ width:10px;height:10px;border-radius:50%; background:#8bffbe; box-shadow:0 0 0 3px rgba(139,255,190,.25) }
.subline{ font-size:12px; opacity:.92; font-weight:600 }
.ai-body{ padding:14px 16px 16px; max-height:340px; overflow:auto; color:#334155; font-weight:400 }
.info-btn{ width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#e8fff4; display:grid; place-items:center; cursor:pointer; }
.info-btn svg{ width:18px; height:18px }
.panel-tools{ display:flex; align-items:center; gap:8px }
.audio-btn{ width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:#ffffff1f; color:#e8fff4; display:grid; place-items:center; cursor:pointer; }
.audio-btn::before{ content:''; display:block; width:0; height:0; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent currentColor; }
.audio-btn.is-playing::before{ content:''; width:10px; height:12px; background:currentColor; -webkit-mask:linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right; -webkit-mask-size:3px 100%; -webkit-mask-repeat:no-repeat; }

/* Related list */
.related{ margin-top:24px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow) }
.related-body{ background:var(--card) }
.rel-item{ display:grid; grid-template-columns:70px 1fr; gap:14px; padding:16px 18px; border-top:1px solid var(--line); align-items:start }
.rel-thumb{ width:70px;height:70px;border-radius:12px;overflow:hidden;border:1px solid var(--line); background:#f3f4f6; display:grid; place-items:center }
.rel-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rel-title{ font-family:var(--serif); font-weight:700; line-height:1.25; margin:0 }
.rel-meta{ font-size:12px; color:#6b7280; font-weight:400; margin-top:6px }
.icon-btn{ width:34px;height:34px; display:grid; place-items:center; border-radius:10px; background:#f5f7fb; border:1px solid var(--line); cursor:pointer; flex:0 0 auto; }
.icon-btn svg{ width:16px;height:16px }

/* AI Questions */
.qa{ margin-top:24px; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:hidden; background:#fff; }
.qa-title{ font-weight:800 }
.qa-body{ padding:14px 14px 10px; display:flex; flex-direction:column; gap:12px; }
.qa-item{ display:flex; align-items:flex-start; gap:12px; background:var(--qa-bg); border:1px solid #eadcff; padding:12px 14px; border-radius:14px; }
.qa-num{ flex:0 0 auto; width:28px; height:28px; border-radius:999px; background:#f1eaff; border:1px solid #e3d6ff; display:grid; place-items:center; color:#8b5cf6; font-weight:900; }
.qa-text{ color:#2b3343; }

/* Modals (top of page) */
.modal{ position:fixed; inset:0; display:none; z-index:1000; }
.modal.show{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.modal__dialog{ position:relative; z-index:1; max-width:1100px; margin:calc(var(--header-h) + 20px) auto 40px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; max-height:calc(100vh - var(--header-h) - 80px); overflow:hidden; }
.modal__dialog--tall{ max-width:900px; }
.modal__dialog--mini{ max-width:540px; }
.modal__dialog--how{ max-width:720px; }
.modal__head{ padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#e6ffee }
.modal__head--blue{ background:var(--blue); }
.modal__head--gray{ background:var(--gray); }
.modal__title{ display:flex; align-items:center; gap:10px; font-weight:800 }
.modal__x{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; cursor:pointer }
.modal__body{ padding:16px; overflow:auto; background:#fff }

/* Timeline (scoped/stable) */
.timeline-v{ position:relative; display:flex; gap:16px; }
.timeline-v__line{ position:absolute; top:0; bottom:0; left:120px; width:2px; background:linear-gradient(#d1d5db,#c7cdd8); }
.timeline-v__items{ width:100%; display:flex; flex-direction:column; gap:18px }
.tl-item{ display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:flex-start; }
.lane{ position:relative; min-height:84px; }
.lane .dot{ position:absolute; top:50%; left:120px; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:999px; display:grid; place-items:center; color:#fff; font-weight:800; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.dot--doc{ background:#10b981 } .dot--med{ background:#ef4444 } .dot--pol{ background:#2563eb } .dot--dh{ background:#8b5cf6 } .dot--tag{ background:#64748b }
.year-pill{ position:absolute; top:50%; left:96px; transform:translate(-100%,-50%); background:#fff; color:#0f172a; border:1px solid #e3e6f1; padding:4px 8px; border-radius:10px; font:800 12px var(--sans); box-shadow:0 2px 6px rgba(17,24,39,.05); }
.tl-card{ background:#fff; border:1px solid #e8eaf2; border-radius:14px; padding:14px; box-shadow:0 8px 20px rgba(17,24,39,.06); }
.tl-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
.badge{ font-size:11px; font-weight:800; padding:5px 8px; border-radius:999px; border:1px solid #eaeaf6; color:#4b5563; background:#f7f7fe }
.tl-title{ font-family:var(--serif); font-weight:800; margin:0 0 6px; color:#0f172a }
.tl-desc{ color:#475569; font-size:14px }

/* Source modal form */
.panel{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; margin-bottom:12px }
.panel__title{ font-weight:800; color:#1f2937; margin-bottom:8px }
.panel--blue{ background:#f2f6ff; border-color:#dfe5ff }
.panel--purple{ background:#f7f3ff; border-color:#e8e0ff }
.panel--tan{ background:#fff8ee; border-color:#ffe9c9 }
.panel--green{ background:#eefbf4; border-color:#c7f0db }

.modal .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.modal .form-grid .full{ grid-column:1 / -1 }
.modal .field label{ display:block; font-size:12px; color:#6b7280; font-weight:800; margin-bottom:6px; letter-spacing:.02em }
.modal .field input, .modal .field textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #dfe3ef; background:#ffffff; font: 600 14px var(--sans); color:#111827; }
.modal .field textarea{ resize:vertical }
.modal .thumb-preview__box{ height:160px; border:1px dashed #e5e7eb; border-radius:12px; display:grid; place-items:center; background:#fafafa; overflow:hidden; color:#6b7280; font-weight:800 }
.modal .thumb-preview__error{ margin-top:8px; padding:10px 12px; background:#fff4f4; border:1px solid #ffdada; color:#7f1d1d; border-radius:8px; font-weight:700 }

/* Info & How cards */
.infocard{ border:2px solid #2e7a4f; background:#eefbf4; border-radius:12px; padding:12px 14px }
.infocard__head{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
.infodot{ width:10px; height:10px; border-radius:50%; background:#2e7a4f }
.infotitle{ font-weight:800; color:#1f5137 }
.infotext{ color:#1f2937; line-height:1.5 }
.how-grid{ display:flex; flex-direction:column; gap:14px }
.how-card{ border:1px solid #e5e7eb; border-radius:12px; padding:14px; background:#fff }
.how-card--blue{ background:#eaf0ff; border-color:#d9e2ff }
.how-card--green{ background:#eaf9f1; border-color:#cdeedd }
.how-card--orange{ background:#fff3e7; border-color:#ffe1c7 }
.features{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px }
@media (max-width:640px){ .features{ grid-template-columns:1fr } }