/* ============================================================
   ide.css — 前端练习场 · VSCode 风网页编辑器
   5 主题：dark / light(暖白纸张) / midnight / cosmic / monokai
   ============================================================ */
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/jetbrainsmono-vf.woff2") format("woff2-variations"),
         url("fonts/jetbrainsmono-vf.woff2") format("woff2");
    font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ---------- 主题变量 ---------- */
body[data-theme="dark"] {
    --bg: #1e1e1e; --p0: #1e1e1e; --p1: #252526; --p2: #333333;
    --ln: #3c3c3c; --ln2: #2d2d2d; --fg: #cccccc; --fg2: #9d9d9d; --fg3: #6e6e6e;
    --ac: #0e7fd4; --ac-fg: #ffffff; --ac-soft: rgba(14,127,212,.22);
    --sel: #264f78; --curln: rgba(255,255,255,.045);
    --pop-act: #04395e; --pop-hov: #2a2d2e;
    --st-bg: #0e7fd4; --st-fg: #ffffff;
    --t-tag:#569cd6; --t-attr:#9cdcfe; --t-str:#ce9178; --t-com:#6a9955;
    --t-kw:#c586c0; --t-num:#b5cea8; --t-prop:#9cdcfe; --t-val:#ce9178;
    --t-fn:#dcdcaa; --t-ent:#4ec9b0; --t-at:#c586c0; --t-punc:#d4d4d4; --t-doct:#569cd6;
    --guide: rgba(255,255,255,.07); --find: rgba(234,192,19,.28); --find-cur: rgba(234,192,19,.62);
    --grid-c: rgba(120,170,255,.035); --b1: rgba(0,122,204,.06); --b2: rgba(78,201,176,.05); --b3: rgba(86,156,214,.045);
    --shadow: 0 8px 30px rgba(0,0,0,.45); --chrome-a: .93;
}
body[data-theme="light"] {
    --bg: #faf5ec; --p0: #fffdf8; --p1: #fbf6ec; --p2: #f3ecdd;
    --ln: #e8dfc9; --ln2: #efe7d4; --fg: #332b22; --fg2: #6b6053; --fg3: #9b8f7d;
    --ac: #b8552f; --ac-fg: #ffffff; --ac-soft: rgba(184,85,47,.14);
    --sel: rgba(184,85,47,.22); --curln: rgba(122,92,54,.05);
    --pop-act: rgba(184,85,47,.16); --pop-hov: rgba(122,92,54,.08);
    --st-bg: #b8552f; --st-fg: #ffffff;
    --t-tag:#1d6fa5; --t-attr:#8a5a2b; --t-str:#9a4423; --t-com:#7f9a6d;
    --t-kw:#93325e; --t-num:#7a5a10; --t-prop:#1d6fa5; --t-val:#9a4423;
    --t-fn:#8a6c1a; --t-ent:#2e7f6c; --t-at:#93325e; --t-punc:#574d40; --t-doct:#1d6fa5;
    --guide: rgba(122,92,54,.10); --find: rgba(230,170,40,.30); --find-cur: rgba(230,170,40,.62);
    --grid-c: rgba(122,92,54,.05); --b1: rgba(216,138,78,.16); --b2: rgba(196,96,60,.10); --b3: rgba(190,150,80,.13);
    --shadow: 0 8px 30px rgba(122,88,48,.18); --chrome-a: .93;
}
body[data-theme="midnight"] {
    --bg: #0b1526; --p0: #0d1b2a; --p1: #10213a; --p2: #16294a;
    --ln: #1d3557; --ln2: #152a46; --fg: #c9d8ee; --fg2: #8ba3c2; --fg3: #5a7392;
    --ac: #4cc2ff; --ac-fg: #062033; --ac-soft: rgba(76,194,255,.18);
    --sel: #1f4a6e; --curln: rgba(76,194,255,.05);
    --pop-act: #0c4a6e; --pop-hov: #14304f;
    --st-bg: #0f2c4d; --st-fg: #bfe2ff;
    --t-tag:#61b3f0; --t-attr:#8fd3f4; --t-str:#f0a86a; --t-com:#5d8a6b;
    --t-kw:#c792ea; --t-num:#9ae6b4; --t-prop:#8fd3f4; --t-val:#f0a86a;
    --t-fn:#ffe08a; --t-ent:#4ec9b0; --t-at:#c792ea; --t-punc:#a9c1dd; --t-doct:#61b3f0;
    --guide: rgba(76,194,255,.08); --find: rgba(255,200,60,.26); --find-cur: rgba(255,200,60,.6);
    --grid-c: rgba(76,194,255,.045); --b1: rgba(76,194,255,.06); --b2: rgba(120,92,255,.05); --b3: rgba(76,255,208,.035);
    --shadow: 0 8px 30px rgba(2,10,24,.7); --chrome-a: .93;
}
body[data-theme="cosmic"] {
    --bg: #171322; --p0: #1b1630; --p1: #221c3a; --p2: #2a2348;
    --ln: #372e5c; --ln2: #2c2549; --fg: #d6cdef; --fg2: #9d92c4; --fg3: #6f6496;
    --ac: #a78bfa; --ac-fg: #241b3f; --ac-soft: rgba(167,139,250,.20);
    --sel: #43356e; --curln: rgba(167,139,250,.06);
    --pop-act: #463373; --pop-hov: #322850;
    --st-bg: #2a2148; --st-fg: #cabfff;
    --t-tag:#8ab8ff; --t-attr:#c4b5fd; --t-str:#f2a8b8; --t-com:#7d8a6a;
    --t-kw:#f0a8d8; --t-num:#a8e6c8; --t-prop:#c4b5fd; --t-val:#f2a8b8;
    --t-fn:#ffe08a; --t-ent:#6ee7d8; --t-at:#f0a8d8; --t-punc:#b8aede; --t-doct:#8ab8ff;
    --guide: rgba(167,139,250,.09); --find: rgba(255,214,102,.26); --find-cur: rgba(255,214,102,.6);
    --grid-c: rgba(167,139,250,.05); --b1: rgba(167,139,250,.08); --b2: rgba(244,114,182,.06); --b3: rgba(110,231,216,.04);
    --shadow: 0 8px 30px rgba(8,4,24,.7); --chrome-a: .93;
}
body[data-theme="monokai"] {
    --bg: #272822; --p0: #272822; --p1: #1e1f1c; --p2: #31322c;
    --ln: #3b3c35; --ln2: #31322c; --fg: #f8f8f2; --fg2: #a5a493; --fg3: #75715e;
    --ac: #a6e22e; --ac-fg: #1e1f1c; --ac-soft: rgba(166,226,46,.16);
    --sel: #49483e; --curln: rgba(255,255,255,.045);
    --pop-act: #49483e; --pop-hov: #3e3d32;
    --st-bg: #75715e; --st-fg: #f8f8f2;
    --t-tag:#f92672; --t-attr:#a6e22e; --t-str:#e6db74; --t-com:#88846f;
    --t-kw:#f92672; --t-num:#ae81ff; --t-prop:#a6e22e; --t-val:#e6db74;
    --t-fn:#66d9ef; --t-ent:#66d9ef; --t-at:#f92672; --t-punc:#f8f8f2; --t-doct:#88846f;
    --guide: rgba(255,255,255,.07); --find: rgba(253,151,31,.25); --find-cur: rgba(253,151,31,.58);
    --grid-c: rgba(255,255,255,.03); --b1: rgba(166,226,46,.04); --b2: rgba(249,38,114,.035); --b3: rgba(102,217,239,.03);
    --shadow: 0 8px 30px rgba(0,0,0,.5); --chrome-a: .93;
}

/* ---------- 呼吸渐变 + 网格动画（Chrome 半透明可见） ---------- */
#ide::before {
    content: ""; position: fixed; inset: -14%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(36% 30% at 16% 20%, var(--b1), transparent 70%),
        radial-gradient(34% 30% at 84% 16%, var(--b2), transparent 70%),
        radial-gradient(40% 34% at 50% 90%, var(--b3), transparent 72%);
    animation: ide-breathe 16s ease-in-out infinite alternate;
}
@keyframes ide-breathe {
    0% { transform: scale(1) translate(0,0); opacity: .8; }
    50% { transform: scale(1.05) translate(-1.2%, .8%); opacity: 1; }
    100% { transform: scale(1.08) translate(1.2%, -.8%); opacity: .9; }
}
#ide::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--grid-c) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
    background-size: 44px 44px;
    animation: ide-grid 90s linear infinite;
}
@keyframes ide-grid { to { background-position: 44px 44px; } }

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px; color: var(--fg); background: var(--bg);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font-family: inherit; font-size: inherit; color: var(--fg); }
svg { display: block; }
::selection { background: var(--ac-soft); }

#ide { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fg3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   标题栏
   ============================================================ */
.tb {
    height: 38px; flex: none; display: flex; align-items: center; gap: 4px;
    padding: 0 10px 0 12px; position: relative; z-index: 40;
    background: color-mix(in srgb, var(--p1) calc(var(--chrome-a)*100%), transparent);
    border-bottom: 1px solid var(--ln);
    backdrop-filter: blur(10px);
}
.tb-brand { display: flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 4px 8px 4px 0; border-radius: 6px; }
.tb-brand:hover { background: var(--pop-hov); }
.tb-logo { width: 17px; height: 17px; color: var(--ac); }
.tb-menus { display: flex; gap: 1px; }
.menu { position: relative; }
.menu-btn {
    height: 28px; padding: 0 10px; border-radius: 6px;
    font-size: 12.5px; color: var(--fg2);
}
.menu-btn:hover, .menu.on .menu-btn { background: var(--pop-hov); color: var(--fg); }
.menu-pop {
    display: none; position: absolute; top: 30px; left: 0; z-index: 60;
    min-width: 218px; padding: 5px;
    background: var(--p1); border: 1px solid var(--ln); border-radius: 9px;
    box-shadow: var(--shadow);
}
.menu.on .menu-pop { display: block; }
.mi {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    height: 29px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: var(--fg);
}
.mi:hover { background: var(--ac); color: var(--ac-fg); }
.mi kbd { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg3); }
.mi:hover kbd { color: var(--ac-fg); opacity: .8; }
.mi-sep { height: 1px; margin: 5px 8px; background: var(--ln); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--fg2); }
.tb-ic svg { width: 15px; height: 15px; }
.tb-ic:hover { background: var(--pop-hov); color: var(--fg); }
.tb-dots { display: flex; gap: 7px; padding: 0 4px; }
.tb-dots i { width: 11px; height: 11px; border-radius: 50%; }
.tb-dots i:nth-child(1) { background: #ff5f57; }
.tb-dots i:nth-child(2) { background: #febc2e; }
.tb-dots i:nth-child(3) { background: #28c840; }

/* ============================================================
   活动栏
   ============================================================ */
.ide-body { flex: 1; display: flex; min-height: 0; position: relative; z-index: 1; }
.ab {
    width: 46px; flex: none; display: flex; flex-direction: column; align-items: center;
    padding: 6px 0; gap: 2px; z-index: 30;
    background: color-mix(in srgb, var(--p2) calc(var(--chrome-a)*100%), transparent);
    border-right: 1px solid var(--ln);
}
.ab-btn {
    width: 40px; height: 42px; display: grid; place-items: center;
    color: var(--fg3); border-radius: 8px; position: relative;
}
.ab-btn svg { width: 21px; height: 21px; }
.ab-btn:hover { color: var(--fg); }
.ab-btn.on { color: var(--fg); }
.ab-btn.on::before {
    content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; width: 2.5px;
    background: var(--ac); border-radius: 2px;
}
.ab-sp { flex: 1; }
.ab-badge {
    position: absolute; top: 5px; right: 5px; min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--ac); color: var(--ac-fg);
    font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
}

/* ============================================================
   侧边栏
   ============================================================ */
.sb {
    width: 264px; flex: none; display: flex; flex-direction: column; min-width: 0;
    background: color-mix(in srgb, var(--p1) calc(var(--chrome-a)*100%), transparent);
    backdrop-filter: blur(8px);
    border-right: 1px solid var(--ln);
}
.sb-head {
    height: 34px; flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 16px;
}
.sb-head h3 { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--fg2); text-transform: uppercase; }
.sb-x { width: 24px; height: 24px; display: grid; place-items: center; color: var(--fg3); border-radius: 5px; }
.sb-x svg { width: 13px; height: 13px; }
.sb-x:hover { background: var(--pop-hov); color: var(--fg); }
.sb-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.sb-view { display: none; }
.sb-view.on { display: block; }

/* 文件树 */
.tree-proj { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--fg); padding: 6px 8px; display: flex; align-items: center; gap: 6px; }
.tree-proj svg { width: 13px; height: 13px; color: var(--ac); }
.frow {
    display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 20px;
    border-radius: 6px; color: var(--fg2); font-size: 12.5px; cursor: pointer; position: relative;
}
.frow:hover { background: var(--pop-hov); color: var(--fg); }
.frow.on { background: var(--ac-soft); color: var(--fg); }
.frow.on::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2.5px; background: var(--ac); border-radius: 2px; }
.frow .fico { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 3.5px; font-size: 8.5px; font-weight: 800; font-family: "JetBrains Mono", monospace; color: #fff; }
.fico.html { background: #e44d26; }
.fico.css  { background: #1572b6; }
.fico.js   { background: #b07a00; }
.frow .fdot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ac); opacity: 0; }
.frow.dirty .fdot { opacity: 1; }
.sb-note { margin: 14px 8px 0; padding: 10px 12px; border-radius: 9px; background: var(--ac-soft); color: var(--fg2); font-size: 11.5px; line-height: 1.65; }
.sb-note b { color: var(--fg); }

/* 示例库 */
.sgrp { margin: 10px 0 2px; }
.sgrp-h { font-size: 11px; font-weight: 700; color: var(--fg3); padding: 4px 8px; letter-spacing: .04em; }
.sitem { border-radius: 8px; padding: 7px 9px 8px; margin: 2px 0 4px; cursor: pointer; border: 1px solid transparent; }
.sitem:hover { background: var(--pop-hov); }
.sitem.on { background: var(--ac-soft); border-color: var(--ac); }
.sitem-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
.sitem.on .sitem-t::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.sitem:not(.on) .sitem-t::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--fg3); }
.stags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.stag { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--p2) 80%, transparent); color: var(--fg2); font-family: "JetBrains Mono", monospace; }
.goals { margin-top: 6px; display: none; }
.sitem.on .goals { display: block; }
.goal { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg2); padding: 2.5px 0; }
.goal .gchk { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--fg3); display: grid; place-items: center; }
.goal.ok { color: var(--fg); }
.goal.ok .gchk { background: var(--ac); border-color: var(--ac); color: var(--ac-fg); }
.goal .gchk svg { width: 8px; height: 8px; opacity: 0; }
.goal.ok .gchk svg { opacity: 1; }

/* 复习示例 */
.rv-save { display: flex; gap: 6px; margin: 6px 0 10px; }
.rv-save input {
    flex: 1; min-width: 0; height: 30px; padding: 0 10px;
    background: var(--p0); border: 1px solid var(--ln); border-radius: 7px; font-size: 12.5px;
}
.rv-save input:focus { outline: none; border-color: var(--ac); }
.rv-btn {
    height: 30px; padding: 0 12px; border-radius: 7px; flex: none;
    background: var(--ac); color: var(--ac-fg); font-size: 12px; font-weight: 600;
}
.rv-btn:hover { filter: brightness(1.12); }
.rv-empty { padding: 18px 10px; text-align: center; color: var(--fg3); font-size: 12px; line-height: 1.8; }
.rv-item { border: 1px solid var(--ln); border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; }
.rv-item:hover { border-color: var(--fg3); }
.rv-name { font-size: 12.5px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 6px; }
.rv-meta { font-size: 10.5px; color: var(--fg3); margin-top: 3px; font-family: "JetBrains Mono", monospace; }
.rv-ops { display: flex; gap: 6px; margin-top: 7px; }
.rv-op { font-size: 11px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--ln); color: var(--fg2); }
.rv-op:hover { border-color: var(--ac); color: var(--fg); }
.rv-op.danger:hover { border-color: #e5564a; color: #e5564a; }
.rv-op.confirm { border-color: #e5564a; background: #e5564a; color: #fff; }

/* 主题卡片 */
.thc { border: 1px solid var(--ln); border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; cursor: pointer; }
.thc:hover { border-color: var(--fg3); }
.thc.on { border-color: var(--ac); background: var(--ac-soft); }
.thc-h { display: flex; align-items: center; justify-content: space-between; }
.thc-t { font-size: 12.5px; font-weight: 600; }
.thc-tag { font-size: 10px; color: var(--ac); border: 1px solid var(--ac); padding: 1px 7px; border-radius: 99px; display: none; }
.thc.on .thc-tag { display: block; }
.thc-d { font-size: 11px; color: var(--fg2); margin-top: 4px; line-height: 1.6; }
.thc-sw { display: flex; gap: 5px; margin-top: 8px; }
.thc-sw i { width: 22px; height: 12px; border-radius: 3px; border: 1px solid rgba(128,128,128,.3); }

/* 拖拽条 */
.grip { flex: none; width: 4px; cursor: col-resize; z-index: 25; background: transparent; transition: background .15s; }
.grip:hover, .grip.drag { background: var(--ac); }

/* ============================================================
   主区 / 编辑器
   ============================================================ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.work { flex: 1; display: flex; min-height: 0; }

.ed { flex: 1.25; min-width: 0; display: flex; flex-direction: column; background: var(--p0); position: relative; }
.ed-tabs {
    height: 36px; flex: none; display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--p2) 55%, var(--p1));
    border-bottom: 1px solid var(--ln);
}
.etab {
    display: flex; align-items: center; gap: 8px; padding: 0 12px; max-width: 200px;
    font-size: 12.5px; color: var(--fg2); position: relative; cursor: pointer;
    border-right: 1px solid var(--ln2);
}
.etab .fico { width: 15px; height: 15px; font-size: 8px; }
.etab:hover { color: var(--fg); }
.etab.on { background: var(--p0); color: var(--fg); }
.etab.on::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--ac); }
.etab .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); opacity: 0; }
.etab.dirty .fdot { opacity: 1; }
.ed-tabs-x { flex: 1; border-right: 0; }

.ed-bc {
    height: 24px; flex: none; display: flex; align-items: center; gap: 2px;
    padding: 0 14px; font-size: 11.5px; color: var(--fg3);
    background: var(--p0); border-bottom: 1px solid var(--ln2);
    overflow: hidden; white-space: nowrap;
}
.ed-bc b { color: var(--fg2); font-weight: 600; }
.ed-bc i { font-style: normal; padding: 0 4px; opacity: .6; font-family: "JetBrains Mono", monospace; font-size: 10px; }

.ed-wrap { flex: 1; display: flex; min-height: 0; position: relative; background: var(--p0); }
.gutter {
    width: 52px; flex: none; overflow: hidden; position: relative;
    border-right: 1px solid var(--ln2);
    background: var(--p0);
}
.g-in { padding: 12px 0 40vh; font-family: var(--mono); font-size: 12.5px; line-height: 21px; text-align: right; color: var(--fg3); will-change: transform; }
.g-in div { height: 21px; padding-right: 16px; }
.g-in div.cur { color: var(--fg); }

.ed-scroll { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.hl, .src {
    font-family: var(--mono);
    font-size: 13px; line-height: 21px; tab-size: 2;
    padding: 12px 16px 40vh;
    white-space: pre; word-wrap: normal; overflow-wrap: normal;
    letter-spacing: 0;
}
body { --mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace; }
.hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--fg); will-change: transform; }
.hl code { font: inherit; }
.cl { height: 21px; }
.cl.cur { background: var(--curln); }
.ind { background: repeating-linear-gradient(90deg, var(--guide) 0 1px, transparent 1px 2ch); background-origin: content-box; }

/* 语法配色 */
.tk-tag   { color: var(--t-tag); }
.tk-attr  { color: var(--t-attr); }
.tk-str   { color: var(--t-str); }
.tk-com   { color: var(--t-com); font-style: italic; }
.tk-kw    { color: var(--t-kw); }
.tk-num   { color: var(--t-num); }
.tk-prop  { color: var(--t-prop); }
.tk-val   { color: var(--t-val); }
.tk-fn    { color: var(--t-fn); }
.tk-ent   { color: var(--t-ent); }
.tk-at    { color: var(--t-at); }
.tk-punc  { color: var(--t-punc); }
.tk-doct  { color: var(--t-doct); }
.tk-self  { color: var(--t-attr); }

.src {
    position: absolute; inset: 0; z-index: 2; display: block;
    width: 100%; height: 100%;
    background: transparent; color: transparent; caret-color: var(--ac);
    border: 0; outline: none; resize: none; overflow: auto;
    -webkit-text-fill-color: transparent;
}
.src::selection { background: var(--sel); -webkit-text-fill-color: transparent; }
.src::placeholder { color: var(--fg3); }

.find-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; will-change: transform; }
.fhit { position: absolute; background: var(--find); border-radius: 2px; }
.fhit.cur { background: var(--find-cur); box-shadow: 0 0 0 1px var(--ac); }

/* 查找栏（右上覆盖） */
.findbar {
    position: absolute; top: 0; right: 18px; z-index: 30;
    display: none; flex-direction: column; gap: 5px;
    padding: 8px 9px;
    background: var(--p1); border: 1px solid var(--ln); border-top: 0;
    border-radius: 0 0 9px 9px; box-shadow: var(--shadow);
    min-width: 320px;
}
.findbar.on { display: flex; }
.fb-row { display: flex; align-items: center; gap: 5px; }
.findbar input {
    height: 26px; flex: 1; min-width: 0; padding: 0 9px;
    background: var(--p0); border: 1px solid var(--ln); border-radius: 6px;
    font-family: var(--mono); font-size: 12px;
}
.findbar input:focus { outline: none; border-color: var(--ac); }
.fb-count { font-size: 11px; color: var(--fg3); font-family: var(--mono); flex: none; min-width: 44px; text-align: center; }
.fb-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--fg2); flex: none; }
.fb-btn svg { width: 14px; height: 14px; }
.fb-btn:hover { background: var(--pop-hov); color: var(--fg); }
.fb-txt { width: auto; padding: 0 10px; font-size: 11.5px; }
.fb-rp { display: none; }
.findbar.rep .fb-rp { display: flex; }

/* 微缩地图 */
.minimap { width: 84px; flex: none; border-left: 1px solid var(--ln2); background: var(--p0); cursor: pointer; }

/* ============================================================
   预览
   ============================================================ */
.pv { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--p0); border-left: 1px solid var(--ln); }
.pv-head {
    height: 36px; flex: none; display: flex; align-items: center; gap: 9px;
    padding: 0 12px; border-bottom: 1px solid var(--ln);
    background: color-mix(in srgb, var(--p2) 55%, var(--p1));
}
.pv-dot { width: 8px; height: 8px; border-radius: 50%; background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.6); }
.pv-dot.off { background: var(--fg3); box-shadow: none; }
.pv-title { font-size: 12.5px; font-weight: 600; color: var(--fg2); }
.pv-state { font-size: 11px; color: #28c840; font-family: var(--mono); }
.pv-state.off { color: var(--fg3); }
.pv-sp { flex: 1; }
.pv-sel {
    height: 26px; padding: 0 8px; border-radius: 6px;
    background: var(--p0); border: 1px solid var(--ln); font-size: 11.5px; color: var(--fg2);
}
.pv-sel:focus { outline: none; border-color: var(--ac); }
.pv-btn { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: var(--fg2); }
.pv-btn svg { width: 14px; height: 14px; }
.pv-btn:hover { background: var(--pop-hov); color: var(--fg); }
.pv-btn.on { color: var(--ac); }
.pv-body { flex: 1; min-height: 0; display: grid; place-items: stretch; overflow: auto; background: var(--p0); padding: 0; }
.pv-body.framed { padding: 14px; background: repeating-conic-gradient(var(--ln2) 0% 25%, transparent 0% 50%) 0 0/22px 22px; }
.pv-frame-holder { margin: 0 auto; height: 100%; width: 100%; }
.pv-frame-holder iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; border-radius: var(--pv-r, 0); }
.pv-body:not(.framed) iframe { width: 100%; height: 100%; }

/* ============================================================
   控制台面板
   ============================================================ */
.panel {
    height: 168px; flex: none; display: flex; flex-direction: column;
    border-top: 1px solid var(--ln);
    background: color-mix(in srgb, var(--p1) calc(var(--chrome-a)*100%), transparent);
    backdrop-filter: blur(8px);
}
.panel.hide { display: none; }
.pn-head { height: 32px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.pn-tab { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--fg); padding-bottom: 2px; border-bottom: 2px solid var(--ac); }
.pn-count { font-size: 10.5px; color: var(--fg3); font-family: var(--mono); }
.pn-sp { flex: 1; }
.pn-btn { font-size: 11.5px; color: var(--fg2); padding: 3px 9px; border-radius: 6px; }
.pn-btn:hover { background: var(--pop-hov); color: var(--fg); }
.pn-btn svg { width: 13px; height: 13px; display: block; }
.pn-body { flex: 1; overflow-y: auto; padding: 2px 12px 10px; font-family: var(--mono); font-size: 12px; line-height: 1.7; }
.pn-empty { color: var(--fg3); padding: 8px 2px; }
.clr { display: flex; gap: 8px; padding: 2px 0; align-items: baseline; }
.clr .t { color: var(--fg3); font-size: 10px; flex: none; }
.clr .m { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.clr.log .m { color: var(--fg2); }
.clr.warn .m { color: #e0a33c; }
.clr.error .m { color: #ef6b5d; }

/* ============================================================
   状态栏
   ============================================================ */
.sb2 {
    height: 24px; flex: none; display: flex; align-items: center; gap: 2px;
    padding: 0 6px 0 0; font-size: 11.5px;
    background: var(--st-bg); color: var(--st-fg); position: relative; z-index: 5;
}
.st-item { height: 100%; display: flex; align-items: center; padding: 0 9px; border-radius: 0; white-space: nowrap; }
.st-item:hover { background: rgba(255,255,255,.16); }
.st-brand { font-weight: 700; background: rgba(0,0,0,.18); letter-spacing: .03em; }
.st-sp { flex: 1; }
#st-msg { color: rgba(255,255,255,.85); }
.st-item kbd { font-family: var(--mono); }

/* ============================================================
   智能提示弹层
   ============================================================ */
.ac {
    position: fixed; z-index: 500; display: none;
    min-width: 330px; max-width: 480px; max-height: 308px;
    background: var(--p1); border: 1px solid var(--ln); border-radius: 7px;
    box-shadow: var(--shadow); overflow: hidden; padding: 3px;
}
.ac.on { display: block; }
.ac-list { overflow-y: auto; max-height: 300px; }
.aci {
    display: flex; align-items: center; gap: 9px; height: 25px;
    padding: 0 9px; border-radius: 5px; font-size: 12.5px; color: var(--fg);
}
.aci .k { width: 15px; height: 15px; flex: none; display: grid; place-items: center; }
.aci .k svg { width: 13px; height: 13px; }
.aci .l { font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aci .d { margin-left: auto; color: var(--fg3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; flex: none; }
.aci.sel, .aci:hover { background: var(--pop-act); }
.aci.sel .d, .aci:hover .d { color: color-mix(in srgb, var(--fg) 70%, transparent); }
.aci .k b { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.ik-tag  { color: var(--t-tag); }
.ik-attr { color: var(--t-attr); }
.ik-val  { color: var(--t-val); }
.ik-ent  { color: var(--t-ent); }
.ik-prop { color: var(--t-prop); }
.ik-at   { color: var(--t-at); }
.ik-kw   { color: var(--t-kw); }
.ik-fn   { color: var(--t-fn); }
.ac-foot {
    display: flex; gap: 14px; padding: 4px 12px 5px; border-top: 1px solid var(--ln2);
    font-size: 10.5px; color: var(--fg3); white-space: nowrap;
}
.ac-foot b { color: var(--fg2); font-family: var(--mono); font-weight: 600; }

/* 侧栏隐藏 */
.sb.hidden { display: none; }

/* ============================================================
   命令面板 / 弹窗 / Toast
   ============================================================ */
.cmdk { position: fixed; inset: 0; z-index: 600; display: none; background: rgba(0,0,0,.36); backdrop-filter: blur(2px); }
.cmdk.on { display: block; }
.cmdk-box {
    width: min(600px, calc(100vw - 40px)); margin: 9vh auto 0;
    background: var(--p1); border: 1px solid var(--ln); border-radius: 11px;
    box-shadow: var(--shadow); overflow: hidden;
}
#ck-q {
    width: 100%; height: 46px; padding: 0 16px;
    background: transparent; border: 0; outline: none;
    font-size: 14.5px; color: var(--fg);
    border-bottom: 1px solid var(--ln);
}
#ck-q::placeholder { color: var(--fg3); }
.cmdk-list { max-height: 380px; overflow-y: auto; padding: 6px; }
.cki { display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; color: var(--fg); }
.cki .k { color: var(--fg3); font-size: 10.5px; flex: none; width: 44px; font-family: var(--mono); }
.cki .d { margin-left: auto; color: var(--fg3); font-size: 11px; }
.cki.sel { background: var(--pop-act); }
.ck-empty { padding: 22px; text-align: center; color: var(--fg3); font-size: 12.5px; }

.modal { position: fixed; inset: 0; z-index: 640; display: none; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); }
.modal.on { display: grid; place-items: center; }
.modal-box {
    width: min(620px, calc(100vw - 40px)); max-height: 80vh; overflow: hidden;
    background: var(--p1); border: 1px solid var(--ln); border-radius: 12px; box-shadow: var(--shadow);
    display: flex; flex-direction: column;
}
.modal-head { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--ln); }
.modal-head h3 { font-size: 13.5px; }
.modal-body { padding: 14px 18px 20px; overflow-y: auto; font-size: 12.5px; line-height: 1.75; color: var(--fg2); }
.modal-body h4 { font-size: 12px; color: var(--fg); margin: 12px 0 6px; }
.modal-body h4:first-child { margin-top: 0; }
.modal-body .kbd-row { display: flex; justify-content: space-between; gap: 12px; padding: 3.5px 0; }
.modal-body kbd {
    font-family: var(--mono); font-size: 10.5px; color: var(--fg);
    background: var(--p0); border: 1px solid var(--ln); border-bottom-width: 2px;
    border-radius: 5px; padding: 1px 7px;
}
.modal-body code { font-family: var(--mono); font-size: 11.5px; color: var(--t-str); background: var(--p0); padding: 1px 6px; border-radius: 4px; }

.toast {
    position: fixed; right: 18px; bottom: 40px; z-index: 700;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast-i {
    display: flex; align-items: center; gap: 9px;
    background: var(--p1); color: var(--fg); border: 1px solid var(--ln);
    border-left: 3px solid var(--ac);
    padding: 9px 15px; border-radius: 9px; box-shadow: var(--shadow);
    font-size: 12.5px; animation: toast-in .22s var(--ease, ease-out);
}
.toast-i.out { opacity: 0; transform: translateY(6px); transition: all .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 940px) {
    .minimap { display: none; }
    .work { flex-direction: column; }
    .ed { flex: none; height: 54%; }
    .pv { flex: none; height: 46%; border-left: 0; border-top: 1px solid var(--ln); }
    .panel { height: 150px; }
    .sb {
        position: absolute; left: 46px; top: 0; bottom: 0; z-index: 45;
        box-shadow: var(--shadow);
    }
    .tb-menus { display: none; }
    .gutter { width: 40px; }
    .g-in div { padding-right: 8px; }
    .findbar { right: 8px; min-width: 260px; }
    .etab { max-width: 152px; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
    #ide::before, #ide::after { animation: none; }
    .toast-i { animation: none; }
}