:root{
    --bg:#fafaff;
    --surface:rgba(255,255,255,.88);
    --surfaceSolid:#fff;
    --panel:#ffffff;
    --panel2:#f9f9ff;

    --text:#0f172a;
    --muted:rgba(15,23,42,.65);
    --border:rgba(15,23,42,.12);

    --accent:#2563eb;
    --accentSoft:rgba(37,99,235,.12);

    --danger:#b42318;
    --dangerSoft:rgba(180,35,24,.10);

    --radius:12px;
    --radiusSm:10px;

    --shadow:0 10px 30px rgba(2,6,23,.08);
    --shadowHover:0 14px 40px rgba(2,6,23,.12);

    --ease:cubic-bezier(.2,.8,.2,1);
    --tFast:120ms;
    --tMed:180ms;

    --uiFont:15px;
    --btnH:36px;
    --iconBtn:34px;
    --hdrPadY:10px;
    --hdrPadX:14px;
    --mainPad:10px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }

  body{
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:var(--uiFont);
    line-height:1.6;
    color:var(--text);
    overflow:hidden;

    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(37,99,235,0.10), transparent 55%),
      radial-gradient(900px 600px at 100% 0%, rgba(37,99,235,0.06), transparent 55%),
      var(--bg);

    user-select:none;
  }
  button,
  input,
  select,
  textarea{
    font-family:inherit;
  }

  a{ color:inherit; text-decoration:none; }
  a:hover{ color:var(--accent); }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:rgba(15,23,42,0.05); border-radius:999px; }
  ::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.18); border-radius:999px; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,0.26); }

  .app{
    height:100vh;
    display:flex;
    flex-direction:column;
    animation:appear var(--tMed) var(--ease) both;
  }
  .CodeMirror,
  #console,
  #console *{
    user-select:text;
  }
  @keyframes appear{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }

  header{
    position:sticky;
    top:0;
    z-index:48;
    background:var(--surface);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom:1px solid var(--border);
  }

  .isolationBanner{
    display:none;
    border-bottom:1px solid rgba(180,35,24,0.2);
    background:rgba(180,35,24,0.08);
  }
  .isolationBanner.show{
    display:block;
  }
  .isolationBannerInner{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px var(--hdrPadX);
    color:var(--danger);
  }
  .isolationBannerInner .material-icons{
    font-size:18px;
  }
  .isolationBannerText{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:13px;
  }
  .isolationBannerText code{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:12px;
    background:rgba(180,35,24,0.1);
    padding:0 4px;
    border-radius:6px;
  }

  .headerInner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:var(--hdrPadY) var(--hdrPadX);
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:220px;
    user-select:none;
  }
  .brand .material-icons{ font-size:18px; }

  .brandText{
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  .brandText h1{
    font-size:15.5px;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.2;
  }
  .brandText .sub{
    font-size:12px;
    color:var(--muted);
  }

  .toolbar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .toolBtn{
    height:var(--btnH);
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:var(--radiusSm);
    border:1px solid rgba(37,99,235,0.22);
    background:transparent;
    color:var(--accent);
    cursor:pointer;
    user-select:none;
    box-shadow:none;
    transition:
      background var(--tFast) var(--ease),
      box-shadow var(--tFast) var(--ease),
      border-color var(--tFast) var(--ease),
      max-width var(--tMed) var(--ease);
    padding:0 10px;
    white-space:nowrap;
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:var(--uiFont);
  }

  .toolBtn:hover{
    background:var(--accentSoft);
    box-shadow:none;
  }
  .toolBtn.active{
    background:var(--accentSoft);
    border-color:rgba(37,99,235,0.3);
  }

  .toolBtn .material-icons{
    font-size:18px;
    line-height:1;
  }

  .toolBtn.collapse{
    max-width:40px;
    padding:0 10px;
    overflow:hidden;
  }

  .toolBtn.collapse:focus-visible,
  .toolBtn.collapse:focus-within{
    max-width:180px;
  }

  @media (hover:hover) and (pointer:fine){
    .toolBtn.collapse:hover{ max-width:180px; }
  }

  .toolLabel{
    opacity:0;
    transform:translateX(-2px);
    transition:opacity var(--tFast) var(--ease), transform var(--tFast) var(--ease);
  }

  .toolBtn.collapse:focus-visible .toolLabel,
  .toolBtn.collapse:focus-within .toolLabel{
    opacity:1;
    transform:translateX(0);
  }

  @media (hover:hover) and (pointer:fine){
    .toolBtn.collapse:hover .toolLabel{
      opacity:1;
      transform:translateX(0);
    }
  }

  .hintPill{
    margin-left:auto;
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:11px;
    padding:2px 6px;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(15,23,42,0.04);
    color:rgba(15,23,42,0.70);
    opacity:0;
    transform:translateX(-2px);
    transition:opacity var(--tFast) var(--ease), transform var(--tFast) var(--ease);
  }

  .toolBtn.collapse:focus-visible .hintPill{
    opacity:1;
    transform:translateX(0);
  }

  @media (hover:hover) and (pointer:fine){
    .toolBtn.collapse:hover .hintPill{
      opacity:1;
      transform:translateX(0);
    }
  }

  .toolBtn.primary{
    background:var(--accent);
    border-color:rgba(37,99,235,0.28);
    color:#fff;
    box-shadow:none;
  }
  .toolBtn.primary:hover{
    box-shadow:none;
    background:#1f55cf;
  }

  .toolBtn.danger{
    color:var(--danger);
    border-color:rgba(180,35,24,0.22);
    background:rgba(180,35,24,0.04);
  }
  .toolBtn.danger:hover{
    box-shadow:none;
    background:var(--dangerSoft);
  }

  .toolBtn:disabled{
    opacity:0.55;
    cursor:not-allowed;
    box-shadow:none!important;
  }

  /* Split run group */
  .runGroup{
    display:inline-flex;
    align-items:center;
    gap:0;
    position:relative;
  }
  .runGroup #runBtn{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }
  .runGroup #runModeBtn{
    width:40px;
    justify-content:center;
    padding:0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left:1px solid rgba(255,255,255,0.18);
  }
  .runGroup.running #runModeBtn{
    display:none;
  }
  .runGroup.running #runBtn{
    border-radius:var(--radiusSm);
  }

  /* Run meta: keep ONLY shortcut pill */
  .runMeta{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .keyChip{
    font-family:"IBM Plex Mono";
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.28);
    background:transparent;
    color:rgba(255,255,255,0.92);
  }

  /* Menus */
  .menuWrap{ position:relative; }

  .menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:240px;
    background:rgba(255,255,255,0.99);
    border:1px solid rgba(15,23,42,0.12);
    border-radius:14px;
    box-shadow:0 30px 80px rgba(2,6,23,0.20);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    padding:8px;
    display:none;
    z-index:56;
  }
  #runMenu{
    box-shadow:none;
  }
  .menu.active{ display:block; animation:menuIn var(--tMed) var(--ease) both; }
  @keyframes menuIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }

  .menuItem{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid transparent;
    background:transparent;
    cursor:pointer;
    color:rgba(15,23,42,0.88);
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:var(--uiFont);
    transition:background var(--tFast) var(--ease);
  }
  .menuItem:hover{
    background:rgba(37,99,235,0.10);
  }
  .menuItem .material-icons{ font-size:18px; color:rgba(15,23,42,0.72); }
  .menuItem .miLabel{ flex:1; text-align:left; }
  .menuItem .miHint{
    font-family:"IBM Plex Mono";
    font-size:11px;
    padding:2px 6px;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(15,23,42,0.04);
    color:rgba(15,23,42,0.70);
  }

  /* Run menu alignment fix */
  #runMenu{
    min-width:270px;
  }
  #editorActionsMenu{
    min-width:230px;
  }

  #runMenu .menuItem{
    display:grid;
    grid-template-columns:22px 1fr auto;
    align-items:center;
    column-gap:12px;
  }

  #runMenu .menuItem .material-icons{
    width:22px;
    justify-self:center;
  }

  #runMenu .miLabel{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #runMenu .miHint{
    justify-self:end;
  }

  /* Right-side badges in run menu */
  #runMenu .miRight{
    display:inline-flex;
    align-items:center;
    gap:8px;
    justify-self:end;
  }

  /* Default badge stays only on Run All */
  #runMenu .defaultBadge{ display:none; }
  #runAllBtn .defaultBadge{ display:inline-flex; }

  /* Checkmark shows active mode */
  #runMenu .miCheck{
    display:none;
    font-size:18px;
    color:rgba(37,99,235,0.95);
  }
  #runMenu .menuItem.activeMode .miCheck{
    display:inline-block;
  }

  .menuItem.activeMode{
    background:rgba(37,99,235,0.12);
    border-color:rgba(37,99,235,0.20);
  }

  main{
    flex:1;
    min-height:0;
    display:flex;
    overflow:hidden;
    padding:var(--mainPad);
  }

  .split{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .split.horizontal{
    flex-direction:row;
  }
  .split.horizontal .pane{
    min-width:0;
  }
  .editorPane{
    position:relative;
  }
  .workspaceLayout{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    gap:8px;
  }
  .workspacePane{
    width:248px;
    flex:none;
    max-width:420px;
    background:linear-gradient(180deg, rgba(244,247,251,0.94), rgba(247,249,252,0.88));
  }
  .workspacePaneHeader{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 12px 10px;
    border-bottom:1px solid rgba(15,23,42,0.08);
  }
  .workspacePaneHeaderTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .workspacePaneTitle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-width:0;
    font-size:12px;
    font-weight:600;
    color:rgba(15,23,42,0.74);
    letter-spacing:0.01em;
    text-transform:uppercase;
  }
  .workspacePaneTitle span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .workspacePaneTitle .material-icons{
    font-size:16px;
  }
  .workspacePaneHeaderTop .iconBtn{
    width:30px;
    height:30px;
    border-radius:9px;
    flex:none;
  }
  .workspacePaneHeaderTop .iconBtn .material-icons{
    font-size:16px;
  }
  .workspaceActions{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
  }
  .workspaceActions .iconBtn{
    width:100%;
    min-width:0;
    height:32px;
    border-radius:10px;
  }
  .workspaceActions .iconBtn .material-icons{
    font-size:16px;
  }
  .workspaceEmpty{
    padding:14px 12px;
    font-size:12px;
    color:rgba(15,23,42,0.52);
  }
  .workspaceList{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:10px 8px 12px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  #workspaceMeta{
    padding:0 12px 12px;
    margin-left:0;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:rgba(15,23,42,0.46);
  }
  .workspaceFolder,
  .workspaceFile{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 11px 0 calc(11px + (var(--workspace-depth, 0) * 14px));
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.04);
    font-size:12.5px;
    color:rgba(15,23,42,0.74);
  }
  .workspaceFolder{
    background:transparent;
    text-align:left;
    cursor:pointer;
    font-weight:600;
    color:rgba(15,23,42,0.62);
    transition:
      background var(--tFast) var(--ease),
      border-color var(--tFast) var(--ease),
      color var(--tFast) var(--ease);
  }
  .workspaceFolder:hover{
    background:rgba(15,23,42,0.045);
    border-color:rgba(15,23,42,0.08);
  }
  .workspaceFolder .material-icons,
  .workspaceFile .material-icons{
    font-size:16px;
    flex:none;
  }
  .workspaceFolderChevron{
    opacity:0.72;
  }
  .workspaceFolder.collapsed .workspaceFolderChevron{
    opacity:0.9;
  }
  .workspaceFile{
    background:transparent;
    text-align:left;
    cursor:pointer;
    transition:
      background var(--tFast) var(--ease),
      border-color var(--tFast) var(--ease),
      color var(--tFast) var(--ease);
  }
  .workspaceFile:hover{
    background:rgba(15,23,42,0.055);
    border-color:rgba(15,23,42,0.08);
  }
  .workspaceFile.active{
    background:linear-gradient(to right, rgba(37,99,235,0.13), rgba(37,99,235,0.08));
    border-color:rgba(37,99,235,0.22);
    box-shadow:inset 3px 0 0 rgba(37,99,235,0.78);
    color:var(--accent);
  }
  .workspaceFile.renaming{
    cursor:default;
  }
  .workspaceLabel{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .workspaceRenameInput{
    flex:1 1 auto;
    min-width:0;
    height:26px;
    border:1px solid rgba(37,99,235,0.32);
    border-radius:8px;
    background:rgba(255,255,255,0.94);
    color:rgba(15,23,42,0.9);
    font-family:"IBM Plex Mono";
    font-size:12px;
    padding:0 8px;
  }
  .workspaceRenameInput:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(37,99,235,0.18);
  }
  .workspaceMeta{
    margin-left:auto;
    font-size:11px;
    color:rgba(15,23,42,0.48);
    flex:none;
  }
  .editorSurface{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  #splitPane{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
  }
  .workspacePane[hidden],
  .workspaceResizer[hidden],
  html[data-workspace-sidebar="off"] .workspacePane,
  html[data-workspace-sidebar="off"] .workspaceResizer{
    display:none !important;
  }
  html[data-workspace-feature="off"] #workspaceToggleBtn{
    display:none !important;
  }

  .pane{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .paneHeader{
    padding:6px 10px;
    background:linear-gradient(to bottom, var(--panel2), rgba(255,255,255,0.80));
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .paneLeft{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
  }

  .paneTitle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:-0.01em;
    color:rgba(15,23,42,0.82);
    white-space:nowrap;
  }

  .dot{
    width:8px;height:8px;border-radius:999px;
    background:rgba(15,23,42,0.20);
  }

  .paneMeta{
    font-family:"IBM Plex Mono";
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:52vw;
  }

  .tabBar{
    min-width:0;
    flex:1 1 auto;
  }
  .tabStrip{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 6px 4px;
    scrollbar-width:thin;
  }
  .tabItem{
    position:relative;
    flex:0 0 auto;
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(15,23,42,0.05);
    border-radius:10px;
    padding:0 2px 0 4px;
    transition:
      background var(--tFast) var(--ease),
      border-color var(--tFast) var(--ease),
      transform var(--tFast) var(--ease);
    cursor:grab;
  }
  .tabItem::before,
  .tabItem::after{
    content:"";
    position:absolute;
    top:5px;
    bottom:5px;
    width:3px;
    border-radius:999px;
    background:rgba(37,99,235,0.95);
    opacity:0;
    pointer-events:none;
    transform:scaleY(0.7);
    transition:opacity var(--tFast) var(--ease), transform var(--tFast) var(--ease);
  }
  .tabItem::before{
    left:-6px;
  }
  .tabItem::after{
    right:-6px;
  }
  .tabItem.dragging{
    opacity:0.52;
    transform:scale(0.985);
    cursor:grabbing;
  }
  .tabItem.dropBefore{
    z-index:1;
  }
  .tabItem.dropAfter{
    z-index:1;
  }
  .tabItem.dropBefore::before,
  .tabItem.dropAfter::after{
    opacity:1;
    transform:scaleY(1);
  }
  .tabItem.active{
    border-color:rgba(37,99,235,0.34);
    background:rgba(37,99,235,0.12);
  }
  .tabItem.renaming{
    border-color:rgba(37,99,235,0.4);
    background:rgba(37,99,235,0.12);
    cursor:default;
  }
  .tabSelect{
    min-width:0;
    max-width:220px;
    height:28px;
    border:none;
    background:transparent;
    color:rgba(15,23,42,0.86);
    font-family:"IBM Plex Mono";
    font-size:12px;
    padding:0 6px;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .tabFileIcon{
    font-size:15px;
    opacity:0.78;
  }
  .tabItem.active .tabSelect{
    color:var(--accent);
  }
  .tabName{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .tabDirtyDot{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(245,158,11,0.85);
    flex:none;
  }
  .tabDirtyDot.hidden{
    display:none;
  }
  .tabRenameInput{
    width:180px;
    max-width:220px;
    height:28px;
    border:1px solid rgba(37,99,235,0.35);
    border-radius:8px;
    background:rgba(255,255,255,0.92);
    color:rgba(15,23,42,0.9);
    font-family:"IBM Plex Mono";
    font-size:12px;
    padding:0 8px;
  }
  .tabRenameInput:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(37,99,235,0.18);
  }
  .tabClose{
    width:24px;
    height:24px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:rgba(15,23,42,0.58);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background var(--tFast) var(--ease), color var(--tFast) var(--ease);
  }
  .tabClose:hover{
    background:rgba(15,23,42,0.12);
    color:rgba(15,23,42,0.86);
  }
  .tabClose .material-icons{
    font-size:15px;
    line-height:1;
  }
  .tabAddBtn{
    width:28px !important;
    height:28px !important;
    border-radius:9px;
    flex:none;
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(15,23,42,0.04);
    color:rgba(15,23,42,0.72);
  }
  .tabAddBtn:hover{
    background:rgba(15,23,42,0.12);
    color:rgba(15,23,42,0.9);
  }
  .tabAddBtn .material-icons{
    font-size:17px;
  }

  .paneActions{
    display:flex;
    align-items:center;
    gap:6px;
    flex:none;
  }
  .paneActions .iconBtn{
    width:30px;
    height:30px;
    border-radius:9px;
  }
  .paneActions .iconBtn .material-icons{
    font-size:17px;
  }

  .iconBtn{
    width:var(--iconBtn);
    height:var(--iconBtn);
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(15,23,42,0.03);
    color:rgba(15,23,42,0.72);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background var(--tFast) var(--ease);
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:var(--uiFont);
  }
  .iconBtn:hover{ background:rgba(37,99,235,0.10); }

  .iconBtn.danger{
    border-color:rgba(180,35,24,0.18);
    background:rgba(180,35,24,0.06);
    color:var(--danger);
  }
  .iconBtn.danger:hover{ background:var(--dangerSoft); }

  .iconBtn.undo{
    border-color:rgba(37,99,235,0.22);
    background:rgba(37,99,235,0.08);
    color:var(--accent);
  }
  .iconBtn.undo:hover{ background:rgba(37,99,235,0.14); }
  .iconBtn.active{
    border-color:rgba(37,99,235,0.28);
    background:rgba(37,99,235,0.14);
    color:var(--accent);
  }
  .findBar{
    display:none;
    flex-direction:column;
    gap:8px;
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(to bottom, var(--panel2), rgba(255,255,255,0.82));
  }
  .filePreviewPane{
    border-bottom:1px solid rgba(15,23,42,0.08);
    background:linear-gradient(to bottom, rgba(248,250,252,0.92), rgba(245,247,250,0.86));
    padding:12px;
    overflow:auto;
  }
  .filePreviewHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .filePreviewTitle{
    font-size:13px;
    font-weight:600;
    color:rgba(15,23,42,0.78);
  }
  .filePreviewMeta{
    font-size:12px;
    color:rgba(15,23,42,0.56);
  }
  .workspacePreviewCard{
    display:flex;
    flex-direction:column;
    gap:12px;
    border:1px solid rgba(15,23,42,0.08);
    border-radius:16px;
    background:linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
    box-shadow:0 10px 24px rgba(15,23,42,0.05);
    padding:14px;
  }
  .workspacePreviewTitle{
    font-size:13px;
    font-weight:600;
    color:rgba(15,23,42,0.78);
  }
  .workspacePreviewMeta,
  .workspacePreviewNote{
    font-size:12px;
    color:rgba(15,23,42,0.58);
    line-height:1.5;
  }
  .workspacePreviewCode{
    margin:0;
    max-height:320px;
    overflow:auto;
    border-radius:10px;
    padding:12px;
    background:rgba(15,23,42,0.045);
    font-family:"IBM Plex Mono";
    font-size:12px;
    line-height:1.55;
    color:rgba(15,23,42,0.82);
  }
  .workspacePreviewCodeWrap{
    white-space:pre-wrap;
    word-break:break-word;
  }
  .workspaceJsonTree{
    border:1px solid rgba(15,23,42,0.08);
    border-radius:12px;
    background:rgba(255,255,255,0.9);
    overflow:auto;
    max-height:340px;
    padding:6px;
  }
  .workspaceJsonNode{
    font-family:"IBM Plex Mono";
    font-size:12px;
    line-height:1.6;
    color:rgba(15,23,42,0.84);
  }
  .workspaceJsonNode summary{
    list-style:none;
  }
  .workspaceJsonNode summary::-webkit-details-marker{
    display:none;
  }
  .workspaceJsonSummary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:28px;
    padding:0 10px;
    border-radius:9px;
    background:rgba(15,23,42,0.045);
    cursor:pointer;
    user-select:none;
  }
  .workspaceJsonSummary:hover{
    background:rgba(15,23,42,0.07);
  }
  .workspaceJsonType{
    font-weight:600;
    color:rgba(15,23,42,0.82);
  }
  .workspaceJsonMeta{
    font-size:11px;
    color:rgba(15,23,42,0.52);
  }
  .workspaceJsonChildren{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:8px 0 0 12px;
    padding-left:12px;
    border-left:1px solid rgba(15,23,42,0.08);
  }
  .workspaceJsonRow{
    display:grid;
    grid-template-columns:minmax(72px, auto) minmax(0, 1fr);
    gap:10px;
    align-items:flex-start;
  }
  .workspaceJsonKey{
    color:rgba(37,99,235,0.92);
    word-break:break-word;
  }
  .workspaceJsonValue{
    min-width:0;
    word-break:break-word;
  }
  .workspaceJsonScalar.string{
    color:rgba(5,150,105,0.94);
  }
  .workspaceJsonScalar.number{
    color:rgba(180,83,9,0.95);
  }
  .workspaceJsonScalar.boolean,
  .workspaceJsonScalar.null{
    color:rgba(124,58,237,0.92);
  }
  .workspaceJsonEmpty{
    color:rgba(15,23,42,0.52);
  }
  .workspacePreviewTableWrap{
    overflow:auto;
    border:1px solid rgba(15,23,42,0.08);
    border-radius:10px;
    background:#fff;
  }
  .workspacePreviewTable{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
  }
  .workspacePreviewTable th,
  .workspacePreviewTable td{
    border-bottom:1px solid rgba(15,23,42,0.08);
    padding:8px 10px;
    text-align:left;
    white-space:nowrap;
  }
  .workspacePreviewTable th{
    background:rgba(15,23,42,0.04);
    font-weight:600;
  }
  .workspacePreviewImage{
    max-width:100%;
    max-height:420px;
    object-fit:contain;
    border-radius:12px;
    border:1px solid rgba(15,23,42,0.08);
    background:
      linear-gradient(45deg, rgba(15,23,42,0.04) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(15,23,42,0.04) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(15,23,42,0.04) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(15,23,42,0.04) 75%);
    background-size:16px 16px;
    background-position:0 0, 0 8px, 8px -8px, -8px 0;
    padding:10px;
  }
  .findBar.active{
    display:flex;
  }
  .findBar:not(.replaceMode) .replaceRow{
    display:none;
  }
  .findRow{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .findRow .material-icons{
    font-size:16px;
    color:rgba(15,23,42,0.58);
  }
  .findField{
    flex:1 1 auto;
    min-width:0;
    height:30px;
    border-radius:9px;
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(255,255,255,0.86);
    color:var(--text);
    padding:0 10px;
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:13px;
  }
  .findField:focus{
    outline:none;
    border-color:rgba(37,99,235,0.45);
    box-shadow:0 0 0 2px rgba(37,99,235,0.14);
  }
  .findCount{
    min-width:56px;
    text-align:center;
    font-family:"IBM Plex Mono";
    font-size:11.5px;
    color:rgba(15,23,42,0.65);
  }
  .findBar .toolBtn{
    height:30px;
    padding:0 10px;
    border-radius:var(--radiusSm);
    font-size:12px;
  }
  .findModeBtn[aria-pressed="true"]{
    background:var(--accentSoft);
    border-color:rgba(37,99,235,0.3);
  }
  #replaceAllBtn{
    border-color:rgba(180,35,24,0.28);
    background:rgba(180,35,24,0.10);
    color:var(--danger);
  }
  #replaceAllBtn:hover{
    background:rgba(180,35,24,0.16);
    border-color:rgba(180,35,24,0.36);
  }
  .findIconBtn{
    width:30px;
    height:30px;
    border-radius:var(--radiusSm);
  }
  .findOpts{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .findOptBtn{
    height:30px;
    padding:0 10px;
    border-radius:var(--radiusSm);
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(15,23,42,0.06);
    color:rgba(15,23,42,0.72);
    cursor:pointer;
    transition:
      background var(--tFast) var(--ease),
      border-color var(--tFast) var(--ease),
      color var(--tFast) var(--ease);
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:12px;
  }
  .findOptBtn:hover{
    background:rgba(15,23,42,0.1);
  }
  .findOptBtn[aria-pressed="true"]{
    border-color:rgba(37,99,235,0.35);
    background:rgba(37,99,235,0.16);
    color:var(--accent);
  }
  .findStatus{
    margin-left:auto;
    font-size:12px;
    color:rgba(15,23,42,0.58);
  }
  .findStatus.error{
    color:var(--danger);
  }

  .split:not(.horizontal) .editorPane{ height:58%; }
  .split.horizontal .editorPane{
    width:58%;
    height:auto;
    flex:0 0 auto;
  }
  .split.horizontal .consolePane{
    flex:1 1 0;
    min-width:0;
  }
  .consolePane{ flex:1; }

  .resizer{
    height:6px;
    border-radius:999px;
    cursor:row-resize;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
  }
  .resizer::before{
    content:"";
    width:68px;
    height:3px;
    border-radius:999px;
    background:rgba(15,23,42,0.16);
    transition:background var(--tFast) var(--ease);
  }
  .resizer:hover::before{ background:rgba(15,23,42,0.26); }
  .split.horizontal .resizer{
    width:6px;
    height:auto;
    cursor:col-resize;
  }
  .split.horizontal .resizer::before{
    width:3px;
    height:68px;
  }
  .workspaceResizer{
    width:6px;
    height:auto;
    cursor:col-resize;
    flex:none;
    align-self:stretch;
  }
  .workspaceResizer::before{
    width:3px;
    height:68px;
  }

  .CodeMirror,
  .CodeMirror pre,
  .CodeMirror-code{
    font-family:"IBM Plex Mono" !important;
  }
  .CodeMirror{
    height:100%;
    font-size:14px;
    line-height:1.56;
    background:#fff;
  }
  .editorPane.previewOnly .findBar,
  .editorPane.previewOnly .CodeMirror{
    display:none;
  }
  .editorPane.previewOnly .filePreviewPane{
    flex:1 1 auto;
    border-bottom:none;
  }
  .editorPane.dataPreviewVisible .filePreviewPane{
    display:block;
  }
  .editorStatus{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:6;
    pointer-events:none;
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(255,255,255,0.82);
    box-shadow:0 8px 22px rgba(15,23,42,0.08);
    backdrop-filter:blur(10px) saturate(1.06);
    -webkit-backdrop-filter:blur(10px) saturate(1.06);
    font-family:"IBM Plex Mono";
    font-size:11.5px;
    color:rgba(15,23,42,0.62);
    white-space:nowrap;
  }
  .CodeMirror-activeline-background{
    background:rgba(148,163,184,0.10);
    box-shadow:inset 2px 0 0 rgba(37,99,235,0.10);
  }
  html[data-active-line="off"] .CodeMirror-activeline-background{
    background:transparent !important;
    box-shadow:none !important;
  }
  .cm-searching-active{
    background:rgba(37,99,235,0.24);
    outline:1px solid rgba(37,99,235,0.6);
  }
  .CodeMirror-gutters{
    background:#fbfbfe;
    border-right:1px solid rgba(15,23,42,0.08);
  }
  .CodeMirror-linenumber{ color:rgba(15,23,42,0.42); }

  #console{
    flex:1;
    padding:10px;
    overflow:auto;
    background:#fff;
    font-family:"IBM Plex Mono";
    font-size:13.5px;
    line-height:1.55;
  }
  .consoleBody{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .varsPane{
    border-top:1px solid var(--border);
    background:var(--panel2);
    display:flex;
    flex-direction:column;
    max-height:220px;
    transition:max-height var(--tMed) var(--ease);
    overflow:hidden;
  }
  .varsPane.collapsed{
    max-height:0;
    border-top:none;
  }
  .varsHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 10px;
    font-size:12px;
    color:rgba(15,23,42,0.7);
    border-bottom:1px solid rgba(15,23,42,0.08);
  }
  .varsTitle{
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .varsMeta{
    font-family:"IBM Plex Mono";
    color:rgba(15,23,42,0.6);
  }
  .varsList{
    padding:8px 10px 10px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:"IBM Plex Mono";
    font-size:12px;
    line-height:1.45;
  }
  .varsRow{
    display:grid;
    grid-template-columns:minmax(90px, 160px) minmax(80px, 120px) 1fr;
    gap:8px;
    align-items:baseline;
  }
  .varsName{
    color:rgba(15,23,42,0.88);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .varsType{
    color:rgba(15,23,42,0.6);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .varsValue{
    color:rgba(15,23,42,0.78);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .varsEmpty{
    color:rgba(15,23,42,0.55);
    padding:4px 0;
  }
  .consoleLine{
    margin-bottom:6px;
    white-space:pre-wrap;
    word-break:break-word;
    color:rgba(15,23,42,0.88);
  }
  .consoleLine.input{
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 0;
  }
  .consoleLine.input .prefix{
    color:rgba(37,99,235,0.85);
  }
  .consolePrompt{
    color:rgba(15,23,42,0.72);
    white-space:pre-wrap;
    max-width:60%;
  }
  .consoleInput{
    flex:1 1 auto;
    min-width:180px;
    font-family:"IBM Plex Mono";
    font-size:13.5px;
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(15,23,42,0.04);
    color:rgba(15,23,42,0.9);
  }
  .consoleInput:focus{
    outline:none;
    border-color:rgba(37,99,235,0.55);
    box-shadow:0 0 0 2px rgba(37,99,235,0.14);
    background:#fff;
  }
  .consoleEcho{
    color:rgba(37,99,235,0.9);
    padding:2px 0;
  }
  .prefix{
    color:rgba(15,23,42,0.62);
    user-select:none;
    margin-right:6px;
  }
  .consoleLine.system .prefix{
    color:rgba(15,23,42,0.62);
  }
  .consoleLine.input .prefix{
    color:rgba(37,99,235,0.65);
  }
  .err{ color:var(--danger); }
  .dim{ color:rgba(15,23,42,0.62); }

  .toastViewport{
    --toast-edge-gap:14px;
    --toast-stack-gap:7px;
    position:fixed;
    right:var(--toast-edge-gap);
    top:74px;
    z-index:34;
    width:min(296px, calc(100vw - (var(--toast-edge-gap) * 2)));
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--toast-stack-gap);
    pointer-events:none;
  }
  .toast{
    position:relative;
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:24px minmax(0, 1fr);
    align-items:flex-start;
    gap:9px;
    padding:8px 9px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(255,255,255,0.92);
    box-shadow:0 18px 50px rgba(2,6,23,0.22);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
  }
  .toastIcon{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(37,99,235,0.1);
    color:var(--accent);
    align-self:flex-start;
    flex:none;
  }
  .toast[hidden]{
    display:none !important;
  }
  .toast.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .toast .material-icons{
    font-size:15px;
    color:inherit;
    margin-top:0;
  }
  .toastText{
    display:flex;
    flex-direction:column;
    gap:3px;
    flex:1 1 auto;
    min-width:0;
  }
  .toastTitle{
    font-size:13.25px;
    font-weight:600;
    color:rgba(15,23,42,0.88);
    letter-spacing:-0.01em;
  }
  .toastDesc{
    font-size:12.25px;
    color:rgba(15,23,42,0.65);
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .toastActions{
    margin-top:3px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .toastActions[hidden]{
    display:none !important;
  }
  .toastAction{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:24px;
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(37,99,235,0.32);
    background:rgba(37,99,235,0.08);
    color:var(--accent);
    font-size:11.75px;
    font-weight:600;
    cursor:pointer;
    transition:background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
  }
  .toastAction[hidden]{
    display:none !important;
  }
  .toastAction:hover{
    background:rgba(37,99,235,0.16);
    border-color:rgba(37,99,235,0.4);
  }
  .toastAction .material-icons{
    font-size:15px;
    margin-top:0;
  }
  @media (max-width:760px){
    .toastViewport{
      --toast-edge-gap:9px;
      --toast-stack-gap:7px;
      right:var(--toast-edge-gap);
      left:var(--toast-edge-gap);
      width:auto;
      top:64px;
    }
  }

  .overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.24);
    display:none;
    z-index:60;
    padding:16px;
    overflow:auto;
  }
  .overlay.active{
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter: blur(1.5px) saturate(1.03);
    -webkit-backdrop-filter: blur(1.5px) saturate(1.03);
  }
  .loadingOverlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(250,250,255,0.65);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    z-index:80;
    transition:opacity var(--tMed) var(--ease), visibility var(--tMed) var(--ease);
  }
  .loadingOverlay.hidden{
    opacity:0;
    visibility:hidden;
  }
  .loadingCard{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(255,255,255,0.86);
    box-shadow:0 16px 40px rgba(2,6,23,0.16);
  }
  .loadingSpinner{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid rgba(37,99,235,0.18);
    border-top-color:var(--accent);
    animation:spin 0.9s linear infinite;
  }
  .loadingText{
    font-size:13.5px;
    color:rgba(15,23,42,0.78);
    letter-spacing:-0.01em;
  }
  @keyframes spin{
    from{ transform:rotate(0); }
    to{ transform:rotate(360deg); }
  }

  .modal{
    width:min(820px, 96vw);
    background:rgba(255,255,255,0.92);
    border:1px solid rgba(255,255,255,0.45);
    border-radius:16px;
    box-shadow:0 30px 80px rgba(2,6,23,0.28);
    padding:16px;
    overflow:visible;
    animation:modalIn var(--tMed) var(--ease) both;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
  }
  .modalLicense{
    width:min(760px, 96vw);
    max-height:calc(100vh - 120px);
    display:flex;
    flex-direction:column;
  }
  .licenseText{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:12.5px;
    line-height:1.55;
    color:rgba(15,23,42,0.78);
    white-space:pre-wrap;
    background:rgba(15,23,42,0.03);
    border:1px solid rgba(15,23,42,0.10);
    border-radius:12px;
    padding:12px;
    max-height:420px;
    overflow:auto;
  }
  .linkBtn{
    appearance:none;
    border:none;
    background:none;
    padding:0;
    color:var(--accent);
    font-weight:inherit;
    cursor:pointer;
    text-decoration:underline;
  }
  .linkBtn:hover{
    text-decoration:underline;
  }
  .modalAbout{
    width:min(640px, 92vw);
  }
  .modalWorkspaceUpload{
    width:min(520px, 92vw);
  }
  @keyframes modalIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .modal h2{
    font-size:16px;
    font-weight:600;
    letter-spacing:-0.015em;
    margin-bottom:6px;
  }
  .versionTag{
    display:inline-flex;
    align-items:center;
    margin-left:8px;
    padding:2px 6px;
    font-size:11px;
    font-weight:600;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.14);
    background:rgba(15,23,42,0.06);
    color:rgba(15,23,42,0.72);
    vertical-align:middle;
  }
  .modal p{
    font-size:14px;
    color:rgba(15,23,42,0.82);
    margin-bottom:10px;
    line-height:1.6;
  }
  .aboutMeta{
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(15,23,42,0.04);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:12px;
  }
  .aboutMetaRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12.5px;
    color:rgba(15,23,42,0.74);
    padding:4px 0;
  }
  .aboutMetaLabel{
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:10.5px;
    color:rgba(15,23,42,0.52);
  }
  .aboutMetaValue{
    font-weight:600;
    color:rgba(15,23,42,0.88);
  }
  .aboutMetaCode{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight:500;
    font-size:11.5px;
  }
  .modalSettings{
    width:min(680px, 94vw);
    max-height:calc(100vh - 120px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modalShortcuts{
    width:min(640px, 94vw);
  }
  .modalSettings .settingsCardTitle{
    letter-spacing:0.08em;
  }
  .modalHistory{
    width:min(920px, 96vw);
    max-height:calc(100vh - 120px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .historyGrid{
    --historyPanelHeight:clamp(280px, 48vh, 420px);
    display:grid;
    grid-template-columns:minmax(220px, 1fr) 2fr;
    gap:12px;
    margin-top:8px;
    align-items:stretch;
  }
  .historyList{
    border:1px solid rgba(15,23,42,0.10);
    border-radius:12px;
    background:rgba(15,23,42,0.02);
    padding:8px;
    height:var(--historyPanelHeight);
    min-height:0;
    overflow:auto;
  }
  .historyEmpty{
    font-size:13px;
    color:rgba(15,23,42,0.55);
    padding:8px;
  }
  .historyItem{
    width:100%;
    text-align:left;
    border:1px solid rgba(15,23,42,0.10);
    border-radius:10px;
    padding:8px 10px;
    background:rgba(255,255,255,0.7);
    display:flex;
    flex-direction:column;
    gap:4px;
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    transition:transform var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
  }
  .historyItem + .historyItem{
    margin-top:8px;
  }
  .historyItem:hover{
    transform:translateY(-1px);
    border-color:rgba(37,99,235,0.25);
  }
  .historyItem.active{
    border-color:rgba(37,99,235,0.55);
    background:rgba(37,99,235,0.08);
  }
  .historyItemTitle{
    font-size:13px;
    font-weight:600;
    color:rgba(15,23,42,0.86);
  }
  .historyItemMeta{
    font-size:12px;
    color:rgba(15,23,42,0.6);
  }
  .historyPreview{
    border:1px solid rgba(15,23,42,0.10);
    border-radius:12px;
    background:rgba(255,255,255,0.7);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:var(--historyPanelHeight);
    min-height:0;
  }
  .historyPreviewTitle{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(15,23,42,0.55);
    padding:8px 10px 0;
  }
  .historyDiff{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:12px;
    line-height:1.5;
    padding:8px 10px 10px;
    overflow:auto;
    flex:1 1 auto;
    min-height:0;
  }
  .diffLine{
    display:flex;
    gap:8px;
    white-space:pre;
  }
  .diffPrefix{
    width:12px;
    opacity:0.6;
  }
  .diffLine.add{
    background:rgba(16,185,129,0.10);
  }
  .diffLine.remove{
    background:rgba(239,68,68,0.10);
  }
  .diffLine.equal{
    background:transparent;
  }
  .diffEmpty{
    font-size:13px;
    color:rgba(15,23,42,0.6);
  }
  @media (max-width:760px){
    .historyGrid{
      --historyPanelHeight:220px;
      grid-template-columns:1fr;
    }
    .historyList,
    .historyPreview{
      height:var(--historyPanelHeight);
    }
  }
  .warnBlock{
    display:flex;
    align-items:flex-start;
    gap:12px;
    border:1px solid rgba(180,35,24,0.20);
    background:rgba(180,35,24,0.06);
    border-radius:12px;
    padding:12px;
    margin-bottom:12px;
  }
  .warnBlock .material-icons{
    color:var(--danger);
    font-size:22px;
    margin-top:2px;
  }
  #shareWarnOverlay h2{
    font-size:16px;
    font-weight:600;
    margin-bottom:4px;
  }
  .warnTitle{
    font-size:13.5px;
    font-weight:600;
    color:var(--danger);
    margin-bottom:2px;
  }
  .warnText{
    font-size:13.5px;
    color:rgba(15,23,42,0.86);
  }
  .warnHint{
    font-size:12.5px;
    color:rgba(15,23,42,0.62);
    margin-top:6px;
  }
  .workspaceUploadChoices{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:14px;
  }
  .workspaceUploadChoice{
    width:100%;
    min-height:118px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:14px;
    box-sizing:border-box;
    border-radius:14px;
    border:1px solid rgba(37,99,235,0.18);
    background:rgba(37,99,235,0.04);
    color:rgba(15,23,42,0.84);
    cursor:pointer;
    text-align:left;
    line-height:1.35;
    transition:
      border-color var(--tFast) var(--ease),
      background var(--tFast) var(--ease),
      transform var(--tFast) var(--ease);
  }
  .workspaceUploadChoice:hover{
    border-color:rgba(37,99,235,0.34);
    background:rgba(37,99,235,0.08);
    transform:translateY(-1px);
  }
  .workspaceUploadChoice .material-icons{
    flex:none;
    font-size:22px;
    color:var(--accent);
    line-height:1;
  }
  .workspaceUploadChoiceText{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .workspaceUploadChoiceText strong{
    font-size:13px;
    font-weight:600;
    color:rgba(15,23,42,0.9);
  }
  .workspaceUploadChoiceText span{
    font-size:12.5px;
    line-height:1.5;
    color:rgba(15,23,42,0.62);
  }
  .settingsHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
    flex:0 0 auto;
  }
  .settingsIntro{
    font-size:13px;
    color:rgba(15,23,42,0.68);
    margin:0 0 10px;
  }
  .settingsGrid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow:auto;
    min-height:0;
    padding-right:4px;
  }
  .settingsCard{
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(15,23,42,0.03);
    border-radius:12px;
    padding:12px;
  }
  .settingsCard.primary{
    border-color:rgba(37,99,235,0.18);
    background:rgba(37,99,235,0.06);
  }
  .settingsCard.muted{
    background:rgba(15,23,42,0.02);
  }
  .settingsCardTitle{
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(15,23,42,0.62);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .settingsCardTitle .material-icons{
    font-size:15px;
    color:rgba(15,23,42,0.6);
  }
  .settingsSection{
    padding-top:8px;
    margin-top:8px;
    border-top:1px solid rgba(15,23,42,0.08);
  }
  .settingsSection:first-of-type{
    padding-top:0;
    margin-top:0;
    border-top:none;
  }
  .settingsSectionTitle{
    font-size:12px;
    font-weight:600;
    color:rgba(15,23,42,0.80);
    margin-bottom:6px;
  }
  .settingsRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .settingsSection .settingsNote + .settingsRow{
    margin-top:10px;
  }
  .settingsLabel{
    font-size:13.5px;
    color:rgba(15,23,42,0.82);
    flex:1 1 200px;
    min-width:0;
  }
  .settingsControl{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .checkGroup{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .checkGroup.segmented{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0;
    padding:3px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(15,23,42,0.04);
    min-width:260px;
  }
  .segmentedSlider{
    position:absolute;
    top:3px;
    bottom:3px;
    left:3px;
    width:calc((100% - 6px) / 3);
    border-radius:9px;
    background:var(--accent);
    box-shadow:0 6px 16px rgba(15,23,42,0.22);
    transition:transform var(--tMed) var(--ease), background var(--tFast) var(--ease);
    z-index:0;
  }
  .checkGroup.segmented .checkPill{
    display:flex;
  }
  .checkGroup.segmented .checkPill span{
    width:100%;
    justify-content:center;
    border:none;
    background:transparent;
    padding:6px 8px;
    color:rgba(15,23,42,0.78);
    position:relative;
    z-index:1;
  }
  .checkGroup.segmented .checkPill span::before{
    display:none;
  }
  .checkGroup.segmented input:checked + span{
    color:#fff;
  }
  .checkGroup.segmented[data-choice="system"] .segmentedSlider{
    transform:translateX(0%);
  }
  .checkGroup.segmented[data-choice="light"] .segmentedSlider{
    transform:translateX(100%);
  }
  .checkGroup.segmented[data-choice="dark"] .segmentedSlider{
    transform:translateX(200%);
  }
  .checkPill{
    position:relative;
    display:inline-flex;
    align-items:center;
  }
  .checkPill input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .checkPill span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(255,255,255,0.92);
    color:rgba(15,23,42,0.82);
    font-size:13px;
    cursor:pointer;
    user-select:none;
    transition:background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
  }
  .checkPill span::before{
    content:"";
    width:12px;
    height:12px;
    border-radius:4px;
    border:1px solid rgba(15,23,42,0.28);
    background:rgba(15,23,42,0.04);
  }
  .checkPill input:checked + span{
    border-color:rgba(37,99,235,0.4);
    background:rgba(37,99,235,0.10);
    color:var(--accent);
  }
  .checkPill input:checked + span::before{
    background:var(--accent);
    border-color:rgba(37,99,235,0.4);
    box-shadow:0 2px 6px rgba(15,23,42,0.22);
  }
  .checkPill input:focus-visible + span{
    outline:none;
    box-shadow:0 0 0 2px rgba(37,99,235,0.14);
    border-color:rgba(37,99,235,0.55);
  }
  .settingsRange input[type="range"]{
    width:clamp(180px, 36vw, 280px);
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(15,23,42,0.22), rgba(15,23,42,0.08));
    outline:none;
  }
  .settingsRange input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:0 4px 10px rgba(15,23,42,0.22);
  }
  .settingsRange input[type="range"]::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(15,23,42,0.22), rgba(15,23,42,0.08));
  }
  .settingsRange input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:0 4px 10px rgba(15,23,42,0.22);
  }
  .settingsValue{
    font-family:"IBM Plex Mono";
    font-size:12px;
    color:rgba(15,23,42,0.72);
    white-space:nowrap;
  }
  .settingsNote{
    margin:3px 0 0 26px;
    font-size:12.5px;
    color:rgba(15,23,42,0.62);
  }
  .shortcutsPanel{
    min-height:0;
    overflow:auto;
    border:1px solid rgba(15,23,42,0.10);
    border-radius:12px;
    background:rgba(15,23,42,0.03);
    padding:6px 8px 8px;
  }
  .shortcuts thead th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(15,23,42,0.5);
    padding-bottom:6px;
  }
  .modalRow{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    margin-top:10px;
    flex:0 0 auto;
  }

  .prefs{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:8px;
  }
  .prefItem{
    border:1px solid rgba(15,23,42,0.10);
    background:rgba(15,23,42,0.03);
    border-radius:12px;
    padding:10px;
  }
  .prefItem.wide{
    grid-column:1 / -1;
  }
  .prefTitle{
    font-size:12px;
    font-weight:600;
    letter-spacing:-0.01em;
    margin-bottom:6px;
    color:rgba(15,23,42,0.85);
  }
  .prefSectionTitle{
    margin-top:10px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:rgba(15,23,42,0.55);
  }
  .prefSectionTitle:first-child{
    margin-top:0;
  }
  .prefRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .prefRow label{
    font-size:13.5px;
    color:rgba(15,23,42,0.82);
    flex:1 1 180px;
    min-width:0;
  }
  .prefMetaRow{
    margin-top:4px;
    padding-left:26px;
  }
  .paneMeta.prefMeta{
    max-width:none;
    display:block;
  }
  .prefNote{
    margin:6px 0 0;
    padding-left:26px;
  }
  .rangeWrap{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
  }
  .rangeWrap input[type="range"]{
    width:clamp(140px, 26vw, 240px);
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(15,23,42,0.22), rgba(15,23,42,0.08));
    outline:none;
  }
  .rangeWrap input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:0 4px 10px rgba(15,23,42,0.22);
  }
  .rangeWrap input[type="range"]::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(15,23,42,0.22), rgba(15,23,42,0.08));
  }
  .rangeWrap input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:0 4px 10px rgba(15,23,42,0.22);
  }
  .toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
  }
  .toggle input{
    width:18px;
    height:18px;
    border-radius:6px;
    border:1px solid rgba(15,23,42,0.22);
    background:rgba(255,255,255,0.9);
    position:relative;
    appearance:none;
    -webkit-appearance:none;
    transition:border-color var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease);
  }
  .toggle input::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translate(-50%, -65%) rotate(-45deg);
    opacity:0;
  }
  .toggle input:checked{
    background:var(--accent);
    border-color:rgba(15,23,42,0.08);
    box-shadow:0 6px 14px rgba(15,23,42,0.22);
  }
  .toggle input:checked::after{
    opacity:1;
  }

  .shortcuts{
    width:100%;
    border-collapse:collapse;
    margin-top:6px;
    font-size:13px;
  }
  .shortcuts td{
    padding:6px 8px;
    border-top:1px solid rgba(15,23,42,0.10);
    vertical-align:top;
  }
  .shortcuts tr:first-child td{ border-top:none; }
  .sKeys{
    width:240px;
    font-family:"IBM Plex Mono";
    color:rgba(15,23,42,0.88);
    white-space:nowrap;
  }
  kbd{
    font-family:"IBM Plex Mono";
    font-size:11px;
    padding:2px 6px;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.12);
    background:rgba(15,23,42,0.04);
    color:rgba(15,23,42,0.82);
    margin-right:6px;
  }
  .sDesc{ color:rgba(15,23,42,0.70); }

  @media (max-width:820px){
    .brandText .sub{ display:none; }
    .paneMeta{ max-width:62vw; }
    .sbMono{ max-width:52vw; }
    .workspacePane{
      width:220px;
      max-width:360px;
    }
    .tabSelect{
      max-width:160px;
    }
  }
  @media (max-width:760px){
    .prefs{
      grid-template-columns:1fr;
    }
    .prefSectionTitle{ margin-top:8px; }
    .paneTitle{
      display:none;
    }
    .paneLeft{
      gap:0;
    }
    .workspaceLayout{
      flex-direction:column;
    }
    .workspacePane{
      width:auto !important;
      max-width:none;
      max-height:42vh;
      min-height:150px;
    }
    .workspaceResizer{
      width:auto;
      height:6px;
      cursor:row-resize;
    }
    .workspaceResizer::before{
      width:68px;
      height:3px;
    }
    .workspaceUploadChoices{
      grid-template-columns:1fr;
    }
    .tabSelect{
      max-width:120px;
    }
  }

  /* Dark mode */
  html[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0b0f1a;
    --surface:rgba(15,23,42,.86);
    --surfaceSolid:#0f172a;
    --panel:#0f172a;
    --panel2:#101b30;
    --text:#e2e8f0;
    --muted:rgba(226,232,240,.65);
    --border:rgba(148,163,184,.18);
    --accent:#60a5fa;
    --accentSoft:rgba(96,165,250,.18);
    --danger:#f87171;
    --dangerSoft:rgba(248,113,113,.18);
    --shadow:0 12px 30px rgba(2,6,23,.55);
    --shadowHover:0 18px 42px rgba(2,6,23,.7);
  }
  html[data-theme="dark"] body{
    background:
      radial-gradient(1200px 700px at 18% -10%, rgba(96,165,250,0.12), transparent 55%),
      radial-gradient(900px 600px at 100% 0%, rgba(56,189,248,0.08), transparent 55%),
      var(--bg);
  }
  html[data-theme="dark"] header{
    background:rgba(11,15,26,0.92);
    border-bottom:1px solid rgba(148,163,184,0.18);
  }
  html[data-theme="dark"] ::-webkit-scrollbar-track{ background:rgba(148,163,184,0.08); }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(148,163,184,0.28); }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,0.42); }

  html[data-theme="dark"] .toolBtn{
    border-color:rgba(96,165,250,0.26);
    box-shadow:none;
  }
  html[data-theme="dark"] .toolBtn.primary{
    background:#4f8fe6;
    border-color:rgba(96,165,250,0.45);
    box-shadow:none;
  }
  html[data-theme="dark"] .toolBtn.primary:hover{ background:#5a98ea; }
  html[data-theme="dark"] .toolBtn.danger{
    border-color:rgba(248,113,113,0.26);
    background:rgba(248,113,113,0.12);
  }
  html[data-theme="dark"] .runGroup #runModeBtn{
    border-left:1px solid rgba(15,23,42,0.18);
  }
  html[data-theme="dark"] .keyChip{
    border-color:rgba(255,255,255,0.22);
    color:rgba(255,255,255,0.92);
  }
  html[data-theme="dark"] .hintPill{
    border-color:rgba(148,163,184,0.28);
    background:rgba(148,163,184,0.12);
    color:rgba(226,232,240,0.75);
  }
  html[data-theme="dark"] .toolBtn.active{
    border-color:rgba(96,165,250,0.34);
    background:rgba(96,165,250,0.18);
    color:rgba(191,219,254,0.98);
  }

  html[data-theme="dark"] .menu{
    background:rgba(15,23,42,0.99);
    border:1px solid rgba(148,163,184,0.18);
    box-shadow:0 30px 80px rgba(2,6,23,0.55);
  }
  html[data-theme="dark"] .menuItem{
    color:rgba(226,232,240,0.88);
  }
  html[data-theme="dark"] .menuItem:hover{
    background:rgba(96,165,250,0.16);
  }
  html[data-theme="dark"] .menuItem .material-icons{
    color:rgba(226,232,240,0.7);
  }
  html[data-theme="dark"] .menuItem .miHint{
    border-color:rgba(148,163,184,0.25);
    background:rgba(148,163,184,0.12);
    color:rgba(226,232,240,0.7);
  }
  html[data-theme="dark"] #runMenu .miHint{
    border-color:rgba(148,163,184,0.3);
    background:rgba(148,163,184,0.16);
    color:rgba(226,232,240,0.8);
  }
  html[data-theme="dark"] #runMenu .menuItem.activeMode .miHint{
    border-color:rgba(96,165,250,0.4);
    background:rgba(96,165,250,0.18);
  }
  html[data-theme="dark"] #runMenu .miCheck{
    color:rgba(96,165,250,0.95);
  }
  html[data-theme="dark"] #runMenu .menuItem.activeMode{
    background:rgba(96,165,250,0.2);
    border-color:rgba(96,165,250,0.28);
  }

  html[data-theme="dark"] .paneHeader{
    background:linear-gradient(to bottom, var(--panel2), rgba(15,23,42,0.78));
  }
  html[data-theme="dark"] .workspacePane{
    background:linear-gradient(180deg, rgba(12,18,31,0.96), rgba(10,16,28,0.92));
  }
  html[data-theme="dark"] .workspacePaneHeader{
    border-bottom-color:rgba(148,163,184,0.12);
  }
  html[data-theme="dark"] .workspacePaneTitle,
  html[data-theme="dark"] .workspaceFolder{
    color:rgba(226,232,240,0.66);
  }
  html[data-theme="dark"] #workspaceMeta,
  html[data-theme="dark"] .workspaceEmpty,
  html[data-theme="dark"] .filePreviewMeta,
  html[data-theme="dark"] .workspacePreviewMeta,
  html[data-theme="dark"] .workspacePreviewNote{
    color:rgba(226,232,240,0.56);
  }
  html[data-theme="dark"] .workspaceFile{
    color:rgba(226,232,240,0.82);
    border-color:rgba(148,163,184,0.08);
  }
  html[data-theme="dark"] .workspaceFile:hover{
    background:rgba(148,163,184,0.08);
    border-color:rgba(148,163,184,0.16);
  }
  html[data-theme="dark"] .workspaceFolder:hover{
    background:rgba(148,163,184,0.08);
    border-color:rgba(148,163,184,0.16);
  }
  html[data-theme="dark"] .workspaceFile.active{
    background:linear-gradient(to right, rgba(96,165,250,0.2), rgba(96,165,250,0.12));
    border-color:rgba(96,165,250,0.24);
    box-shadow:inset 3px 0 0 rgba(96,165,250,0.9);
    color:#bfdbfe;
  }
  html[data-theme="dark"] .workspaceRenameInput{
    border-color:rgba(96,165,250,0.42);
    background:rgba(15,23,42,0.88);
    color:rgba(226,232,240,0.94);
  }
  html[data-theme="dark"] .workspaceRenameInput:focus{
    box-shadow:0 0 0 2px rgba(96,165,250,0.28);
  }
  html[data-theme="dark"] .paneTitle{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .dot{
    background:rgba(148,163,184,0.4);
  }
  html[data-theme="dark"] .iconBtn{
    border-color:rgba(148,163,184,0.24);
    background:rgba(148,163,184,0.08);
    color:rgba(226,232,240,0.78);
  }
  html[data-theme="dark"] .iconBtn:hover{ background:rgba(96,165,250,0.18); }
  html[data-theme="dark"] .iconBtn.danger{
    border-color:rgba(248,113,113,0.26);
    background:rgba(248,113,113,0.14);
  }
  html[data-theme="dark"] .iconBtn.undo{
    border-color:rgba(96,165,250,0.3);
    background:rgba(96,165,250,0.18);
  }
  html[data-theme="dark"] .iconBtn.active{
    border-color:rgba(96,165,250,0.35);
    background:rgba(96,165,250,0.22);
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .tabItem{
    border-color:rgba(148,163,184,0.3);
    background:rgba(148,163,184,0.14);
  }
  html[data-theme="dark"] .tabItem::before,
  html[data-theme="dark"] .tabItem::after{
    background:rgba(96,165,250,0.95);
  }
  html[data-theme="dark"] .tabItem.active{
    border-color:rgba(96,165,250,0.52);
    background:rgba(96,165,250,0.26);
  }
  html[data-theme="dark"] .tabItem.renaming{
    border-color:rgba(96,165,250,0.56);
    background:rgba(96,165,250,0.26);
  }
  html[data-theme="dark"] .tabSelect{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .tabItem.active .tabSelect{
    color:rgba(191,219,254,0.98);
  }
  html[data-theme="dark"] .tabClose{
    color:rgba(226,232,240,0.66);
  }
  html[data-theme="dark"] .tabClose:hover{
    background:rgba(148,163,184,0.24);
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .tabAddBtn{
    border-color:rgba(148,163,184,0.3);
    background:rgba(148,163,184,0.12);
    color:rgba(226,232,240,0.78);
  }
  html[data-theme="dark"] .tabAddBtn:hover{
    background:rgba(148,163,184,0.24);
    color:rgba(226,232,240,0.94);
  }
  html[data-theme="dark"] .tabRenameInput{
    border-color:rgba(96,165,250,0.5);
    background:rgba(15,23,42,0.86);
    color:rgba(226,232,240,0.94);
  }
  html[data-theme="dark"] .tabRenameInput:focus{
    box-shadow:0 0 0 2px rgba(96,165,250,0.28);
  }
  html[data-theme="dark"] .findBar{
    border-bottom:1px solid rgba(148,163,184,0.2);
    background:linear-gradient(to bottom, var(--panel2), rgba(15,23,42,0.78));
  }
  html[data-theme="dark"] .filePreviewPane{
    border-bottom-color:rgba(148,163,184,0.12);
    background:linear-gradient(to bottom, rgba(15,23,42,0.95), rgba(11,18,31,0.92));
  }
  html[data-theme="dark"] .workspacePreviewCard{
    border-color:rgba(148,163,184,0.14);
    background:rgba(15,23,42,0.88);
  }
  html[data-theme="dark"] .workspacePreviewTitle,
  html[data-theme="dark"] .workspacePreviewCode{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .workspaceJsonTree{
    background:rgba(2,6,23,0.28);
    border-color:rgba(148,163,184,0.14);
  }
  html[data-theme="dark"] .workspaceJsonSummary{
    background:rgba(148,163,184,0.1);
  }
  html[data-theme="dark"] .workspaceJsonSummary:hover{
    background:rgba(148,163,184,0.18);
  }
  html[data-theme="dark"] .workspaceJsonType{
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .workspaceJsonMeta,
  html[data-theme="dark"] .workspaceJsonEmpty{
    color:rgba(226,232,240,0.56);
  }
  html[data-theme="dark"] .workspaceJsonChildren{
    border-left-color:rgba(148,163,184,0.14);
  }
  html[data-theme="dark"] .workspaceJsonKey{
    color:rgba(147,197,253,0.96);
  }
  html[data-theme="dark"] .workspaceJsonScalar.string{
    color:rgba(52,211,153,0.95);
  }
  html[data-theme="dark"] .workspaceJsonScalar.number{
    color:rgba(251,191,36,0.95);
  }
  html[data-theme="dark"] .workspaceJsonScalar.boolean,
  html[data-theme="dark"] .workspaceJsonScalar.null{
    color:rgba(196,181,253,0.96);
  }
  html[data-theme="dark"] .workspacePreviewCode,
  html[data-theme="dark"] .workspacePreviewTableWrap{
    background:rgba(2,6,23,0.32);
    border-color:rgba(148,163,184,0.16);
  }
  html[data-theme="dark"] .workspacePreviewTable th,
  html[data-theme="dark"] .workspacePreviewTable td{
    border-bottom-color:rgba(148,163,184,0.12);
  }
  html[data-theme="dark"] .workspacePreviewTable th{
    background:rgba(148,163,184,0.08);
  }
  html[data-theme="dark"] .findRow .material-icons{
    color:rgba(226,232,240,0.62);
  }
  html[data-theme="dark"] .findField{
    border-color:rgba(148,163,184,0.3);
    background:rgba(15,23,42,0.82);
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .findField:focus{
    border-color:rgba(96,165,250,0.55);
    box-shadow:0 0 0 2px rgba(96,165,250,0.2);
  }
  html[data-theme="dark"] .findCount,
  html[data-theme="dark"] .findStatus{
    color:rgba(226,232,240,0.7);
  }
  html[data-theme="dark"] .findOptBtn{
    border-color:rgba(148,163,184,0.25);
    background:rgba(148,163,184,0.12);
    color:rgba(226,232,240,0.78);
  }
  html[data-theme="dark"] .findOptBtn:hover{
    background:rgba(148,163,184,0.2);
  }
  html[data-theme="dark"] .findOptBtn[aria-pressed="true"]{
    border-color:rgba(96,165,250,0.45);
    background:rgba(96,165,250,0.22);
    color:rgba(191,219,254,0.98);
  }
  html[data-theme="dark"] .findModeBtn[aria-pressed="true"]{
    background:rgba(96,165,250,0.22);
    border-color:rgba(96,165,250,0.45);
  }
  html[data-theme="dark"] #replaceAllBtn{
    border-color:rgba(248,113,113,0.34);
    background:rgba(248,113,113,0.16);
    color:rgba(254,202,202,0.96);
  }
  html[data-theme="dark"] #replaceAllBtn:hover{
    background:rgba(248,113,113,0.24);
    border-color:rgba(248,113,113,0.45);
  }
  html[data-theme="dark"] .findStatus.error{
    color:rgba(248,113,113,0.9);
  }
  html[data-theme="dark"] .resizer::before{
    background:rgba(148,163,184,0.3);
  }
  html[data-theme="dark"] .resizer:hover::before{
    background:rgba(148,163,184,0.5);
  }

  html[data-theme="dark"] .CodeMirror{
    background:#0b1220;
    color:#e2e8f0;
  }
  html[data-theme="dark"] .CodeMirror-gutters{
    background:#0b1220;
    border-right:1px solid rgba(148,163,184,0.2);
  }
  html[data-theme="dark"] .CodeMirror-linenumber{
    color:rgba(148,163,184,0.6);
  }
  html[data-theme="dark"] .CodeMirror-activeline-background{
    background:rgba(148,163,184,0.08);
    box-shadow:inset 2px 0 0 rgba(96,165,250,0.12);
  }
  html[data-theme="dark"] .editorStatus{
    border-color:rgba(148,163,184,0.14);
    background:rgba(11,18,32,0.74);
    box-shadow:0 10px 26px rgba(2,6,23,0.34);
    color:rgba(226,232,240,0.7);
  }
  html[data-theme="dark"] .cm-searching-active{
    background:rgba(96,165,250,0.25);
    outline:1px solid rgba(147,197,253,0.75);
  }

  html[data-theme="dark"] #console{
    background:#0b1220;
  }
  html[data-theme="dark"] .consoleLine{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .varsPane{
    background:rgba(15,23,42,0.9);
    border-top:1px solid rgba(148,163,184,0.2);
  }
  html[data-theme="dark"] .varsHeader{
    color:rgba(226,232,240,0.72);
    border-bottom:1px solid rgba(148,163,184,0.18);
  }
  html[data-theme="dark"] .varsMeta{
    color:rgba(226,232,240,0.6);
  }
  html[data-theme="dark"] .varsName{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .varsType{
    color:rgba(226,232,240,0.62);
  }
  html[data-theme="dark"] .varsValue{
    color:rgba(226,232,240,0.78);
  }
  html[data-theme="dark"] .varsEmpty{
    color:rgba(226,232,240,0.55);
  }
  html[data-theme="dark"] .consolePrompt{
    color:rgba(226,232,240,0.7);
  }
  html[data-theme="dark"] .consoleInput{
    border-color:rgba(148,163,184,0.28);
    background:rgba(148,163,184,0.12);
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .consoleInput:focus{
    border-color:rgba(96,165,250,0.55);
    box-shadow:0 0 0 2px rgba(96,165,250,0.2);
    background:#0f172a;
  }
  html[data-theme="dark"] .prefix,
  html[data-theme="dark"] .consoleLine.system .prefix,
  html[data-theme="dark"] .dim{
    color:rgba(226,232,240,0.62);
  }

  html[data-theme="dark"] .toast{
    border:1px solid rgba(148,163,184,0.2);
    background:rgba(15,23,42,0.92);
    box-shadow:0 18px 50px rgba(2,6,23,0.5);
  }
  html[data-theme="dark"] .toastIcon{
    background:rgba(96,165,250,0.18);
    color:rgba(191,219,254,0.98);
  }
  html[data-theme="dark"] .toastTitle{
    color:rgba(226,232,240,0.9);
  }
  html[data-theme="dark"] .toastDesc{
    color:rgba(226,232,240,0.65);
  }
  html[data-theme="dark"] .toastAction{
    border-color:rgba(96,165,250,0.42);
    background:rgba(96,165,250,0.2);
    color:rgba(191,219,254,0.98);
  }
  html[data-theme="dark"] .toastAction:hover{
    background:rgba(96,165,250,0.3);
    border-color:rgba(96,165,250,0.55);
  }
  html[data-theme="dark"] .workspaceUploadChoice{
    border-color:rgba(96,165,250,0.26);
    background:rgba(96,165,250,0.1);
    color:rgba(226,232,240,0.88);
  }
  html[data-theme="dark"] .workspaceUploadChoice:hover{
    border-color:rgba(96,165,250,0.42);
    background:rgba(96,165,250,0.16);
  }
  html[data-theme="dark"] .workspaceUploadChoiceText strong{
    color:rgba(226,232,240,0.94);
  }
  html[data-theme="dark"] .workspaceUploadChoiceText span{
    color:rgba(226,232,240,0.64);
  }

  html[data-theme="dark"] .overlay{
    background:rgba(2,6,23,0.7);
  }
  html[data-theme="dark"] .loadingOverlay{
    background:rgba(2,6,23,0.55);
  }
  html[data-theme="dark"] .loadingCard{
    border:1px solid rgba(148,163,184,0.2);
    background:rgba(15,23,42,0.85);
  }
  html[data-theme="dark"] .loadingSpinner{
    border-color:rgba(96,165,250,0.22);
    border-top-color:var(--accent);
  }
  html[data-theme="dark"] .loadingText{
    color:rgba(226,232,240,0.78);
  }

  html[data-theme="dark"] .modal{
    background:rgba(15,23,42,0.92);
    border:1px solid rgba(148,163,184,0.2);
    box-shadow:0 30px 80px rgba(2,6,23,0.6);
  }
  html[data-theme="dark"] .licenseText{
    color:rgba(226,232,240,0.78);
    background:rgba(148,163,184,0.08);
    border-color:rgba(148,163,184,0.2);
  }
  html[data-theme="dark"] .linkBtn{
    color:rgba(96,165,250,0.95);
  }
  html[data-theme="dark"] .versionTag,
  html[data-theme="dark"] .aboutMeta,
  html[data-theme="dark"] .settingsCard,
  html[data-theme="dark"] .prefItem{
    border-color:rgba(148,163,184,0.2);
    background:rgba(148,163,184,0.08);
  }
  html[data-theme="dark"] .settingsCard.primary{
    border-color:rgba(96,165,250,0.25);
    background:rgba(96,165,250,0.12);
  }
  html[data-theme="dark"] .settingsCard.muted{
    background:rgba(148,163,184,0.06);
  }
  html[data-theme="dark"] .settingsCardTitle,
  html[data-theme="dark"] .settingsSectionTitle,
  html[data-theme="dark"] .settingsLabel,
  html[data-theme="dark"] .settingsValue,
  html[data-theme="dark"] .settingsNote,
  html[data-theme="dark"] .settingsIntro,
  html[data-theme="dark"] .modal p,
  html[data-theme="dark"] .aboutMetaRow,
  html[data-theme="dark"] .aboutMetaValue,
  html[data-theme="dark"] .warnText{
    color:rgba(226,232,240,0.8);
  }
  html[data-theme="dark"] .aboutMetaLabel,
  html[data-theme="dark"] .warnHint,
  html[data-theme="dark"] .shortcuts thead th{
    color:rgba(226,232,240,0.6);
  }
  html[data-theme="dark"] .settingsCardTitle .material-icons{
    color:rgba(226,232,240,0.6);
  }
  html[data-theme="dark"] .shortcutsPanel{
    border-color:rgba(148,163,184,0.2);
    background:rgba(148,163,184,0.08);
  }
  html[data-theme="dark"] .historyList,
  html[data-theme="dark"] .historyPreview{
    border-color:rgba(148,163,184,0.2);
    background:rgba(148,163,184,0.08);
  }
  html[data-theme="dark"] .historyItem{
    border-color:rgba(148,163,184,0.2);
    background:rgba(15,23,42,0.7);
  }
  html[data-theme="dark"] .historyItem.active{
    border-color:rgba(96,165,250,0.6);
    background:rgba(96,165,250,0.18);
  }
  html[data-theme="dark"] .historyItemTitle{
    color:rgba(226,232,240,0.88);
  }
  html[data-theme="dark"] .historyItemMeta,
  html[data-theme="dark"] .historyEmpty,
  html[data-theme="dark"] .diffEmpty{
    color:rgba(226,232,240,0.6);
  }
  html[data-theme="dark"] .diffLine.add{
    background:rgba(16,185,129,0.16);
  }
  html[data-theme="dark"] .diffLine.remove{
    background:rgba(239,68,68,0.16);
  }
  html[data-theme="dark"] .settingsSection{
    border-top:1px solid rgba(148,163,184,0.18);
  }
  html[data-theme="dark"] .settingsRange input[type="range"],
  html[data-theme="dark"] .rangeWrap input[type="range"]{
    background:linear-gradient(90deg, rgba(148,163,184,0.4), rgba(148,163,184,0.18));
  }
  html[data-theme="dark"] .settingsRange input[type="range"]::-webkit-slider-thumb,
  html[data-theme="dark"] .rangeWrap input[type="range"]::-webkit-slider-thumb{
    border-color:rgba(15,23,42,0.8);
  }
  html[data-theme="dark"] .settingsRange input[type="range"]::-moz-range-track,
  html[data-theme="dark"] .rangeWrap input[type="range"]::-moz-range-track{
    background:linear-gradient(90deg, rgba(148,163,184,0.4), rgba(148,163,184,0.18));
  }
  html[data-theme="dark"] .settingsRange input[type="range"]::-moz-range-thumb,
  html[data-theme="dark"] .rangeWrap input[type="range"]::-moz-range-thumb{
    border-color:rgba(15,23,42,0.8);
  }
  html[data-theme="dark"] .toggle input{
    border-color:rgba(148,163,184,0.28);
    background:rgba(15,23,42,0.9);
  }
  html[data-theme="dark"] .toggle input:checked{
    border-color:rgba(2,6,23,0.4);
  }
  html[data-theme="dark"] .checkPill span{
    border-color:rgba(148,163,184,0.28);
    background:rgba(15,23,42,0.9);
    color:rgba(226,232,240,0.86);
  }
  html[data-theme="dark"] .checkPill span::before{
    border-color:rgba(148,163,184,0.4);
    background:rgba(148,163,184,0.12);
  }
  html[data-theme="dark"] .checkPill input:checked + span{
    border-color:rgba(96,165,250,0.45);
    background:rgba(96,165,250,0.18);
    color:rgba(226,232,240,0.92);
  }
  html[data-theme="dark"] .checkPill input:checked + span::before{
    border-color:rgba(96,165,250,0.45);
    box-shadow:0 2px 6px rgba(2,6,23,0.45);
  }
  html[data-theme="dark"] .checkGroup.segmented{
    border-color:rgba(148,163,184,0.26);
    background:rgba(148,163,184,0.1);
  }
  html[data-theme="dark"] .checkGroup.segmented .checkPill span{
    color:rgba(226,232,240,0.72);
  }
  html[data-theme="dark"] .checkGroup.segmented input:checked + span{
    color:#0b1220;
  }
  html[data-theme="dark"] .checkGroup.segmented .segmentedSlider{
    background:rgba(226,232,240,0.92);
    box-shadow:0 8px 18px rgba(2,6,23,0.5);
  }

  html[data-theme="dark"] .shortcuts td{
    border-top:1px solid rgba(148,163,184,0.2);
  }
  html[data-theme="dark"] .sKeys,
  html[data-theme="dark"] .sDesc,
  html[data-theme="dark"] kbd{
    color:rgba(226,232,240,0.82);
  }
  html[data-theme="dark"] kbd{
    border-color:rgba(148,163,184,0.22);
    background:rgba(148,163,184,0.12);
  }

  .cm-s-inscribe-dark.CodeMirror{
    background:#0b1220;
    color:#e2e8f0;
  }
  .cm-s-inscribe-dark .CodeMirror-gutters{
    background:#0b1220;
    border-right:1px solid rgba(148,163,184,0.2);
  }
  .cm-s-inscribe-dark .CodeMirror-linenumber{
    color:rgba(148,163,184,0.6);
  }
  .cm-s-inscribe-dark .CodeMirror-cursor{
    border-left:1px solid #e2e8f0;
  }
  .cm-s-inscribe-dark .CodeMirror-selected,
  .cm-s-inscribe-dark .CodeMirror-line::selection,
  .cm-s-inscribe-dark .CodeMirror-line > span::selection,
  .cm-s-inscribe-dark .CodeMirror-line > span > span::selection{
    background:rgba(96,165,250,0.25);
  }
  .cm-s-inscribe-dark .CodeMirror-activeline-background{
    background:rgba(148,163,184,0.08);
    box-shadow:inset 2px 0 0 rgba(96,165,250,0.12);
  }
  .cm-s-inscribe-dark .CodeMirror-matchingbracket{
    color:#86efac;
    border-bottom:1px solid #86efac;
  }
  .cm-s-inscribe-dark .cm-comment{ color:#94a3b8; }
  .cm-s-inscribe-dark .cm-keyword{ color:#93c5fd; }
  .cm-s-inscribe-dark .cm-atom{ color:#fca5a5; }
  .cm-s-inscribe-dark .cm-number{ color:#fbbf24; }
  .cm-s-inscribe-dark .cm-def{ color:#fef08a; }
  .cm-s-inscribe-dark .cm-variable{ color:#e2e8f0; }
  .cm-s-inscribe-dark .cm-variable-2{ color:#c4b5fd; }
  .cm-s-inscribe-dark .cm-variable-3{ color:#fcd34d; }
  .cm-s-inscribe-dark .cm-string{ color:#fca5a5; }
  .cm-s-inscribe-dark .cm-operator{ color:#e2e8f0; }
  .cm-s-inscribe-dark .cm-meta{ color:#60a5fa; }
  .cm-s-inscribe-dark .cm-builtin{ color:#a5b4fc; }
  .cm-s-inscribe-dark .cm-tag{ color:#93c5fd; }
  .cm-s-inscribe-dark .cm-attribute{ color:#f9a8d4; }
  .cm-s-inscribe-dark .cm-error{ color:#f87171; }

  .exportRoot{
    display:none;
    background:#fff;
    color:#000;
    padding:24px;
    font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  .exportHeader{
    font-size:12px;
    line-height:1.4;
    margin-bottom:12px;
  }
  .exportBrand{
    font-size:15.5px;
    color:var(--accent);
  }
  .exportSite{
    margin-bottom:6px;
    color:var(--accent);
    font-size:12.5px;
  }
  .exportHeader strong{
    font-weight:600;
  }
  .exportMeta{
    font-size:11px;
    color:#222;
    margin-top:2px;
  }
  .exportSection{
    margin-top:14px;
  }
  .exportTitle{
    font-size:11.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:6px;
  }
  .exportBlock{
    border:1px solid #000;
    padding:10px;
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:12px;
    line-height:1.5;
    white-space:pre;
  }
  .exportBlock.wrap{
    white-space:pre-wrap;
    word-break:break-word;
  }

  body.exporting > .app,
  body.exporting > .loadingOverlay,
  body.exporting > .toast,
  body.exporting > #aboutOverlay,
  body.exporting > #settingsOverlay,
  body.exporting > #printOverlay{
    display:none !important;
  }
  body.exporting .exportRoot{
    display:block;
  }

  @media print{
    body{
      background:#fff !important;
    }
    body.exporting .exportRoot{
      display:block;
      padding:16px;
    }
    @page{
      margin:16mm;
    }
  }