:root{
  --bg:#0f172a;
  --bg-soft:#111b32;
  --card:#ffffff;
  --line:#d7deee;
  --text:#182235;
  --muted:#53617b;
  --brand:#5b7cff;
  --brand-soft:#eef2ff;
  --good:#1f9d73;
  --warn:#ef6c5b;
  --gold:#f3b94e;
  --radius:18px;
  --shadow:0 20px 50px rgba(15,23,42,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f6f8ff,#eef3fb);color:var(--text)}
a{color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.shell{max-width:1500px;margin:0 auto;padding:22px}
.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;background:linear-gradient(135deg,#14213d,#23365f);color:#fff;padding:24px;border-radius:24px;box-shadow:var(--shadow)}
.topbar h1{margin:4px 0 8px;font-size:clamp(28px,4vw,42px);letter-spacing:-.03em}
.subtitle{margin:0;max-width:760px;color:rgba(255,255,255,.82)}
.eyebrow{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a7d0ff;font-weight:700}
.top-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.pill{border:1px solid rgba(255,255,255,.22);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.09);font-weight:600}
.toggle{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08)}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:18px;margin-top:18px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(15,23,42,.06)}
.sidebar,.journal-panel{padding:18px}
.sidebar section+.sidebar section,.journal-panel section+.journal-panel section{margin-top:18px}
.sidebar h2,.journal-panel h2{margin:0 0 8px;font-size:20px}
.sidebar h3,.journal-panel h3{margin:0 0 10px;font-size:16px}
.muted{color:var(--muted)}
.button-stack{display:flex;flex-direction:column;gap:10px}
.button-stack.inline{flex-direction:row;flex-wrap:wrap}
.button-stack.compact{gap:8px}
.primary,.secondary,.icon-button,.choice-btn,.option-card,.module-item,.scale-btn,.chip-btn{border:none;border-radius:14px;transition:.18s ease;box-shadow:none}
.primary{background:var(--brand);color:#fff;padding:12px 16px;font-weight:700}
.primary:hover{filter:brightness(1.05)}
.secondary,.linklike{background:#f4f7fc;color:var(--text);padding:12px 16px;border:1px solid var(--line);text-decoration:none;display:inline-flex;justify-content:center;align-items:center}
.secondary.small,.primary.small{padding:10px 12px;font-size:14px}
.block{width:100%}
.main-panel{padding:18px;min-height:760px}
.main-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.main-head h2{margin:2px 0 6px;font-size:28px;letter-spacing:-.02em}
.main-head-actions{display:flex;gap:10px;align-items:center}
.coach-bubble{margin-top:16px;background:linear-gradient(135deg,#f4f7ff,#ebf1ff);border:1px solid #d7e2ff;border-radius:18px;padding:16px 18px;color:#21304f;line-height:1.55;font-size:16px}
.input-row{display:flex;gap:10px;margin-top:14px}
.icon-button{width:52px;background:#111827;color:#fff;font-size:22px;border-radius:14px}
.text-input{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.content-area{margin-top:18px}
.stage-card,.map-card,.wrap-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.overview-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fafcff}
.map-table{width:100%;border-collapse:collapse;font-size:14px}
.map-table th,.map-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.map-table th{color:#34415d;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.chain{display:flex;flex-wrap:wrap;gap:8px}
.chain-chip{padding:8px 10px;border-radius:999px;background:#f3f5fb;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px}
.chain-chip.on{background:#e7efff;color:#2741a8;border-color:#bfd0ff}
.theory-box{margin-top:12px;padding:14px;border-radius:16px;background:#f8fbff;border:1px solid var(--line);display:grid;gap:8px;color:#3b4966;font-size:14px}
.module-list{display:grid;gap:10px}
.module-item{display:flex;align-items:center;gap:12px;padding:12px;background:#fafcff;border:1px solid var(--line);width:100%;text-align:left}
.module-item:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.06)}
.module-item.active{background:#eef3ff;border-color:#bfd0ff}
.module-dot{width:12px;height:12px;border-radius:999px;flex:none}
.module-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.module-copy small{color:var(--muted)}
.module-badge{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:4px 7px;border-radius:999px}
.lesson-box,.summary-box,.story-box,.logger-note{padding:14px 16px;border-radius:16px;background:#f8fbff;border:1px solid var(--line);line-height:1.55}
.quiz-box{margin-top:16px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.choice-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr))}
.choice-btn{padding:12px 14px;background:#f5f8fd;border:1px solid var(--line);text-transform:none}
.choice-btn.active,.choice-btn:hover,.option-card:hover,.scale-btn:hover,.chip-btn:hover{background:#eef3ff;border-color:#bfd0ff}
.feedback{margin-top:12px;padding:12px 14px;border-radius:14px;background:#f7fbff;border:1px solid var(--line)}
.feedback.warn{background:#fff5f3;border-color:#ffd2ca;color:#9a3f2f}
.option-stack{display:grid;gap:10px;margin-top:12px}
.option-card{padding:14px 16px;background:#f5f8fd;border:1px solid var(--line);text-align:left}
.field-label{display:block;margin-top:14px;margin-bottom:8px;font-weight:700}
.big-text{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 16px;resize:vertical;min-height:80px}

.select-input{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;margin-top:4px}
.small-margin{margin-top:8px}
.pill-row,.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-btn{padding:10px 12px;background:#f5f8fd;border:1px solid var(--line)}
.tag{padding:7px 10px;border-radius:999px;background:#eef3ff;border:1px solid #bfd0ff;color:#3551b4;font-weight:700;font-size:13px}
.split-note{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.split-note>div{padding:14px;border:1px solid var(--line);border-radius:16px;background:#f9fbff}
.small-copy{font-size:14px}
.journal-entries{display:grid;gap:12px}
.journal-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fbfcff}
.journal-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.journal-head span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.empty-note{padding:14px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.metric{padding:12px;border-radius:16px;background:#f8fbff;border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.metric span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.metric strong{font-size:18px}
.scale{display:flex;gap:10px;flex-wrap:wrap}
.scale-btn{width:44px;height:44px;border:1px solid var(--line);background:#f5f8fd}
.scale-btn.active{background:#2741a8;color:#fff;border-color:#2741a8}
.loading{padding:14px 16px;border-radius:14px;background:#f4f7ff;border:1px solid #d7e2ff;color:#3551b4;margin-top:12px}
.hidden{display:none !important}
.linklike{width:100%}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(12px);background:#111827;color:#fff;padding:12px 16px;border-radius:14px;opacity:0;transition:.2s ease;z-index:1000;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width: 1180px){
  .layout{grid-template-columns:1fr}
  .journal-panel,.sidebar{order:2}
  .main-panel{order:1}
}
@media (max-width: 760px){
  .topbar{flex-direction:column}
  .overview-grid,.split-note,.choice-grid{grid-template-columns:1fr}
  .choice-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .input-row{flex-direction:column}
}