/* ---- IDE -------------------------------------------------------------------- */
.ide { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0d1017; color: #d5dae3; animation: sheetIn .2s var(--ease); }
.ide-bar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border-bottom: 1px solid #1d2230; background: #10141d; flex-shrink: 0; }
.ide-bar .icon-btn, .ide .icon-btn { color: #9aa3b5; }
.ide-bar .icon-btn:hover, .ide .icon-btn:hover { color: #fff; background: rgba(255,255,255,.07); }
.ide-bar .btn { background: #1a2030; border-color: #2a3145; color: #d5dae3; box-shadow: none; }
.ide-bar .btn:hover { background: #222a3d; }
.ide-bar .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.ide-bar .segmented { background: #161b27; border-color: #232a3b; }
.ide-bar .segmented button { color: #9aa3b5; }
.ide-bar .segmented button.on { background: #262e42; color: #fff; }
.ide-main { flex: 1; min-height: 0; display: flex; }
.ide-tree { width: 240px; flex-shrink: 0; border-right: 1px solid #1d2230; background: #0f131b; overflow-y: auto; padding: 8px 6px; font-size: 13px; }
.ide-tree .t-head { padding: 6px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d768a; display: flex; align-items: center; }
.ide-node { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px; border: none; background: none; color: #b7bfcd; border-radius: 6px; text-align: left; white-space: nowrap; font-size: 13px; }
.ide-node:hover { background: rgba(255,255,255,.05); color: #fff; }
.ide-node.on { background: rgba(91,140,255,.16); color: #fff; }
.ide-node svg { width: 15px; height: 15px; flex-shrink: 0; color: #7d879b; }
.ide-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ide-tabs { display: flex; height: 38px; background: #0f131b; border-bottom: 1px solid #1d2230; overflow-x: auto; flex-shrink: 0; }
.ide-tab { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border: none; border-right: 1px solid #1d2230; background: none; color: #8d96a8; font-size: 12.5px; white-space: nowrap; }
.ide-tab.on { background: #0d1017; color: #fff; box-shadow: inset 0 2px 0 var(--accent); }
.ide-tab .x { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }
.ide-tab .x:hover { background: rgba(255,255,255,.1); }
.ide-tab .x svg { width: 12px; height: 12px; }
.ide-code { flex: 1; min-height: 0; position: relative; overflow: auto; background: #0d1017; }
.ide-code-inner { position: relative; display: flex; min-height: 100%; min-width: max-content; }
.ide-gutter { padding: 14px 10px 40px 14px; text-align: right; color: #4c5569; font-family: var(--font-mono); font-size: 13px; line-height: 21px; user-select: none; flex-shrink: 0; background: #0d1017; position: sticky; left: 0; z-index: 2; }
.ide-layer { position: relative; flex: 1; min-width: 0; }
.ide-layer pre, .ide-layer textarea { margin: 0; padding: 14px 40px 40px 12px; font-family: var(--font-mono); font-size: 13px; line-height: 21px; white-space: pre; tab-size: 2; letter-spacing: 0; border: none; }
.ide-layer pre { pointer-events: none; color: #d5dae3; min-height: 100%; }
.ide-layer textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; outline: none; background: transparent; color: transparent; caret-color: #fff; overflow: hidden; }
.ide-layer textarea::selection { background: rgba(91,140,255,.35); color: transparent; }
.ide-preview { width: 46%; flex-shrink: 0; border-left: 1px solid #1d2230; display: flex; flex-direction: column; background: #fff; }
.ide-preview-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; background: #10141d; border-bottom: 1px solid #1d2230; color: #8d96a8; font-size: 12px; }
.ide-preview iframe { flex: 1; width: 100%; border: none; background: #fff; }
.ide-console { height: 130px; overflow-y: auto; background: #0a0d13; border-top: 1px solid #1d2230; font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; color: #b7bfcd; }
.ide-console .err { color: #ff8a80; } .ide-console .warn { color: #f7b267; }
.ide-status { display: flex; align-items: center; gap: 14px; height: 26px; padding: 0 12px; background: #10141d; border-top: 1px solid #1d2230; font-size: 11.5px; color: #7d879b; flex-shrink: 0; }
@media (max-width: 900px) {
  .ide-tree { position: absolute; top: 52px; bottom: 26px; left: 0; z-index: 5; box-shadow: var(--shadow-lg); }
  .ide-tree.closed { display: none; }
  .ide-preview { position: absolute; inset: 52px 0 26px 0; width: auto; z-index: 6; }
  .ide-preview.closed { display: none; }
}
@media (min-width: 901px) { .ide-tree.closed { display: none; } .ide-preview.closed { display: none; } }