/* Glassmorphism redesign + layout stabilization */
*{box-sizing:border-box;}
body { --bg:#070a0f; --panel:rgba(20,28,36,.52); --panel-alt:rgba(27,38,49,.55); --panel-glow:linear-gradient(145deg,rgba(30,40,52,.55),rgba(14,18,24,.35)); --frost:rgba(255,255,255,.06); --frost-strong:rgba(255,255,255,.12); --blur:22px; --border:rgba(120,170,210,.18); --border-strong:rgba(140,190,240,.28); --accent:#63a4ff; --accent-glow:#8cc4ff; --ok:#46d489; --err:#ff5f6d; --gold:#ffd76a; --text-soft:#b6c2cf; }
html,body { background:radial-gradient(circle at 20% 15%,#0b1118,#06090d 60%), linear-gradient(180deg,#081018,#05070b); color:#e4ecf4; min-height:100%; }
#main { min-height:100vh; display:flex; flex-direction:column; }
#docs-app { flex:1; display:grid; /* Fixed central column to avoid width jitter */ grid-template-columns:280px minmax(620px, 620px) 460px; gap:1.8rem; padding:2.8rem 1.8rem 2.4rem; max-width:2000px; margin:0 auto; backdrop-filter:blur(var(--blur)) saturate(130%); align-items:start; height:calc(100vh - 5.2rem); }
@media (max-width:1700px){ #docs-app { grid-template-columns:260px minmax(600px,600px) 420px; gap:1.6rem; } }
@media (max-width:1500px){ #docs-app { grid-template-columns:240px minmax(580px,580px) 380px; gap:1.4rem; } }
@media (max-width:1380px){ #docs-app { grid-template-columns:220px minmax(540px,540px) 340px; gap:1.2rem; } }
@media (max-width:1180px){ #docs-app { grid-template-columns:220px 1fr; gap:1.4rem; } #visualizer-pane{ order:3; height:400px; max-height:400px; } }
@media (max-width:880px){ #docs-app { grid-template-columns:1fr; gap:1.2rem; height:auto; } #nav-panel{ order:2; height:auto; max-height:300px; } #visualizer-pane{ order:3; height:320px; max-height:320px; } #content-panel{ height:auto; max-height:none; } #executor{ height:280px; } }
#nav-panel { background:var(--panel); backdrop-filter:blur(var(--blur)) saturate(150%); border:1px solid var(--border); border-radius:22px; padding:.8rem 1rem 1rem; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 10px 40px -15px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4); height:100%; max-height:calc(100vh - 8rem); min-width:280px; }
#nav-panel:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(120,180,255,.08),rgba(100,160,255,.02) 45%,transparent 70%); pointer-events:none; }
#nav-panel .nav-header { display:flex; gap:1.2rem; margin:0 0 .8rem; align-items:center; justify-content:space-between; }
#nav-search { flex:1; min-width:0; max-width:calc(100% - 90px); background:rgba(255,255,255,.07); border:1px solid rgba(140,190,255,.25); border-radius:14px; padding:.65rem .8rem; color:#f2f7fb; font-size:.7rem; font-weight:500; backdrop-filter:blur(calc(var(--blur)*.6)); height:auto; box-sizing:border-box; }
#toggle-cards { background:rgba(120,170,255,.18); border:1px solid rgba(150,200,255,.5); color:#f3f8ff; font-size:.7rem; padding:.65rem .8rem; border-radius:14px; cursor:pointer; font-weight:600; width:70px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -6px rgba(90,150,255,.55); transition:.25s; flex-shrink:0; white-space:nowrap; height:auto; box-sizing:border-box; }
#toggle-cards:hover { background:rgba(140,190,255,.28); }
#command-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.32rem; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; }
#command-list .cat-block { list-style:none; margin:0; padding:0; }
#command-list .cat-header { display:flex; align-items:center; justify-content:space-between; font-size:.55rem; letter-spacing:1.3px; font-weight:600; padding:.45rem .55rem .42rem; margin:.25rem 0 .3rem; background:rgba(255,255,255,.05); border:1px solid rgba(140,190,255,.14); border-radius:.7rem; cursor:pointer; user-select:none; color:#c4d5e4; }
#command-list .cat-header.closed { opacity:.55; }
#command-list .cat-header svg { transition:.35s; }
#command-list .cat-header.closed svg { transform:rotate(-90deg); }
#command-list .cat-body { display:flex; flex-direction:column; gap:.28rem; margin:.15rem 0 .4rem; }
#command-list .cat-body.closed { display:none; }
#command-list .cmd-link.active, #command-list .cmd-card-lite.active { background:rgba(120,180,255,.15); border-color:rgba(150,200,255,.6); box-shadow:0 0 0 2px rgba(140,190,255,.35), 0 4px 12px -4px rgba(120,180,255,.4); }
#command-list .cmd-link, #command-list .cmd-card-lite { all:unset; background:rgba(255,255,255,.05); border:1px solid rgba(140,190,255,.18); padding:.62rem .7rem .65rem; font-size:.64rem; letter-spacing:1px; font-weight:600; border-radius:.9rem; cursor:pointer; display:block; line-height:1.22; position:relative; transition:.3s; }
#command-list .cmd-link:after, #command-list .cmd-card-lite:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(110,170,255,.0); transition:.5s; }
#command-list .cmd-card-lite h3 { margin:.05rem 0 .3rem; font-size:.72rem; }
#command-list .cmd-card-lite p { margin:0; font-size:.5rem; opacity:.7; }
#command-list .cmd-link:hover, #command-list .cmd-card-lite:hover { border-color:rgba(140,190,255,.4); background:rgba(255,255,255,.07); }
#command-list .cmd-link:hover:after, #command-list .cmd-card-lite:hover:after { box-shadow:0 0 0 3px rgba(110,170,255,.35); }
.card-mode #command-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
#content-panel { background:var(--panel-alt); backdrop-filter:blur(calc(var(--blur)*1.3)) saturate(170%); border:1px solid var(--border-strong); border-radius:42px; padding:1.6rem 1.9rem 2rem; display:grid; grid-template-rows:auto 1fr auto; gap:1.2rem; position:relative; overflow:hidden; box-shadow:0 24px 90px -30px rgba(0,0,0,.65), 0 8px 26px -10px rgba(0,0,0,.55); height:100%; max-height:calc(100vh - 8rem); }
#command-detail { overflow-y:auto; overflow-x:hidden; min-height:200px; max-height:400px; padding-right:.4rem; }
#content-panel:before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(130,185,255,.10),rgba(90,140,210,.05) 40%, transparent 70%), radial-gradient(circle at 85% 20%, rgba(140,190,255,.18), transparent 55%); pointer-events:none; mix-blend-mode:screen; }
#palette-bar { display:flex; gap:.6rem; align-items:stretch; background:rgba(255,255,255,.06); padding:.45rem .6rem; border:1px solid rgba(140,190,255,.25); border-radius:1rem; margin-bottom:.4rem; position:static; }
#quick-run { flex:1; min-width:0; background:rgba(255,255,255,.07); border:1px solid rgba(140,190,255,.28); color:#f5f9ff; padding:.45rem .65rem; font-family:ui-monospace,monospace; font-size:.68rem; border-radius:.7rem; position:static; }
#run-quick { background:linear-gradient(135deg,#6baeff,#88c4ff); color:#0d1a26; border:1px solid rgba(255,255,255,.4); font-size:.6rem; letter-spacing:.8px; font-weight:600; padding:.45rem .6rem; border-radius:.7rem; cursor:pointer; box-shadow:0 4px 12px -8px rgba(90,160,255,.45); white-space:nowrap; flex:0 0 auto; width:auto; max-width:60px; position:static; }
#run-quick:hover { filter:brightness(1.08); }
#active-db { font-size:.62rem; letter-spacing:1.3px; font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(140,190,255,.35); padding:.6rem .8rem; border-radius:.9rem; color:#a3d2ff; text-align:center; white-space:nowrap; min-width:80px; flex-shrink:0; }
#command-detail h1 { margin:.05rem 0 .8rem; font-size:1.85rem; background:linear-gradient(90deg,#c8e4ff,#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.9px; filter:drop-shadow(0 4px 14px rgba(120,180,255,.28)); }
#command-detail .desc, #command-detail p { font-size:.8rem; opacity:.83; margin:.15rem 0 .9rem; line-height:1.45; }
#command-detail h1 + p { margin-top:.25rem; }
#command-detail p strong { font-weight:700; color:#e4ecf4; }
.syntax-block { background:rgba(255,255,255,.07); border:1px solid rgba(140,190,255,.3); padding:1rem 1.2rem; border-radius:1.1rem; font-family:ui-monospace,monospace; font-size:.82rem; overflow:auto; line-height:1.5; backdrop-filter:blur(calc(var(--blur)*.55)); }
.examples { display:grid; gap:.65rem; margin:.9rem 0; }
.examples .ex { background:rgba(255,255,255,.05); border:1px solid rgba(140,190,255,.18); border-radius:.75rem; padding:.5rem .55rem .55rem; }
.examples pre { margin:0; font-family:ui-monospace,monospace; font-size:.62rem; background:rgba(255,255,255,.05); padding:.45rem .55rem; border-radius:.55rem; overflow:auto; }
.examples pre.out { background:rgba(40,80,60,.25); border:1px solid rgba(60,120,90,.4); }
.meta { font-size:.55rem; letter-spacing:.9px; display:flex; gap:.9rem; flex-wrap:wrap; opacity:.75; }
#executor { background:rgba(255,255,255,.06); border:1px solid rgba(140,190,255,.32); border-radius:1.8rem; padding:1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; box-shadow:0 18px 70px -28px rgba(0,0,0,.65), 0 6px 20px -10px rgba(0,0,0,.55); backdrop-filter:blur(calc(var(--blur)*.9)) saturate(190%); min-height:320px; max-height:520px; overflow-y:auto; }
#executor header { font-size:.65rem; letter-spacing:1.1px; font-weight:600; opacity:.75; }
#exec-input { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(140,190,255,.35); color:#f1f7fb; font-family:ui-monospace,monospace; border-radius:1.1rem; padding:.9rem 1rem; font-size:.78rem; line-height:1.45; resize:vertical; min-height:110px; }
.exec-actions { display:flex; gap:.6rem; margin:.4rem 0; justify-content:flex-start; align-items:center; }
.exec-actions button { flex:0 0 auto; background:linear-gradient(135deg,#72b5ff,#90cbff); border:1px solid rgba(255,255,255,.45); color:#0d1b27; font-size:.62rem; letter-spacing:.7px; font-weight:600; padding:.55rem .75rem; border-radius:.9rem; cursor:pointer; box-shadow:0 8px 20px -12px rgba(90,160,255,.55); white-space:nowrap; min-width:auto; max-width:none; position:static; }
.exec-actions button#exec-clear { background:rgba(255,255,255,.12); color:#e5eff7; border:1px solid rgba(140,190,255,.45); box-shadow:none; font-size:.62rem; letter-spacing:.7px; padding:.55rem .75rem; position:static; }
.exec-actions button#exec-clear:hover { background:rgba(255,255,255,.18); }
.exec-actions button:hover { filter:brightness(1.05); }
#exec-result { min-height:1.2rem; font-size:.68rem; font-weight:700; letter-spacing:1.1px; }
#exec-result.res-ok { color:var(--ok); }
#exec-result.res-err { color:var(--err); }
#history { margin-top:.5rem; flex:1; min-height:0; display:flex; flex-direction:column; }
#history h3 { margin:.15rem 0 .3rem; font-size:.6rem; letter-spacing:1px; font-weight:600; opacity:.7; flex-shrink:0; }
#history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; overflow-y:auto; overflow-x:hidden; font-size:.58rem; flex:1; min-height:80px; }
#history-list li{ cursor:pointer; }
#history-list li { background:rgba(255,255,255,.08); border:1px solid rgba(140,190,255,.32); padding:.52rem .7rem .55rem; border-radius:.85rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
#history-list code { background:rgba(255,255,255,.12); padding:.2rem .45rem; border-radius:.55rem; font-size:.55rem; }
.h-msg.ok { color:var(--ok); }
.h-msg.err { color:var(--err); }
#visualizer-pane { background:rgba(255,255,255,.05); border:1px solid rgba(140,190,255,.16); border-radius:34px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 18px 70px -28px rgba(0,0,0,.7), 0 4px 14px -6px rgba(0,0,0,.55); backdrop-filter:blur(calc(var(--blur)*.9)) saturate(180%); height:100%; max-height:calc(100vh - 8rem); }
#viz-empty { text-align:center; font-size:.7rem; letter-spacing:.9px; opacity:.55; color:#8aa0b4; }
#viz-empty .hint { display:inline-block; margin-top:.6rem; font-size:.55rem; background:#13202c; padding:.35rem .55rem; border:1px solid #1e303b; border-radius:.5rem; }
#viz-canvas { position:absolute; inset:0; width:100%; height:100%; }
.result-panel { background:rgba(255,255,255,.05); border:1px solid rgba(140,190,255,.18); border-radius:1rem; padding:.55rem .55rem .65rem; font-size:.5rem; letter-spacing:.8px; display:none; flex-direction:column; gap:.35rem; max-height:210px; overflow:auto; backdrop-filter:blur(calc(var(--blur)*.7)); margin-top:.4rem; }
#visualizer-pane .result-panel { width:90%; max-width:520px; }
#visualizer-pane .result-panel.download-intro { max-height:none; }
#visualizer-pane .result-panel.download-intro .image-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
#visualizer-pane .result-panel.download-intro .image-grid .image-placeholder { background:rgba(255,255,255,.04); border:1px solid rgba(140,190,255,.22); border-radius:.9rem; height:240px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:.4rem; }
#visualizer-pane .result-panel.download-intro .image-grid img { width:100%; height:100%; object-fit:contain; }
#visualizer-pane .result-panel.download-intro .image-grid img.img-missing { filter:grayscale(1) brightness(.8); background:repeating-linear-gradient(45deg,#1a2731,#1a2731 10px,#162029 10px,#162029 20px); font-size:.55rem; padding:.5rem; }
.result-panel.active { display:flex; }
.result-panel h4 { margin:.05rem 0 .15rem; font-size:.58rem; letter-spacing:1px; font-weight:600; color:#9dcbff; }
.result-panel table { width:100%; border-collapse:separate; border-spacing:0; font-size:.48rem; }
.result-panel th, .result-panel td { border:1px solid rgba(140,190,255,.16); padding:.25rem .3rem; text-align:left; background:rgba(255,255,255,.03); }
.result-panel th { background:rgba(100,150,210,.15); backdrop-filter:blur(calc(var(--blur)*.4)); position:sticky; top:0; z-index:2; }
.agg-line { font-size:.5rem; padding:.3rem .4rem; background:rgba(255,255,255,.06); border:1px solid rgba(140,190,255,.16); border-radius:.55rem; }
.flash-note { animation: flashFade 1.5s linear forwards; }
@keyframes flashFade { from { background:#ff7800; } to { background:transparent; } }
.new-footer { text-align:center; font-size:.72rem; margin:3.2rem 0 2.2rem; opacity:.9; color:#e4ecf4; line-height:1.4; }
.new-footer p { margin:0; }
.new-footer a { color:#89c8ff; text-decoration:none; font-weight:600; }
.new-footer a:hover { color:#cfe6ff; text-decoration:underline; text-underline-offset:3px; }
.new-footer a:focus-visible { outline:2px solid #89c8ff; outline-offset:3px; border-radius:4px; }
/* Card mode adjustments */
.card-mode #command-list .cmd-link { display:none; }
/* Scrollbars subtle */
* { scrollbar-width:thin; scrollbar-color:#1d2b35 #091117; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:#091117; }
*::-webkit-scrollbar-thumb { background:#1d2b35; border-radius:4px; }
*::-webkit-scrollbar-thumb:hover { background:#234050; }
/* Toasts */
#toast-host { position:fixed; top:1rem; right:1rem; display:flex; flex-direction:column; gap:.5rem; z-index:4000; }
#toast-host .toast { background:linear-gradient(160deg,rgba(30,44,56,.85),rgba(26,34,44,.85)); border:1px solid rgba(140,190,255,.25); color:#e1ebf5; padding:.55rem .7rem; font-size:.56rem; letter-spacing:.95px; border-radius:.75rem; box-shadow:0 10px 34px -16px rgba(0,0,0,.65),0 4px 14px -6px rgba(0,0,0,.5); opacity:0; transform:translateY(-6px) scale(.96); transition:.4s cubic-bezier(.4,.8,.2,1); font-weight:600; }
#toast-host .toast.on { opacity:1; transform:translateY(0) scale(1); }
#toast-host .toast.ok { border-color:var(--ok); color:var(--ok); box-shadow:0 0 0 1px rgba(70,212,137,.35),0 6px 20px -8px rgba(63,191,120,.4); }
#toast-host .toast.err { border-color:var(--err); color:var(--err); box-shadow:0 0 0 1px rgba(255,95,109,.35),0 6px 20px -8px rgba(255,89,100,.4); }

/* --- Final non-overlap overrides for nav header --- */
#nav-panel .nav-header { display:grid !important; grid-template-columns: 1fr 78px !important; gap:.65rem !important; padding:0 !important; }
#nav-search { width:100% !important; max-width:none !important; flex:1 !important; margin:0 !important; display:block !important; }
#toggle-cards { width:78px !important; margin:0 !important; position:static !important; }
/* Download link styling (simple hyperlink, accessible) */
a.dl-link { color: var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
a.dl-link:hover { color:#9fd3ff; }
a.dl-link:focus { outline:2px solid #88c4ff; outline-offset:2px; border-radius:4px; }
/* Related command links */
.meta a[data-related] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight:600; }
.meta a[data-related]:hover { color:#9fd3ff; }
.meta a[data-related]:focus { outline:2px solid #88c4ff; outline-offset:2px; border-radius:4px; }