/* ==========================================================================
   LinkList Studio —— 视觉规范
   参考气质：VS Code 的克制 + Notion 的留白 + Linear 的精致
   禁止：花哨渐变、拟物化阴影、大色块、emoji 堆砌
   ========================================================================== */

:root {
  /* —— 配色（PRD 4.2）—— */
  --bg: #FAFAFA;
  --panel: #FFFFFF;
  --panel-alt: #FCFCFD;
  --border: #E8E8E8;
  --border-strong: #D8DCE1;
  --text: #1F2328;
  --text-dim: #6E7781;
  --text-faint: #8C959F;
  --accent: #3B82F6;
  --accent-soft: #EAF2FE;
  --accent-ring: rgba(59, 130, 246, 0.28);
  --success: #10B981;
  --success-soft: #E7F7F1;
  --error: #EF4444;
  --error-soft: #FDECEC;
  --warning: #B78103;
  --warning-soft: #FDF6E3;
  --code-bg: #F6F8FA;
  --code-gutter: #F0F3F6;
  --hover: #F2F4F7;
  --selected: #EAF2FE;

  /* —— 语法高亮（PRD 4.3）—— */
  --tok-key: #CF222E;
  --tok-type: #953800;
  --tok-func: #8250DF;
  --tok-str: #0A3069;
  --tok-num: #0550AE;
  --tok-com: #6E7781;
  --tok-macro: #116329;
  --tok-op: #1F2328;
  --tok-esc: #CF222E;

  /* —— 字体（PRD 4.4）—— */
  --font-code: 'JetBrains Mono', 'Cascadia Code', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --font-ui: 'Microsoft YaHei UI', 'Microsoft YaHei', Inter, 'Segoe UI', system-ui, sans-serif;
  --code-fs: 14px;
  --code-lh: 1.6;
  --ui-fs: 13px;

  --radius: 6px;
  --gap: 16px;
  --pad-x: 24px;
  --shadow-card: 0 1px 2px rgba(27, 31, 36, 0.04);
}

html[data-theme='dark'] {
  --bg: #0D1117;
  --panel: #161B22;
  --panel-alt: #12171E;
  --border: #30363D;
  --border-strong: #3D444D;
  --text: #E6EDF3;
  --text-dim: #8B949E;
  --text-faint: #6E7681;
  --accent: #4C8DF6;
  --accent-soft: #16233A;
  --accent-ring: rgba(76, 141, 246, 0.32);
  --success: #3FB950;
  --success-soft: #10281A;
  --error: #F85149;
  --error-soft: #2B1416;
  --warning: #D29922;
  --warning-soft: #2A2113;
  --code-bg: #0D1117;
  --code-gutter: #10151C;
  --hover: #1C2229;
  --selected: #16233A;

  --tok-key: #FF7B72;
  --tok-type: #FFA657;
  --tok-func: #D2A8FF;
  --tok-str: #A5D6FF;
  --tok-num: #79C0FF;
  --tok-com: #8B949E;
  --tok-macro: #7EE787;
  --tok-op: #E6EDF3;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------- 基础 */
* { box-sizing: border-box; }

/* 作者样式里的 display:flex 会盖掉浏览器默认的 [hidden]，
   所以显式声明一次，保证 hidden 属性能真正隐藏元素 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--ui-fs);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input { font-family: inherit; font-size: inherit; }

::selection { background: var(--accent-ring); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--bg);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------- 主框架 */
.app {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------- 侧栏 */
.sidebar {
  width: 244px;
  flex: 0 0 244px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.brand-title { font-size: 13.5px; font-weight: 600; letter-spacing: 0.1px; }
.brand-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.sidebar-search { padding: 0 16px 12px; }

/* 教材切换器：占满侧栏宽度 */
.book-switch { padding: 0 16px 12px; }
.segmented-block { display: flex; width: 100%; }
.segmented-block button { flex: 1 1 0; text-align: center; }

.sidebar-search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.sidebar-search input::placeholder { color: var(--text-faint); }
.sidebar-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.module-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.module-group-label {
  padding: 12px 8px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.module-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  margin-bottom: 1px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color 100ms ease;
}
.module-item:hover { background: var(--hover); }

.module-item .mi-id {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.module-item .mi-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-item .mi-stars {
  font-size: 9.5px;
  color: var(--warning);
  letter-spacing: 0.5px;
  opacity: 0.75;
}

.module-item .mi-flag {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 5px;
  align-self: center;
  opacity: 0;
}
.module-item.has-draft .mi-flag { opacity: 1; }

.module-item.is-active {
  background: var(--selected);
  font-weight: 600;
}
.module-item.is-active .mi-id { color: var(--accent); }
.module-item.is-active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.module-item.is-assembly { margin-top: 8px; }
.module-item.is-assembly::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: -4px;
  height: 1px;
  background: var(--border);
}

.sidebar-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.progress-mini-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.progress-mini-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--success);
  transition: width 200ms ease;
}
.progress-mini-text { margin-top: 6px; font-size: 11px; color: var(--text-dim); }

/* ---------------------------------------------------------------- 内容区 */
.content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.module-header {
  padding: 18px var(--pad-x) 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.mh-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.mh-id {
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
}

.mh-summary {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  max-width: 78ch;
  line-height: 1.6;
}

.mh-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  color: var(--text-dim);
}
.chip-diff { color: var(--warning); border-color: transparent; background: var(--warning-soft); }
.chip-dep { font-family: var(--font-code); font-size: 10.5px; }
.chip-lines { font-variant-numeric: tabular-nums; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad-x);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.toolbar-spacer { flex: 1; }

.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.segmented button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 12px;
  transition: background-color 100ms ease, color 100ms ease;
  white-space: nowrap;
}
.segmented button:hover { background: var(--hover); color: var(--text); }
.segmented button.is-active {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.08);
}
/* 不可用的按钮必须看得出来不可点，否则用户只会以为"点了没反应" */
.segmented button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.segmented button:disabled:hover {
  background: transparent;
  color: var(--text-dim);
}

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--hover); border-color: var(--border-strong); }
.btn:active { background: var(--bg); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: #2f74e6; border-color: #2f74e6; }
.btn-primary:active { background: #2a67cc; }

.btn-mini { padding: 3px 9px; font-size: 11.5px; }

.play { font-size: 9px; }

/* ---------------------------------------------------------------- 面板 */
.pane { flex: 1; min-height: 0; }

.pane-read {
  overflow: auto;
  padding: var(--gap) var(--pad-x) var(--gap);
}

.pane-practice {
  overflow: hidden;
  display: flex;
  padding: var(--gap) var(--pad-x);
}

.pane-fade { animation: paneFade 150ms ease; }
@keyframes paneFade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.code-card,
.editor-card,
.ref-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.pane-read .code-card { min-height: 100%; }

.code-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  flex: 0 0 auto;
}

.code-card-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.code-card-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hint { font-size: 11px; color: var(--text-faint); }

/* ---------------------------------------------------------------- 代码视图 */
.code-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--code-bg);
  font-family: var(--font-code);
  font-size: var(--code-fs);
  line-height: var(--code-lh);
}

.cv-inner { display: flex; min-width: min-content; align-items: flex-start; }

.cv-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 auto;
  padding: 14px 10px 14px 14px;
  text-align: right;
  color: var(--text-faint);
  background: var(--code-gutter);
  border-right: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.cv-gutter .gl { display: block; }
.cv-gutter .gl.is-hot { color: var(--error); font-weight: 600; }

.cv-code {
  margin: 0;
  padding: 14px 22px 14px 16px;
  white-space: pre;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  tab-size: 4;
}

/* 每一行都是 block，diff 底色才能铺满；min-height 保证空行不塌陷 */
.cv-code .ln {
  display: block;
  min-height: 1.6em;
  width: max-content;
  min-width: 100%;
}

.code-view-compact { font-size: 13px; }
.code-view-compact .cv-code { padding: 12px 16px 12px 14px; }
.code-view-compact .cv-gutter { padding: 12px 8px 12px 10px; }

/* 语法高亮 token */
.t-key { color: var(--tok-key); }
.t-type { color: var(--tok-type); }
.t-func { color: var(--tok-func); }
.t-str { color: var(--tok-str); }
.t-num { color: var(--tok-num); }
.t-com { color: var(--tok-com); font-style: italic; }
.t-macro { color: var(--tok-macro); }
.t-pp { color: var(--tok-macro); }
.t-op { color: var(--tok-op); }
.t-esc { color: var(--tok-esc); }

/* 已给出的代码 / 待默写区域（练习模式里的参考面板） */
.cv-code .given-head { color: var(--text-faint); font-style: italic; }

/* diff 高亮 */
.dl-add { background: rgba(16, 185, 129, 0.14); }
.dl-del { background: rgba(239, 68, 68, 0.13); }
.dl-mod { background: rgba(183, 129, 3, 0.16); }
.dl-mark {
  display: inline-block;
  width: 1.5ch;
  color: var(--text-faint);
  user-select: none;
}
.dl-add .dl-mark { color: var(--success); }
.dl-del .dl-mark { color: var(--error); }
.dl-mod .dl-mark { color: var(--warning); }

/* ---------------------------------------------------------------- 练习模式 */
.practice-split {
  flex: 1;
  display: flex;
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}

.editor-card { flex: 1 1 auto; min-width: 0; }

.ref-card { flex: 0 0 42%; min-width: 0; }
.ref-card.is-collapsed { flex: 0 0 190px; }
.ref-card.is-collapsed .ref-body { display: none; }

.ref-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.ref-body .code-view { width: 100%; }

/* ---------------------------------------------------------------- 编辑器 */
.editor {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--code-bg);
  overflow: hidden;
}

.editor-gutter {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 52px;
  overflow: hidden;
  background: var(--code-gutter);
  border-right: 1px solid var(--border);
  z-index: 2;
}

.editor-gutter-inner {
  padding: 14px 9px 14px 0;
  text-align: right;
  font-family: var(--font-code);
  font-size: var(--code-fs);
  line-height: var(--code-lh);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.editor-gutter-inner .gl { display: block; }
.editor-gutter-inner .gl.is-hot { color: var(--error); font-weight: 600; }

.editor-highlight {
  position: absolute;
  top: 0;
  left: 52px;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.editor-highlight code {
  display: block;
  padding: 14px 18px;
  font-family: var(--font-code);
  font-size: var(--code-fs);
  line-height: var(--code-lh);
  white-space: pre;
  tab-size: 4;
  color: var(--text);
  will-change: transform;
}

.editor-input {
  position: absolute;
  top: 0;
  left: 52px;
  width: calc(100% - 52px);
  height: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  outline: none;
  resize: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
  font-family: var(--font-code);
  font-size: var(--code-fs);
  line-height: var(--code-lh);
  white-space: pre;
  tab-size: 4;
  z-index: 1;
}
.editor-input::selection { background: var(--accent-ring); color: transparent; }

.br-match {
  background: rgba(59, 130, 246, 0.2);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}

/* ---------------------------------------------------------------- 输出面板 */
.output {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  max-height: 46vh;
}

.output-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--pad-x);
  flex: 0 0 auto;
}

.output-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 4px;
  border-radius: 4px;
  transition: background-color 100ms ease;
}
.output-toggle:hover { background: var(--hover); color: var(--text); }
.output-toggle .caret {
  display: inline-block;
  transition: transform 150ms ease;
  font-size: 10px;
}
.output.is-collapsed .output-toggle .caret { transform: rotate(-90deg); }

.output-status { font-size: 11.5px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.output-status .pill {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}
.pill-ok { background: var(--success-soft); color: var(--success); }
.pill-err { background: var(--error-soft); color: var(--error); }
.pill-warn { background: var(--warning-soft); color: var(--warning); }
.pill-info { background: var(--accent-soft); color: var(--accent); }

.output-body {
  flex: 1;
  min-height: 120px;
  overflow: auto;
  border-top: 1px solid var(--border);
  background: var(--code-bg);
  font-family: var(--font-code);
  font-size: 12.5px;
  line-height: 1.65;
}
.output.is-collapsed .output-body { display: none; }

.output-placeholder { padding: 16px var(--pad-x); color: var(--text-faint); font-family: var(--font-ui); }

.output-content { padding: 10px 0 16px; }

.out-block { padding: 0 var(--pad-x); }
.out-block + .out-block { margin-top: 10px; }

.out-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.out-line { white-space: pre-wrap; word-break: break-word; }
.out-line.is-stdout { color: var(--text); }
.out-line.is-stderr { color: var(--error); }
.out-line.is-message { color: var(--text-dim); font-family: var(--font-ui); }

/* 编译错误条目（可点击跳转） */
.diag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 4px;
  font-family: var(--font-code);
  font-size: 12.5px;
  transition: background-color 100ms ease;
}
.diag:hover { background: var(--hover); }
.diag-loc {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.diag.is-error .diag-loc { color: var(--error); }
.diag.is-warning .diag-loc { color: var(--warning); }
.diag.is-note .diag-loc { color: var(--text-dim); }
.diag.is-error .diag-msg { color: var(--error); }
.diag.is-warning .diag-msg { color: var(--warning); }
.diag.is-note .diag-msg { color: var(--text-dim); }
.diag-msg { min-width: 0; word-break: break-word; }

.out-hint {
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--warning-soft);
  color: var(--text);
  font-size: 12px;
}
.out-hint .btn { background: var(--panel); }

/* ---------------------------------------------------------------- 状态栏 */
.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 27px;
  padding: 0 var(--pad-x);
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-dim);
}

.sb-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-right { margin-left: auto; color: var(--text-faint); }

.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 6px;
}
.sb-dot.is-ok { background: var(--success); }
.sb-dot.is-err { background: var(--error); }

.sb-state.is-dirty { color: var(--warning); }
.sb-state.is-saved { color: var(--success); }

/* ---------------------------------------------------------------- 其他 */
.empty-note {
  padding: 22px var(--pad-x);
  color: var(--text-faint);
  font-family: var(--font-ui);
}

@media (max-width: 1080px) {
  .ref-card { flex-basis: 38%; }
  .sidebar { width: 210px; flex-basis: 210px; }
}