:root{
  --bg1:#0f1027;
  --bg2:#1b1b3a;
  --acc1:#6ef3ff;
  --acc2:#ff7bd8;
  --acc3:#9dff6e;
  --text:#e9f1ff;
  --muted:#a7b0c0;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.35);
  --blur: 18px;
  --radius: 18px;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --ring-ok: #33e291;
  --ring-warn: #ffb74d;
  --ring-bad: #ff5f6d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:"Inter","Noto Sans SC",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% 10%,#243057,transparent),
              radial-gradient(1000px 800px at 80% 70%,#37103d,transparent),
              linear-gradient(135deg,var(--bg1),var(--bg2));
  overflow:hidden;
}

#bg-canvas{position:fixed; inset:0; z-index:-2;}
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.glass{
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 90deg at 50% 50%, rgba(110,243,255,.5), rgba(255,123,216,.5), rgba(157,255,110,.5), rgba(110,243,255,.5));
  filter: blur(18px); opacity:.35; z-index:-1; animation: spin 12s linear infinite;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}

@keyframes spin{to{transform: rotate(360deg)}}

.topbar{
  height:72px; margin:16px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow);
}
.brand{display:flex; align-items:center; gap:12px}
.logo-orb{
  width:36px;height:36px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff8, #fff0 40%),
              radial-gradient(circle at 70% 70%, var(--acc1), var(--acc2));
  box-shadow: 0 6px 18px rgba(110,243,255,.45), inset 0 0 10px rgba(255,255,255,.25);
}
.brand-title{font-weight:800;letter-spacing:.3px}
.brand-sub{display:block; font-size:.9rem; color:var(--muted)}

.top-controls{display:flex; align-items:center; gap:10px}

.ring{
  width:52px;height:52px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.15), transparent 60%),
    conic-gradient(var(--acc2) 0deg, var(--acc1) 0deg, rgba(255,255,255,.12) 0deg);
  position:relative;
}
.ring::after{
  content: attr(title);
  position:absolute; inset:8px;border-radius:50%;
  background: rgba(0,0,0,.25); display:grid; place-items:center; font-size:.65rem; color:#dfe7ff;
}

.btn{
  position:relative;
  background: linear-gradient(135deg, #1a2035, #22293e);
  color:var(--text); border:1px solid rgba(255,255,255,.2);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition: transform .1s ease, background .3s ease, box-shadow .3s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25)}
.btn:active{ transform: translateY(0)}
.btn.ghost{ background: transparent }
.btn.warn{ background: linear-gradient(135deg, #382426, #593232); border-color:#ff8a99aa }
.btn.strong{ background: linear-gradient(135deg, #1d2b3f, #2b3e5b); border-color:#7bc9ff88 }
.btn.tiny{ padding:6px 10px; border-radius:10px; font-size:.9rem }

.layout{ display:grid; grid-template-columns: 280px 1fr; gap:16px; height: calc(100vh - 104px); padding:0 16px 16px}
.palette{
  padding:12px; box-shadow: var(--shadow); display:flex; flex-wrap:wrap; align-content:flex-start; gap:10px; overflow:auto;
}
.pill{
  width:52px;height:52px;border-radius:14px; display:grid; place-items:center; font-weight:700;
  color:#fff; cursor:pointer; position:relative; isolation:isolate;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.2);
}
.pill .mini{position:absolute; right:6px; bottom:6px; font-size:.65rem; opacity:.85}
.pill.current{outline:2px solid var(--acc1)}
.pill.answered{box-shadow: inset 0 0 0 2px rgba(157,255,110,.6), 0 6px 16px rgba(157,255,110,.18)}
.pill.flagged::after{
  content:"⚑"; position:absolute; top:4px; left:6px; font-size:.9rem; opacity:.9
}

.stage{ position:relative; display:grid; place-items: center }
.card{
  width:min(980px, 100%); min-height: 380px; box-shadow: var(--shadow); padding:18px; display:flex; flex-direction:column; gap:14px;
}
.card-head{ display:flex; flex-direction:column; gap:10px}
.q-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.tag{ font-size:.9rem; color:#d3dcff; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:4px 8px; border-radius:10px}
.sec-tag{ color:#ffe0f6; border:1px solid rgba(255,123,216,.45) }
.score-badge{ font-size:.9rem; color:#9dff6e; border:1px solid rgba(157,255,110,.4); padding:4px 8px; border-radius:10px }
.q-title{ font-size:1.2rem; line-height:1.6 }

.card-body{ display:flex; flex-direction:column; gap:12px; padding:8px 4px 6px}
.opt{
  display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; cursor:pointer; position:relative;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.opt:hover{ background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03))}
.opt input{ width:18px; height:18px; margin-top:2px; accent-color:#7be7ff }
.opt.correct{ box-shadow: inset 0 0 0 2px rgba(51,226,145,.6)}
.opt.partial{ box-shadow: inset 0 0 0 2px rgba(255,183,77,.6)}
.opt.wrong{ box-shadow: inset 0 0 0 2px rgba(255,95,109,.6)}
.opt .label{ font-weight:700; color:#cfe2ff }
.opt .text{ line-height:1.6 }

.blanks{ display:flex; flex-wrap:wrap; gap:10px }
.blank-input{
  min-width:180px; padding:10px 12px; border-radius:12px; color:var(--text);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  outline:none;
}
textarea.short-input{
  min-height:120px; resize: vertical; padding:12px; border-radius:12px; color:var(--text);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); outline:none;
}

.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto }
.toast{
  position:absolute; bottom:18px; right:18px; background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2); padding:10px 14px; border-radius:10px; opacity:0; transform: translateY(8px);
  transition: .25s; pointer-events:none
}
.toast.show{ opacity:1; transform: translateY(0)}

.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; backdrop-filter: blur(10px);
}
.modal.show{ display:flex }
.modal-content{ width:min(980px, 95%); padding:16px; position:relative }
.modal-head{ display:flex; align-items:center; justify-content:space-between }
.result-grid{ display:grid; grid-template-columns: 320px 1fr; gap:12px }
.big-score{
  font-size:72px; font-weight:800; line-height:1; text-shadow: 0 8px 24px rgba(0,0,0,.25)
}
.score-sub{ color:var(--muted); display:flex; gap:10px; align-items:center }
.legend{ display:flex; gap:10px; margin-top:6px; color:#dfe7ff }
.legend .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px }
.dot.ok{ background: var(--ring-ok)}
.dot.half{ background: var(--ring-warn)}
.dot.wrong{ background: var(--ring-bad)}
.breakdown{ display:flex; flex-direction:column; gap:10px; max-height: 55vh; overflow:auto }
.break-item{
  padding:10px; border-radius:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15)
}

#confetti{ position: fixed; inset:0; pointer-events:none }

.tilt{ transform-style: preserve-3d; perspective: 1000px }
.tilt .q-title{ transform: translateZ(10px) }
.tilt .card-body{ transform: translateZ(8px) }

/* Rings dynamic text */
#timer-ring::after{ content: attr(data-label) }
#progress-ring::after{ content: attr(data-label) }

/* 简洁成绩面板 */
.score-lite{
  position: fixed; right: 16px; top: 92px; width: 320px; z-index: 30; box-shadow: var(--shadow);
  padding: 12px; display:none;
}
.score-lite.show{ display:block }
.sl-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.sl-main{ display:flex; flex-direction:column; gap:8px }
.sl-row{ display:flex; align-items:baseline; justify-content:space-between }
.sl-big{ font-size:36px; font-weight:800 }
.sl-percent{ font-size:24px; font-weight:800; color:#cfe2ff }
.sl-sub{ color:var(--muted) }
.sl-sections{ display:flex; flex-direction:column; gap:6px; margin-top:4px }
.sl-sec{
  display:flex; flex-direction:column; gap:4px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:8px;
}
.sl-sec .top{ display:flex; align-items:center; justify-content:space-between; font-size:.92rem }
.sl-bar{
  height:8px; border-radius:999px; background: rgba(255,255,255,.12); overflow:hidden;
}
.sl-bar>span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  width:0%;
}

/* 图片样式 */
.q-title img, .card-body img, .breakdown img{
  max-width:100%; height:auto; border-radius:10px; border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* Section 简表 */
.section-brief{ margin-top:10px; display:flex; flex-direction:column; gap:6px; color:#dfe7ff; font-size:.95rem }
.section-brief .line{ display:flex; align-items:center; justify-content:space-between }

/* Responsive */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr }
  .palette{ display:none }
  .score-lite{ width: calc(100% - 32px); left:16px; right:16px }

/* 禁用按钮的视觉与交互 */
.btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
}