/* SKRYPT Web IDE — self-hosted, no external assets (Netskope-safe). */
:root {
  --bg:#1e1e1e; --bg2:#252526; --bg3:#2d2d30; --bd:#3c3c3c; --fg:#d4d4d4;
  --fg2:#9da5b4; --accent:#0e639c; --accent2:#1177bb; --ok:#4ec9b0; --err:#f48771;
  --warn:#dcdcaa; --kw:#569cd6; --str:#ce9178; --num:#b5cea8; --com:#6a9955;
  --fn:#dcdcaa; --type:#4ec9b0;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { font-family:"Segoe UI",system-ui,sans-serif; font-size:13px; color:var(--fg);
  background:var(--bg); display:flex; flex-direction:column; overflow:hidden; }
.hidden { display:none !important; }
code { font-family:Consolas,"Cascadia Mono",monospace; }

/* Menu bar */
#menubar { height:32px; background:var(--bg3); border-bottom:1px solid var(--bd);
  display:flex; align-items:center; gap:2px; padding:0 8px; flex:0 0 auto; user-select:none; }
.brand { color:#4ec9b0; font-weight:600; margin-right:12px; letter-spacing:.5px; }
.menu { position:relative; padding:5px 10px; cursor:pointer; border-radius:3px; }
.menu:hover { background:var(--bg2); }
.menu .dropdown { display:none; position:absolute; top:28px; left:0; min-width:190px;
  background:var(--bg3); border:1px solid var(--bd); border-radius:4px; z-index:50;
  box-shadow:0 4px 14px rgba(0,0,0,.4); padding:4px 0; }
.menu.open .dropdown { display:block; }
.mi { padding:6px 16px; cursor:pointer; white-space:nowrap; }
.mi:hover { background:var(--accent); color:#fff; }
.sep { height:1px; background:var(--bd); margin:4px 0; }
.who { margin-left:auto; color:var(--fg2); font-size:12px; }
.who.on { color:var(--ok); }

/* Workbench */
#workbench { flex:1 1 auto; display:flex; min-height:0; }
.panel { background:var(--bg); display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
#explorer { width:260px; flex:0 0 auto; background:var(--bg2); border-right:1px solid var(--bd); }
#editor { flex:1 1 auto; }
#chat { width:420px; flex:0 0 auto; background:var(--bg2); border-left:1px solid var(--bd); }
.splitter { flex:0 0 5px; cursor:col-resize; background:transparent; }
.splitter:hover, .splitter.active { background:var(--accent); }

.panel-hd { height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; font-size:11px; letter-spacing:.8px; color:var(--fg2); text-transform:uppercase;
  border-bottom:1px solid var(--bd); }
.hd-actions { display:flex; gap:2px; }
.ic { background:none; border:none; color:var(--fg2); cursor:pointer; font-size:14px; padding:2px 5px; border-radius:3px; }
.ic:hover { background:var(--bg3); color:var(--fg); }

/* Explorer tree */
.project-name { padding:6px 12px; color:var(--ok); font-weight:600; border-bottom:1px solid var(--bd); }
.tree { flex:1 1 auto; overflow:auto; padding:4px 0; }
.node { padding:2px 8px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.node:hover { background:var(--bg3); }
.node.file.active { background:var(--accent); color:#fff; }
.node .tw { width:12px; display:inline-block; color:var(--fg2); }
.node .nm { overflow:hidden; text-overflow:ellipsis; }
.node.dir > .nm { color:#c5c5c5; }
.node.file .ic-ext { color:var(--fg2); }
.node .fsort { margin-left:auto; background:none; border:none; color:var(--fg2); cursor:pointer; font-size:11px;
  padding:0 4px; border-radius:3px; opacity:0; flex:0 0 auto; }
.node.dir:hover .fsort { opacity:.75; }
.node .fsort:hover { opacity:1; background:var(--bg2); color:var(--fg); }
/* Preview (transient) tab — single-click search result; italic; replaced by the next preview */
.tab.tab-preview .tabname { font-style:italic; }
/* Context menu (tab + Explorer right-click) */
.ctx-menu { position:fixed; z-index:1000; background:var(--bg3); border:1px solid var(--bd); border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.5); padding:4px; min-width:180px; font-size:12.5px; }
.ctx-item { padding:5px 12px; border-radius:4px; cursor:pointer; white-space:nowrap; color:var(--fg); }
.ctx-item:hover { background:var(--accent); color:#fff; }
.ctx-item.danger { color:var(--err); }
.ctx-item.danger:hover { background:var(--err); color:#fff; }
.ctx-item.disabled, .ctx-item.disabled:hover { color:var(--fg2); opacity:.5; cursor:default; background:none; }
.ctx-sep { height:1px; background:var(--bd); margin:4px 6px; }
/* Workspace search results */
.srch-results { max-height:52vh; overflow:auto; margin-top:8px; }
.srch-file { margin-bottom:10px; }
.srch-fname { font-weight:600; font-size:12.5px; padding:3px 2px; position:sticky; top:0; background:var(--bg3); }
.srch-fname .hint { font-weight:400; }
.srch-hit { display:flex; gap:8px; padding:3px 8px; font-family:Consolas,monospace; font-size:11.5px; cursor:pointer;
  border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srch-hit:hover { background:var(--accent); color:#fff; }
.srch-ln { color:var(--fg2); min-width:34px; text-align:right; flex:0 0 auto; }
.srch-hit:hover .srch-ln { color:#fff; }
.srch-hit.sel { outline:1px solid var(--accent); background:var(--bg2); }
.srch-inputrow { display:flex; align-items:center; gap:4px; }
.srch-q { flex:1; width:auto !important; margin:0 !important; }
.srch-inc { width:100% !important; margin:0 !important; }
.srch-lbl { display:block; margin:8px 0 3px; }
.srch-tog { background:var(--bg2); border:1px solid var(--bd); color:var(--fg2); border-radius:4px;
  font-size:11px; padding:5px 8px; cursor:pointer; font-family:Consolas,monospace; flex:0 0 auto; }
.srch-tog:hover { border-color:var(--accent); }
.srch-tog.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Editor */
.tabs { height:34px; flex:0 0 auto; display:flex; background:var(--bg2); border-bottom:1px solid var(--bd); overflow:hidden; }
.tab { display:flex; align-items:center; gap:6px; padding:0 10px; border-right:1px solid var(--bd);
  cursor:pointer; color:var(--fg2); white-space:nowrap; min-width:0; max-width:200px; flex:0 1 auto;
  border-top:2px solid transparent; }
.tab:hover { background:var(--bg3); }
.tab.active { background:var(--bg); color:#fff; font-weight:600; border-top:2px solid var(--accent2);
  box-shadow:inset 0 -2px 0 var(--bg); }
.tab.active .ic-ext, .tab.active .tabname { color:#fff; }
.tab .tabname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab .x { color:var(--fg2); border:none; background:none; cursor:pointer; font-size:13px; flex:0 0 auto; }
.tab .x:hover { color:var(--err); }
.tab-ov { flex:0 0 auto; background:var(--bg2); border:none; border-left:1px solid var(--bd); color:var(--fg2);
  cursor:pointer; padding:0 12px; font-size:15px; }
.tab-ov:hover { color:var(--fg); background:var(--bg3); }
#modal .m-item.active { border-color:var(--accent2); color:var(--ok); }
.editor-toolbar { height:34px; flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 10px;
  background:var(--bg3); border-bottom:1px solid var(--bd); }
.active-base { color:var(--ok); font-family:Consolas,monospace; margin-right:8px; }
.act-btn { background:var(--bg2); border:1px solid var(--bd); color:var(--fg); cursor:pointer;
  padding:4px 10px; border-radius:4px; font-size:12px; }
.act-btn:hover { background:var(--accent); border-color:var(--accent2); color:#fff; }
.act-btn.run:hover { background:#2d7d46; }
.grow { flex:1 1 auto; }

.code-host { flex:1 1 auto; overflow:auto; position:relative; }
/* Debug fix-loop: offending-line band + anchored Accept/Ignore widget + changed-line flash */
.dbg-band { position:absolute; left:0; right:0; height:19.5px; background:rgba(244,135,113,.18);
  border-left:3px solid var(--err); pointer-events:none; z-index:3; }
.dbg-widget { position:absolute; left:48px; z-index:4; background:var(--bg3);
  border:1px solid var(--accent2); border-radius:7px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.55);
  font-family:"Segoe UI",system-ui,sans-serif; width:560px; max-width:calc(100% - 64px); max-height:74vh; overflow:auto; }
/* Root-cause / Fix: clamp to ~5 lines with an inline more/less toggle (fixed, standard popup size) */
.dbg-clamp .clip { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.dbg-clamp.open .clip { display:block; -webkit-line-clamp:unset; overflow:visible; }
.dbg-more-inline { display:inline-block; margin-top:2px; color:var(--accent2); cursor:pointer; font-size:11px; }
.dbg-more-inline:hover { text-decoration:underline; }
.dbg-snip { font-family:Consolas,monospace; font-size:11.5px; color:var(--fg2); background:var(--bg);
  border-left:2px solid var(--num); border-radius:3px; padding:3px 7px; margin-bottom:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dbg-more { background:none; border:none; color:var(--accent2); cursor:pointer; font-size:11.5px;
  padding:0 0 7px; }
.dbg-more:hover { text-decoration:underline; }
.dbg-details { margin-bottom:8px; }
.dbg-details.hidden { display:none; }
.dbg-dt-h { color:var(--fg2); font-size:11px; text-transform:uppercase; letter-spacing:.4px; margin:4px 0 3px; }
.dbg-code { font-family:Consolas,monospace; font-size:11.5px; line-height:1.45; color:var(--fg);
  background:var(--bg); border:1px solid var(--bd); border-radius:4px; padding:7px 9px; margin:0 0 6px;
  white-space:pre; overflow:auto; max-height:240px; }
.dbg-hd { margin-bottom:6px; color:var(--fg); }
.dbg-nav { float:right; color:var(--fg2); font-size:11px; }
.dbg-rc { color:var(--fg2); font-size:12px; line-height:1.5; margin-bottom:6px; }
.dbg-fix { color:var(--ok); font-size:12px; margin-bottom:9px; line-height:1.45; }
.dbg-actions { display:flex; gap:6px; flex-wrap:wrap; }
.dbg-actions .act-btn { font-size:12px; padding:3px 10px; }
.line-changed { position:absolute; left:0; right:0; height:19.5px; background:rgba(78,201,176,.22);
  pointer-events:none; z-index:2; transition:opacity 1.2s ease; }
.line-changed.fade { opacity:0; }
.line-changed.all { top:0; height:100%; }   /* full-file change (e.g. format) — one flash, no per-line bands */
.find-hit { position:absolute; left:0; right:0; height:19.5px; background:rgba(229,192,123,.30);
  border-left:3px solid var(--num); pointer-events:none; z-index:3; }
/* Find / Replace bar */
.find-bar { display:flex; align-items:center; gap:5px; padding:5px 8px; background:var(--bg3);
  border-bottom:1px solid var(--bd); flex:0 0 auto; }
.find-bar.hidden { display:none; }
.find-bar input { background:var(--bg); color:var(--fg); border:1px solid var(--bd); border-radius:4px;
  padding:3px 7px; font-size:12px; font-family:Consolas,monospace; }
.find-bar .find-r { display:none; }
.find-bar.with-replace .find-r, .find-bar.with-replace #find-rep, .find-bar.with-replace #find-all { display:inline-block; }
.find-bar #find-rep, .find-bar #find-all { display:none; }
.find-bar .find-count { color:var(--fg2); font-size:11px; min-width:34px; text-align:center; }
.find-bar .ic { background:none; border:1px solid transparent; color:var(--fg2); cursor:pointer;
  padding:2px 7px; border-radius:4px; font-size:12px; }
.find-bar .ic:hover { background:var(--bg2); color:var(--fg); }
/* Word wrap (Alt+Z) — keep line numbers; gutter cells are height-matched to wrapped lines in renderEditor */
.code-host.wrap pre.code { white-space:pre-wrap; word-break:break-word; }
.code-host.wrap textarea.code-edit { white-space:pre-wrap; word-break:break-word; }
.code-host.wrap .gutter div { display:flex; align-items:flex-start; justify-content:flex-end; }
/* Menu shortcut hints + separators */
.mi { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.mi .sc { color:var(--fg2); font-size:11px; opacity:.8; }
.mi-sep { height:1px; background:var(--bd); margin:4px 0; }
.empty-editor { color:var(--fg2); padding:40px; text-align:center; line-height:1.8; }
.code-view { display:flex; font-family:Consolas,"Cascadia Mono",monospace; font-size:13px; line-height:1.5; }
.gutter { flex:0 0 auto; text-align:right; padding:8px 8px 8px 12px; color:#6b6b6b;
  background:var(--bg); border-right:1px solid var(--bd); user-select:none; }
.gutter div { height:19.5px; }
pre.code { margin:0; padding:8px 14px; white-space:pre; flex:1 1 auto; overflow:visible; tab-size:4; }
textarea.code-edit { flex:1 1 auto; width:100%; height:100%; resize:none; border:none; outline:none;
  background:var(--bg); color:var(--fg); font-family:Consolas,monospace; font-size:13px; line-height:1.5; padding:8px 14px; }

/* DB-Online toggle bar + Schema Library/Editor (DB-Offline feature) */
.chatbar { display:flex; align-items:center; gap:10px; padding:5px 8px; background:var(--bg2);
  border-top:1px solid var(--bd); font-size:12px; color:var(--fg2); flex-wrap:wrap; }
.chatbar .dbmode label { margin:0 4px; cursor:pointer; }
.linkbtn { background:none; border:none; color:var(--accent2); cursor:pointer; font-size:12px; padding:2px 4px; }
.linkbtn:hover { text-decoration:underline; }
.schema-pin { color:var(--ok); font-size:12px; }
.schema-pin.hidden { display:none; }
.sch-tbl td, .sch-tbl th { padding:4px 8px; }
.sch-sec { margin:10px 0; border:1px solid var(--bd); border-radius:6px; padding:8px; background:var(--bg); }
.sch-h { display:flex; align-items:center; gap:8px; color:var(--fg2); font-size:11px; letter-spacing:.4px;
  text-transform:uppercase; margin-bottom:6px; }
.sch-h .grow { flex:1; }
/* `.hint` carries a block margin for under-input help; zero it when used inline in a flex header so the
   label and its help text sit on the same line (JOINS/TABLES/VALIDATION headers + Library title). */
.sch-h .hint, .m-head .hint, .schema-panel-h .hint { margin:0; }
.sch-card { border:1px solid var(--bd); border-radius:6px; margin:6px 0; padding:6px 8px; background:var(--bg2); }
.sch-card-h { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.sch-card-h .sch-fqt { flex:1 1 auto; min-width:160px; }
.sch-card-h .grow { flex:0 1 12px; }
.sch-cols td, .sch-cols th { padding:2px 8px; font-family:Consolas,monospace; font-size:11.5px; }
.sch-join { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:4px 0; font-size:12px; }
.sch-join select { font-size:11.5px; }
#sch-blob, #sch-name { width:100%; box-sizing:border-box; }
#sch-paste.hidden { display:none; }
/* Sign-in (Path C) steps */
.signin-steps { margin:6px 0 10px; padding-left:20px; line-height:1.7; }
.signin-steps li { margin-bottom:10px; }
.signin-steps textarea { width:100%; margin-top:5px; min-height:54px; font-family:Consolas,monospace; font-size:12px; }
.signin-steps pre.dbg-code { margin:5px 0; }
.dl-row { display:flex; gap:8px; margin:6px 0; }
.dl-row .act-btn { text-decoration:none; }
.cmd-row { display:flex; align-items:stretch; gap:6px; margin:5px 0; }
.cmd-row pre.dbg-code { flex:1 1 auto; margin:0; white-space:pre-wrap; word-break:break-all; }
.cmd-copy { flex:0 0 auto; background:var(--bg2); border:1px solid var(--bd); color:var(--fg2);
  border-radius:5px; padding:0 10px; cursor:pointer; font-size:14px; }
.cmd-copy:hover { color:var(--fg); background:var(--bg3); border-color:var(--accent2); }
.signout { margin-left:10px; background:var(--bg3); color:var(--fg2); border:1px solid var(--bd);
  border-radius:5px; padding:2px 10px; font-size:12px; cursor:pointer; }
.signout:hover { color:var(--fg); border-color:var(--accent2); }
.signout.hidden { display:none; }
/* Render-whitespace glyphs (View ▸ Toggle Render Whitespace) */
.ws { color:#4a4a52; }
/* Syntax tokens */
.tk-kw{color:var(--kw);} .tk-str{color:var(--str);} .tk-num{color:var(--num);}
.tk-com{color:var(--com);font-style:italic;} .tk-fn{color:var(--fn);} .tk-type{color:var(--type);}

/* Chat */
.response { flex:1 1 auto; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.msg { padding:8px 11px; border-radius:6px; max-width:100%; white-space:pre-wrap; word-break:break-word; }
.msg.user { background:var(--accent); color:#fff; align-self:flex-end; }
.msg.sys { background:var(--bg3); color:var(--fg); border:1px solid var(--bd); }
.msg.sys.ok { border-left:3px solid var(--ok); }
.msg.sys.err { border-left:3px solid var(--err); }
.msg.sys.warn { border-left:3px solid var(--warn); }
.msg { position:relative; }
.copy-btn { position:absolute; top:6px; right:6px; background:var(--bg2); border:1px solid var(--bd);
  color:var(--fg2); cursor:pointer; font-size:11px; padding:1px 6px; border-radius:4px; opacity:0; transition:opacity .15s; z-index:2; }
.msg:hover .copy-btn { opacity:.85; }
.copy-btn:hover { color:var(--fg); background:var(--bg3); opacity:1; }
.msg .ttl { font-weight:600; margin-bottom:4px; }
.msg pre { background:#0d0d0d; border:1px solid var(--bd); border-radius:4px; padding:8px; overflow:auto;
  font-family:Consolas,monospace; font-size:12px; margin:6px 0 0; max-height:280px;
  white-space:pre-wrap; word-break:break-word; }
.msg .lnk { color:#4daafc; cursor:pointer; text-decoration:underline; }
.spin { display:inline-block; animation:sp 1s linear infinite; } @keyframes sp { to { transform:rotate(360deg); } }

/* Full-width prompt; Send floats in the bottom-right corner over the textarea (max input width). */
.chatbox { flex:0 0 auto; position:relative; border-top:1px solid var(--bd); padding:8px; background:var(--bg2); }
#prompt { display:block; width:100%; box-sizing:border-box; height:84px; resize:vertical; background:var(--bg);
  color:var(--fg); border:1px solid var(--bd); border-radius:6px; padding:8px 8px 8px 8px; font-family:inherit; font-size:13px; }
#prompt:focus { outline:1px solid var(--accent2); }
#send { position:absolute; right:16px; bottom:15px; background:var(--accent); color:#fff; border:none;
  border-radius:6px; padding:6px 12px; cursor:pointer; font-size:12px; opacity:.92; box-shadow:0 1px 6px rgba(0,0,0,.4); }
#send:hover { background:var(--accent2); opacity:1; } #send:disabled { opacity:.5; cursor:default; }

/* Review form (UPV) */
/* The chat bubble is white-space:pre-wrap (for plain text), which would render the newlines/indentation
   in a form's HTML template as literal blank lines — reset to normal inside forms. */
.review { border:1px solid var(--accent2); border-radius:6px; padding:12px; background:var(--bg3); white-space:normal; }
.review h4 { margin:0 0 10px; color:var(--kw); font-size:13px; }
.rev-q { margin-bottom:16px; }
.rev-q .fieldlabel { display:block; color:var(--fg2); margin-bottom:5px; font-size:11px;
  text-transform:uppercase; letter-spacing:.6px; }
.rev-q .qtext { color:var(--fg); margin-bottom:8px; line-height:1.5; }
/* text inputs / textareas only — NOT radios */
.rev-q input[type=text], .rev-q textarea, .rev-q select { width:100%; background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:4px; padding:7px; font-family:inherit; font-size:12px; margin-top:4px; }
/* aligned option rows (radio left, label + description right) */
.opt { display:flex; align-items:flex-start; gap:9px; margin:3px 0; padding:6px 8px; border-radius:5px;
  cursor:pointer; border:1px solid transparent; }
.opt:hover { background:var(--bg2); }
.opt input[type=radio] { width:15px; height:15px; flex:0 0 auto; margin:2px 0 0; accent-color:var(--accent2); cursor:pointer; }
.opt .otxt { flex:1; min-width:0; }
.opt .olbl { color:var(--fg); }
.opt .odesc { display:block; color:var(--fg2); font-size:11px; margin-top:2px; line-height:1.45; }
.rev-q.needs-input { border-left:3px solid var(--err); padding-left:10px; background:rgba(244,135,113,.06); border-radius:4px; }
.badge-missing { display:inline-block; background:var(--err); color:#1e1e1e; font-size:9px; font-weight:700;
  padding:1px 7px; border-radius:9px; margin-left:8px; letter-spacing:.5px; vertical-align:middle; }
.badge-ok { display:inline-block; background:var(--bg); color:var(--fg2); font-size:9px; padding:1px 7px;
  border-radius:9px; margin-left:8px; letter-spacing:.5px; vertical-align:middle; border:1px solid var(--bd); }
.rev-actions { display:flex; gap:8px; margin-top:12px; }

/* Kill the empty-paragraph gaps mdToHtml emits from blank markdown lines (the "just blank lines"
   the review + clarification forms were showing), and tighten the first heading to the top edge. */
.review .md > div:empty, .md > div:empty { display:none; }
.review .md > h3:first-child, .review .md > h4:first-child { margin-top:0; }
/* Clarification form ("More info needed") — compact, one clean block per item. */
.review.clarif { padding:12px 14px; }
.clarif .md { margin-bottom:8px; }
.clarif-q { margin-bottom:10px; }
.clarif-q .qtext { margin-bottom:2px; font-weight:600; }
.clarif-q .hint { margin:1px 0; line-height:1.4; }
.clarif-q .hint.ex { color:var(--fg2); font-family:Consolas,monospace; font-size:11px; }
.clarif-q textarea { margin-top:5px; }
/* rendered markdown (review context, clarifications) */
.md { color:var(--fg); font-size:12px; line-height:1.55; margin-bottom:10px; }
.md h3 { font-size:13px; color:var(--kw); margin:10px 0 6px; }
.md h4 { font-size:11px; color:var(--fg2); margin:8px 0 4px; text-transform:uppercase; letter-spacing:.5px; }
.md > div { margin:3px 0; }
.md code { background:#0d0d0d; padding:1px 5px; border-radius:3px; color:var(--str);
  font-family:Consolas,monospace; word-break:break-all; }
.md ul { margin:5px 0; padding-left:20px; }
.md ul li { margin:2px 0; }
.md table.mdt { border-collapse:collapse; width:100%; margin:8px 0; font-size:11px; }
.md table.mdt th, .md table.mdt td { border:1px solid var(--bd); padding:5px 9px; text-align:left; vertical-align:top; }
.md table.mdt th { background:var(--bg2); color:var(--fg2); white-space:nowrap; }
.md table.mdt td { color:var(--fg); }
.md table.mdt td code { word-break:break-word; white-space:normal; }

/* Modal */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center; z-index:100; }
#modal { background:var(--bg3); border:1px solid var(--bd); border-radius:8px; padding:18px;
  min-width:360px; max-width:560px; box-shadow:0 10px 40px rgba(0,0,0,.5);
  max-height:90vh; overflow:auto; resize:both; }
/* Schema Library: draggable header, toolbar+search, professional sortable table, sleek action buttons */
.m-head { display:flex; align-items:center; gap:8px; margin:-4px -4px 12px; padding:2px 4px 8px; border-bottom:1px solid var(--bd); }
.m-head .m-grip { color:var(--fg2); font-size:15px; letter-spacing:-2px; }
.m-head h3 { font-size:15px; }
.m-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.m-search { width:240px !important; margin:0 !important; padding:6px 10px !important; }
.sch-tbl { width:100%; border-collapse:collapse; }
.sch-tbl thead th { text-align:left; font-size:11px; letter-spacing:.4px; color:var(--fg2); text-transform:uppercase;
  border-bottom:1px solid var(--bd); padding:6px 8px; position:sticky; top:0; background:var(--bg3); }
.sch-tbl th[data-sort] { cursor:pointer; user-select:none; white-space:nowrap; }
.sch-tbl th[data-sort]:hover { color:var(--fg); }
.sch-tbl tbody td { padding:7px 8px; border-bottom:1px solid var(--bd); font-size:12.5px; }
.sch-tbl tbody tr:hover { background:var(--bg2); }
.sch-acts { white-space:nowrap; text-align:right; }
.iconbtn { background:var(--bg2) !important; border:1px solid var(--bd) !important; color:var(--fg) !important;
  border-radius:5px; padding:4px 9px !important; font-size:11.5px; margin-left:5px; cursor:pointer; }
.iconbtn:hover { border-color:var(--accent2) !important; color:var(--ok) !important; }
.iconbtn.danger:hover { border-color:var(--err) !important; color:var(--err) !important; }
#modal h3 { margin:0 0 12px; color:var(--fg); }
#modal input, #modal textarea { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:5px; padding:8px; font-family:inherit; font-size:13px; margin-bottom:10px; }
#modal .m-list { max-height:300px; overflow:auto; margin-bottom:10px; }
#modal .m-item { padding:8px 10px; border:1px solid var(--bd); border-radius:5px; margin-bottom:6px; cursor:pointer; }
#modal .m-item:hover { background:var(--accent); color:#fff; }
#modal .m-actions { display:flex; gap:8px; justify-content:flex-end;
  position:sticky; bottom:-18px; background:var(--bg3); padding:12px 0 4px; margin-top:8px; border-top:1px solid var(--bd); z-index:2; }
.sch-cols input[type=text], .sch-cols input:not([type]) { margin:0; padding:3px 6px; font-size:11.5px; }
.sch-cn { width:140px; } .sch-ct { width:120px; }
.sch-addcol { margin-top:4px; }
.sch-chev { padding:0 6px !important; font-size:12px; }
.sch-collapsed { padding:4px 4px 2px; }
.iconbtn.primary { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.iconbtn.on { border-color:var(--accent2) !important; color:var(--ok) !important; }
/* Schema panel (middle/editor area): diagram (HTML cards + SVG edges) + table view */
.schema-panel { display:flex; flex-direction:column; height:100%; }
.schema-panel-h { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bd); background:var(--bg2); flex:0 0 auto; white-space:nowrap; overflow-x:auto; }
.schema-panel-h .grow { flex:1; }
.stv-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.stv-example { background:var(--bg2); border:1px solid var(--bd); border-radius:6px; padding:8px 10px; margin-bottom:14px; }
.stv-ex-h { color:var(--fg2); font-size:11px; letter-spacing:.4px; text-transform:uppercase; }
.stv-ex-body { margin-top:5px; font-size:12px; color:var(--fg); white-space:pre-wrap; font-family:Consolas,monospace; }
.diag-title { white-space:nowrap; }
.schema-tableview .sch-card-h .grow { flex:1; }
.tab.tab-schema .tabname { color:var(--ok); }
.schema-panel-body { flex:1 1 auto; overflow:auto; padding:16px; }
.diag-wrap { position:relative; min-width:100%; }
.diag-svg { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
.diag-edge { fill:none; stroke:var(--accent2); stroke-width:1.6; opacity:.85; }
.diag-elabel { fill:var(--fg2); font-size:10.5px; font-family:Consolas,monospace; }
.diag-node { position:absolute; background:var(--bg2); border:1px solid var(--bd); border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.35); overflow:hidden; }
.diag-node-h { display:flex; align-items:center; gap:6px; padding:6px 9px; background:var(--bg3); border-bottom:1px solid var(--bd); font-weight:600; font-size:12.5px; }
.diag-node-h .grow { flex:1; }
.diag-badge { font-size:10px; background:var(--accent); color:#fff; border-radius:3px; padding:1px 6px; letter-spacing:.3px; }
.diag-prim { color:var(--num); }
.diag-col { display:flex; justify-content:space-between; gap:10px; padding:2px 9px; font-family:Consolas,monospace; font-size:11px; }
.diag-pk { color:var(--ok); }
.diag-type { color:var(--fg2); white-space:nowrap; }
.diag-more { padding:3px 9px; font-size:10px; border-top:1px dashed var(--bd); }
.diag-chev { padding:0 2px; font-size:11px; line-height:1; color:var(--fg2); }
.diag-chev:hover { color:var(--accent); }
.diag-toggle-foot { cursor:pointer; color:var(--accent2); }
.diag-toggle-foot:hover { color:var(--accent); text-decoration:underline; }
.diag-node { max-height:none; }
.save-status { margin-left:8px; }
.save-status.ok { color:var(--ok); }
.save-status.warn { color:var(--warn); }
.save-status.err { color:var(--err); }
.schema-tableview .sch-card { max-width:560px; }
.sch-chk { font-size:12px; margin:2px 0; line-height:1.5; }
#sch-val-toggle { display:inline-block; margin-top:6px; cursor:pointer; }
#modal button { background:var(--accent); color:#fff; border:none; border-radius:5px; padding:8px 14px; cursor:pointer; }
#modal button.sec { background:var(--bg2); border:1px solid var(--bd); color:var(--fg); }
.hint { color:var(--fg2); font-size:12px; margin:-4px 0 10px; }