/* ==========================================================================
   简历工坊 — Liquid Glass「浮光玻璃」
   高亮无色玻璃：用透明度、折射高光、内描边与软阴影建立层次。
   实时模糊只用于少量悬浮层，避免大量合成层卡顿。
   仅改变编辑器外壳；简历正文仍由 templates.css 独立控制。
   ========================================================================== */
@import url("./workshop.css?v=20260814h");

:root {
  --mat: #fff;
  --mat-dot: rgba(255, 255, 255, .7);
  --ruler: rgba(0, 0, 0, .10);
  --panel: rgba(255, 255, 255, .78);
  --panel-edge: rgba(255, 255, 255, .88);
  --panel-edge-strong: rgba(0, 0, 0, .13);
  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #86868b;
  --accent: #1d1d1f;
  --accent-hover: #000;
  --accent-soft: rgba(29, 29, 31, .10);
  --accent-faint: rgba(255, 255, 255, .58);
  --stamp: #1d1d1f;
  --stamp-hover: #000;
  --stamp-soft: rgba(29, 29, 31, .08);
  --ok: #3a3a3c;
  --bad: #636366;
  --radius: 16px;
  --shadow-paper: 0 1px 1px rgba(0, 0, 0, .025), 0 10px 30px rgba(17, 17, 19, .045), inset 0 1px 0 rgba(255, 255, 255, .98);
  --shadow-pop: 0 30px 80px rgba(17, 17, 19, .15), 0 2px 10px rgba(17, 17, 19, .06), inset 0 1px 0 rgba(255, 255, 255, .98);
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
}

body {
  color: var(--ink);
  background:
    radial-gradient(100% 50% at 50% -8%, #fff 0 47%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(60% 42% at 96% 10%, rgba(255, 255, 255, .98) 0 18%, rgba(245, 245, 247, .48) 57%, transparent 100%),
    linear-gradient(145deg, #fff 0%, #fbfbfc 44%, #f2f2f4 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 16rem at 14% 0%, rgba(255, 255, 255, .96), transparent 68%),
    radial-gradient(42rem 25rem at 100% 100%, rgba(255, 255, 255, .82), transparent 72%);
}

/* 只让两个固定顶层使用实时毛玻璃。 */
.topbar,
.preview-toolbar {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .70) 28%, rgba(255, 255, 255, .48) 49%, rgba(255, 255, 255, .80) 72%, rgba(255, 255, 255, .94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(238, 238, 242, .52));
  border-color: rgba(255, 255, 255, .93);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 12px 32px rgba(17, 17, 19, .045), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(0, 0, 0, .035);
  backdrop-filter: blur(24px) saturate(125%) contrast(103%);
  -webkit-backdrop-filter: blur(24px) saturate(125%) contrast(103%);
}

.topbar { gap: 8px 12px; padding: 9px 16px; }
.brand-mark {
  color: #1d1d1f;
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .045), 0 9px 22px rgba(17, 17, 19, .075), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .03);
}
.brand-text strong { color: #1d1d1f; letter-spacing: .1px; }
.brand-en { color: #8e8e93; }
.draft-group { border-color: rgba(0, 0, 0, .08); }

.form-pane {
  background:
    radial-gradient(135% 42% at 0% 0%, rgba(255, 255, 255, 1) 0 35%, transparent 74%),
    linear-gradient(150deg, rgba(255, 255, 255, .90), rgba(244, 244, 247, .82));
  border-right-color: rgba(255, 255, 255, .92);
  box-shadow: 14px 0 30px rgba(17, 17, 19, .025), inset -1px 0 rgba(0, 0, 0, .025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.apps-view {
  background:
    radial-gradient(120% 55% at 2% 0%, rgba(255, 255, 255, .98), transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(245, 245, 247, .74));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 支持页：高亮冷白玻璃，和 Liquid 编辑器外壳保持同一套折射语言。 */
.support-view {
  background:
    radial-gradient(62% 48% at 4% 0%, rgba(255, 255, 255, 1), transparent 72%),
    radial-gradient(42% 36% at 96% 88%, rgba(255, 255, 255, .84), transparent 76%),
    linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(235, 238, 242, .58));
}
.support-hero,
.support-card {
  background:
    radial-gradient(128% 90% at -8% -30%, rgba(255, 255, 255, 1) 0 31%, rgba(255, 255, 255, .48) 61%, transparent 80%),
    linear-gradient(110deg, rgba(255, 255, 255, .90) 0%, rgba(239, 248, 255, .47) 31%, rgba(255, 255, 255, .32) 51%, rgba(230, 240, 248, .42) 73%, rgba(255, 255, 255, .89) 100%),
    linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(218, 228, 236, .42));
  border-color: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 18px 42px rgba(44, 61, 79, .08), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(101, 122, 140, .10);
}
.support-hero { border-top-color: rgba(255, 255, 255, .98); }
.support-hero::after { border-color: rgba(255, 255, 255, .78); box-shadow: 0 0 0 18px rgba(255, 255, 255, .31), 0 0 0 36px rgba(230, 242, 250, .24); }
.support-hero-mark { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(222, 236, 247, .53)); border-color: rgba(255, 255, 255, .92); }
.support-coffee-card,
.support-feedback-card { border-top-color: rgba(255, 255, 255, .98); }
.support-primary {
  background: linear-gradient(180deg, #1594ff 0%, #0a84ff 48%, #0071e3 100%);
  border-color: rgba(0, 113, 227, .84);
  box-shadow: 0 7px 18px rgba(0, 122, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .52), inset 0 -1px 0 rgba(0, 72, 164, .22);
}
.support-primary:hover { background: linear-gradient(180deg, #2ea2ff 0%, #0a84ff 48%, #006edb 100%); color: #fff; }
.support-email { border-color: #0a84ff; }
.support-email:hover,
.support-text-action:hover { color: #0071e3; }

.segmented {
  padding: 3px;
  background: linear-gradient(145deg, rgba(229, 229, 234, .72), rgba(255, 255, 255, .68));
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .035), inset 0 1px 1px rgba(255, 255, 255, .94), inset 0 -1px 1px rgba(0, 0, 0, .035);
}
.seg-btn {
  color: #636366;
  font-weight: 600;
  border-radius: 9px;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1);
}
.seg-btn:hover { color: #1d1d1f; background: rgba(255, 255, 255, .60); }
.seg-btn.active {
  color: #1d1d1f;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .70));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(17, 17, 19, .06), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, .025);
}

.filename-chip,
.draft-select,
.icon-btn,
.btn.ghost,
.page-badge,
.toolbar-label,
.card,
.entry,
.field input,
.field textarea,
.field select,
.btn-add,
.kanban-col,
.app-card,
.app-status,
.app-edit,
.app-del,
.pe-input,
.pe-btn {
  color: var(--ink);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .72) 30%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .78) 73%, rgba(255, 255, 255, .92) 100%),
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(234, 234, 238, .55));
  border-color: rgba(255, 255, 255, .90);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.filename-chip,
.draft-select,
.icon-btn,
.btn,
.btn-add,
.app-card,
.pe-btn {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1);
}

.filename-chip { box-shadow: 0 1px 2px rgba(0, 0, 0, .025), inset 0 1px 0 rgba(255, 255, 255, .94); }
.toolbar-label { color: #86868b; background: transparent; border-color: transparent; }
.page-badge { color: #515154; background: linear-gradient(140deg, rgba(255, 255, 255, .88), rgba(235, 235, 240, .72)); }
.btn.ghost:hover,
.icon-btn:hover,
.pe-btn:hover {
  color: #000;
  background: linear-gradient(140deg, #fff, #f2f2f4);
  border-color: rgba(255, 255, 255, .98);
  box-shadow: 0 6px 16px rgba(17, 17, 19, .06), inset 0 1px 0 #fff;
}
.icon-btn.danger:hover { color: #1d1d1f; background: #e8e8ed; border-color: rgba(0, 0, 0, .16); }
.btn.stamp {
  color: #fff;
  background: linear-gradient(180deg, #1594ff 0%, #0a84ff 48%, #0071e3 100%);
  border-color: rgba(0, 113, 227, .84);
  box-shadow: 0 7px 18px rgba(0, 122, 255, .28), 0 1px 2px rgba(0, 74, 150, .18), inset 0 1px 0 rgba(255, 255, 255, .52), inset 0 -1px 0 rgba(0, 72, 164, .22);
  letter-spacing: .2px;
}
.btn.stamp:hover {
  background: linear-gradient(180deg, #2ea2ff 0%, #0a84ff 48%, #006edb 100%);
  border-color: #0077eb;
  box-shadow: 0 9px 22px rgba(0, 122, 255, .34), 0 1px 2px rgba(0, 74, 150, .16), inset 0 1px 0 rgba(255, 255, 255, .60), inset 0 -1px 0 rgba(0, 72, 164, .20);
}
.btn.stamp:active { box-shadow: 0 2px 7px rgba(0, 92, 184, .24), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* 简历配色圆点保留原本功能，但交互描边保持黑白。 */
.swatch { border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f; }

.preview-pane::before {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 20px);
  opacity: .28;
}
.preview-stage {
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(255, 255, 255, 1), transparent 72%),
    radial-gradient(42% 32% at 100% 100%, rgba(255, 255, 255, .80), transparent 75%),
    linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(236, 236, 240, .52));
}
.sheet {
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 20px;
  box-shadow: 0 30px 76px rgba(17, 17, 19, .115), 0 5px 20px rgba(17, 17, 19, .055), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.card,
.entry,
.kanban-col,
.app-card {
  background:
    radial-gradient(125% 78% at -10% -38%, rgba(255, 255, 255, .98) 0 28%, rgba(255, 255, 255, .48) 57%, transparent 74%),
    linear-gradient(110deg, rgba(255, 255, 255, .86) 0%, rgba(241, 249, 255, .54) 28%, rgba(255, 255, 255, .32) 48%, rgba(237, 246, 252, .48) 71%, rgba(255, 255, 255, .86) 100%),
    linear-gradient(145deg, rgba(255, 255, 255, .83), rgba(218, 227, 235, .38));
  border-color: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .028), 0 12px 28px rgba(17, 17, 19, .055), inset 0 1px 0 rgba(255, 255, 255, 1), inset 1px 0 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(114, 133, 150, .11);
}
.checklist-card,
.jd-card,
.section-card:nth-child(3n+1),
.section-card:nth-child(3n+2),
.section-card:nth-child(3n) {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 1) 0 29%, rgba(255, 255, 255, .48) 61%, transparent 80%),
    linear-gradient(112deg, rgba(255, 255, 255, .88) 0%, rgba(238, 247, 253, .48) 31%, rgba(255, 255, 255, .35) 52%, rgba(230, 240, 247, .40) 73%, rgba(255, 255, 255, .84) 100%),
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(220, 228, 235, .42));
}
.section-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 19px;
}
.section-card::before,
.entry::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .64) 0 8%, rgba(255, 255, 255, 0) 24% 45%, rgba(255, 255, 255, .32) 55%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 24%);
  opacity: .9;
}
.section-card > *,
.entry > * { position: relative; z-index: 1; }
.section-head {
  min-height: 48px;
  padding: 12px 13px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, .45) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), inset 0 -1px 0 rgba(111, 130, 146, .055);
}
.section-head:hover {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .82), rgba(247, 252, 255, .36) 42%, rgba(255, 255, 255, .72) 100%);
}
.section-num {
  padding: 2px 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(221, 231, 239, .60));
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 6px rgba(44, 62, 80, .08), inset 0 1px 0 #fff;
}
.section-title { font-weight: 700; letter-spacing: .1px; }
.section-toggle-vis,
.section-chevron { text-shadow: 0 1px 0 #fff; }
.section-body {
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .28));
}
.section-card.collapsed .section-head { border-bottom-color: transparent; }
.section-card.collapsed .section-body { padding-top: 0; padding-bottom: 0; }
.section-body-inner { display: grid; gap: 10px; }
.section-body-inner > .entry { margin: 0; }

/* 每条经历是外层模块内独立的透明玻璃单元，不启用实时模糊。 */
.entry {
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  padding: 11px;
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 1px rgba(17, 17, 19, .035), 0 8px 18px rgba(51, 71, 91, .065), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(112, 132, 150, .12);
}
.entry:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 3px rgba(17, 17, 19, .04), 0 14px 26px rgba(51, 71, 91, .09), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(112, 132, 150, .12);
}
.entry-bar {
  min-height: 32px;
  padding: 5px 7px;
  margin: -2px -2px 10px;
  border: 1px solid rgba(255, 255, 255, .80);
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .70), rgba(238, 247, 254, .30) 48%, rgba(255, 255, 255, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(103, 124, 141, .07);
}
.entry-label { color: #383b40; font-weight: 700; }
.entry-handle { opacity: .34; }
.entry-move,
.entry-del {
  border: 1px solid transparent;
  border-radius: 8px;
}
.entry:hover .entry-handle { opacity: .72; }
.entry-move:hover,
.entry-del:hover {
  border-color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 1px 0 #fff;
}
.entry .field input,
.entry .field textarea,
.entry .field select {
  background: linear-gradient(140deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .40));
  border-color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(107, 126, 143, .06);
}
.entry .field input:focus,
.entry .field textarea:focus,
.entry .field select:focus {
  background: rgba(255, 255, 255, .90);
}
.section-body-inner > .btn-add {
  margin-top: -2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .80);
  background: linear-gradient(135deg, rgba(255, 255, 255, .52), rgba(235, 244, 250, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), inset 0 -1px 0 rgba(107, 126, 143, .06);
}
.section-card:hover,
.app-card:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .035), 0 15px 32px rgba(17, 17, 19, .065), inset 0 1px 0 #fff;
}
.guide-num {
  color: #1d1d1f;
  background: #ededf0;
  border: 1px solid rgba(0, 0, 0, .055);
}

.field input,
.field textarea,
.field select,
.jd-add,
.app-status,
.pe-input { color: #1d1d1f; background: rgba(255, 255, 255, .80); }
.field input::placeholder,
.field textarea::placeholder,
.pe-input::placeholder { color: #aeaeb2; }
.field input:focus,
.field textarea:focus,
.field select:focus,
.jd-add:focus,
.pe-input:focus {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(29, 29, 31, .11), inset 0 1px 0 #fff;
}
.btn-add { border-style: solid; color: #636366; box-shadow: none; }
.btn-add:hover { color: #000; border-color: rgba(255, 255, 255, .98); background: linear-gradient(140deg, #fff, #f2f2f4); }

.trust-strip,
.ex-panel,
.guide-head,
.modal-head,
.pe-head { background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(237, 237, 242, .62)); border-color: rgba(255, 255, 255, .90); }
.progress-track { background: #e8e8ed; border-color: transparent; }
.progress-bar,
.progress-bar.full { background: #3a3a3c; }
.check-row:hover { background: rgba(255, 255, 255, .66); }
.check-row.pass .check-icon,
.manual-row.checked .check-icon { color: #fff; background: #3a3a3c; }
.check-row.fail .check-icon { color: #636366; background: #ededf0; border-color: #aeaeb2; }
.jd-chip { box-shadow: none; }
.jd-chip.hit,
.jd-chip.miss,
.jd-chip.manual {
  color: #515154;
  background: rgba(255, 255, 255, .68);
  border-color: rgba(255, 255, 255, .86);
}
.jd-col-label.bad,
.jd-col-label.good,
.jd-ok { color: #515154; }

/* 弹窗数量很少，保留轻量玻璃层次。 */
.guide-drawer,
.modal,
.pe-pop,
.toast {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .75) 34%, rgba(255, 255, 255, .46) 52%, rgba(255, 255, 255, .82) 74%, rgba(255, 255, 255, .95) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(235, 235, 239, .57));
  border-color: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-pop);
}
.guide-drawer.open,
.modal:not([hidden]),
.pe-pop,
.toast {
  backdrop-filter: blur(22px) saturate(125%) contrast(103%);
  -webkit-backdrop-filter: blur(22px) saturate(125%) contrast(103%);
}
.scrim,
.modal-scrim {
  background: rgba(0, 0, 0, .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scrim.show,
.modal-scrim.show {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.guide-item,
.modal-foot,
.pe-foot { border-color: rgba(0, 0, 0, .065); }
.guide-compare { background: rgba(255, 255, 255, .58); border-color: #3a3a3c; }
.guide-compare .bad,
.guide-compare .good { color: #515154; }

.kanban-col:nth-child(6n+1),
.kanban-col:nth-child(6n+2),
.kanban-col:nth-child(6n+3),
.kanban-col:nth-child(6n+4),
.kanban-col:nth-child(6n+5),
.kanban-col:nth-child(6n+6) {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .72) 32%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .77) 70%, rgba(255, 255, 255, .91) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, .91), rgba(235, 235, 239, .50));
}
.kanban-col.col-over { border-color: rgba(255, 255, 255, 1); background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(237, 237, 242, .68)); }
.app-draft { color: #515154; background: rgba(255, 255, 255, .70); border-color: rgba(255, 255, 255, .88); }
.app-meta a { color: #1d1d1f; }
.app-edit:hover,
.app-del:hover { color: #1d1d1f; background: rgba(255, 255, 255, .72); }

.toast { color: #1d1d1f; border-left-color: #3a3a3c; }
.toast.warn { border-left-color: #636366; }
.pe-pop { border-radius: 16px; }
.pe-x:hover { color: #000; background: linear-gradient(140deg, #fff, #ededf0); border-color: rgba(255, 255, 255, .96); }
.pe-ok,
.pe-up { color: #fff; background: #1d1d1f; border-color: #1d1d1f; }
.pe-ok:hover,
.pe-up:hover { background: #000; }
.pe-rm { color: #515154; background: #ededf0; }

::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .14); border-color: rgba(255, 255, 255, .86); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .23); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .preview-toolbar, .guide-drawer, .modal, .pe-pop, .toast { background: #fff; }
}

@media (max-width: 980px) {
  .sticky-head {
    background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .68));
    box-shadow: 0 10px 28px rgba(17, 17, 19, .06), inset 0 1px 0 #fff;
    backdrop-filter: blur(22px) saturate(125%) contrast(103%);
    -webkit-backdrop-filter: blur(22px) saturate(125%) contrast(103%);
  }
  .mobile-switch { background: transparent; border-color: rgba(0, 0, 0, .05); }
  .preview-pane::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}