:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #f8faff;
  --text: #111827;
  --muted: #667085;
  --line: #e5e7eb;
  --navy: #0b0c5d;
  --navy-2: #161873;
  --accent: #4f46e5;
  --accent-2: #7c3aed;
  --success: #087a5b;
  --warning: #9a6700;
  --danger: #b42318;
  --shadow: 0 16px 40px rgba(17, 24, 39, .08);
  --radius: 20px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1020;
  --panel: #13182b;
  --panel-2: #171d33;
  --text: #eef2ff;
  --muted: #a7b0c3;
  --line: #2b334c;
  --navy: #a9b4ff;
  --navy-2: #c7ceff;
  --accent: #8b86ff;
  --accent-2: #b992ff;
  --success: #68d9b7;
  --warning: #f3c867;
  --danger: #ff9b92;
  --shadow: 0 16px 45px rgba(0, 0, 0, .3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 4%, rgba(79,70,229,.10), transparent 24rem),
    radial-gradient(circle at 94% 18%, rgba(124,58,237,.08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 999; background: var(--panel); color: var(--text); padding: .7rem 1rem; border-radius: .7rem; }
.skip-link:focus { top: 1rem; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 56px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,#0b0c5d,#5b5ce2); color:#fff; font-weight:800; box-shadow:0 8px 22px rgba(11,12,93,.22); }
.brand strong { display:block; font-size:1.02rem; }
.brand span { display:block; color:var(--muted); font-size:.77rem; }
.top-actions { display:flex; gap:10px; align-items:center; }
.icon-btn, .secondary-btn, .text-btn { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:11px; padding:.62rem .82rem; }
.icon-btn { width:40px; height:40px; padding:0; }
.shell { width:min(1480px, calc(100% - 36px)); margin:0 auto; padding:44px 0 54px; }
.hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:28px; align-items:end; padding:22px 4px 36px; }
.eyebrow,.step-label { margin:0 0 8px; font-size:.72rem; font-weight:800; letter-spacing:.16em; color:var(--accent); }
h1 { margin:0; max-width:900px; font-size:clamp(2rem,4.5vw,4.25rem); line-height:1.01; letter-spacing:-.048em; }
.hero-copy { max-width:860px; margin:18px 0 0; color:var(--muted); font-size:clamp(.98rem,1.4vw,1.12rem); }
.hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hero-metrics div { padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.hero-metrics strong { display:block; font-size:1.55rem; letter-spacing:-.04em; }
.hero-metrics span { color:var(--muted); font-size:.75rem; }
.grid-layout { display:grid; grid-template-columns:minmax(430px,.85fr) minmax(520px,1.15fr); gap:22px; align-items:start; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.controls-panel { padding:24px; }
.output-panel { position:sticky; top:90px; padding:24px; min-height:700px; display:flex; flex-direction:column; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.panel-head.compact { margin-bottom:14px; }
.panel h2,.method-panel h2 { margin:0; font-size:1.32rem; letter-spacing:-.025em; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-full { grid-column:1/-1; }
.field > span { display:block; margin-bottom:7px; font-size:.82rem; font-weight:700; }
.field small,.student-field small { display:block; color:var(--muted); text-align:right; margin-top:5px; }
select,input[type="text"],input[type="number"],textarea {
  width:100%; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); padding:.78rem .86rem; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
select:focus,input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
select:disabled { opacity:.55; cursor:not-allowed; }
.evidence-card { margin-top:16px; padding:15px 16px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; }
.evidence-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.evidence-card dl { margin:10px 0 0; }
.evidence-card dl div { display:grid; grid-template-columns:125px 1fr; gap:10px; padding:7px 0; border-top:1px dashed var(--line); }
.evidence-card dt { color:var(--muted); font-size:.76rem; font-weight:700; }
.evidence-card dd { margin:0; font-size:.84rem; }
.badge { display:inline-flex; align-items:center; max-width:230px; padding:.38rem .6rem; border-radius:999px; font-size:.69rem; font-weight:800; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge-neutral { color:var(--muted); background:var(--panel-2); border:1px solid var(--line); }
.badge-success { color:var(--success); background:color-mix(in srgb,var(--success) 10%,transparent); border:1px solid color-mix(in srgb,var(--success) 25%,transparent); }
.badge-warning { color:var(--warning); background:color-mix(in srgb,var(--warning) 10%,transparent); border:1px solid color-mix(in srgb,var(--warning) 25%,transparent); }
.divider { height:1px; background:var(--line); margin:22px 0; }
.task-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check-card { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); transition:transform .12s,border-color .12s; }
.check-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.check-card input { margin-top:3px; accent-color:var(--accent); }
.check-card b { display:block; font-size:.84rem; }
.check-card small { display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }
.advanced { margin:18px 0; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.advanced summary { padding:12px 14px; font-weight:750; cursor:pointer; background:var(--panel-2); }
.advanced-grid { padding:14px; }
.switch-row { display:flex; align-items:center; gap:9px; font-size:.82rem; font-weight:650; }
.switch-row input { accent-color:var(--accent); }
.student-field { margin-top:16px; }
.student-field em { color:var(--muted); font-weight:500; }
.primary-btn { margin-top:18px; width:100%; border:0; border-radius:14px; padding:.95rem 1rem; display:flex; justify-content:space-between; align-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#0b0c5d,#4f46e5 70%,#7c3aed); box-shadow:0 12px 25px rgba(79,70,229,.25); }
.primary-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.text-btn { padding:.4rem .65rem; font-size:.75rem; }
.secondary-btn { padding:.55rem .75rem; font-size:.78rem; font-weight:700; }
.secondary-btn:disabled { opacity:.45; cursor:not-allowed; }
.output-actions { display:flex; gap:8px; }
.prompt-meta { display:flex; flex-wrap:wrap; gap:7px; padding:10px 0 14px; }
.prompt-wrap { position:relative; flex:1; min-height:560px; }
#promptOutput { position:absolute; inset:0; min-height:100%; resize:none; padding:18px; background:#0c1120; color:#e5ecff; border:1px solid #252d44; font:500 .78rem/1.58 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; tab-size:2; }
.empty-state { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:50px; border:1px dashed var(--line); border-radius:14px; background:var(--panel-2); }
.empty-state.hidden { display:none; }
.empty-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 13px; border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent-2) 15%,transparent)); font-size:1.8rem; color:var(--accent); }
.empty-state h3 { margin:0; }
.empty-state p { max-width:470px; margin:8px auto 0; color:var(--muted); font-size:.86rem; }
.output-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:var(--muted); font-size:.72rem; }
.alert { margin:0 0 18px; padding:12px 15px; border-radius:12px; background:color-mix(in srgb,var(--danger) 9%,var(--panel)); border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line)); color:var(--danger); }
.hidden { display:none !important; }
.method-panel { margin-top:24px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(140deg,var(--panel),var(--panel-2)); }
.method-grid { margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.method-grid article { padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.method-grid article > span { color:var(--accent); font-weight:850; font-size:.75rem; }
.method-grid h3 { margin:6px 0; font-size:.95rem; }
.method-grid p { margin:0; color:var(--muted); font-size:.78rem; }
.footer { width:min(1480px,calc(100% - 36px)); margin:0 auto; padding:0 0 32px; display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; }
.toast { position:fixed; right:22px; bottom:22px; z-index:60; max-width:360px; padding:12px 15px; border-radius:12px; background:#111827; color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.25); transform:translateY(20px); opacity:0; pointer-events:none; transition:.2s; }
.toast.show { transform:translateY(0); opacity:1; }
@media (max-width: 1050px) {
  .grid-layout { grid-template-columns:1fr; }
  .output-panel { position:static; min-height:620px; }
  .hero { grid-template-columns:1fr; }
  .method-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .shell { width:min(100% - 22px,1480px); padding-top:24px; }
  .topbar { padding:10px 12px; }
  .brand span,.top-actions .badge { display:none; }
  .hero { padding-top:12px; }
  .hero-metrics { grid-template-columns:1fr 1fr 1fr; }
  .hero-metrics div { padding:11px; }
  .hero-metrics strong { font-size:1.2rem; }
  .field-grid,.task-grid,.method-grid { grid-template-columns:1fr; }
  .controls-panel,.output-panel,.method-panel { padding:17px; border-radius:16px; }
  .panel-head { flex-direction:column; }
  .output-actions { width:100%; }
  .output-actions button { flex:1; }
  .prompt-wrap { min-height:520px; }
  .output-footer,.footer { flex-direction:column; }
  .evidence-card dl div { grid-template-columns:1fr; gap:3px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.source-link { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap:anywhere; }
.muted-link { color: var(--muted); text-decoration:none; pointer-events:none; }