@keyframes bootSlide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#fafafa;font-family:system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none}
/* Canvas fills ENTIRE viewport — everything else floats on top */
#canvasSurface{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;cursor:crosshair;background:#fff;touch-action:none;display:block;outline:none}
/* All UI floats above canvas */
.panel{position:fixed;z-index:10;background:rgba(255,255,255,.97);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06)}
/* Left: tools */
#tools{left:14px;top:46%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;padding:6px 5px;max-height:calc(100vh - 260px);overflow-y:auto;scrollbar-width:none}
#tools::-webkit-scrollbar{display:none}
#tools button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:9px;background:transparent;cursor:pointer;transition:background .12s,color .12s;color:#495057;outline:none}
#tools button:hover{background:rgba(0,0,0,.05)}
#tools button.on{background:rgba(15,118,110,.1);color:#0f766e;box-shadow:inset 0 0 0 1.5px #0f766e}
#tools button:active{transform:scale(.94)}
#tools .sep{height:1px;background:rgba(0,0,0,.06);margin:3px 6px}
/* Top-right: actions */
#acts{right:14px;top:14px;display:flex;gap:3px;padding:5px 6px}
#acts button{padding:5px 11px;border:none;border-radius:7px;background:rgba(0,0,0,.03);color:#495057;font:600 11.5px system-ui;cursor:pointer;transition:all .12s;outline:none}
#acts button:hover{background:rgba(0,0,0,.07);transform:translateY(-1px)}
#acts button:active{transform:none}
#acts .tf{color:#0f766e;background:rgba(15,118,110,.08)}
/* Top-left: brand */
#brand{left:14px;top:14px;display:flex;align-items:center;gap:7px;padding:6px 12px}
#brand .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#0f766e,#14b8a6);display:flex;align-items:center;justify-content:center}
#brand span{font:700 13px system-ui;color:#343a40;letter-spacing:-.3px}
/* Vänsterstack: färger + insights + history i EN flex-kolumn —
   aldrig överlapp, krymper med viewporten (inre scroll). */
#leftStack{position:fixed;left:14px;bottom:50px;width:232px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 130px);z-index:10}
#leftStack > *{flex:0 1 auto;min-height:0;position:static;width:100%}
#leftStack details[open] .ins-body,#leftStack details[open] .his-body{max-height:18vh}
#colors{display:flex;gap:3px;padding:6px}
#colors button{width:20px;height:20px;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:pointer;transition:transform .12s}
#colors button:hover{transform:scale(1.15)}
#colors button.on{box-shadow:0 0 0 2px #0f766e}
/* Bottom-left: status */
#status{left:14px;bottom:14px;padding:5px 12px;font:600 11.5px system-ui;color:#0f766e;border-radius:8px}
/* Bottom-right: hint */
#hint{top:14px;left:50%;transform:translateX(-50%);padding:4px 10px;font:400 10.5px system-ui;color:#868e96;border-radius:7px;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Left side panel: the service library (built by editor/library.rs) */
#kit{left:64px;top:62px;width:268px;max-height:min(58vh,calc(100vh - 300px));display:flex;flex-direction:column;z-index:12}
#kit:not([open]){width:auto}
#kit>summary{padding:9px 12px;font:700 12px system-ui;color:#0f766e;cursor:pointer;display:flex;align-items:center;gap:6px;list-style:none;outline:none}
#kit>summary::-webkit-details-marker{display:none}
#kit[open]>summary{border-bottom:1px solid rgba(0,0,0,.05)}
#kit .lib-total{font:600 10px system-ui;opacity:.55}
#kit .lib-maxbtn{margin-left:auto;border:none;background:transparent;color:inherit;font:600 13px system-ui;cursor:pointer;opacity:.6;padding:0 2px}
#kit .lib-maxbtn:hover{opacity:1}
#kit:not([open]) .lib-maxbtn{display:none}
#kit .lib-body{display:flex;flex-direction:column;min-height:0;padding:0 8px 8px}
#kit .lib-search{width:100%;margin:6px 0;padding:7px 10px;border:1.5px solid rgba(0,0,0,.08);border-radius:8px;font:400 12.5px system-ui;outline:none;background:transparent;color:inherit}
#kit .lib-search:focus{border-color:#0f766e}
#kit .lib-tree{overflow-y:auto;min-height:0;max-height:calc(min(58vh,calc(100vh - 300px)) - 90px)}
#kit.lib-max{top:62px;bottom:14px;width:min(720px,calc(100vw - 340px));max-height:none;z-index:15}
#kit.lib-max .lib-tree{max-height:calc(100vh - 170px)}
#kit.lib-max .lib-items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lib-node>summary{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font:600 11.5px system-ui;color:#343a40;cursor:pointer;list-style:none}
.lib-node>summary::-webkit-details-marker{display:none}
.lib-node>summary::before{content:"▸";font-size:9px;opacity:.55;transition:transform .12s}
.lib-node[open]>summary::before{transform:rotate(90deg)}
.lib-node>summary:hover{background:rgba(15,118,110,.06)}
.lib-node>summary small{margin-left:auto;font:500 10px system-ui;opacity:.45}
.lib-d0>summary{font:700 11px system-ui;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}
.lib-node .lib-node{margin-left:10px}
.lib-items{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px 0 6px 12px}
.lib-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid rgba(0,0,0,.06);border-radius:7px;background:rgba(0,0,0,.02);color:#495057;font:500 11px system-ui;cursor:grab;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item:hover,.lib-item:focus-visible{border-color:rgba(15,118,110,.35);color:#0f766e;background:rgba(15,118,110,.05);outline:none}
.lib-item:active{cursor:grabbing}
.lib-chip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;flex:none}
.lib-chip svg{width:12px;height:12px}
.lib-empty{padding:14px 6px;text-align:center;font:400 12px system-ui;opacity:.6}
/* Layers: right side, top-z first */
#layers{right:14px;top:64px;max-height:46vh;min-width:210px}
#layers summary{padding:8px 14px;font:700 12px system-ui;color:#0f766e;cursor:pointer;list-style:none;outline:none}
#layers summary::-webkit-details-marker{display:none}
#layers[open] summary{border-bottom:1px solid rgba(0,0,0,.05)}
.layer-body{padding:6px 8px 8px}
.layer-rows{max-height:26vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.layer-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:7px;cursor:pointer;font:500 11.5px system-ui;color:#495057}
.layer-row:hover{background:rgba(0,0,0,.04)}
.layer-row.on{background:rgba(15,118,110,.1);color:#0f766e;box-shadow:inset 0 0 0 1.5px rgba(15,118,110,.35)}
.layer-ic{width:16px;text-align:center;opacity:.7}
.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-empty{padding:10px;font:400 11px system-ui;color:#adb5bd;text-align:center}
.layer-ladder{display:flex;gap:3px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(0,0,0,.06)}
.layer-ladder button{flex:1;padding:5px 0;border:none;border-radius:7px;background:rgba(0,0,0,.03);color:#495057;font:600 13px system-ui;cursor:pointer;transition:all .1s}
.layer-ladder button:hover{background:rgba(15,118,110,.08);color:#0f766e}
/* Debug */
#debug{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:20;padding:6px 14px;background:#fff3bf;color:#e8590c;font:600 12px system-ui;border-radius:8px;display:none;pointer-events:none}
/* Loading overlay */
#loader{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#fff;transition:opacity .3s;font:600 14px system-ui;color:#868e96}
#fps{position:fixed;bottom:40px;right:14px;z-index:30;padding:5px 10px;background:#343a40;color:#fff;font:600 10.5px ui-monospace,monospace;border-radius:8px;white-space:pre;pointer-events:none}
#loader.done{opacity:0;pointer-events:none}
#loader.hidden{display:none}

/* Insights: left side, under colors */
#insights{min-width:0;width:100%}
#insights summary{padding:8px 14px;font:700 12px system-ui;color:#0f766e;cursor:pointer;list-style:none;outline:none}
#insights summary::-webkit-details-marker{display:none}
#insights[open] summary{border-bottom:1px solid rgba(0,0,0,.05)}
.ins-body{padding:6px 8px 8px}
.ins-rows{max-height:22vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.ins-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;font:500 11px system-ui;color:#495057}
.ins-row:hover{background:rgba(0,0,0,.04)}
.ins-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ins-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-empty{padding:8px;font:400 10.5px system-ui;color:#adb5bd;text-align:center}
.ins-total{margin-top:6px;padding:6px 8px;border-radius:7px;background:rgba(47,158,68,.08);color:#2f9e44;font:700 12px ui-monospace,monospace}
.ins-acts{display:flex;gap:3px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(0,0,0,.06)}
.ins-acts button{flex:1;padding:5px 0;border:none;border-radius:7px;background:rgba(0,0,0,.03);color:#495057;font:600 11px system-ui;cursor:pointer}
.ins-acts button:hover{background:rgba(15,118,110,.08);color:#0f766e}

.ins-prompt{display:flex;gap:4px;margin-bottom:6px}
.ins-prompt input{flex:1;padding:6px 10px;border:1.5px solid rgba(0,0,0,.08);border-radius:8px;font:400 11.5px system-ui;outline:none}
.ins-prompt input:focus{border-color:#0f766e}
.ins-prompt button{width:30px;border:none;border-radius:8px;background:rgba(15,118,110,.1);color:#0f766e;font:700 13px system-ui;cursor:pointer}
.ins-prompt button:hover{background:rgba(15,118,110,.18)}

.ins-costhead{margin-top:6px;padding:4px 2px 2px;font:700 10px system-ui;color:#868e96;text-transform:uppercase;letter-spacing:.06em}
.ins-cost{min-width:44px;font:700 11px ui-monospace,monospace;color:#2f9e44}

/* ── Mörkt tema: UI-paneler + dukyta ── */
[data-theme="dark"] body{background:#0e0f15}
[data-theme="dark"] #canvasSurface{background:#14161f}
[data-theme="dark"] .panel{background:rgba(26,28,38,.92);border-color:rgba(255,255,255,.07);box-shadow:0 4px 24px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5)}
[data-theme="dark"] #tools button{color:#adb5bd}
[data-theme="dark"] #tools button:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] #tools button.on{background:rgba(20,184,166,.14);color:#2dd4bf;box-shadow:inset 0 0 0 1.5px #2dd4bf}
[data-theme="dark"] #acts button,[data-theme="dark"] #hint,[data-theme="dark"] #status{color:#ced4da}
[data-theme="dark"] #acts button{background:rgba(255,255,255,.05)}
[data-theme="dark"] #acts button:hover{background:rgba(255,255,255,.09)}
[data-theme="dark"] #kit>summary,[data-theme="dark"] .lib-d0>summary,[data-theme="dark"] #layers summary,[data-theme="dark"] #insights summary{color:#2dd4bf}
[data-theme="dark"] #kit .lib-search,[data-theme="dark"] .ins-prompt input,[data-theme="dark"] #docName,[data-theme="dark"] #docList{background:#1b1e2a;border-color:rgba(255,255,255,.1);color:#e9ecef}
[data-theme="dark"] .lib-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);color:#ced4da}
[data-theme="dark"] .lib-node>summary{color:#ced4da}
[data-theme="dark"] .layer-row,[data-theme="dark"] .ins-row{color:#ced4da}
[data-theme="dark"] .layer-row:hover,[data-theme="dark"] .ins-row:hover{background:rgba(255,255,255,.05)}
[data-theme="dark"] .layer-row.on{background:rgba(45,212,191,.12);color:#2dd4bf;box-shadow:inset 0 0 0 1.5px rgba(45,212,191,.4)}
[data-theme="dark"] .layer-ladder button,[data-theme="dark"] .ins-acts button,[data-theme="dark"] .set-wide{background:rgba(255,255,255,.05);color:#ced4da}
[data-theme="dark"] .layer-ladder button:hover,[data-theme="dark"] .ins-acts button:hover,[data-theme="dark"] .set-wide:hover{background:rgba(45,212,191,.12);color:#2dd4bf}
[data-theme="dark"] #zoomOut,[data-theme="dark"] #zoomIn{background:rgba(255,255,255,.07);color:#ced4da}
[data-theme="dark"] #loader{background:#0e0f15;color:#868e96}
[data-theme="dark"] .ins-total{background:rgba(47,158,68,.14);color:#51cf66}
[data-theme="dark"] .ins-empty,[data-theme="dark"] .layer-empty{color:#6c757d}

/* ⌘K-paletten */
#palette{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(0,0,0,.25)}
#palette.open{display:flex}
.pal-box{width:min(520px,92vw);background:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.25);overflow:hidden;border:1px solid rgba(0,0,0,.08)}
#palInput{width:100%;padding:13px 16px;border:none;outline:none;font:500 14px system-ui;border-bottom:1px solid rgba(0,0,0,.07)}
#palList{max-height:46vh;overflow-y:auto;padding:5px}
.pal-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;cursor:pointer;font:500 12.5px system-ui;color:#495057}
.pal-row .k{font:600 10px ui-monospace,monospace;color:#868e96;background:rgba(0,0,0,.05);padding:2px 7px;border-radius:5px}
.pal-row.sel,.pal-row:hover{background:rgba(15,118,110,.09);color:#0f766e}
[data-theme="dark"] .pal-box{background:#1b1e2a;border-color:rgba(255,255,255,.09)}
[data-theme="dark"] #palInput{color:#e9ecef;border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pal-row{color:#ced4da}
[data-theme="dark"] .pal-row .k{background:rgba(255,255,255,.07);color:#868e96}
[data-theme="dark"] .pal-row.sel,[data-theme="dark"] .pal-row:hover{background:rgba(45,212,191,.12);color:#2dd4bf}

/* Historik: vänster under insights */
#history{min-width:0;width:100%}
#history summary{padding:8px 14px;font:700 12px system-ui;color:#0f766e;cursor:pointer;list-style:none;outline:none}
#history summary::-webkit-details-marker{display:none}
#history[open] summary{border-bottom:1px solid rgba(0,0,0,.05)}
.his-body{padding:6px 8px 8px;max-height:24vh;overflow-y:auto}
.his-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;font:500 11px system-ui;color:#495057}
.his-row:hover{background:rgba(0,0,0,.04)}
.his-row.cur{background:rgba(15,118,110,.1);color:#0f766e;font-weight:700}
.his-row.future{color:#adb5bd}
.his-num{font:600 10px ui-monospace,monospace;color:#868e96;min-width:20px}
[data-theme="dark"] .his-row{color:#ced4da}
[data-theme="dark"] .his-row.cur{background:rgba(45,212,191,.12);color:#2dd4bf}
[data-theme="dark"] .his-row:hover{background:rgba(255,255,255,.05)}

/* ── Inställningspanelen (⚙) — återinstallerad: blocket föll bort
   vid style-externaliseringen, panelen låg som tom ruta synlig ── */
#settings{position:fixed;left:14px;top:56px;display:none;flex-direction:column;gap:0;padding:0;
  min-width:280px;max-height:calc(100vh - 140px);overflow-y:auto;border-radius:16px;
  animation:settingsDrop .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes settingsDrop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#settings.open{display:flex}
#settings.open{display:flex}
.set-row{display:flex;align-items:center;gap:6px;font:600 11.5px system-ui;color:#495057}
.set-label{width:34px;color:#868e96;font-weight:500}
#docList{flex:1;max-width:120px;padding:4px 6px;border:1.5px solid rgba(0,0,0,.08);border-radius:6px;font:500 11px system-ui;background:#fff;color:#495057;outline:none}
#docName{flex:1;min-width:70px;padding:4px 8px;border:1.5px solid rgba(0,0,0,.08);border-radius:6px;font:500 11px system-ui;outline:none}
#docName:focus,#docList:focus{border-color:#0f766e}
#zoomOut,#zoomIn{width:24px;height:24px;border:none;border-radius:6px;background:rgba(0,0,0,.05);cursor:pointer;font:700 14px system-ui;color:#495057}
#zoomOut:hover,#zoomIn:hover{background:rgba(15,118,110,.1);color:#0f766e}
#zoomPct{min-width:38px;text-align:center;font:600 11.5px ui-monospace,monospace}
.set-wide,.set-danger{padding:4px 9px;border:none;border-radius:6px;background:rgba(0,0,0,.05);cursor:pointer;font:600 11px system-ui;color:#495057}
.set-wide:hover{background:rgba(15,118,110,.1);color:#0f766e}
.set-danger{color:#e03131}
.set-danger:hover{background:rgba(224,49,49,.1)}
#roomName{flex:1;font:500 11px ui-monospace,monospace;color:#0f766e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gear{color:#0f766e}
[data-theme="dark"] #docList,[data-theme="dark"] #docName{background:#1b1e2a;color:#e9ecef;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .set-row{color:#ced4da}
[data-theme="dark"] #zoomOut,[data-theme="dark"] #zoomIn,[data-theme="dark"] .set-wide{background:rgba(255,255,255,.06);color:#ced4da}
[data-theme="dark"] #roomName{color:#2dd4bf}


/* Högerklicksmeny */
#ctxmenu{position:fixed;display:none;flex-direction:column;min-width:200px;padding:6px;z-index:70;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08);
  max-height:80vh;overflow-y:auto}
#ctxmenu.open{display:flex!important}
.ctx-row{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:7px;cursor:pointer;font:500 12px system-ui;color:#495057;white-space:nowrap}
.ctx-row:hover{background:rgba(15,118,110,.09);color:#0f766e}
.ctx-sep{height:1px;background:rgba(0,0,0,.06);margin:3px 8px}
.ctx-k{margin-left:auto;font:600 10px ui-monospace,monospace;color:#868e96;background:rgba(0,0,0,.04);padding:1px 5px;border-radius:4px}
.ctx-danger{color:#e03131}
.ctx-danger:hover{background:rgba(224,49,49,.08);color:#e03131}
[data-theme="dark"] #ctxmenu{background:#1b1e2a;border-color:rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(0,0,0,.5)}
[data-theme="dark"] .ctx-row{color:#ced4da}
[data-theme="dark"] .ctx-row:hover{background:rgba(45,212,191,.12);color:#2dd4bf}
[data-theme="dark"] .ctx-sep{background:rgba(255,255,255,.08)}

/* Markerings-info-bar */
#selinfo{left:100px;bottom:14px;padding:4px 10px;font:500 10.5px ui-monospace,monospace;color:#495057;border-radius:7px;display:none}
#selinfo.on{display:block}
#selinfo b{color:#0f766e;font-weight:600}
[data-theme="dark"] #selinfo{color:#ced4da;background:rgba(26,28,38,.92)}
[data-theme="dark"] #selinfo b{color:#2dd4bf}

/* AI Assist i Insights */
.ins-ai{display:flex;gap:4px;margin-bottom:6px;align-items:center}
.ins-ai input{flex:1;padding:6px 10px;border:1.5px solid rgba(155,89,182,.25);border-radius:8px;font:400 11.5px system-ui;outline:none}
.ins-ai input:focus{border-color:#9b59b6}
.ins-ai button{width:30px;height:28px;border:none;border-radius:8px;background:rgba(155,89,182,.12);color:#8e44ad;font:700 13px system-ui;cursor:pointer}
.ins-ai button:hover{background:rgba(155,89,182,.2)}
#aiStatus{flex-basis:100%;font:500 10.5px system-ui;color:#8e44ad;min-height:14px;padding:2px 0}
[data-theme="dark"] .ins-ai input{background:#1b1e2a;border-color:rgba(155,89,182,.3);color:#e9ecef}
[data-theme="dark"] .ins-ai button{background:rgba(155,89,182,.15);color:#bb8fce}
[data-theme="dark"] #aiStatus{color:#bb8fce}

/* Auto-förslag dropdown */
.auto-dd{position:fixed;z-index:999;top:100%;left:0;right:0;z-index:40;background:#fff;
  border:1px solid rgba(0,0,0,.08);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);
  max-height:220px;overflow-y:auto;padding:4px;margin-top:4px}
.auto-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:7px;
  cursor:pointer;font:500 12px system-ui;color:#495057;white-space:nowrap}
.auto-item:hover,.auto-item.sel{background:rgba(15,118,110,.08);color:#0f766e}
.auto-item small{color:#868e96;font-size:10px;overflow:hidden;text-overflow:ellipsis}
.auto-type{margin-left:auto;font:600 9px system-ui;color:#adb5bd;background:rgba(0,0,0,.04);
  padding:2px 6px;border-radius:4px;flex:none}
[data-theme="dark"] .auto-dd{background:#1b1e2a;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .auto-item{color:#ced4da}
[data-theme="dark"] .auto-item:hover,[data-theme="dark"] .auto-item.sel{background:rgba(45,212,191,.1);color:#2dd4bf}
[data-theme="dark"] .auto-type{background:rgba(255,255,255,.06);color:#6c757d}

/* Minimap — dokumentöversikt + vy-rektangel */
#minimap{position:fixed;right:12px;bottom:12px;width:180px;height:110px;
  border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(255,255,255,.92);
  box-shadow:0 2px 12px rgba(0,0,0,.10);z-index:5;cursor:crosshair}
[data-theme="dark"] #minimap{background:rgba(27,30,42,.94);border-color:rgba(255,255,255,.12)}

/* Kit-molnflikar */
.kit-tabs{display:flex;gap:4px;margin-bottom:6px}
.kit-tabs button{flex:1;padding:4px 8px;border:1px solid rgba(0,0,0,.10);border-radius:6px;background:transparent;font:600 10.5px system-ui;color:#495057;cursor:pointer}
.kit-tabs button.on{background:#0f766e;color:#fff;border-color:#0f766e}
[data-theme="dark"] .kit-tabs button{border-color:rgba(255,255,255,.12);color:#ced4da}
[data-theme="dark"] .kit-tabs button.on{background:#2dd4bf;color:#132a29}

/* Kommentarsektion i Insights */
.ins-cmts{margin-bottom:6px;border-top:1px solid rgba(0,0,0,.08);padding-top:4px}
.ins-h{font:600 10px system-ui;color:#868e96;letter-spacing:.06em;text-transform:uppercase;margin:2px 0}
.ins-cmt .ins-msg b{color:#1c7ed6}


/* ══ 1.0 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Tom duke — välkomstkort ── */
#emptyState{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none;transition:opacity .3s}
#emptyState.hidden{opacity:0;pointer-events:none}
.es-card{pointer-events:auto;text-align:center;padding:44px 52px;border-radius:20px;
  background:rgba(255,255,255,.96);box-shadow:0 8px 48px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);max-width:420px}
.es-logo{font-size:44px;color:#0f766e;margin-bottom:8px;line-height:1}
.es-card h1{font:800 22px system-ui;letter-spacing:-.5px;color:#1a1a2e;margin-bottom:6px}
.es-card p{font:400 13.5px/1.5 system-ui;color:#64748b;margin-bottom:22px}
.es-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:18px}
.es-chips button{padding:8px 16px;border:1.5px solid rgba(15,118,110,.2);border-radius:12px;
  background:rgba(15,118,110,.04);color:#0f766e;font:600 12.5px system-ui;cursor:pointer;
  transition:all .15s}
.es-chips button:hover{background:rgba(15,118,110,.1);transform:translateY(-1px);box-shadow:0 3px 12px rgba(15,118,110,.15)}
.es-chips button:active{transform:none}
.es-hint{font:400 11px system-ui;color:#94a3b8}
[data-theme="dark"] .es-card{background:rgba(20,22,31,.96);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .es-card h1{color:#f1f5f9}
[data-theme="dark"] .es-chips button{border-color:rgba(45,212,191,.2);background:rgba(45,212,191,.05);color:#2dd4bf}
[data-theme="dark"] .es-chips button:hover{background:rgba(45,212,191,.12)}

/* ── Panel-transitions ── */
.panel{transition:box-shadow .2s,transform .2s}
.panel:hover{box-shadow:0 6px 32px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.05)}
details.panel{transition:border-radius .2s}
details.panel[open]{border-radius:14px 14px 14px 14px}

/* ── Toolbar: visuell gruppering ── */
#tools{gap:2px;padding:7px 6px;border-radius:16px}
#tools button{border-radius:10px;transition:background .15s,transform .12s,box-shadow .15s}
#tools button:hover{background:rgba(0,0,0,.06);transform:scale(1.05)}
#tools button.on{background:linear-gradient(135deg,rgba(15,118,110,.12),rgba(20,184,166,.08));
  color:#0f766e;box-shadow:inset 0 0 0 1.5px rgba(15,118,110,.25),0 2px 8px rgba(15,118,110,.1)}
#tools .sep{height:1px;background:linear-gradient(90%,transparent,rgba(0,0,0,.08),transparent);margin:4px 8px}

/* ── Top bar: ikon + text, renare hover ── */
#acts{gap:2px;padding:6px 7px;border-radius:12px}
#acts button{border-radius:8px;font:600 11px system-ui;letter-spacing:.01em;
  padding:5px 12px;transition:background .15s,transform .12s,box-shadow .15s}
#acts button:hover{background:rgba(0,0,0,.06);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}
#acts button:active{transform:none;box-shadow:none}
#acts .tf{background:linear-gradient(135deg,rgba(15,118,110,.08),rgba(20,184,166,.04));
  box-shadow:inset 0 0 0 1px rgba(15,118,110,.12)}

/* ── Brand: subtil glans ── */
#brand{border-radius:12px;padding:7px 14px}
#brand .logo{border-radius:9px;background:linear-gradient(135deg,#0d9488,#2dd4bf);
  box-shadow:0 2px 8px rgba(13,148,136,.3)}
#brand span{font:800 13.5px system-ui;color:#1e293b;letter-spacing:-.4px}

/* ── Insights: bättre sektioner ── */
#insights{border-radius:16px}
#insights summary{padding:10px 14px;font:700 12.5px system-ui}
.ins-body{padding:0 10px 10px}
.ins-h{font:700 9.5px system-ui;color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;
  margin:8px 4px 4px;padding-bottom:3px;border-bottom:1px solid rgba(0,0,0,.05)}
.ins-prompt{display:flex;gap:4px;margin:4px 0}
.ins-prompt input{flex:1;padding:7px 12px;border:1.5px solid rgba(15,118,110,.15);border-radius:10px;
  font:400 12px system-ui;outline:none;transition:border .15s,box-shadow .15s}
.ins-prompt input:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.08)}
.ins-prompt button{width:34px;height:34px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;font:700 14px system-ui;
  transition:transform .12s,box-shadow .15s}
.ins-prompt button:hover{transform:scale(1.05);box-shadow:0 3px 12px rgba(15,118,110,.25)}
.ins-prompt button:active{transform:scale(.95)}

/* ── Kit: rundare, modernare ── */
#kit{border-radius:16px}
#kit summary{padding:10px 14px;font:700 12.5px system-ui;border-radius:16px 16px 0 0}
#kit input{border-radius:10px;border:1.5px solid rgba(0,0,0,.08);transition:border .15s,box-shadow .15s}
#kit input:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.08)}
#kitRows button{border-radius:8px;transition:all .12s}
#kitRows button:hover{transform:translateY(-1px)}

/* ── Layers: rundare ── */
#layers{border-radius:16px}
#layers summary{padding:10px 14px;font:700 12.5px system-ui;border-radius:16px 16px 0 0}
.layer-row{border-radius:8px;transition:background .12s}

/* ── Minimap: mjukare kant ── */
#minimap{border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08)}

/* ── Hint: diskret pill ── */
#hint{font:400 10.5px system-ui;color:#94a3b8;background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);border-radius:8px}

/* ── Status: accent pill ── */
#status{font:700 11px system-ui;color:#0f766e;background:rgba(15,118,110,.06);
  border:1px solid rgba(15,118,110,.1)}

/* ── Dark mode: djupare kontrast ── */
[data-theme="dark"] #tools button:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] #tools button.on{background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(20,184,166,.06));
  color:#2dd4bf;box-shadow:inset 0 0 0 1.5px rgba(45,212,191,.2)}
[data-theme="dark"] #tools .sep{background:linear-gradient(90%,transparent,rgba(255,255,255,.08),transparent)}
[data-theme="dark"] #acts button:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] #acts .tf{background:rgba(45,212,191,.08);box-shadow:inset 0 0 0 1px rgba(45,212,191,.15)}
[data-theme="dark"] #brand span{color:#f1f5f9}
[data-theme="dark"] #brand .logo{box-shadow:0 2px 8px rgba(45,212,191,.2)}
[data-theme="dark"] .ins-prompt input{border-color:rgba(45,212,191,.2);background:#1b1e2a;color:#e2e8f0}
[data-theme="dark"] .ins-prompt input:focus{border-color:#2dd4bf;box-shadow:0 0 0 3px rgba(45,212,191,.08)}
[data-theme="dark"] .ins-prompt button{background:linear-gradient(135deg,#0d9488,#2dd4bf)}
[data-theme="dark"] .ins-h{color:#64748b;border-bottom-color:rgba(255,255,255,.05)}
[data-theme="dark"] #minimap{background:rgba(20,22,31,.94);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] #hint{background:rgba(20,22,31,.7);color:#64748b}
[data-theme="dark"] #status{background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.1);color:#2dd4bf}
[data-theme="dark"] .es-chips button{border-color:rgba(45,212,191,.2);background:rgba(45,212,191,.04);color:#2dd4bf}
[data-theme="dark"] .es-hint{color:#475569}

/* ── Ins-rows: lint-fynd med hover ── */
.ins-row{border-radius:8px;padding:5px 8px;display:flex;gap:6px;align-items:flex-start;
  cursor:pointer;transition:background .12s}
.ins-row:hover{background:rgba(0,0,0,.03)}
[data-theme="dark"] .ins-row:hover{background:rgba(255,255,255,.04)}


/* ── Anslutnings-indikator ── */
.conn{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:6px;transition:background .3s,box-shadow .3s}
.conn.on{background:#2f9e44;box-shadow:0 0 6px rgba(47,158,68,.4)}
.conn.off{background:#dee2e6}
.conn.room{background:#1c7ed6;box-shadow:0 0 6px rgba(28,126,214,.4)}
[data-theme="dark"] .conn.off{background:#334155}
#docInfo{white-space:nowrap}

/* ── Boot-skärm fade ── */
#boot.hidden{opacity:0;pointer-events:none}


/* ══ 1.1 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Context menu: ikoner + hover + mjuk animation ── */
#ctxmenu{border-radius:14px;padding:8px;box-shadow:0 12px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);min-width:220px;
  animation:ctxPop .15s cubic-bezier(.2,1.2,.4,1);transform-origin:top left}
@keyframes ctxPop{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1)}}
#ctxmenu .ctx-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:8px;
  cursor:pointer;font:500 12.5px system-ui;color:#374151;transition:background .1s}
#ctxmenu .ctx-row:hover{background:rgba(15,118,110,.06);color:#0f766e}
#ctxmenu .ctx-row .ctx-k{margin-left:auto;font:600 10px system-ui;color:#94a3b8;
  padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.03)}
#ctxmenu .ctx-row:hover .ctx-k{color:#0f766e;background:rgba(15,118,110,.08)}
#ctxmenu .ctx-danger{color:#e03131!important}
#ctxmenu .ctx-danger:hover{background:rgba(224,49,49,.06);color:#c92a2a!important}
#ctxmenu .ctx-sep{height:1px;background:rgba(0,0,0,.05);margin:4px 10px;border-radius:1px}
[data-theme="dark"] #ctxmenu .ctx-row{color:#cbd5e1}
[data-theme="dark"] #ctxmenu .ctx-row:hover{background:rgba(45,212,191,.08);color:#2dd4bf}
[data-theme="dark"] #ctxmenu .ctx-danger{color:#ff6b6b!important}
[data-theme="dark"] #ctxmenu .ctx-sep{background:rgba(255,255,255,.05)}

/* ── Palette: kategorier + animation + fuzzy-styling ── */
#palette{backdrop-filter:blur(6px);animation:palFade .12s ease-out}
@keyframes palFade{from{opacity:0}to{opacity:1}}
.pal-box{border-radius:16px;overflow:hidden;box-shadow:0 20px 64px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);animation:palPop .15s cubic-bezier(.2,1.2,.4,1)}
@keyframes palPop{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1)}}
#palInput{font:500 15px system-ui;padding:15px 18px}
#palList .pal-cat{font:700 9.5px system-ui;color:#94a3b8;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px 3px}
#palList .pal-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:8px;
  cursor:pointer;font:500 13px system-ui;color:#374151;transition:background .08s}
#palList .pal-row.sel{background:rgba(15,118,110,.08);color:#0f766e}
#palList .pal-row .pal-k{margin-left:auto;font:600 10px system-ui;color:#94a3b8;
  padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.03)}
#palList .pal-row.sel .pal-k{color:#0f766e;background:rgba(15,118,110,.06)}
[data-theme="dark"] #palList .pal-row{color:#cbd5e1}
[data-theme="dark"] #palList .pal-row.sel{background:rgba(45,212,191,.08);color:#2dd4bf}

/* ── Zoom pill: alltid synlig ── */
#zoomPill{position:fixed;right:14px;bottom:140px;z-index:10;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 12px rgba(0,0,0,.06);
  font:700 11px system-ui;color:#0f766e;cursor:pointer;transition:transform .12s,box-shadow .15s}
#zoomPill:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(0,0,0,.08)}
#zoomPill:active{transform:scale(.95)}
#zoomPill span{min-width:38px;text-align:center}
#zoomPill button{width:24px;height:24px;border:none;border-radius:6px;background:rgba(15,118,110,.06);
  color:#0f766e;font:700 13px system-ui;cursor:pointer;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] #zoomPill{background:rgba(20,22,31,.94);border-color:rgba(255,255,255,.08);color:#2dd4bf}
[data-theme="dark"] #zoomPill button{background:rgba(45,212,191,.08);color:#2dd4bf}

/* ── Toast-system ── */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);z-index:80;
  padding:10px 20px;border-radius:12px;background:rgba(30,41,59,.94);color:#f1f5f9;
  font:600 13px system-ui;box-shadow:0 8px 32px rgba(0,0,0,.2);
  transition:transform .25s cubic-bezier(.2,1.2,.4,1),opacity .25s;opacity:0;pointer-events:none;
  max-width:80vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast.success{background:rgba(15,118,110,.94)}
#toast.error{background:rgba(190,18,60,.94)}

/* ── Kontextuella muspekare ── */
#canvasSurface[data-tool="v"]{cursor:default}
#canvasSurface[data-tool="r"]{cursor:crosshair}
#canvasSurface[data-tool="d"]{cursor:crosshair}
#canvasSurface[data-tool="e"]{cursor:crosshair}
#canvasSurface[data-tool="a"]{cursor:crosshair}
#canvasSurface[data-tool="l"]{cursor:crosshair}
#canvasSurface[data-tool="t"]{cursor:text}
#canvasSurface[data-tool="j"]{cursor:pointer}

/* ── Canvas-bakgrund: subtil gradient ── */
#canvasSurface{background:linear-gradient(135deg,#ffffff 0%,#fafbfc 50%,#f8fafc 100%)}
[data-theme="dark"] #canvasSurface{background:linear-gradient(135deg,#14161f 0%,#131520 50%,#12141d 100%)}

/* ── Details: mjuk öppna/stäng-animation ── */
details.panel summary{transition:color .15s}
details.panel summary:hover{color:#0d9488}
details.panel[open] summary{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}


/* ══ 1.2 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Toolbar tooltips — CSS-only, styled ── */
#tools button{position:relative}
#tools button::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);white-space:nowrap;padding:5px 10px;border-radius:8px;
  background:rgba(30,41,59,.94);color:#f1f5f9;font:500 11px system-ui;pointer-events:none;
  opacity:0;transition:opacity .15s .3s;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.15)}
#tools button:hover::after{opacity:1}
#tools button:hover::before{content:"";position:absolute;left:calc(100% + 4px);top:50%;
  transform:translateY(-50%);border:5px solid transparent;border-right-color:rgba(30,41,59,.94);
  opacity:0;transition:opacity .15s .3s;z-index:20;pointer-events:none}
#tools button:hover::before{opacity:1}

/* ── Acts tooltips ── */
#acts button{position:relative}
#acts button::after{content:attr(title);position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%);white-space:nowrap;padding:4px 10px;border-radius:6px;
  background:rgba(30,41,59,.94);color:#f1f5f9;font:500 10.5px system-ui;pointer-events:none;
  opacity:0;transition:opacity .15s .3s;z-index:20}
#acts button:hover::after{opacity:1}

/* ── Panel-collapse: mjuk höjd ── */
details.panel .ins-body,details.panel .his-body,details.panel .layer-body{
  max-height:0;overflow:hidden;transition:max-height .25s ease-out}
details.panel[open] .ins-body{max-height:24vh}
details.panel[open] .his-body{max-height:16vh}
details.panel[open] .layer-body{max-height:28vh}

/* ── Kit-chip: badge-stil med moln-prefix ── */
#kitRows button{display:flex;align-items:center;gap:4px}
#kitRows button::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--chip-c,#868e96);flex:none}
#kit .kit-chip{border-radius:4px;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:9px;font-weight:700;color:#fff}

/* ── Markerings-styling: subtil accent-bakgrund ── */
.layer-row .layer-ic{transition:transform .12s}
.layer-row:hover .layer-ic{transform:scale(1.2)}

/* ── Status-bar: zoom + koordinater + connection i EN rad ── */
#selinfo{position:fixed;right:14px;bottom:112px;z-index:10;padding:4px 10px;
  border-radius:8px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.05);
  font:600 10.5px system-ui;color:#64748b;pointer-events:none;
  box-shadow:0 1px 8px rgba(0,0,0,.04)}
[data-theme="dark"] #selinfo{background:rgba(20,22,31,.9);border-color:rgba(255,255,255,.06);color:#94a3b8}


/* ══ 1.3 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Tangentbordsbrickor på toolbar ── */
#tools button{position:relative}
#tools button[data-t]::after{content:attr(data-t);position:absolute;right:-2px;bottom:-2px;
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  font:700 8px system-ui;color:#94a3b8;background:rgba(0,0,0,.04);border-radius:4px;
  text-transform:uppercase;pointer-events:none;transition:opacity .15s}
#tools button.on::after{color:#0f766e;background:rgba(15,118,110,.08)}
#tools button:hover::after{opacity:0} /* tooltip tar över */
[data-theme="dark"] #tools button[data-t]::after{background:rgba(255,255,255,.04);color:#64748b}
[data-theme="dark"] #tools button.on::after{color:#2dd4bf;background:rgba(45,212,191,.08)}

/* ── Undo/redo toast-styling ── */
#toast.history{background:rgba(100,116,139,.94)}

/* ── Minimap: mjuk vy-rektangel ── */
#minimap{transition:box-shadow .2s}
#minimap:hover{box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* ── Status/selection info: fade-in ── */
#selinfo{animation:selFade .15s ease-out}
@keyframes selFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── Kit-chip hover: lift ── */
#kitRows button{transition:all .12s}
#kitRows button:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ── Connection label pill i SVG: subtil skugga ── */
/* (hanteras i Rust — detta är för framtida CSS-baserade piller) */

/* ── Details summary: ikon-rotation ── */
details.panel summary{position:relative}
details.panel summary::before{content:"▸";position:absolute;right:12px;top:50%;
  transform:translateY(-50%);font-size:10px;color:#94a3b8;transition:transform .2s}
details.panel[open] summary::before{transform:translateY(-50%) rotate(90deg)}
details.panel summary{padding-right:32px!important}


/* ══ 1.4 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Mallgalleri: kort med färgade tjänste-ikoner ── */
.es-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:14px 0}
.es-tpl{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;
  border:1.5px solid rgba(15,118,110,.15);border-radius:12px;cursor:pointer;
  background:rgba(15,118,110,.02);transition:all .15s;text-align:center}
.es-tpl:hover{background:rgba(15,118,110,.06);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(15,118,110,.12);border-color:rgba(15,118,110,.3)}
.es-tpl:active{transform:none}
.es-tpl-icons{display:flex;gap:3px}
.es-tpl-icons span{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font:700 8px system-ui;color:#fff}
.es-tpl-name{font:600 11.5px system-ui;color:#0f766e}
.es-tpl-hint{font:400 9.5px system-ui;color:#94a3b8}
[data-theme="dark"] .es-tpl{border-color:rgba(45,212,191,.15);background:rgba(45,212,191,.02)}
[data-theme="dark"] .es-tpl:hover{background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.3)}
[data-theme="dark"] .es-tpl-name{color:#2dd4bf}

/* ── Dokumentstatistik i status-bar ── */
#docStats{position:fixed;left:14px;bottom:44px;z-index:10;display:flex;gap:10px;
  padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.04);font:500 10px system-ui;color:#94a3b8;pointer-events:none}
#docStats .stat{display:flex;align-items:center;gap:3px}
#docStats .stat b{font-weight:700;color:#64748b}
[data-theme="dark"] #docStats{background:rgba(20,22,31,.9);border-color:rgba(255,255,255,.04)}
[data-theme="dark"] #docStats .stat b{color:#94a3b8}

/* ── Textredigerings-fokus: subtil vignette ── */
#textEditVignette{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;
  transition:opacity .2s;box-shadow:inset 0 0 80px rgba(0,0,0,.06)}
#textEditVignette.active{opacity:1}

/* ── Zoom: mjuk övergång (JS-driven lerp) ── */
#canvasSurface{transition:none}

/* ── Connection-label pill: skugga ── */
/* (renderas i Rust — framtida CSS-förbättring) */

/* ── Färgpalett: expanderad med grupper ── */
#colors{flex-wrap:wrap;gap:2px;padding:7px}
#colors .c-label{font:600 8.5px system-ui;color:#94a3b8;flex-basis:100%;margin-top:3px;letter-spacing:.05em}
#colors button{transition:transform .12s,box-shadow .12s}
#colors button:hover{transform:scale(1.2);box-shadow:0 2px 8px rgba(0,0,0,.15)}


/* ══ 1.5 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Flytande elementverktygsfält (ovanför markering) ── */
#elBar{position:fixed;z-index:15;display:none;flex-direction:row;gap:1px;
  padding:4px;border-radius:10px;background:rgba(30,41,59,.96);
  box-shadow:0 4px 20px rgba(0,0,0,.15);backdrop-filter:blur(4px);
  transform:translateX(-50%);transition:opacity .15s,transform .15s}
#elBar.show{display:flex;animation:elBarPop .12s cubic-bezier(.2,1.2,.4,1)}
@keyframes elBarPop{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#elBar button{width:32px;height:32px;border:none;border-radius:7px;background:transparent;
  color:#e2e8f0;font:400 14px system-ui;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .1s}
#elBar button:hover{background:rgba(255,255,255,.1)}
#elBar button.danger:hover{background:rgba(239,68,68,.2);color:#fca5a5}
#elBar .bar-sep{width:1px;background:rgba(255,255,255,.1);margin:4px 2px}

/* ── Drag-mätningar: storlek/offset badge ── */
#dragMeasure{position:fixed;z-index:14;display:none;padding:4px 10px;border-radius:8px;
  background:rgba(15,118,110,.92);color:#fff;font:700 10.5px system-ui;
  pointer-events:none;box-shadow:0 2px 12px rgba(15,118,110,.25);
  white-space:nowrap;animation:measureIn .1s ease-out}
@keyframes measureIn{from{opacity:0}to{opacity:1}}

/* ── Autosparings-indikator ── */
#saveDot{position:fixed;right:14px;bottom:14px;z-index:10;width:8px;height:8px;
  border-radius:50%;background:#dee2e6;transition:background .3s,box-shadow .3s}
#saveDot.saved{background:#2f9e44;box-shadow:0 0 6px rgba(47,158,68,.4)}
#saveDot.saving{background:#f59f00;box-shadow:0 0 6px rgba(245,159,0,.3)}
[data-theme="dark"] #saveDot{background:#334155}

/* ── Onboarding: första-gångs-tips ── */
#onboard{position:fixed;bottom:14px;right:40px;z-index:12;display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:10px;background:rgba(15,118,110,.06);
  border:1px solid rgba(15,118,110,.15);font:500 12px system-ui;color:#0f766e;
  cursor:pointer;transition:opacity .3s;pointer-events:auto}
#onboard.hidden{opacity:0;pointer-events:none}
#onboard kbd{padding:2px 6px;border-radius:4px;background:rgba(15,118,110,.1);
  font:700 10px system-ui;color:#0d9488}
[data-theme="dark"] #onboard{background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.15);color:#2dd4bf}
[data-theme="dark"] #onboard kbd{background:rgba(45,212,191,.1);color:#2dd4bf}


/* ══ 1.6 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Export-modal ── */
#exportModal{position:fixed;inset:0;z-index:50;display:none;align-items:center;
  justify-content:center;background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}
#exportModal.open{display:flex;animation:palFade .12s}
.ex-card{background:#fff;border-radius:16px;padding:24px;min-width:380px;max-width:440px;
  box-shadow:0 20px 64px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);
  animation:palPop .15s cubic-bezier(.2,1.2,.4,1)}
.ex-card h2{font:800 16px system-ui;color:#1e293b;margin-bottom:4px}
.ex-card .ex-sub{font:400 12px system-ui;color:#94a3b8;margin-bottom:18px}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  border:1.5px solid rgba(0,0,0,.06);cursor:pointer;transition:all .15s;background:rgba(0,0,0,.01)}
.ex-opt:hover{border-color:rgba(15,118,110,.3);background:rgba(15,118,110,.04);transform:translateY(-1px)}
.ex-opt:active{transform:none}
.ex-opt .ex-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:16px;flex:none}
.ex-opt .ex-t{font:600 12.5px system-ui;color:#1e293b}
.ex-opt .ex-d{font:400 10.5px system-ui;color:#94a3b8}
.ex-close{margin-top:14px;text-align:center}
.ex-close button{padding:6px 20px;border:none;border-radius:8px;background:rgba(0,0,0,.04);
  color:#64748b;font:600 12px system-ui;cursor:pointer}
[data-theme="dark"] .ex-card{background:#1b1e2a;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .ex-card h2{color:#f1f5f9}
[data-theme="dark"] .ex-opt{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
[data-theme="dark"] .ex-opt:hover{border-color:rgba(45,212,191,.3);background:rgba(45,212,191,.04)}
[data-theme="dark"] .ex-opt .ex-t{color:#f1f5f9}

/* ── Tjänstebibliotek: kategorier ── */
#kitRows .kit-cat{font:700 9px system-ui;color:#94a3b8;letter-spacing:.08em;
  text-transform:uppercase;flex-basis:100%;margin:6px 0 3px;padding-bottom:2px;
  border-bottom:1px solid rgba(0,0,0,.04)}
#kitRows .kit-cat:first-child{margin-top:0}
[data-theme="dark"] #kitRows .kit-cat{color:#64748b;border-bottom-color:rgba(255,255,255,.04)}


/* ══ 1.7 DESIGN POLISH ═════════════════════════════════════════════ */

/* ── Utskriftsstil: bara diagrammet ── */
@media print {
  #tools, #acts, #brand, #hint, #status, #selinfo, #zoomPill,
  #minimap, #docStats, #toast, #elBar, #dragMeasure, #saveDot,
  #shortcuts, #exportModal, #boot, #onboard, #textEditVignette,
  details, .panel, #emptyState, #ctxmenu, #palette {
    display: none !important;
  }
  html, body { background: #fff !important; overflow: visible !important; }
  #canvasSurface { position: static !important; width: 100% !important; height: auto !important; }
}

/* ── Canvas fokus-indikator ── */
#canvasSurface:focus{outline:2px solid rgba(45,212,191,.3);outline-offset:-2px;border-radius:4px}
#canvasSurface:focus-visible{outline:2px solid rgba(45,212,191,.5);outline-offset:-2px}

/* ── Ångra-tidslinje: visuell scrubber ── */
.his-timeline{display:flex;align-items:center;gap:1px;margin:4px 8px 8px;padding:0 4px}
.his-tick{flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.06);cursor:pointer;
  transition:background .1s,transform .1s;position:relative}
.his-tick:hover{transform:scaleY(1.5)}
.his-tick.past{background:rgba(15,118,110,.25)}
.his-tick.current{background:#0f766e;transform:scaleY(2)}
.his-tick.future{background:rgba(0,0,0,.06)}
[data-theme="dark"] .his-tick.past{background:rgba(45,212,191,.2)}
[data-theme="dark"] .his-tick.current{background:#2dd4bf}
[data-theme="dark"] .his-tick.future{background:rgba(255,255,255,.06)}

/* ── Element-toolbar: mörk med gradient-border ── */
#elBar{background:linear-gradient(180deg,rgba(30,41,59,.97),rgba(30,41,59,.93));
  border:1px solid rgba(255,255,255,.08)}


/* ── Settings: sektioner ── */
.set-section{padding:6px 14px 2px;font:700 9.5px system-ui;color:#94a3b8;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.04);
  background:rgba(0,0,0,.015)}
.set-section:first-child{border-radius:16px 16px 0 0}
.set-row{padding:6px 14px;border-bottom:1px solid rgba(0,0,0,.03)}
.set-row:last-child{border-bottom:none;border-radius:0 0 16px 16px}
#gear{transition:background .15s,transform .12s}
#gear:hover{background:rgba(15,118,110,.08)!important;color:#0f766e!important;transform:rotate(45deg)}
[data-theme="dark"] .set-section{color:#64748b;border-bottom-color:rgba(255,255,255,.04);background:rgba(255,255,255,.015)}
[data-theme="dark"] .set-row{border-bottom-color:rgba(255,255,255,.02)}
[data-theme="dark"] #gear:hover{background:rgba(45,212,191,.08)!important;color:#2dd4bf!important}


/* ══ PROFESSIONAL MENU ═════════════════════════════════════════════ */

/* ── Hamburger-knapp i brand ── */
#hamburger{width:32px;height:32px;border:none;border-radius:8px;background:transparent;
  color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .12s;flex:none}
#hamburger:hover{background:rgba(15,118,110,.08);color:#0f766e;transform:scale(1.05)}
#hamburger:active{transform:scale(.95)}
[data-theme="dark"] #hamburger{color:#cbd5e1}
[data-theme="dark"] #hamburger:hover{background:rgba(45,212,191,.08);color:#2dd4bf}

/* ── Huvudmeny (dropdown från hamburger) ── */
#mainMenu{position:fixed;left:14px;top:52px;display:none;flex-direction:column;
  min-width:320px;max-width:380px;max-height:calc(100vh - 120px);overflow-y:auto;
  z-index:40;border-radius:16px;padding:0;
  animation:mmDrop .2s cubic-bezier(.2,1.2,.4,1);transform-origin:top left}
@keyframes mmDrop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#mainMenu.open{display:flex}
.mm-section{padding:8px 16px 4px;font:700 9.5px system-ui;color:#94a3b8;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.04);
  background:rgba(0,0,0,.015)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 10px}
.mm-row{display:flex;gap:4px;padding:6px 10px}
#mainMenu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:none;
  border-radius:10px;background:transparent;cursor:pointer;text-align:left;
  font:600 12px system-ui;color:#374151;transition:background .12s}
#mainMenu button:hover{background:rgba(15,118,110,.06)}
#mainMenu button small{font:400 10px system-ui;color:#94a3b8;display:block}
#mainMenu button:hover small{color:#64748b}
.mm-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex:none}
[data-theme="dark"] #mainMenu .mm-section{color:#64748b;border-bottom-color:rgba(255,255,255,.04);background:rgba(255,255,255,.015)}
[data-theme="dark"] #mainMenu button{color:#cbd5e1}
[data-theme="dark"] #mainMenu button:hover{background:rgba(45,212,191,.06)}
[data-theme="dark"] #mainMenu button small{color:#64748b}

/* ── Acts (top-right): ikon-only ── */
#acts button{padding:5px 10px;font:600 13px system-ui}
#hamburgerQuick{font-size:16px;letter-spacing:2px}


/* ══ PROFESSIONAL MENU v1.2 ════════════════════════════════════════ */

/* ── Meny-container: backdrop + panel ── */
#mainMenu{position:fixed;inset:0;z-index:40;display:none;pointer-events:none}
#mainMenu.open{display:block;pointer-events:auto}
.mm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.18);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s}
#mainMenu.open .mm-backdrop{opacity:1}
.mm-panel{position:absolute;left:0;top:0;bottom:0;width:320px;max-width:85vw;
  background:#fff;border-right:1px solid rgba(0,0,0,.06);
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,1,.3,1);
  display:flex;flex-direction:column;box-shadow:4px 0 32px rgba(0,0,0,.08)}
#mainMenu.open .mm-panel{transform:translateX(0)}

/* ── Header ── */
.mm-header{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;
  border-bottom:1px solid rgba(0,0,0,.05)}
.mm-logo{font-size:28px;color:#0f766e;line-height:1}
.mm-title{font:800 15px system-ui;color:#1e293b;letter-spacing:-.3px}
.mm-sub{font:400 11px system-ui;color:#94a3b8}
.mm-close{margin-left:auto;width:28px;height:28px;border:none;border-radius:8px;
  background:rgba(0,0,0,.04);color:#64748b;font:600 12px system-ui;cursor:pointer;
  transition:background .15s}
.mm-close:hover{background:rgba(0,0,0,.08)}

/* ── Scroll-yta ── */
.mm-scroll{flex:1;overflow-y:auto;padding:8px 0 20px;scrollbar-width:thin}

/* ── Sektionsrubrik ── */
.mm-sec{padding:10px 16px 4px;font:700 9.5px system-ui;color:#94a3b8;
  letter-spacing:.1em;text-transform:uppercase}

/* ── Export-kort ── */
.mm-cards{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px 10px}
.mm-cards-2{grid-template-columns:1fr 1fr}
.mm-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;
  border-radius:10px;background:transparent;cursor:pointer;text-align:left;
  transition:background .12s,transform .1s}
.mm-card:hover{background:rgba(0,0,0,.03);transform:translateX(2px)}
.mm-card:active{transform:none}
.mm-cic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font:800 10px system-ui;color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 15%,transparent);flex:none}
.mm-ct{font:600 12px system-ui;color:#1e293b;line-height:1.2}
.mm-ct small{font:400 10px system-ui;color:#94a3b8;display:block}

/* ── Verktygslista ── */
.mm-list{display:flex;flex-direction:column;gap:1px;padding:2px 10px}
.mm-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:none;
  border-radius:8px;background:transparent;cursor:pointer;text-align:left;
  font:500 12.5px system-ui;color:#374151;transition:background .12s}
.mm-item:hover{background:rgba(0,0,0,.03)}
.mm-item kbd{margin-left:auto;font:400 9.5px system-ui;color:#94a3b8;
  padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.03);white-space:nowrap}
.mi-ic{width:20px;text-align:center;font-size:13px}

/* ── Inställningar ── */
.mm-settings{display:flex;flex-direction:column;gap:0;padding:4px 14px}
.mm-set-row{display:flex;align-items:center;gap:10px;padding:6px 2px;
  border-bottom:1px solid rgba(0,0,0,.03);font:500 12px system-ui;color:#374151}
.mm-set-row:last-child{border-bottom:none}
.mm-set-row > span:first-child{min-width:70px;font-weight:600;color:#64748b}
.mm-set-row input,.mm-set-row select{flex:1}
.mm-zoom{display:flex;align-items:center;gap:4px}
.mm-zoom button{width:26px;height:26px;border:none;border-radius:6px;
  background:rgba(0,0,0,.04);color:#374151;font:700 12px system-ui;cursor:pointer}
.mm-zoom button:hover{background:rgba(0,0,0,.08)}
.mm-zoom span{font:700 11px system-ui;color:#0f766e;min-width:36px;text-align:center}

/* ── Dark mode ── */
[data-theme="dark"] .mm-panel{background:#14161f;border-right-color:rgba(255,255,255,.06)}
[data-theme="dark"] .mm-header{border-bottom-color:rgba(255,255,255,.05)}
[data-theme="dark"] .mm-title{color:#f1f5f9}
[data-theme="dark"] .mm-sub{color:#64748b}
[data-theme="dark"] .mm-close{background:rgba(255,255,255,.04);color:#94a3b8}
[data-theme="dark"] .mm-close:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .mm-sec{color:#64748b}
[data-theme="dark"] .mm-card{color:#cbd5e1}
[data-theme="dark"] .mm-card:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .mm-ct{color:#f1f5f9}
[data-theme="dark"] .mm-ct small{color:#64748b}
[data-theme="dark"] .mm-cic{background:color-mix(in srgb,var(--c) 12%,rgba(255,255,255,.04));
  border-color:color-mix(in srgb,var(--c) 18%,transparent)}
[data-theme="dark"] .mm-item{color:#cbd5e1}
[data-theme="dark"] .mm-item:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .mm-item kbd{background:rgba(255,255,255,.04);color:#64748b}
[data-theme="dark"] .mm-set-row{color:#cbd5e1;border-bottom-color:rgba(255,255,255,.03)}
[data-theme="dark"] .mm-set-row > span:first-child{color:#94a3b8}
[data-theme="dark"] .mm-zoom button{background:rgba(255,255,255,.04);color:#cbd5e1}
[data-theme="dark"] .mm-zoom span{color:#2dd4bf}
[data-theme="dark"] .mm-set-row input,[data-theme="dark"] .mm-set-row select{
  background:#1b1e2a;border-color:rgba(255,255,255,.08);color:#e2e8f0}


/* ══ MENU v1.2 — SISTA POLISH ═══════════════════════════════════════ */

/* ── Hamburger → X animation ── */
#hamburger svg{transition:transform .25s cubic-bezier(.4,0,.2,1)}
#mainMenu.open ~ #brand #hamburger svg,
#hamburger.active svg{transform:rotate(90deg) scale(.9);opacity:.7}

/* ── Staggered card animation (varje kort glider in med fördröjning) ── */
#mainMenu.open .mm-card{animation:mmCardIn .3s cubic-bezier(.2,1,.3,1) backwards}
#mainMenu.open .mm-card:nth-child(1){animation-delay:.05s}
#mainMenu.open .mm-card:nth-child(2){animation-delay:.08s}
#mainMenu.open .mm-card:nth-child(3){animation-delay:.11s}
#mainMenu.open .mm-card:nth-child(4){animation-delay:.14s}
#mainMenu.open .mm-card:nth-child(5){animation-delay:.17s}
#mainMenu.open .mm-card:nth-child(6){animation-delay:.20s}
@keyframes mmCardIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}

/* ── Export-kort: hover-lift med formatglans ── */
.mm-card{position:relative;overflow:hidden}
.mm-card::after{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 4%,transparent),transparent 60%);
  opacity:0;transition:opacity .15s;pointer-events:none}
.mm-card:hover::after{opacity:1}
.mm-card:hover{transform:translateX(2px) translateY(-1px);box-shadow:0 3px 12px color-mix(in srgb,var(--c) 12%,transparent)}

/* ── Export-tiles: glans vid hover ── */
.mm-cic{transition:transform .15s,box-shadow .15s}
.mm-card:hover .mm-cic{transform:scale(1.08);box-shadow:0 3px 10px color-mix(in srgb,var(--c) 20%,transparent)}

/* ── Sektionsrubrik: indikator-linje ── */
.mm-sec{position:relative;padding-left:16px}
.mm-sec::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:2px;background:rgba(15,118,110,.2)}
[data-theme="dark"] .mm-sec::before{background:rgba(45,212,191,.2)}

/* ── Verktygslista: hover med accent-linje ── */
.mm-item{position:relative;padding-left:14px}
.mm-item::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;
  border-radius:1px;background:transparent;transition:background .15s}
.mm-item:hover::before{background:rgba(15,118,110,.3)}
[data-theme="dark"] .mm-item:hover::before{background:rgba(45,212,191,.3)}

/* ── Inställningar: input-fokus med accent ── */
.mm-set-row input,.mm-set-row select{transition:border .15s,box-shadow .15s}
.mm-set-row input:focus,.mm-set-row select:focus{
  border-color:#0f766e!important;box-shadow:0 0 0 3px rgba(15,118,110,.08)}
[data-theme="dark"] .mm-set-row input:focus,[data-theme="dark"] .mm-set-row select:focus{
  border-color:#2dd4bf!important;box-shadow:0 0 0 3px rgba(45,212,191,.08)}

/* ── Drawer: subtil gradient-kant ── */
.mm-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(15,118,110,.15),transparent);
  pointer-events:none}
[data-theme="dark"] .mm-panel::before{background:linear-gradient(180deg,transparent,rgba(45,212,191,.1),transparent)}

/* ── Top-right acts: ännu renare ── */
#acts{gap:2px;padding:4px 6px;border-radius:10px}
#acts button{width:32px;height:32px;padding:0!important;display:flex;align-items:center;
  justify-content:center;border-radius:8px;font:600 14px system-ui!important}
#hamburgerQuick{font-size:18px!important;letter-spacing:0!important}


/* ══ CSP-RENA KLASSER (ersätter inline styles) ═════════════════════ */

/* ── Boot-skärm ── */
.boot-overlay{position:fixed;inset:0;z-index:100;background:#fafafa;display:flex;
  align-items:center;justify-content:center;transition:opacity .3s}
.boot-center{text-align:center}
.boot-logo{font-size:36px;color:#0f766e;margin-bottom:12px}
.boot-title{font:600 14px system-ui;color:#64748b}
.boot-bar-track{width:32px;height:3px;border-radius:2px;background:rgba(15,118,110,.15);
  margin:14px auto 0;overflow:hidden}
.boot-bar-fill{height:100%;width:40%;border-radius:2px;background:#0f766e;
  animation:bootSlide 1s ease-in-out infinite}
.boot-overlay.hidden{opacity:0;pointer-events:none}

/* ── Shortcuts-modal ── */
.sc-overlay{display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);align-items:center;justify-content:center}
.sc-overlay.open{display:flex}
.sc-card{background:#fff;border-radius:16px;padding:24px 28px;
  box-shadow:0 12px 48px rgba(0,0,0,.15);max-width:480px;max-height:80vh;overflow-y:auto}
.sc-title{font:800 16px system-ui;color:#1e293b;margin-bottom:14px}
.sc-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  font:400 12.5px system-ui;color:#475569}
[data-theme="dark"] .sc-card{background:#1b1e2a}
[data-theme="dark"] .sc-title{color:#f1f5f9}

/* ── Export-modal (om den fortfarande används) ── */
.exm-overlay{display:none;position:fixed;inset:0;z-index:50;align-items:center;
  justify-content:center;background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}
.exm-overlay.open{display:flex}
.exm-card{background:#fff;border-radius:16px;padding:24px;min-width:380px;max-width:440px;
  box-shadow:0 20px 64px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06)}
[data-theme="dark"] .exm-card{background:#1b1e2a;border-color:rgba(255,255,255,.06)}

/* ── Diverse ── */
.hidden-row{display:none}
.doc-info{font:400 10.5px system-ui;color:#94a3b8;margin-left:4px}
.brand-gear{margin-left:6px;width:24px;height:24px;border:none;border-radius:6px;
  background:rgba(0,0,0,.04);color:#64748b;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s}

/* ── CSP-rena settings-inputs ── */
.mm-input{flex:1;padding:4px 8px;border:1px solid rgba(0,0,0,.08);border-radius:6px;font:500 11px system-ui;outline:none}
.mm-btn{padding:4px 12px;border:1px solid rgba(0,0,0,.08);border-radius:6px;font:600 11px system-ui;cursor:pointer;background:transparent;color:#374151}
.mm-btn:hover{background:rgba(0,0,0,.03)}
.mm-select{padding:4px 8px;border:1px solid rgba(0,0,0,.08);border-radius:6px;font:500 11px system-ui;background:#fff;color:#374151}
.mm-btn-row{display:flex;gap:4px}
[data-theme=dark] .mm-input{background:#1b1e2a;border-color:rgba(255,255,255,.08);color:#e2e8f0}
[data-theme=dark] .mm-btn{border-color:rgba(255,255,255,.08);color:#cbd5e1}
[data-theme=dark] .mm-btn:hover{background:rgba(255,255,255,.04)}
[data-theme=dark] .mm-select{background:#1b1e2a;border-color:rgba(255,255,255,.08);color:#e2e8f0}


/* ══ KOMPAKT ACCORDION-MENY ═════════════════════════════════════════ */

#mainMenu{position:fixed;inset:0;z-index:40;display:none;pointer-events:none;
  min-width:0;max-width:none;max-height:none;overflow:visible;border-radius:0;animation:none}
#mainMenu.open{display:block;pointer-events:auto}
.mm-backdrop{position:absolute;inset:0;background:transparent}
.mm-pop{position:absolute;left:14px;top:52px;width:230px;
  background:rgba(255,255,255,.98);border-radius:14px;padding:6px;
  box-shadow:0 12px 48px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  animation:mmPop .15s cubic-bezier(.2,1.2,.4,1);transform-origin:top left}
@keyframes mmPop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1)}}

/* Sektionsrubrik (klickbar) */
.mm-sec{padding:0;border-radius:8px;overflow:hidden}
.mm-sec > span:first-child{display:inline}
.mm-arrow{display:inline-block;transition:transform .2s;font-size:10px;
  color:#94a3b8;width:12px}
.mm-sec{font:600 12px system-ui;color:#374151;padding:7px 10px;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  border-radius:8px;transition:background .12s}
.mm-sec:hover{background:rgba(0,0,0,.03)}

/* Öppna sektioner */
.mm-sec.open .mm-arrow{transform:rotate(90deg)}
.mm-rows{display:none;flex-wrap:wrap;gap:3px;padding:4px 8px 8px 24px}
.mm-sec.open .mm-rows{display:flex;animation:mmRows .15s ease-out}
@keyframes mmRows{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mm-rows.mm-col{flex-direction:column;gap:4px}

/* Knappar i sektioner */
.mm-rows button{padding:4px 10px;border:1px solid rgba(0,0,0,.06);
  border-radius:7px;background:rgba(0,0,0,.02);color:#374151;
  font:600 11px system-ui;cursor:pointer;transition:all .12s}
.mm-rows button:hover{border-color:rgba(15,118,110,.25);color:#0f766e;
  background:rgba(15,118,110,.04);transform:translateY(-1px)}
.mm-rows button:active{transform:none}
.mm-zoom-val{font:700 11px system-ui;color:#0f766e;min-width:32px;
  text-align:center;align-self:center}
.mm-input,.mm-select{padding:4px 8px;border:1px solid rgba(0,0,0,.08);
  border-radius:6px;font:500 11px system-ui;outline:none;width:100%;
  transition:border .15s}
.mm-input:focus,.mm-select:focus{border-color:#0f766e}

/* Dark mode */
[data-theme="dark"] .mm-pop{background:rgba(20,22,31,.98);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .mm-sec{color:#cbd5e1}
[data-theme="dark"] .mm-sec:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .mm-rows button{border-color:rgba(255,255,255,.06);color:#cbd5e1;background:rgba(255,255,255,.02)}
[data-theme="dark"] .mm-rows button:hover{border-color:rgba(45,212,191,.25);color:#2dd4bf;background:rgba(45,212,191,.04)}
[data-theme="dark"] .mm-zoom-val{color:#2dd4bf}
[data-theme="dark"] .mm-input,[data-theme="dark"] .mm-select{
  background:#1b1e2a;border-color:rgba(255,255,255,.08);color:#e2e8f0}
[data-theme="dark"] .mm-input:focus,[data-theme="dark"] .mm-select:focus{
  border-color:#2dd4bf}


/* ══ ULTRA-KOMPakt MENY ═════════════════════════════════════════════ */

.mm-pop{width:200px;padding:4px;gap:0}
.mm-item{display:flex;flex-direction:column;padding:0;border-radius:8px;
  transition:background .12s}
.mm-item:hover{background:rgba(0,0,0,.02)}
.mm-label{font:600 11px system-ui;color:#64748b;padding:6px 10px 4px;
  cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px}
.mm-label::after{content:"···";font:400 10px system-ui;color:#cbd5e1;margin-left:auto}
.mm-item.open .mm-label{color:#0f766e}
.mm-item.open .mm-label::after{content:"—";color:#94a3b8}
.mm-btns{display:none;flex-wrap:wrap;gap:2px;padding:0 8px 6px}
.mm-item.open .mm-btns{display:flex;animation:mmRowIn .12s ease-out}
@keyframes mmRowIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.mm-btns button{padding:3px 8px;border:1px solid rgba(0,0,0,.06);border-radius:6px;
  background:rgba(0,0,0,.02);color:#374151;font:600 10px system-ui;
  cursor:pointer;transition:all .1s}
.mm-btns button:hover{border-color:rgba(15,118,110,.2);color:#0f766e;
  background:rgba(15,118,110,.04)}
.mm-z{font:700 10px system-ui;color:#0f766e;align-self:center;min-width:28px;
  text-align:center}
.mm-col{flex-direction:column;gap:3px}
.mm-inp,.mm-sel{width:100%;padding:3px 6px;border:1px solid rgba(0,0,0,.06);
  border-radius:5px;font:500 10px system-ui;outline:none}
.mm-inp:focus,.mm-sel:focus{border-color:#0f766e}
[data-theme="dark"] .mm-item:hover{background:rgba(255,255,255,.02)}
[data-theme="dark"] .mm-label{color:#94a3b8}
[data-theme="dark"] .mm-item.open .mm-label{color:#2dd4bf}
[data-theme="dark"] .mm-btns button{border-color:rgba(255,255,255,.06);color:#cbd5e1;background:rgba(255,255,255,.02)}
[data-theme="dark"] .mm-btns button:hover{border-color:rgba(45,212,191,.2);color:#2dd4bf;background:rgba(45,212,191,.04)}
[data-theme="dark"] .mm-z{color:#2dd4bf}
[data-theme="dark"] .mm-inp,[data-theme="dark"] .mm-sel{background:#1b1e2a;border-color:rgba(255,255,255,.06);color:#e2e8f0}


/* ══ Dashboard + Quick Start (origin/main: deras Rust-moduler kräver dessa) ══ */
/* ── Quick Start gallery (DOM built by gallery.rs) ── */
.qs-overlay{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.38);display:flex;align-items:center;justify-content:center;animation:qs-in .14s ease-out}
.qs-panel{width:min(980px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--vc-bg,#fff);color:var(--vc-fg,#212529);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.25);overflow:hidden}
.qs-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.08)}
.qs-head h2{font:700 16px system-ui;color:#0f766e;white-space:nowrap}
.qs-search{flex:1;padding:8px 12px;border:1.5px solid #dee2e6;border-radius:10px;font:400 14px system-ui;outline:none;background:transparent;color:inherit}
.qs-search:focus{border-color:#0f766e}
.qs-close{border:none;background:transparent;font-size:18px;cursor:pointer;color:inherit;opacity:.6}
.qs-close:hover{opacity:1}
.qs-list{overflow-y:auto;padding:6px 18px 18px}
.qs-group h3{font:700 12px system-ui;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:14px 0 8px}
.qs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.qs-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 14px;border:1px solid rgba(0,0,0,.09);border-radius:12px;background:transparent;color:inherit;cursor:pointer;font:400 12px system-ui;transition:border-color .12s,transform .12s,box-shadow .12s}
.qs-card:hover,.qs-card:focus-visible{border-color:#0f766e;transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,118,110,.14);outline:none}
.qs-card strong{font:700 13px system-ui}
.qs-card p{line-height:1.4;opacity:.85}
.qs-card small{opacity:.55;font-size:11px}
.qs-level{align-self:flex-start;padding:1px 8px;border-radius:99px;font:600 10px system-ui;background:#e6fcf5;color:#0f766e}
.qs-intermediate{background:#fff4e6;color:#d9480f}
.qs-advanced{background:#fff0f6;color:#c2255c}
.qs-empty{padding:24px;text-align:center;opacity:.6}
[data-theme="dark"] .qs-panel{background:#1a1c26;color:#e9ecef}
[data-theme="dark"] .qs-card,[data-theme="dark"] .qs-head{border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .qs-search{border-color:rgba(255,255,255,.14)}
/* Workspace dashboard (editor/dashboard.rs) — rides the Quick Start overlay skin */
.dash-panel{width:min(860px,94vw)}
.dash-spacer{flex:1}
.dash-card{min-height:72px}
.dash-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;margin-bottom:6px;font:400 12px system-ui}
.dash-row strong{font:700 12.5px ui-monospace,monospace}
.dash-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.dash-row small{opacity:.55;white-space:nowrap}
.dash-role{padding:1px 8px;border-radius:99px;font:600 10px system-ui;background:#e7f5ff;color:#1864ab}
.dash-owner{background:#e6fcf5;color:#0f766e}
.dash-view{background:#f1f3f5;color:#495057}
.dash-btn{padding:4px 10px;border:1px solid rgba(0,0,0,.12);border-radius:7px;background:transparent;color:inherit;font:600 11px system-ui;cursor:pointer}
.dash-btn:hover,.dash-btn:focus-visible{border-color:#0f766e;color:#0f766e;outline:none}
.dash-forget{opacity:.6}
.dash-sheets{display:flex;flex-wrap:wrap;gap:6px}
.dash-empty{opacity:.6;font:400 12px system-ui;padding:4px 2px}
.dash-foot{display:flex;align-items:center;gap:6px;padding:10px 18px;border-top:1px solid rgba(0,0,0,.08);font:400 12px system-ui;opacity:.8;cursor:pointer}
[data-theme="dark"] .dash-row,[data-theme="dark"] .dash-foot{border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .dash-btn{border-color:rgba(255,255,255,.14)}