:root {
  --ground: #0e1217;
  --panel: #151a21;
  --panel-2: #1b212a;
  --line: #27303b;
  --text: #e4e9f0;
  --dim: #8d98a8;
  --accent: #5aa9ff;
  --accent-ink: #06121f;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f5625a;
  --host-dark: #0b0f14;
  --host-light: #eef1f5;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; scrollbar-color: #2f3843 transparent; scrollbar-width: thin; }
html, body { height: 100%; margin: 0; }
body { background: var(--ground); color: var(--text); font: 14px/1.45 var(--sans); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 13px; color: var(--accent); }
[hidden] { display: none !important; }

/* Buttons */
button {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 12px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
button:hover { border-color: #3a4552; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.ghost { background: transparent; }
button.publish { background: var(--ok); border-color: var(--ok); color: #04130a; font-weight: 600; }
button.danger { color: var(--err); }
button.icon { padding: 0 7px; font-size: 15px; line-height: 22px; }
button.running { background: var(--ok); border-color: var(--ok); color: #04130a; font-weight: 600; }
input[type=text], input[type=search], input:not([type]), input[type=number], select, textarea {
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px;
}
input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }

/* Header */
.bar {
  height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.logo { color: var(--accent); font-size: 18px; }
.spec { font: 500 13px var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.acct { white-space: nowrap; flex-shrink: 1; min-width: 0; }
.acct select { max-width: 220px; }
.file-state { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--dim); display: flex; gap: 12px; white-space: nowrap; overflow: hidden; }
.file-state span:first-child { overflow: hidden; text-overflow: ellipsis; }
.dirty { color: var(--warn); }
.actions { display: flex; gap: 6px; }

/* Layout */
.layout { display: grid; grid-template-columns: 250px 6px minmax(300px, 1fr); height: calc(100% - 58px); }   /* studio.js sets the widths */
.pane-title {
  height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.pane-title .chk { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.chk.block { display: flex; margin-bottom: 10px; color: var(--dim); }

/* Files */
.files { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel); min-height: 0; }
.files .pane-title button { margin-left: auto; }
#fileList { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
#fileList li {
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
  display: flex; flex-direction: column; gap: 1px;
}
#fileList li:hover { background: var(--panel-2); }
#fileList li.on { background: #1d2a3a; box-shadow: inset 2px 0 0 var(--accent); }
#fileList .fn { font-family: var(--mono); overflow-wrap: anywhere; }
#fileList .meta { color: var(--dim); font-size: 13px; }
.files-foot { padding: 8px; border-top: 1px solid var(--line); }
.files-foot button { width: 100%; }

/* Editor */
.editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.cm-host { flex: 1; min-height: 0; position: relative; }
.cm-host textarea { width: 100%; height: 100%; background: var(--ground); border: 0; padding: 10px; font: 13px/1.5 var(--mono); resize: none; }
.CodeMirror { position: absolute; inset: 0; height: auto; background: var(--ground); color: #d6dde6; font: 13px/1.55 var(--mono); }
.CodeMirror-gutters { background: var(--ground); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: #7d8897; }
.CodeMirror-cursor { border-left-color: var(--accent); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: #23384f !important; }
.CodeMirror-matchingbracket { color: var(--ok) !important; text-decoration: underline; }
.CodeMirror-foldmarker { color: var(--accent); text-shadow: none; }
/* 16/10/2026: με .cm-host .CodeMirror μπροστά — αλλιώς νικούσε το λευκό θέμα του CodeMirror
   (.cm-s-default .cm-tag κ.λπ.) και πολλά χρώματα έβγαιναν σκούρα πάνω στο σκούρο φόντο */
.cm-host .CodeMirror .cm-tag { color: #7ab8ff; } .cm-host .CodeMirror .cm-attribute { color: #c9a1ff; } .cm-host .CodeMirror .cm-string { color: #9fd49a; }
.cm-host .CodeMirror .cm-keyword { color: #ff8f7a; } .cm-host .CodeMirror .cm-number { color: #f2c46d; } .cm-host .CodeMirror .cm-comment { color: #8b97a6; font-style: italic; }
.cm-host .CodeMirror .cm-def, .cm-host .CodeMirror .cm-variable, .cm-host .CodeMirror .cm-variable-2 { color: #e4e9f0; }
.cm-host .CodeMirror .cm-variable-3, .cm-host .CodeMirror .cm-type { color: #7fd8c4; }
.cm-host .CodeMirror .cm-property { color: #8ed0e0; } .cm-host .CodeMirror .cm-atom { color: #f2c46d; }
.cm-host .CodeMirror .cm-bracket { color: #aab4c0; } .cm-host .CodeMirror .cm-qualifier, .cm-host .CodeMirror .cm-builtin { color: #c9a1ff; }
.cm-host .CodeMirror .cm-operator { color: #d6dde6; } .cm-host .CodeMirror .cm-meta { color: #aab4c0; }
.cm-host .CodeMirror .cm-string-2 { color: #ffb38a; } .cm-host .CodeMirror .cm-header { color: #7ab8ff; }
.cm-host .CodeMirror .cm-link { color: #7ab8ff; } .cm-host .CodeMirror .cm-quote { color: #9fd49a; }
.cm-host .CodeMirror .cm-error { color: #ff7b72; }
.cm-error-line { background: rgba(245, 98, 90, .12); }

/* Side: preview + tester */
.side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.preview-tools { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 4px 10px; color: var(--dim); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--panel-2); color: var(--text); }
.accent { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); margin-left: auto; }

.stage {
  flex: 1 1 46%; min-height: 220px; overflow: hidden; position: relative;
  background: var(--host-dark); transition: background .2s;
}
.stage.light { background: var(--host-light); }
.frame {
  position: absolute; left: 50%; top: 50%; overflow: visible; border-radius: 10px;
  outline: 1px dashed rgba(141, 152, 168, .45); outline-offset: 3px; min-width: 80px; min-height: 60px;
}
.frame iframe { position: absolute; inset: 0; }
.frame-size {
  position: absolute; right: 4px; bottom: 3px; z-index: 2; pointer-events: none;
  font: 13px var(--mono); color: var(--dim); background: rgba(14, 18, 23, .8); padding: 0 5px; border-radius: 4px;
}
.stage.light .frame-size { background: rgba(255, 255, 255, .85); color: #5a6472; }

.tabs { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; flex-shrink: 0; }
.tabs button { border: 0; border-radius: 0; background: transparent; padding: 9px 13px; color: var(--dim); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; line-height: 17px; text-align: center; margin-left: 4px; color: var(--text); }
.badge.err { background: var(--err); border-color: var(--err); color: #1a0504; }
.badge.warn { background: var(--warn); border-color: var(--warn); color: #1a1204; }
.tab-body { flex: 1 1 54%; min-height: 180px; overflow-y: auto; padding: 12px; background: var(--panel); }
.hint { color: var(--dim); font-size: 13px; margin: 0 0 10px; }

/* Slots */
.sim-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--dim); flex-wrap: wrap; }
.slot { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.slot:last-child { border-bottom: 0; }
.slot-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.slot-id { font: 500 13px var(--mono); }
.slot-label { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir { font: 600 13px var(--mono); padding: 0 5px; border-radius: 4px; letter-spacing: .02em; }
.dir-in { color: #7ab8ff; background: rgba(90, 169, 255, .12); }
.dir-out { color: #f2a65a; background: rgba(242, 166, 90, .12); }
.dir-inout { color: #c9a1ff; background: rgba(201, 161, 255, .12); }
.slot-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.slot-ctrl input[type=range] { flex: 1; accent-color: var(--accent); }
.slot-ctrl input[type=number] { width: 90px; font-variant-numeric: tabular-nums; }
.slot-ctrl input[type=text], .slot-ctrl select, .slot-ctrl textarea { flex: 1; }
.slot-ctrl textarea { font-family: var(--mono); min-height: 54px; }
.unit { color: var(--dim); font-size: 13px; min-width: 34px; }
.slot-auto { font-size: 13px; color: var(--dim); }
.slot-note { grid-column: 1 / -1; font-size: 13px; color: var(--dim); }
.req { color: var(--warn); }
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: relative; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 11px; background: var(--line); transition: background .15s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.form-grid label, .cfg label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.cfg { display: grid; gap: 12px; }
.cfg .row { display: flex; align-items: center; gap: 10px; }
.cfg code { color: var(--dim); }

/* Logs */
.log { font: 13px/1.5 var(--mono); display: flex; flex-direction: column; }
.log .ln { display: grid; grid-template-columns: 74px 64px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(39, 48, 59, .6); word-break: break-word; }
.log .t { color: #56616f; }
.log .k { font-weight: 500; }
.k-log { color: var(--dim); } .k-write { color: #f2a65a; } .k-deny, .k-error { color: var(--err); }
.k-ready, .k-ok { color: var(--ok); } .k-msg { color: #56616f; } .k-hist { color: #c9a1ff; } .k-warn { color: var(--warn); }
.empty { color: var(--dim); font-size: 13px; padding: 6px 0; }

/* Checks */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(39, 48, 59, .6); }
.checks .i { font-weight: 700; text-align: center; }
.checks .ok .i { color: var(--ok); } .checks .warn .i { color: var(--warn); } .checks .err .i { color: var(--err); }
.checks small { display: block; color: var(--dim); font-size: 13px; }

/* Dialog */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 22px; width: min(440px, 92vw); }
dialog::backdrop { background: rgba(4, 7, 10, .6); }
dialog h2 { margin: 0 0 14px; font-size: 17px; }
dialog form > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dim); }
dialog input { font-family: var(--mono); }
dialog #newName { font-family: var(--sans); }   /* a widget name, not a file name */
dialog textarea, dialog form > label > input { width: 100%; }
dialog textarea { font-family: var(--sans); resize: vertical; }
dialog .hint { margin: 0 0 12px; }
dialog form > label + label, dialog .form-grid + label { margin-top: 10px; }
fieldset { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
legend { font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.choice:has(input:checked) { border-color: var(--accent); background: #16222f; }
.choice b { display: block; font-size: 14px; }
.choice span { color: var(--dim); }
.choice b { color: var(--text); }
dialog form > label.choice { flex-direction: row; color: inherit; }   /* not the column layout of the form's other labels */
dialog form > label.choice > input { width: auto; flex-shrink: 0; }
.choice-small { margin-top: 14px; border-style: dashed; }
.choice-small b { font-size: 13px; }
.tpl-design { display: flex; flex-direction: column; gap: 4px; margin: -2px 0 6px 30px; font-size: 13px; color: var(--dim); }
.tpl-design select { width: 100%; }
menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 20px 0 0; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
.toast.err { border-color: var(--err); color: var(--err); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.brand-logo { height: 44px; width: auto; display: block; }
.brand-name { font: 600 22px/1 "Space Grotesk", "Inter", "Segoe UI", sans-serif; letter-spacing: .02em; color: #c6bbae; }

/* Left bar: Load Virtuino Widget · My templates (category filter, list) · Community / disk */
.side-btns { display: flex; flex-direction: column; gap: 6px; padding: 10px; flex-shrink: 0; }
.side-btns.bottom { border-top: 1px solid var(--line); }
.side-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding: 8px 10px; font-size: 13px; }
.side-btn.main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; }
.files .pane-title { border-top: 1px solid var(--line); }
.cat-row { padding: 8px 8px 0; }
.cat-row select { width: 100%; }
.files #fileList { flex: 1; min-height: 80px; }
#fileList .meta { overflow-wrap: anywhere; }
#fileList li.empty { cursor: default; color: var(--dim); }

/* Template info */
.info-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 6px 0 18px; font-size: 14px; }
.info-grid dt { color: var(--dim); }
.info-grid dd { margin: 0; overflow-wrap: anywhere; }
.info-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.info-actions .spacer { flex: 1; }
#dlgInfo form { position: relative; }
.info-close { position: absolute; top: -8px; right: -8px; }
#dlgInfo h2 { padding-right: 34px; }

/* Save ▾ menu */
.menu-wrap { position: relative; display: flex; }
.menu-wrap #btnSave { border-radius: 6px 0 0 6px; }
.menu-wrap .caret { border-radius: 0 6px 6px 0; padding: 5px 8px; border-left: 1px solid rgba(6, 18, 31, .35); }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.menu button { text-align: left; background: transparent; border: 0; padding: 7px 10px; font-size: 13px; }
.menu button:hover, .menu button:focus-visible { background: var(--panel-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

/* Community Templates dialog */
dialog.wide { width: min(640px, 94vw); }
dialog.wide input[type=search] { width: 100%; font-family: var(--sans); padding: 7px 10px; }
.com-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.com-list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.com-list li:hover, .com-list li:focus-visible { border-color: var(--accent); outline: none; }
.com-list .fn { font-weight: 600; font-size: 14px; }
.com-list .meta, .com-list .desc { color: var(--dim); font-size: 13px; }
.com-list .empty { cursor: default; color: var(--dim); border-style: dashed; }

/* Lighter template lists, bigger buttons (2/10 late) */
#fileList li { background: #222a35; border: 1px solid #2f3a48; margin-bottom: 6px; padding: 9px 11px; }
#fileList li:hover { background: #2a3442; border-color: #3d4b5d; }
#fileList li.on { background: #263a52; border-color: var(--accent); box-shadow: none; }
#fileList .fn { color: #f1f5fa; font-family: var(--sans); font-weight: 600; font-size: 14px; }
#fileList .meta { color: #a9b4c3; }
/* My templates: the picture on the left, name and details on the right */
#fileList li.with-thumb { flex-direction: row; gap: 10px; align-items: center; }
.file-thumb { flex: 0 0 56px; height: 44px; border-radius: 6px; overflow: hidden; background: #0b0f14; border: 1px solid #2f3a48; }
.file-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.file-text { display: flex; flex-direction: column; min-width: 0; }
.com-list li { background: #222a35; border-color: #2f3a48; }
.com-list .desc, .com-list .meta { color: #a9b4c3; }
.side-btn { padding: 10px 12px; font-size: 14px; }
.side-btn.main { font-size: 15px; padding: 11px 12px; }
.info-actions button, dialog menu button { padding: 8px 16px; font-size: 14px; }
.bar .actions button { padding: 7px 16px; font-size: 14px; }

/* Template cards with a picture on the left (thumbs.js) */
.com-list li.has-preview { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.tpl-preview { width: 120px; height: 90px; border-radius: 8px; overflow: hidden; background: #0b0f14; border: 1px solid #2f3a48; position: relative; }
.tpl-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Draggable column borders */
.split { cursor: col-resize; background: var(--line); position: relative; z-index: 5; }
.split:hover, .split.drag { background: var(--accent); }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }
body.resizing iframe { pointer-events: none; }

/* Simulation toggle */
.sim-toggle { text-transform: none; letter-spacing: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.sim-toggle svg { flex-shrink: 0; }
.sim-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Edit mode: one dashboard widget, no left bar */
body.edit-mode .files, body.edit-mode #splitLeft, body.edit-mode #btnNew, body.edit-mode .menu-wrap .caret { display: none !important; }
body.edit-mode .menu-wrap #btnSave { border-radius: 6px; }
body.edit-mode .bar .acct, body.edit-mode .bar > a { display: none !important; }

/* AI Assistant (ai.js): a column on the right; the Studio makes room for it */
.ai-btn { border-color: #6e56cf; color: #d9ccff; }
.ai-btn:hover, .ai-btn.on { background: #2a2346; border-color: #8b74e8; }
body.ai-open .layout { margin-right: min(400px, 100vw); }
.ai-panel { position: fixed; top: 58px; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 40;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.ai-head > b { flex: 1; color: #d9ccff; }
.ai-head button { font-size: 13px; }
.ai-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.ai-me { align-self: flex-end; background: #263a52; }
.ai-ai { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); }
.ai-note { align-self: center; color: var(--dim); font-size: 13px; background: none; }
.ai-err { align-self: flex-start; background: #3a1d1d; border: 1px solid #6b2b2b; color: #ffd0cc; }
.ai-status { margin-top: 6px; color: var(--dim); font-size: 13px; white-space: normal; }
.ai-status:empty { display: none; }
.ai-undo { margin-left: 8px; padding: 2px 10px; font-size: 13px; }
.ai-intro { color: var(--text); font-size: 14px; line-height: 1.5; }
.ai-intro p { margin: 0 0 10px; }
.ai-dim { color: var(--dim); font-size: 13px; }
.ai-example { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 8px 10px; font-size: 13px; white-space: normal; }
.ai-form { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-form textarea { width: 100%; resize: vertical; min-height: 64px; font-family: var(--sans); font-size: 14px; }
.ai-form-row { display: flex; align-items: center; gap: 8px; }
.ai-hint { flex: 1; color: var(--dim); font-size: 13px; }
/* the robot face (the console's AI Assistant) */
.ai-btn { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; }
.ai-btn img { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ai-face { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.ai-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ai-title b { color: #d9ccff; font-size: 15px; }
.ai-title span { color: var(--dim); font-size: 13px; }

/* Simulation: problems bar over the preview (only when there are problems) and the Settings section */
.check-bar { margin: 8px 12px 0; border-radius: 8px; border: 1px solid; font-size: 14px; }
.check-bar.err { border-color: #6b2b2b; background: #2a1618; }
.check-bar.warn { border-color: #5e4a1e; background: #2a2414; }
.check-bar > button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; font-weight: 600; color: inherit; cursor: pointer; display: flex; justify-content: space-between; }
.check-bar.err > button { color: #ffb4ad; }
.check-bar.warn > button { color: #f0cf85; }
.check-bar .checks { margin: 0; padding: 0 12px 10px; }
.panel-t { margin: 18px 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* ── One button style for the page (3/10, user) ──
   Every main button: 40 px high, 8 px corners, 14 px semibold, dark with a border.
   One blue button per area for its main action: Save (top bar), Load Virtuino Widget (left bar).
   Simulation and AI Assistant, when open: blue border and text, not a fill. */
.bar .actions button, .side-btn {
  min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); text-transform: none; letter-spacing: 0;
}
.side-btn, .side-btn.main { display: flex; width: 100%; padding: 8px 12px; font-size: 14px; }
.bar .actions button:hover, .side-btn:hover { background: #222a35; border-color: #3d4b5d; }
.bar .actions button.primary, .side-btn.main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bar .actions button.primary:hover, .side-btn.main:hover { background: #7bbcff; border-color: #7bbcff; }
.bar .actions .menu-wrap #btnSave { border-radius: 8px 0 0 8px; }
.bar .actions .menu-wrap .caret { border-radius: 0 8px 8px 0; padding: 0 10px; border-left: 1px solid rgba(6, 18, 31, .35); }
.bar .actions .sim-toggle[aria-pressed="true"], .bar .actions .ai-btn.on { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.bar .actions .ai-btn { padding-left: 6px; }
.bar .actions .ai-btn img { width: 28px; height: 28px; }

/* The widget's name in the top bar: clearly visible (3/10) — it is the name, not a file name any more */
.file-state { align-items: center; padding-left: 14px; border-left: 1px solid var(--line); }
.file-state #fileName { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: .2px; }
.file-state .dirty { font-family: var(--sans); font-size: 13px; font-weight: 600; }

/* Load Widget from Community and Simulation: blue like Load Virtuino Widget (3/10, user) */
.side-btn#btnCommunity, .bar .actions .sim-toggle { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.side-btn#btnCommunity:hover, .bar .actions .sim-toggle:hover { background: #7bbcff; border-color: #7bbcff; }
.bar .actions .sim-toggle[aria-pressed="true"] { background: #7bbcff; border-color: #cfe6ff; color: var(--accent-ink); box-shadow: 0 0 0 2px rgba(90,169,255,.35); }

/* Edit design (inside a dashboard): Save stands alone (no ▾), so it gets all four round corners; the buttons
   never shrink — the name gives way instead */
body.edit-mode .bar .actions .menu-wrap #btnSave { border-radius: 8px; }
.bar .actions { flex-shrink: 0; }
.bar .brand { flex-shrink: 0; }