:root{
      --paletteW:196px;
      --paletteOffsetW:196px;
--bg:#0b0d10;
      --canvas:#000;
      --panel:#f6f7f9;
      --panel-2:#ffffff;
      --border:rgba(15,20,25,.14);
      --border-2:rgba(15,20,25,.22);

      /* theme-derived tints */
      --hover: rgba(15,20,25,.06);
      --hover-2: rgba(15,20,25,.08);
      --hover-3: rgba(15,20,25,.10);
      --tint: rgba(15,20,25,.04);
      --tint-2: rgba(15,20,25,.05);
      --tint-3: rgba(15,20,25,.03);

      --shadow:0 10px 30px rgba(0,0,0,.22);
      --shadow-soft:0 6px 18px rgba(0,0,0,.18);

      --text:#0f1419;
      --muted:#5b6773;

      --accent:#00a8a0;
      --accent-2:#1b66ff;
      --danger:#e11d48;
      --warning:#c99700;

      --radius:12px;
      --radius-sm:10px;

      --topH:40px;
      --bottomH:38px;
      --paletteW:196px;
      --propsW:280px;
      /* layout offset for canvas/resizer (differs from --propsW when properties are collapsed) */
      --propsOffsetW:280px;

      /* z-index scale */
      --z-canvas:1;
      --z-panels:900;
      --z-bars:1000;
      --z-hud:1200;
      --z-popover:1500;
      --z-menus:1600;
      --z-menu-brand:1700;
      --z-modals:2000;
      --z-modals-top:2100;
    }

    /* Theme overrides (set via body[data-theme]) */
    body[data-theme="dark"]{
      --bg:#07090c;
      --canvas:#000;
      --panel:#0f1419;
      --panel-2:#0b0f14;
      --border:rgba(255,255,255,.10);
      --border-2:rgba(255,255,255,.18);
      --shadow:0 14px 40px rgba(0,0,0,.55);
      --shadow-soft:0 10px 26px rgba(0,0,0,.40);

      --text:#eef2f6;
      --muted:#a9b4c0;

      --hover: rgba(255,255,255,.06);
      --hover-2: rgba(255,255,255,.10);
      --hover-3: rgba(255,255,255,.14);
      --tint: rgba(255,255,255,.04);
      --tint-2: rgba(255,255,255,.05);
      --tint-3: rgba(255,255,255,.03);
    }

    /* Let the browser style native controls appropriately */
    body[data-theme="dark"]{ color-scheme: dark; }

    body[data-theme="dark"] #top-bar,
    body[data-theme="dark"] #bottom-bar,
    body[data-theme="dark"] #tool-palette{
      background:rgba(11,15,20,.86);
      backdrop-filter:saturate(140%) blur(12px);
    }
    body[data-theme="dark"] #cmdline,
    body[data-theme="dark"] #dim-input,
    body[data-theme="dark"] .chip,
    body[data-theme="dark"] .top-action,
    body[data-theme="dark"] #command-prompt,
    body[data-theme="dark"] .ui-input,
    body[data-theme="dark"] .prop-select,
    body[data-theme="dark"] .prop-dd,
    body[data-theme="dark"] .prop-mini-btn,
    body[data-theme="dark"] .big-btn,
    body[data-theme="dark"] #cmdk-input,
    body[data-theme="dark"] .cmdk-close{
      background:rgba(255,255,255,.06);
      color:var(--text);
      border-color:var(--border);
    }
    body[data-theme="dark"] #coords{color:var(--muted);}

    body[data-theme="dark"] #ctx-menu{background:var(--panel);border-color:var(--border);}
    body[data-theme="dark"] #ctx-menu button:hover{background:rgba(255,255,255,.06);}
    body[data-theme="dark"] .menu-pop button:hover{background:rgba(255,255,255,.06);}
    body[data-theme="dark"] #brand-btn:hover{background:rgba(255,255,255,.06);}
    body[data-theme="dark"] #brand-mark{border-color:rgba(255,255,255,.12);}
    body[data-theme="dark"] .loading-card{background:var(--panel);border-color:var(--border);}


    /* Dark mode: ensure icons/text remain legible (avoid hard-coded dark tones) */
    body[data-theme="dark"] .tool-tone-neutral{--tool-color:var(--text);} 
    body[data-theme="dark"] .tool-tone-muted{--tool-color:var(--muted);} 
    body[data-theme="dark"] .tool-item:hover{background:rgba(255,255,255,.06);} 
    body[data-theme="dark"] .tool-icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);} 

    /* Dark mode: properties hamburger lines */
    body[data-theme="dark"] #props-toggle .burger:before,
    body[data-theme="dark"] #props-toggle .burger:after,
    body[data-theme="dark"] #props-toggle .burger i{background:rgba(255,255,255,.70);}

    /* Dark mode: tools hamburger lines */
    body[data-theme="dark"] #tools-toggle .burger:before,
    body[data-theme="dark"] #tools-toggle .burger:after,
    body[data-theme="dark"] #tools-toggle .burger i{background:rgba(255,255,255,.70);}


    /* Dark mode: make burger icon visible */
    body[data-theme="dark"] #props-toggle .burger:before,
    body[data-theme="dark"] #props-toggle .burger:after,
    body[data-theme="dark"] #props-toggle .burger i{background:rgba(255,255,255,.70);}

    /* Dark mode: popovers/menus/modals that previously used hard-coded white */
    body[data-theme="dark"] #brand-menu,
    body[data-theme="dark"] .menu-pop,
    body[data-theme="dark"] #cmd-history,
    body[data-theme="dark"] #osnap-menu,
    body[data-theme="dark"] #layers-panel{
      background:var(--panel-2);
      border-color:var(--border);
      color:var(--text);
    }

    body[data-theme="dark"] .layer-item:hover{background:rgba(255,255,255,.06);}
    body[data-theme="dark"] .prop-title{background:rgba(255,255,255,.06);}
    body[data-theme="dark"] .prop-section summary:hover{background:rgba(255,255,255,.06);}

    /* Dark mode: sections that were using light-only tints */
    body[data-theme="dark"] .export-section{background:rgba(255,255,255,.04);}
    body[data-theme="dark"] #help-body{background:var(--panel-2) !important; color:var(--text) !important;}

    body[data-theme="dark"] .top-action:hover{background:rgba(255,255,255,.08);}

    body[data-theme="dark"] .menu-btn:hover,
    body[data-theme="dark"] #brand-btn:hover,
    body[data-theme="dark"] #brand-menu button:hover{background:rgba(255,255,255,.06);} 

    /* Command palette dark tweaks */
    body[data-theme="dark"] .cmdk-pill,
    body[data-theme="dark"] .cmdk-kbd{background:rgba(255,255,255,.06);} 
    body[data-theme="dark"] .cmdk-item:hover{background:rgba(255,255,255,.06);} 
    body[data-theme="dark"] #cmdk-footer{background:rgba(255,255,255,.04);} 

    html,body{height:100%;}
    body{
      margin:0;
      overflow:hidden;
      background:var(--bg);
      font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      user-select:none;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* --- TOP BAR --- */
    #top-bar{
      position:fixed;left:0;right:0;top:0;height:var(--topH);
      background:var(--panel);
      backdrop-filter:saturate(140%) blur(10px);
      border-bottom:1px solid var(--border);
      display:flex;align-items:center;gap:6px;padding:0 10px;box-sizing:border-box;
      z-index:var(--z-bars);color:var(--text);
      box-shadow:0 1px 0 rgba(0,0,0,.04);
    }

    .menu-btn{
      background:transparent;border:0;color:var(--text);
      padding:7px 10px;border-radius:10px;cursor:pointer;font-size:13px;
      transition:background .12s ease, transform .06s ease;
    }
    .menu-btn:hover{background:var(--hover);}
    .menu-btn:active{transform:translateY(1px);}

    .top-spacer{flex:1;}

    .top-action{
      background:var(--panel-2);
      border:1px solid var(--border);
      color:var(--text);
      padding:7px 10px;border-radius:12px;
      cursor:pointer;font-size:12px;font-weight:600;
      transition:background .12s ease, transform .06s ease, border-color .12s ease;
    }
    .top-action:hover{background:var(--panel-2);border-color:var(--border-2);}
    .top-action:active{transform:translateY(1px);}
    .top-action.on{background:rgba(0,168,160,.10);border-color:rgba(0,168,160,.40);}


    /* --- BRAND (EDGEWORKS CAD) --- */
    #brand-btn{
      display:flex;align-items:center;gap:10px;
      background:transparent;border:0;cursor:pointer;
      padding:6px 10px;border-radius:12px;
      transition:background .12s ease, transform .06s ease;
      color:var(--text);
      height:100%;
    }
    #brand-btn:hover{background:var(--hover);}
    #brand-btn:active{transform:translateY(1px);}
    #brand-mark{
      width:28px;height:28px;border-radius:10px;
      background:linear-gradient(135deg, rgba(0,168,160,.95), rgba(27,102,255,.65));
      display:flex;align-items:center;
      justify-content:center;
      box-shadow:0 10px 26px rgba(0,0,0,.16);
      border:1px solid var(--border);
      flex:0 0 auto;
    }
        #brand-mark img{width:18px;height:18px;display:block;}
#brand-mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
    #brand-text{display:flex;flex-direction:column;line-height:1;align-items:flex-start;
      justify-content:center;
      }
    #brand-name{font-weight:900;letter-spacing:.08em;font-size:12px;}
    #brand-tag{font-size:11px;color:var(--muted);font-weight:700;margin-top:1px;}
    /* Hide old top-bar controls but keep them in DOM for logic/shortcuts */
    #menu-file-btn,#menu-edit-btn,#menu-view-btn,#quick-import-btn,#quick-export-btn{display:none !important;}
    /* Brand dropdown */
    #brand-menu{
      position:fixed;
      top:calc(var(--topH) + 6px);
      left:10px;
      width:260px;
      padding:8px;
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:var(--shadow-soft);
      display:none;
      z-index:var(--z-menu-brand);
    }
    #brand-menu.show{display:block;}
    #brand-menu .sec{
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      margin:8px 8px 6px;
      font-weight:900;
    }
    #brand-menu button{
      width:100%;
      text-align:left;
      padding:10px 10px;
      border:0;
      border-radius:12px;
      background:transparent;
      cursor:pointer;
      font-size:12px;
      font-weight:800;
      color:var(--text);
      display:flex;align-items:center;gap:10px;
    }
    #brand-menu button:hover{background:var(--hover);}
    #brand-menu .sep{height:1px;background:var(--border);margin:6px 6px;}


    /* --- RIGHT TOOL PALETTE --- */
    #tool-palette{
      position:fixed;top:var(--topH);right:0;bottom:var(--bottomH);width:var(--paletteW);
      background:var(--panel);
      backdrop-filter:saturate(140%) blur(10px);
      border-left:1px solid var(--border);
      box-sizing:border-box;
      padding:0;
      overflow:auto;z-index:var(--z-panels);
    }

    /* Tools header: reuse the exact Properties header styling */
    #tool-palette .prop-title{
      position:sticky;
      top:0;
      z-index:5;
      /* Opaque header so scrolled tool text can't show through underneath */
      background:var(--panel);
      backdrop-filter:saturate(140%) blur(10px);
      border-bottom:1px solid var(--border);
      isolation:isolate;
    }

    
    /* Inner padding for tool list (match Properties scroll padding + spacing) */
    .tool-body{
      padding:10px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    /* Tools groups: reuse the Properties card style, but use a simple vertical list */
    .tool-section{box-shadow:var(--shadow-soft);} /* ensure same depth even if class order changes */
    .tool-section-body{
      padding:8px 10px;
      display:flex;
      flex-direction:column;
      gap:6px;
      background:var(--panel-2);
    }

    /* In collapsed mode, hide section headers to keep the rail compact */
    #tool-palette.collapsed .tool-section > summary{display:none;}
    #tool-palette.collapsed .tool-section-body{padding:6px;gap:6px;}

    /* tools hamburger (same look as properties) */
    #tools-toggle{
      width:28px;height:28px;
      display:inline-flex;
      align-items:center;justify-content:center;
      border-radius:10px;
      border:1px solid transparent;
      background:transparent;
      cursor:pointer;
      color:inherit;
    }
    #tools-toggle:hover{background:var(--hover);border-color:var(--hover-3)}
    #tools-toggle:active{transform:translateY(1px)}
    #tools-toggle:focus-visible{outline:2px solid rgba(0,255,204,.45);outline-offset:2px}
    #tools-toggle .burger{width:14px;height:10px;position:relative;display:block;}
    #tools-toggle .burger:before,
    #tools-toggle .burger:after,
    #tools-toggle .burger i{
      content:"";
      position:absolute;left:0;right:0;
      height:2px;border-radius:999px;
      background:rgba(15,20,25,.55);
    }
    #tools-toggle .burger:before{top:0}
    #tools-toggle .burger i{top:4px}
    #tools-toggle .burger:after{bottom:0}

    /* Palette collapse (icon-only) */
    #tool-palette.collapsed{
      width:44px;
    }
    #tool-palette.collapsed .prop-title{
      justify-content:center;
      padding:0;
      margin:0;
    }
    #tool-palette.collapsed .prop-title-text{display:none;}

    /* collapse behaviour: hide list text, keep icons */
    #tool-palette.collapsed .tool-body{padding:10px 6px;}
    #tool-palette.collapsed .tool-label,
    #tool-palette.collapsed .tool-sub,
    #tool-palette.collapsed .tool-muted,
    #tool-palette.collapsed .tool-sep{display:none !important;}
    #tool-palette.collapsed .tool-item{justify-content:center; padding:8px 0; gap:0; box-sizing:border-box;}
    #tool-palette.collapsed .tool-icon{width:28px;height:28px;border-radius:12px; margin:0 auto; flex:0 0 28px;}

    /* Tool color themes (removes need for inline styles) */
    .tool-tone-neutral{--tool-color:var(--text);}
    .tool-tone-accent{--tool-color:var(--accent-2);}
    .tool-tone-danger{--tool-color:var(--danger);}
    .tool-tone-muted{--tool-color:var(--muted);}

    /* nicer scrollbar */
/* --- Shared scrollbars (panels) --- */
#tool-palette::-webkit-scrollbar,
#layers-list::-webkit-scrollbar,
#properties-panel .prop-scroll::-webkit-scrollbar{width:10px;}
#tool-palette::-webkit-scrollbar-thumb,
#layers-list::-webkit-scrollbar-thumb,
#properties-panel .prop-scroll::-webkit-scrollbar-thumb{
  background:var(--border-2);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
#tool-palette::-webkit-scrollbar-track,
#layers-list::-webkit-scrollbar-track,
#properties-panel .prop-scroll::-webkit-scrollbar-track{background:transparent;}
.tool-group-title{
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      margin:10px 10px 6px;
      user-select:none;
    }

    .tool-item{
      width:100%;
      box-sizing:border-box;
      display:flex;align-items:center;gap:10px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid transparent;
      background:transparent;
      cursor:pointer;
      line-height:1;
      color:var(--text);
      transition:background .12s ease, border-color .12s ease, transform .06s ease;
    }
    .tool-item:hover{background:var(--hover);}
    .tool-item:active{transform:translateY(1px);}
    .tool-item.active{
      background:rgba(0,168,160,.10);
      border-color:rgba(0,168,160,.35);
      box-shadow:0 0 0 3px rgba(0,168,160,.10) inset;
    }

    .tool-icon{
      width:20px;
      height:20px;
      display:grid;
      place-items:center;
      border-radius:9px;
      background:var(--hover);
      border:1px solid var(--hover-2);
      font-weight:800;
      font-size:14px;
      color:var(--tool-color, var(--text));
      flex:0 0 auto;
    }
    .tool-icon svg{
      width:20px;
      height:20px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }


    .tool-label{
      font-size:12px;
      font-weight:800;
      letter-spacing:.01em;
      color:var(--tool-color, var(--text));
    }
    .tool-sub{font-size:11px;color:var(--muted);margin-left:auto;font-weight:600;}

    .tool-sep{height:10px;}
    .tool-muted{font-size:12px;color:var(--muted);padding:6px 10px;}

    /* --- CANVAS --- */
    /* --- CANVAS --- */
canvas#cadCanvas{
  position:fixed;
  left:var(--propsOffsetW); top:var(--topH);
  right:var(--paletteOffsetW); bottom:var(--bottomH);
  background:var(--canvas);
  cursor:crosshair;
  z-index:var(--z-canvas);
}

/* --- Panel resizers --- */
#props-resizer,
#palette-resizer{
  position:fixed;
  top:var(--topH);
  bottom:var(--bottomH);
  width:10px;
  z-index:var(--z-panels);
  cursor:col-resize;
  background:transparent;
}
#props-resizer{left:calc(var(--propsOffsetW) - 5px);}
#palette-resizer{right:calc(var(--paletteOffsetW) - 5px);}
#props-resizer:hover,
#palette-resizer:hover{
  background:linear-gradient(to right, transparent, rgba(0,168,160,.18), transparent);
}
body.is-resizing #props-resizer,
body.is-resizing #palette-resizer{background:linear-gradient(to right, transparent, rgba(0,168,160,.28), transparent);}

/* --- Command palette (Ctrl+K) --- */
#cmdk-modal{position:fixed;inset:0;display:none;z-index:var(--z-modals-top);}
#cmdk-modal.show{display:block;}
#cmdk-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);}
#cmdk-panel{
  position:absolute;
  left:50%;top:calc(var(--topH) + 24px);
  transform:translateX(-50%);
  width:min(720px, calc(100vw - 36px));
  border-radius:18px;
  background:var(--panel-2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
#cmdk-top{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid var(--border);}
.cmdk-pill{font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--muted);padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--tint);}
#cmdk-input{flex:1;height:38px;border-radius:14px;border:1px solid var(--border);background:var(--panel);
  padding:0 12px;font-size:13px;font-weight:800;outline:none;color:var(--text);
}
#cmdk-input:focus{border-color:rgba(0,168,160,.6);box-shadow:0 0 0 3px rgba(0,168,160,.16);}
.cmdk-hint{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;}

.cmdk-close{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--tint);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  display:grid;place-items:center;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.cmdk-close:hover{background:var(--hover-2);border-color:var(--border-2);}
.cmdk-close:active{transform:translateY(1px);}

body[data-theme="dark"] .cmdk-close{background:rgba(255,255,255,.06);}
body[data-theme="dark"] .cmdk-close:hover{background:rgba(255,255,255,.10);}
#cmdk-results{max-height:min(52vh, 420px);overflow:auto;padding:8px;}
.cmdk-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--text);}
.cmdk-item:hover{background:var(--hover);}
.cmdk-item.active{background:rgba(0,168,160,.10);border-color:rgba(0,168,160,.35);}
.cmdk-name{font-weight:900;font-size:13px;}
.cmdk-meta{margin-left:auto;color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;}
.cmdk-desc{color:var(--muted);font-weight:700;font-size:12px;margin-top:2px;}
.cmdk-col{display:flex;flex-direction:column;gap:2px;}
#cmdk-footer{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--tint-3);}
.cmdk-kbd{font-weight:950;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-bottom-color:var(--border-2);padding:4px 8px;border-radius:10px;background:var(--tint);color:var(--text);}
.cmdk-muted{color:var(--muted);font-weight:800;font-size:12px;}
.cmdk-spacer{flex:1;}

    /* --- BOTTOM BAR --- */
    #bottom-bar{
      position:fixed;left:0;right:0;bottom:0;height:var(--bottomH);
      background:var(--panel);
      backdrop-filter:saturate(140%) blur(10px);
      border-top:1px solid var(--border);
      display:flex;align-items:center;gap:10px;padding:0 10px;box-sizing:border-box;
      z-index:var(--z-bars);color:var(--text);
      font-size:12px;
    }

    /* command section */
    #cmd-wrap{display:flex;align-items:center;gap:8px;min-width:280px;flex:1;max-width:42vw;}
    #command-prompt{
      font-weight:900;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      max-width:260px;
      padding:6px 10px;
      border-radius:999px;
      background:var(--tint-2);
      border:1px solid var(--border);
    }
    #cmdline{
      flex:1;
      min-width:140px;
      height:30px;
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:12px;
      padding:0 10px;
      outline:none;
      font-size:12px;
      font-weight:700;
      transition:border-color .12s ease, box-shadow .12s ease;
    }
    #cmdline:focus{
      border-color:rgba(0,168,160,.6);
      box-shadow:0 0 0 3px rgba(0,168,160,.16);
    }
    #cmd-hint{color:var(--muted);font-weight:700;white-space:nowrap;}

    /* status chips (snap/ortho/grid) */
    .chip{
      height:28px;
      display:inline-flex;align-items:center;gap:6px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--panel-2);
      cursor:pointer;
      font-size:12px;
      font-weight:900;
      color:var(--text);
      transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
      user-select:none;
    }
    .chip:hover{border-color:var(--border-2);box-shadow:0 6px 16px rgba(0,0,0,.10)}
    .chip:active{transform:translateY(1px)}
    .chip.on{background:rgba(0,168,160,.10);border-color:rgba(0,168,160,.40)}
    .chip .dot{width:8px;height:8px;border-radius:999px;background:var(--border-2)}
    .chip.on .dot{background:var(--accent)}

    #dim-input{
      width:110px;
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:12px;
      padding:7px 10px;
      outline:none;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      transition:border-color .12s ease, box-shadow .12s ease;
    }
    #dim-input:focus{
      border-color:rgba(0,168,160,.6);
      box-shadow:0 0 0 3px rgba(0,168,160,.16);
    }

    #coords{margin-left:auto;color:var(--muted);white-space:nowrap;font-weight:700;}

    /* command history (small popover above the bar) */
    #cmd-history{
      position:fixed;
      left:10px;
      bottom:calc(var(--bottomH) + 10px);
      width:min(520px, calc(100vw - 20px));
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:var(--shadow-soft);
      padding:8px;
      z-index:var(--z-popover);
      display:none;
    }
    #cmd-history.show{display:block;}
    #cmd-history .row{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;font-weight:800;font-size:12px;}
    #cmd-history .row:hover{background:var(--hover)}
    #cmd-history .kbd{margin-left:auto;color:var(--muted);font-weight:900;font-size:11px;}

    .bb-btn{
      background:var(--panel-2);
      border:1px solid var(--border);
      padding:7px 10px;border-radius:12px;
      cursor:pointer;font-size:12px;font-weight:700;color:var(--text);
      transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease;
    }
    .bb-btn:hover{border-color:var(--border-2);box-shadow:0 6px 16px rgba(0,0,0,.10);}
    .bb-btn:active{transform:translateY(1px);}

    /* ---- LAYERS MODAL ---- */
    #layers-modal{position:fixed;inset:0;display:none;z-index:2000}
    #layers-modal.show{display:block}
    #layers-backdrop{
      position:absolute;inset:0;
      background:rgba(0,0,0,.46);
      backdrop-filter:blur(2px);
    }

    #layers-panel{
      position:absolute;top:calc(var(--topH) + 14px);right:calc(var(--paletteOffsetW) + 14px);
      width:560px;max-width:calc(100vw - (var(--paletteOffsetW) + 40px));
      height:460px;max-height:calc(100vh - (var(--topH) + var(--bottomH) + 60px));
      background:var(--panel-2);
      border:1px solid var(--border);
      display:flex;flex-direction:column;
      border-radius:16px;
      box-shadow:var(--shadow);
      overflow:hidden;
      transform:translateY(6px);
      animation:popIn .14s ease-out forwards;
    }

    @keyframes popIn{
      from{opacity:.0; transform:translateY(10px) scale(.98);}
      to{opacity:1; transform:translateY(0) scale(1);}
    }

    #layers-header{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 14px;border-bottom:1px solid var(--border);
      background:var(--panel-2);
    }
    #layers-header h2{margin:0;font-size:13px;color:var(--text);letter-spacing:.14em;text-transform:uppercase}
    #layers-close{
      background:var(--panel-2);border:1px solid var(--border);color:var(--text);
      border-radius:12px;padding:7px 10px;cursor:pointer;font-weight:700;
    }
    #layers-close:hover{border-color:var(--border-2);box-shadow:0 6px 16px rgba(0,0,0,.10)}

    #layers-body{display:flex;gap:12px;padding:12px;flex:1;overflow:hidden}
    #layers-list{
      flex:1;
      overflow:auto;
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px;
      background:var(--panel);
    }
.layer-item{
      display:flex;align-items:center;gap:10px;
      padding:9px 10px;border-radius:14px;margin-bottom:8px;
      background:var(--panel-2);border:1px solid var(--border);
      cursor:pointer;
      transition:background .12s ease, border-color .12s ease, transform .06s ease;
    }
    .layer-item:hover{background:var(--hover);border-color:var(--border-2);}
    .layer-item:active{transform:translateY(1px);}
    .layer-item.active{
      border-color:rgba(0,168,160,.45);
      box-shadow:0 0 0 3px rgba(0,168,160,.12) inset;
    }
    .layer-item .name{flex:1;color:var(--text);font-size:13px;font-weight:750}
    .layer-item input[type="checkbox"]{transform:scale(1.08)}
    .layer-color{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}

    #layers-actions{width:190px;display:flex;flex-direction:column;gap:8px}
    .big-btn{
      background:var(--panel-2);
      color:var(--text);
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 11px;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .big-btn:hover{border-color:var(--border-2);box-shadow:0 8px 18px rgba(0,0,0,.10)}
    .big-btn:active{transform:translateY(1px);}
    .big-btn.danger{border-color:rgba(225,29,72,.25);background:rgba(225,29,72,.06)}
    .big-btn.secondary{background:var(--panel)}
    #layers-hint{font-size:11px;color:var(--muted);line-height:1.45;padding-top:6px}
    #layer-color-picker{display:none}

    /* motion safety */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important;animation:none !important;}
      #layers-panel{transform:none;}
    }

    /* responsive */
    @media (max-width: 980px){
      :root{ --paletteW: 180px; }
    }
    @media (max-width: 820px){
      :root{ --paletteW: 168px; }
      .tool-label{font-size:13px;}
    }
  
    
/* --- LEFT PROPERTIES PANEL (Modern) --- */
#properties-panel{
  position:fixed;
  top:var(--topH);
  left:0;
  bottom:var(--bottomH);
  width:var(--propsW);
  background:var(--panel);
  backdrop-filter:saturate(140%) blur(10px);
  border-right:1px solid var(--border);
  color:var(--text);
  z-index:var(--z-panels);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  box-shadow:0 1px 0 rgba(0,0,0,.04);

  overflow:hidden;
}

    /* --- OSNAP (Object Snap) menu --- */
    #osnap-menu{
      position:fixed;
      bottom:calc(var(--bottomH) + 10px);
      right:calc(var(--paletteOffsetW) + 10px);
      width:260px;
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:var(--shadow-soft);
      padding:8px;
      z-index:var(--z-popover);
      display:none;
    }
    #osnap-menu.show{display:block;}
    #osnap-menu .sec{
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      margin:6px 8px 8px;
      font-weight:900;
    }
    #osnap-menu .item{
      display:flex;align-items:center;gap:10px;
      padding:8px 10px;
      border-radius:12px;
      cursor:pointer;
      user-select:none;
    }
    #osnap-menu .item:hover{background:var(--hover);}
    #osnap-menu .item input{pointer-events:none;}
    #osnap-menu .item .name{font-size:12px;font-weight:800;color:var(--text);flex:1;}
    #osnap-menu .sep{height:1px;background:var(--border);margin:6px 6px;}
    #osnap-menu .row{display:flex;align-items:center;gap:10px;padding:6px 10px;}
    #osnap-menu .row .lbl{font-size:12px;font-weight:800;color:var(--text);}
    #osnap-menu .row .val{margin-left:auto;font-size:12px;font-weight:900;color:var(--muted);}
    #osnap-aperture{flex:1;}

/* scrollbar (match right palette) */
.prop-title{
  height:32px;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  background:var(--tint-2);
  border-bottom:1px solid var(--border);
  color:var(--text);
}

/* properties hamburger */
#props-toggle{
  width:28px;height:28px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:inherit;
}
#props-toggle:hover{background:var(--hover);border-color:var(--hover-3)}
#props-toggle:active{transform:translateY(1px)}
#props-toggle:focus-visible{outline:2px solid rgba(0,255,204,.45);outline-offset:2px}
#props-toggle .burger{
  width:14px;height:10px;position:relative;display:block;
}
#props-toggle .burger:before,
#props-toggle .burger:after,
#props-toggle .burger i{
  content:"";
  position:absolute;left:0;right:0;
  height:2px;border-radius:999px;
  background:rgba(15,20,25,.55);
}
#props-toggle .burger:before{top:0}
#props-toggle .burger i{top:4px}
#props-toggle .burger:after{bottom:0}

/* collapsed properties: keep a slim rail so the burger stays clickable */
#properties-panel.collapsed{
  width:44px;
}
#properties-panel.collapsed .prop-toprow,
#properties-panel.collapsed .prop-scroll{
  display:none;
}

#properties-panel.collapsed .prop-title{
  justify-content:center;
  padding:0;
}
#properties-panel.collapsed .prop-title-text{
  display:none;
}

.prop-toprow{
  padding:8px 10px;
  display:flex;
  gap:8px;
  align-items:center;
  border-bottom:1px solid var(--border);
}

.prop-select{
  flex:1;
  height:30px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  outline:none;
  padding:0 10px;
  font-size:12px;
  font-weight:700;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.prop-select:focus{
  border-color:rgba(0,168,160,.6);
  box-shadow:0 0 0 3px rgba(0,168,160,.16);
}



/* --- Dark mode fix: native <select> dropdown list (options) ---
   Some WebViews/Chromium builds ignore body color-scheme for the popup list,
   rendering a white options panel in dark mode. Force colors for select/option. */
body[data-theme="dark"] select,
body[data-theme="dark"] option,
body[data-theme="dark"] optgroup{
  background-color: var(--panel-2);
  color: var(--text);
}
body[data-theme="dark"] select{
  color-scheme: dark;
}
body[data-theme="dark"] select:disabled,
body[data-theme="dark"] option:disabled{
  color: var(--muted);
}
.prop-mini-actions{display:flex;gap:6px;align-items:center;}

.prop-mini-btn{
  width:30px;height:30px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-2);
  cursor:pointer;
  display:grid;place-items:center;
  transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease;
}
.prop-mini-btn:hover{border-color:var(--border-2);box-shadow:0 6px 16px rgba(0,0,0,.10);}
.prop-mini-btn:active{transform:translateY(1px);}

.prop-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* sections already use the global light card style; keep for consistency */
.prop-section{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.prop-section summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text);
  background:var(--tint-2);
  border-bottom:1px solid var(--border);
}
.prop-section summary::-webkit-details-marker{ display:none; }
.prop-chevron{ opacity:.75; font-weight:900; }
details[open] .prop-chevron{ transform:rotate(180deg); }

.prop-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
}
.prop-row{display:contents;}
.prop-key{
      padding:8px 12px;
      font-size:12px;
      color:var(--muted);
      border-bottom:1px solid var(--border);
    }
        .prop-val{
      padding:7px 12px;
      border-bottom:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
    }
        .prop-input, .prop-dd{
      width:100%;
      height:28px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--panel-2);
      color:var(--text);
      outline:none;
      padding:0 10px;
      font-size:12px;
      font-weight:650;
      box-sizing:border-box;
      transition:border-color .12s ease, box-shadow .12s ease, transform .06s ease, background .12s ease;
    }
        .prop-input:focus, .prop-dd:focus, .prop-select:focus{
      border-color:rgba(0,168,160,.55);
      box-shadow:0 0 0 4px rgba(0,168,160,.14);
    }
        .prop-swatch{
      width:18px;height:18px;border-radius:6px;
      border:1px solid var(--border);
      background:var(--panel-2);
      flex:0 0 auto;
    }
        .prop-badge{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      background:var(--tint-2);
      border:1px solid var(--border);
      color:var(--text);
      white-space:nowrap;
    }

    /* Make canvas respect both panels */
    /* ---- Export modal (matches modern UI) ---- */
    #export-modal{position:fixed;inset:0;display:none;z-index:var(--z-hud)}
    #export-modal.show{display:block}
    #export-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
    #export-panel{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:min(720px,calc(100vw - 40px));max-height:calc(100vh - 80px);
      background:var(--panel);border:1px solid var(--border);border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;
    }
    #export-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--panel-2)}
    .modal-title{font-weight:700;letter-spacing:.2px}
    .modal-x{border:none;background:transparent;font-size:18px;cursor:pointer;opacity:.7}
    .modal-x:hover{opacity:1}
    #export-body{padding:14px 16px;gap:10px}
    .export-scroll{overflow:auto}
    .export-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
    .export-label{font-weight:600;opacity:.85}
    .export-section{border:1px solid var(--border);border-radius:14px;padding:12px 12px;margin:12px 0;background:rgba(0,0,0,.02)}
    .export-section-title{font-weight:700;margin-bottom:10px}
    .export-check,.export-radio{display:flex;align-items:center;gap:10px;margin:8px 0}
    .export-check input[type="checkbox"], .export-radio input[type="radio"]{transform:scale(1.05)}
    .export-check.disabled{opacity:.5}
    .export-radio.disabled{opacity:.5}
    .export-two-col{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
    .export-note{font-size:12px;opacity:.7;margin-top:6px}
    #export-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--panel-2)}
    .ui-input.small{width:160px}
    .ui-input.tiny{width:90px}


    /* --- Menus --- */
    .menu-pop{
      position:fixed;
      top:calc(var(--topH) - 2px);
      min-width:210px;
      padding:6px;
      background:var(--panel-2);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:var(--shadow-soft);
      display:none;
      z-index:var(--z-menus);
    }
    .menu-pop.show{display:block;}
    .menu-pop button{
      width:100%;
      text-align:left;
      padding:9px 10px;
      border:0;
      border-radius:12px;
      background:transparent;
      cursor:pointer;
      font-size:12px;
      font-weight:700;
      color:var(--text);
    }
    .menu-pop button:hover{background:var(--hover);}
    .menu-sep{height:1px;background:var(--border);margin:6px 6px;}

    /* --- Help modal --- */
    #help-modal{position:fixed;inset:0;display:none;z-index:2100}
    #help-modal.show{display:block}
    #help-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.46);backdrop-filter:blur(2px)}
    #help-panel{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:min(720px,calc(100vw - 40px));max-height:calc(100vh - 80px);
      background:var(--panel);border:1px solid var(--border);border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;
    }
    #help-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--panel-2)}


    /* --- Used Layers HUD (bottom-right) --- */
    #used-layers-hud{
      position:fixed;
      right:calc(var(--paletteOffsetW) + 10px);
      bottom:calc(var(--bottomH) + 10px);
      background:#000;
      color:#e5e7eb;
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;
      padding:8px 10px;
      z-index:var(--z-hud);
      min-width:170px;
      max-width:260px;
      box-shadow:0 10px 26px rgba(0,0,0,.35);
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12px;
      line-height:1.25;
      pointer-events:none;
    }
    #used-layers-hud .title{
      color:#e5e7eb;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:10px;
      margin-bottom:6px;
      opacity:.95;
    }
    #used-layers-hud .row{display:flex;gap:8px;align-items:center;}
    #used-layers-hud .dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;}
    #used-layers-hud .name{color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}


    /* --- Dynamic Input HUD (AutoCAD-style) --- */
    #dyn-input{
      position: fixed;
      z-index:var(--z-hud);
      pointer-events: none;
      background: rgba(10,10,10,0.92);
      border: 1px solid #444;
      border-radius: 10px;
      padding: 6px 8px;
      display: flex;
      gap: 8px;
      align-items: center;
      box-shadow: 0 10px 26px rgba(0,0,0,0.55);
      font-size: 12px;
      color: #eaeaea;
      user-select: none;
      transform: translate(14px, 14px);
    }
    #dyn-input.hidden{ display:none; }
    #dyn-input .dyn-field{
      display:flex;
      align-items:center;
      gap:6px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      min-width: 74px;
      justify-content: space-between;
      font-variant-numeric: tabular-nums;
    }
    #dyn-input .dyn-lbl{
      opacity: 0.85;
      letter-spacing: 0.5px;
    }
    #dyn-input .dyn-val{
      font-weight: 700;
    }
    #dyn-input .dyn-field.active{
      border-color: rgba(0,255,204,0.55);
      box-shadow: 0 0 0 2px rgba(0,255,204,0.18) inset;
    }
    #dyn-input .dyn-field.typing .dyn-val{
      color: #00ffcc;
    }


/* --- Fillet Radius Modal (non-blocking) --- */
.ew-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:var(--z-modals-top);
}
.ew-modal.show{display:block;}
.ew-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.ew-modal__panel{
  position:absolute;
  left:50%; top:calc(var(--topH) + 40px);
  transform:translateX(-50%);
  width:min(420px, calc(100vw - 28px));
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px;
  color:var(--text);
}
.ew-modal__title{
  font-weight:900;
  letter-spacing:.02em;
  margin:2px 2px 10px;
  font-size:14px;
}
.ew-modal__row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:8px 2px;
}
.ew-modal__row label{
  font-weight:900;
  font-size:12px;
  color:var(--muted);
  width:70px;
}
.ew-modal__row input{
  flex:1;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 10px;
  font-weight:800;
  font-size:13px;
  outline:none;
}
.ew-modal__row input:focus{
  border-color:rgba(0,168,160,.6);
  box-shadow:0 0 0 3px rgba(0,168,160,.16);
}
.ew-modal__hint{
  margin:8px 2px 2px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.ew-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.ew-btn{
  height:32px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  background:var(--panel-2);
  color:var(--text);
}
.ew-btn:hover{border-color:var(--border-2); box-shadow:0 6px 16px rgba(0,0,0,.10);}
.ew-btn:active{transform:translateY(1px);}
.ew-btn--ghost{background:transparent;}
.ew-btn--primary{
  background:rgba(0,168,160,.10);
  border-color:rgba(0,168,160,.35);
  box-shadow:0 0 0 3px rgba(0,168,160,.10) inset;
}



/* --- Fillet radius presets --- */
.ew-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 2px 2px;
}
.ew-preset{
  height:30px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  background:var(--panel-2);
  color:var(--text);
  transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  user-select:none;
  white-space:nowrap;
}
.ew-preset:hover{border-color:var(--border-2); box-shadow:0 6px 16px rgba(0,0,0,.10)}
.ew-preset:active{transform:translateY(1px)}
.ew-preset--primary{
  background:rgba(0,168,160,.10);
  border-color:rgba(0,168,160,.35);
  box-shadow:0 0 0 3px rgba(0,168,160,.10) inset;
}


/* --- Right-click context menu --- */
#ctx-menu{
  position:fixed;
  min-width:220px;
  padding:8px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  display:none;
  z-index:var(--z-menus);
}
#ctx-menu.show{display:block;}
#ctx-menu .sec{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:8px 8px 6px;
  font-weight:900;
}
#ctx-menu button{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}
#ctx-menu button:hover{background:var(--hover);}
#ctx-menu button:disabled{opacity:.45;cursor:not-allowed;}
#ctx-menu .sep{height:1px;background:var(--border);margin:6px 6px;}



/* --- Loading Screen --- */
.loading-screen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(4px);
  z-index:4000;
}
.loading-screen.show{display:flex;}
.loading-screen.hide{opacity:0; pointer-events:none; transition:opacity .22s ease;}
.loading-card{
  width:min(420px, calc(100vw - 48px));
  padding:18px 18px 16px;
  border-radius:18px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 18px 70px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.loading-title{
  font-weight:900;
  letter-spacing:.03em;
  font-size:14px;
}
.loading-status{
  font-weight:800;
  font-size:12px;
  opacity:.8;
}
.loading-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:4px solid var(--border);
  border-top-color:rgba(0,168,160,.95);
  animation:ewSpin .8s linear infinite;
}
@keyframes ewSpin{to{transform:rotate(360deg);}}


/* UI fix: make Undo/Redo match toolbar text tone */
#btn-undo .tool-label,
#btn-redo .tool-label,
#btn-undo .tool-icon,
#btn-redo .tool-icon{
  color: var(--text) !important;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.hidden { display: none; }
.modal-panel {
  background: var(--panel-bg, #1e1e1e);
  color: var(--text, #fff);
  border-radius: 8px;
  padding: 16px;
  min-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.modal-panel h3 {
  margin-top: 0;
}
.modal-panel input {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}


/* Export filename modal helpers */
.ew-modal__body{margin-top:10px}
.ew-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.ew-label{display:block;font-weight:700;margin:8px 0 6px 0}
.ew-hint{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.35}


/* --- Auto Dims rules UI --- */
.prop-note{padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.35;}
.prop-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);font-size:12px;font-weight:800;color:var(--text);}
.prop-chip input{transform:scale(1.05)}

/* --- Loading screen visibility fixes (dark mode + before JS theme init) --- */
:root{
  --loadingOverlay: rgba(0,0,0,.38);
  --loadingSpinnerTrack: rgba(0,0,0,.18);
  --loadingSpinnerTop: rgba(0,168,160,.95);
}
@media (prefers-color-scheme: dark){
  :root{
    --loadingOverlay: rgba(0,0,0,.78);
    --loadingSpinnerTrack: rgba(255,255,255,.22);
  }
}
body[data-theme="dark"]{
  --loadingOverlay: rgba(0,0,0,.78);
  --loadingSpinnerTrack: rgba(255,255,255,.22);
}
body[data-theme="light"]{
  --loadingOverlay: rgba(0,0,0,.38);
  --loadingSpinnerTrack: rgba(0,0,0,.18);
}

/* Force overlay/spinner contrast regardless of cascade ordering */
#loading-screen.loading-screen{
  background: var(--loadingOverlay) !important;
}
#loading-screen .loading-spinner{
  border-color: var(--loadingSpinnerTrack) !important;
  border-top-color: var(--loadingSpinnerTop) !important;
}
#loading-screen .loading-title,
#loading-screen .loading-status{
  color: var(--text) !important;
}
body[data-theme="dark"] #loading-screen .loading-title,
body[data-theme="dark"] #loading-screen .loading-status{
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}



/* --- Export dialog legibility fixes (especially in dark mode) --- */
#export-panel,
#export-header,
#export-body,
#export-footer{
  color: var(--text);
}
#export-header .modal-title,
#export-panel .modal-title{
  color: var(--text);
  font-weight: 800;
}
.export-section-title{
  color: var(--text);
  font-weight: 800;
}
.export-check > span,
.export-radio > span,
.export-label{
  color: var(--text);
}
.export-note{
  color: var(--muted);
  opacity: 1;
}

/* Keep disabled options readable but clearly disabled */
.export-check.disabled,
.export-radio.disabled{
  opacity: .65;
}
.export-check.disabled > span,
.export-radio.disabled > span{
  color: var(--muted);
}

/* Dark mode: slightly lift internal cards for separation */
body[data-theme="dark"] .export-section{
  background: rgba(255,255,255,.06);
}