* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: radial-gradient(1200px 800px at 10% -20%, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 60%), var(--color-bg);
}

/* 布局 */
.layout { display: grid; grid-template-columns: 320px 1fr; min-height: 100dvh; }
.sidebar { padding: var(--space-lg); border-right: var(--border-width) solid var(--border-color); background: linear-gradient(180deg, var(--color-surface), transparent 120%); }
.content { padding: var(--space-xl); }
.content section { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.panel { display: grid; gap: var(--space-md); }
.divider { height: 1px; background: var(--border-color); margin: var(--space-sm) 0; }
.actions { display: grid; gap: var(--space-md); }
.actions .btn { width: 100%; }

.row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.stack-sm { display: grid; gap: var(--space-sm); }
.stack-md { display: grid; gap: var(--space-md); }

@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: var(--border-width) solid var(--border-color); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* 基础元素 */
h1, h2, h3 { margin: 0 0 var(--space-sm); line-height: 1.25; }
h1 { font-size: clamp(28px, calc(var(--font-size-base) * 2.0), 40px); font-weight: 750; letter-spacing: .2px; }
h2 { font-size: clamp(22px, calc(var(--font-size-base) * 1.6), 28px); font-weight: 650; }
h3 { font-size: clamp(18px, calc(var(--font-size-base) * 1.25), 22px); font-weight: 600; }
p { margin: 0 0 var(--space-md); color: var(--color-text); }
a { color: var(--color-secondary); text-underline-offset: 2px; }

.color-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.swatch { --sz: 42px; display: inline-flex; align-items: center; justify-content: center; width: var(--sz); height: var(--sz); border-radius: var(--radius-sm); background: var(--swatch); color: #fff; font-size: 12px; border: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-sm); }

/* 控制面板 */
.control-group { display: grid; gap: 6px; }
.control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
label { font-size: 13px; color: var(--color-muted); }
select, input[type="color"], input[type="range"], input[type="text"], .input {
  width: 100%; height: 36px; border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-color);
  background: var(--color-surface); color: var(--color-text);
  padding: 0 10px;
}
input[type="range"] { padding: 0; height: 32px; }

/* 字段 */
.field { display: grid; gap: 6px; }
.field input, .field select { transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.field input:focus, .field select:focus, .input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-primary); }
.field .help { color: var(--color-muted); font-size: 12px; }
.field.is-error input { border-color: color-mix(in oklab, var(--color-danger) 65%, var(--border-color)); box-shadow: none; }

/* 输入样式：下划线模式 */
[data-input-style="underline"] .field input,
[data-input-style="underline"] .field select,
[data-input-style="underline"] .input { border: none; border-bottom: var(--border-width) solid var(--border-color); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
[data-input-style="underline"] .field input:focus,
[data-input-style="underline"] .field select:focus,
[data-input-style="underline"] .input:focus { box-shadow: none; border-bottom-color: var(--color-primary); }

/* 下划线模式的错误态（取消外圈阴影，突出下边框颜色） */
.field.input-underline.is-error input,
.field.input-underline.is-error select,
.field.input-underline.is-error .input,
[data-input-style="underline"] .field.is-error input,
[data-input-style="underline"] .field.is-error select,
[data-input-style="underline"] .field.is-error .input { box-shadow: none; border: none; border-bottom: var(--border-width) solid color-mix(in oklab, var(--color-danger) 70%, var(--border-color)); }

/* 输入样式：局部覆盖（优先于全局 data-input-style） */
.field.input-underline input,
.field.input-underline select,
.field.input-underline .input { border: none; border-bottom: var(--border-width) solid var(--border-color); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
.field.input-underline input:focus,
.field.input-underline select:focus,
.field.input-underline .input:focus { box-shadow: none; border-bottom-color: var(--color-primary); }

.field.input-outline input,
.field.input-outline select,
.field.input-outline .input { border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm); background: var(--color-surface); padding-left: 10px; padding-right: 10px; }
.field.input-outline input:focus,
.field.input-outline select:focus,
.field.input-outline .input:focus { box-shadow: var(--focus-ring); border-color: var(--color-primary); }

/* 完整边框错误态：仅细边框，无外圈阴影 */
.field.input-outline.is-error input,
.field.input-outline.is-error select,
.field.input-outline.is-error .input { border-color: color-mix(in oklab, var(--color-danger) 75%, var(--border-color)); }
.field.input-outline.is-error input:focus,
.field.input-outline.is-error select:focus,
.field.input-outline.is-error .input:focus { box-shadow: none; border-color: color-mix(in oklab, var(--color-danger) 75%, var(--border-color)); }

/* 选择控件 */
.choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch .slider { width: 44px; height: 24px; background: var(--color-elevated); border-radius: 999px; position: relative; transition: background var(--duration) var(--ease); border: var(--border-width) solid var(--border-color); }
.switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--duration) var(--ease); box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: color-mix(in oklab, var(--color-primary) 40%, var(--color-elevated)); border-color: color-mix(in oklab, var(--color-primary) 50%, var(--border-color)); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch .label { font-size: 14px; color: var(--color-text); }

/* 按钮 */
.btn { --btn-accent: var(--color-primary); --btn-bg: var(--color-elevated); --btn-fg: var(--color-text); --btn-bd: var(--border-color); --btn-bg-hover: color-mix(in oklab, var(--btn-accent) var(--accent-hover-strength), var(--btn-bg)); --btn-bg-active: color-mix(in oklab, var(--btn-accent) var(--accent-active-strength), var(--btn-bg));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--btn-bg); color: var(--btn-fg); border: var(--border-width) solid var(--btn-bd); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-active); transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { --btn-accent: var(--color-primary); --btn-bg: var(--color-primary); --btn-bg-hover: color-mix(in oklab, #000 16%, var(--color-primary)); --btn-bg-active: color-mix(in oklab, #000 24%, var(--color-primary)); --btn-fg: #ffffff; --btn-bd: color-mix(in oklab, #000 18%, var(--color-primary)); }
.btn.secondary { --btn-accent: var(--color-secondary); --btn-bg: var(--color-secondary); --btn-bg-hover: color-mix(in oklab, #000 16%, var(--color-secondary)); --btn-bg-active: color-mix(in oklab, #000 24%, var(--color-secondary)); --btn-fg: #ffffff; --btn-bd: color-mix(in oklab, #000 18%, var(--color-secondary)); }
.btn.danger { --btn-accent: var(--color-danger); --btn-bg: var(--color-danger); --btn-bg-hover: color-mix(in oklab, #000 16%, var(--color-danger)); --btn-bg-active: color-mix(in oklab, #000 24%, var(--color-danger)); --btn-fg: #ffffff; --btn-bd: color-mix(in oklab, #000 18%, var(--color-danger)); }
.btn.ghost { background: transparent; border-color: color-mix(in oklab, var(--color-text) 10%, var(--border-color)); color: color-mix(in oklab, var(--color-text) 80%, #000); }
.btn.ghost:hover { background: color-mix(in oklab, var(--color-text) 6%, transparent); }
.btn.ghost:active { background: color-mix(in oklab, var(--color-text) 10%, transparent); }
.btn.sm { height: 30px; padding: 0 10px; border-radius: var(--radius-sm); }
.btn, .btn.sm { border-radius: var(--radius-md); }
[data-radius="full"] .btn,
[data-radius="full"] .btn.sm { border-radius: 999px; }
.icon-btn { background: transparent; border: none; color: var(--color-text); font-size: 22px; cursor: pointer; }
.icon-btn:hover { color: var(--color-muted); }

/* 浅色主题下的按钮边框轻微增强（不改变前景色） */
[data-theme="light"] .btn { --btn-bd: color-mix(in oklab, var(--color-text) 12%, var(--border-color)); }

/* 卡片、徽章、警示 */
.card { background: var(--color-surface); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md); display: grid; gap: var(--space-sm); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--color-elevated); border: var(--border-width) solid var(--border-color); font-size: 12px; }
.badge.success { background: color-mix(in oklab, var(--color-success) 16%, var(--color-elevated)); color: color-mix(in oklab, #ffffff 85%, var(--color-success)); }
.badge.warning { background: color-mix(in oklab, var(--color-warning) 18%, var(--color-elevated)); }
.badge.danger { background: color-mix(in oklab, var(--color-danger) 16%, var(--color-elevated)); color: color-mix(in oklab, #ffffff 85%, var(--color-danger)); }
.alert { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: var(--border-width) solid var(--border-color); background: var(--color-elevated); }
.alert.success { border-color: color-mix(in oklab, var(--color-success) 42%, var(--border-color)); background: color-mix(in oklab, var(--color-success) 10%, var(--color-elevated)); }
.alert.danger { border-color: color-mix(in oklab, var(--color-danger) 42%, var(--border-color)); background: color-mix(in oklab, var(--color-danger) 10%, var(--color-elevated)); }

/* 进度条 */
.progress { position: relative; height: 16px; border-radius: 999px; background: var(--color-elevated); border: var(--border-width) solid var(--border-color); overflow: hidden; }
.progress .bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); box-shadow: inset 0 0 12px rgba(0,0,0,.2); }
.progress .value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* Tabs */
.tabs { display: grid; gap: var(--space-sm); }
.tab-list { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.tab { background: var(--color-elevated); border-radius: var(--radius-md); padding: 6px 12px; border: var(--border-width) solid var(--border-color); cursor: pointer; }
.tab.active { background: color-mix(in oklab, var(--color-primary) 14%, var(--color-elevated)); border-color: color-mix(in oklab, var(--color-primary) 42%, var(--border-color)); }
.tab-panels { background: var(--color-surface); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-color); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Accordion */
.accordion { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-width) solid var(--border-color); }
.acc-header { width: 100%; text-align: left; padding: var(--space-md); background: var(--color-elevated); color: var(--color-text); border: none; cursor: pointer; }
.acc-panel { display: none; padding: var(--space-md); background: var(--color-surface); }
.accordion.open .acc-panel { display: block; }

/* Modal */
.modal { position: fixed; inset: 0; display: none; }
.modal[aria-hidden="false"] { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-dialog { position: relative; margin: 10vh auto; width: min(720px, 92vw); background: var(--color-surface); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { padding: var(--space-md); border-bottom: var(--border-width) solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.modal-footer { border-top: var(--border-width) solid var(--border-color); border-bottom: none; }
.modal-body { padding: var(--space-md); }

/* Quiz */
.quiz { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-color); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.quiz .options { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.quiz .option { background: var(--color-elevated); border: var(--border-width) solid var(--border-color); height: 32px; padding: 0 12px; border-radius: var(--radius-md); cursor: pointer; }
.quiz .option.correct { background: color-mix(in oklab, var(--color-success) 16%, var(--color-elevated)); border-color: color-mix(in oklab, var(--color-success) 42%, var(--border-color)); color: color-mix(in oklab, #ffffff 85%, var(--color-success)); }
.quiz .option.wrong { background: color-mix(in oklab, var(--color-danger) 16%, var(--color-elevated)); border-color: color-mix(in oklab, var(--color-danger) 42%, var(--border-color)); color: color-mix(in oklab, #ffffff 85%, var(--color-danger)); }
.quiz .feedback { font-size: 14px; color: var(--color-muted); }

/* 页脚 */
.footer { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--border-width) solid var(--border-color); color: var(--color-muted); }

/* Data Table */
.table-wrap { border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-md); }
table.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.data-table th, table.data-table td { padding: var(--space-sm) var(--space-md); border-bottom: var(--border-width) solid var(--border-color); text-align: left; vertical-align: middle; }
table.data-table thead th { background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 16%, var(--color-elevated)), var(--color-elevated)); color: color-mix(in oklab, #ffffff 92%, var(--color-primary)); border-bottom-color: color-mix(in oklab, var(--color-primary) 36%, var(--border-color)); letter-spacing: .3px; font-weight: 600; }
/* 浅色主题下表头使用深色文字与更浅的底色，提高可读性 */
[data-theme="light"] table.data-table thead th {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)), var(--color-surface));
  color: #0b1220;
  border-bottom-color: color-mix(in oklab, var(--color-primary) 24%, var(--border-color));
}
table.data-table tbody tr:hover { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface)); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table.data-table-6 th, table.data-table.data-table-6 td { width: calc(100% / 6); }