:root {
    --vs-font: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
    --vs-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --vs-bg: #1e1e1e;
    --vs-bg-2: #252526;
    --vs-bg-3: #333333;
    --vs-bg-4: #3c3c3c;
    --vs-bg-5: #2d2d2d;
    --vs-border: #3c3c3c;
    --vs-border-light: #464647;
    --vs-text: #cccccc;
    --vs-text-dim: #858585;
    --vs-text-bright: #ffffff;
    --vs-accent: #007acc;
    --vs-accent-light: #1c97ea;
    --vs-accent-dark: #005a9e;
    --vs-hover: #2a2d2e;
    --vs-selected: #094771;
    --vs-inactive: #37373d;
    --vs-badge: #4d4d4d;
    --vs-error: #f48771;
    --vs-warning: #cca700;
    --vs-success: #89d185;
    --vs-info: #75beff;
    --vs-comment: #6a9955;
    --vs-string: #ce9178;
    --vs-keyword: #569cd6;
    --vs-function: #dcdcaa;
    --vs-variable: #9cdcfe;
    --vs-number: #b5cea8;
    --vs-type: #4ec9b0;
    --vs-tag: #569cd6;
    --vs-attribute: #9cdcfe;
    --vs-operator: #d4d4d4;
    --vs-activity-bar: #333333;
    --vs-status-bar: #007acc;
    --vs-title-bar: #3c3c3c;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
  body {
    font-family: var(--vs-font);
    background: var(--vs-bg);
    color: var(--vs-text);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(121,121,121,.7); }
  ::-webkit-scrollbar-corner { background: transparent; }
  button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
  input, select, textarea { font-family: inherit; }

  /* ===== APP LAYOUT ===== */
  .app {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: 35px 1fr 22px;
    grid-template-areas:
      "title title"
      "activity main"
      "status status";
    height: 100vh;
    width: 100vw;
  }

  /* ===== TITLE BAR ===== */
  .title-bar {
    grid-area: title;
    background: var(--vs-title-bar);
    border-bottom: 1px solid var(--vs-border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    user-select: none;
    -webkit-user-select: none;
  }
  .title-bar .logo {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--vs-text-bright);
    font-size: 12px;
  }
  .title-bar .logo i { color: var(--vs-accent-light); font-size: 16px; }
  .title-bar .menu-items {
    display: flex; gap: 2px; margin-inline-start: 12px;
  }
  .title-bar .menu-item {
    padding: 4px 8px; border-radius: 3px; font-size: 12px;
    color: var(--vs-text); cursor: pointer;
  }
  .title-bar .menu-item:hover { background: var(--vs-hover); }
  .title-bar .title-text {
    flex: 1; text-align: center; font-size: 12px; color: var(--vs-text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .title-bar .window-controls {
    display: flex; gap: 0; margin-inline-start: auto;
  }
  .title-bar .win-ctrl {
    width: 46px; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: background .1s;
  }
  .title-bar .win-ctrl:hover { background: var(--vs-hover); }
  .title-bar .win-ctrl.close:hover { background: #e81123; color: white; }

  /* ===== ACTIVITY BAR ===== */
  .activity-bar {
    grid-area: activity;
    background: var(--vs-activity-bar);
    border-inline-end: 1px solid var(--vs-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .activity-bar::-webkit-scrollbar { width: 0; }
  .activity-btn {
    width: 48px; height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--vs-text-dim); cursor: pointer;
    position: relative; transition: color .15s;
    border-inline-start: 2px solid transparent;
  }
  .activity-btn i { font-size: 22px; }
  .activity-btn .badge {
    position: absolute; top: 6px; inset-inline-end: 6px;
    background: var(--vs-accent); color: white;
    font-size: 9px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 600;
  }
  .activity-btn:hover { color: var(--vs-text-bright); }
  .activity-btn.active {
    color: var(--vs-text-bright);
    border-inline-start-color: var(--vs-text-bright);
  }
  .activity-spacer { flex: 1; }

  /* ===== MAIN AREA ===== */
  .main-area {
    grid-area: main;
    display: flex;
    overflow: hidden;
    background: var(--vs-bg);
  }

  /* ===== SIDEBAR ===== */
  .sidebar {
    width: 300px;
    background: var(--vs-bg-2);
    border-inline-end: 1px solid var(--vs-border);
    display: flex;
    flex-direction: column;
    transition: width .2s ease, margin .2s ease;
    overflow: hidden;
    flex-shrink: 0;
  }
  .sidebar.collapsed { width: 0; margin-inline-end: 0; border: none; }
  .sidebar-header {
    height: 35px;
    padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--vs-border);
    flex-shrink: 0;
  }
  .sidebar-header h3 {
    margin: 0; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--vs-text-dim);
  }
  .sidebar-actions { display: flex; gap: 4px; }
  .sidebar-actions button {
    width: 24px; height: 24px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-text-dim); font-size: 14px;
  }
  .sidebar-actions button:hover { background: var(--vs-hover); color: var(--vs-text-bright); }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
  }
  .sidebar-section {
    margin-bottom: 4px;
  }
  .sidebar-section-header {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px 4px 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--vs-text);
    cursor: pointer; user-select: none;
  }
  .sidebar-section-header:hover { background: var(--vs-hover); }
  .sidebar-section-header i.arrow {
    font-size: 12px; transition: transform .15s;
    color: var(--vs-text-dim);
  }
  .sidebar-section-header.collapsed i.arrow { transform: rotate(-90deg); }
  .sidebar-section-content { padding: 2px 0; }
  .sidebar-section.collapsed .sidebar-section-content { display: none; }

  .file-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 24px;
    cursor: pointer; font-size: 13px;
    color: var(--vs-text);
    position: relative;
    transition: background .1s;
  }
  .file-item:hover { background: var(--vs-hover); }
  .file-item.active { background: var(--vs-selected); color: var(--vs-text-bright); }
  .file-item i.file-icon { font-size: 16px; flex-shrink: 0; width: 18px; text-align: center; }
  /* file-icons-js icon styling */
  .file-item .icon { font-size: 16px !important; flex-shrink: 0; width: 18px; text-align: center; line-height: 1; }
  .folder-header .icon { font-size: 16px !important; flex-shrink: 0; }
  .file-item .file-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px;
  }
  .file-item .file-meta {
    font-size: 10px; color: var(--vs-text-dim); font-family: var(--vs-mono);
  }
  .file-item .file-actions {
    display: none; gap: 2px;
  }
  .file-item:hover .file-actions { display: flex; }
  .file-item .file-actions button {
    width: 20px; height: 20px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-text-dim); font-size: 12px;
  }
  /* Folder Tree View Styles */
  .folder-item {
    margin-bottom: 2px;
  }
  .folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--vs-text);
    border-radius: 3px;
    transition: background .1s;
  }
  .folder-header:hover {
    background: var(--vs-hover);
  }
  .folder-header .folder-icon {
    font-size: 16px;
    color: var(--vs-accent);
    flex-shrink: 0;
  }
  .folder-header .folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  .folder-header .folder-arrow {
    font-size: 14px;
    color: var(--vs-text-dim);
    transition: transform .15s;
  }
  .folder-content {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height .25s ease-in-out, opacity .2s ease;
    opacity: 1;
  }
  .folder-content.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .tree-root {
    padding: 4px 0;
  }
  .file-item .file-actions button:hover { background: var(--vs-bg-4); color: var(--vs-text-bright); }

  .sidebar-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--vs-text-dim);
  }
  .sidebar-empty i { font-size: 36px; opacity: .3; display: block; margin-bottom: 12px; }
  .sidebar-empty p { font-size: 12px; margin: 0; line-height: 1.6; }
  .sidebar-empty .hint { font-size: 11px; margin-top: 8px; opacity: .7; }

  .session-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 24px;
    cursor: pointer; font-size: 12px;
    color: var(--vs-text);
  }
  .session-item:hover { background: var(--vs-hover); }
  .session-item.current { background: var(--vs-selected); color: var(--vs-text-bright); }
  .session-item i { font-size: 14px; color: var(--vs-accent); }
  .session-item .session-info { flex: 1; min-width: 0; }
  .session-item .session-name {
    font-family: var(--vs-mono); font-size: 12px; color: var(--vs-text-bright);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .session-item .session-time { font-size: 10px; color: var(--vs-text-dim); margin-top: 2px; }

  /* ===== EDITOR GROUP ===== */
  .editor-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--vs-bg);
  }

  /* Tabs Bar */
  .tabs-bar {
    height: 35px;
    background: var(--vs-bg-2);
    border-bottom: 1px solid var(--vs-border);
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }
  .tabs-bar::-webkit-scrollbar { height: 3px; }
  .tab {
    height: 35px;
    padding: 0 12px;
    display: flex; align-items: center; gap: 8px;
    background: var(--vs-bg-5);
    border-inline-end: 1px solid var(--vs-border);
    font-size: 13px;
    color: var(--vs-text-dim);
    cursor: pointer;
    position: relative;
    min-width: 120px;
    max-width: 200px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .tab:hover { background: var(--vs-hover); }
  .tab.active {
    background: var(--vs-bg);
    color: var(--vs-text-bright);
    border-top: 1px solid var(--vs-accent);
  }
  .tab.active::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 1px;
    background: var(--vs-accent);
  }
  .tab i.tab-icon { font-size: 14px; flex-shrink: 0; }
  .tab .tab-label {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--vs-mono); font-size: 12px;
  }
  .tab .tab-dirty { color: var(--vs-text-dim); font-size: 10px; }
  .tab .tab-close {
    width: 18px; height: 18px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-text-dim); font-size: 14px;
    opacity: 0; transition: opacity .15s;
  }
  .tab:hover .tab-close, .tab.active .tab-close { opacity: 1; }
  .tab .tab-close:hover { background: var(--vs-bg-4); color: var(--vs-text-bright); }
  .tab-add {
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-text-dim); cursor: pointer;
    flex-shrink: 0;
  }
  .tab-add:hover { background: var(--vs-hover); color: var(--vs-text-bright); }

  /* Breadcrumbs */
  .breadcrumbs {
    height: 22px;
    padding: 0 12px;
    background: var(--vs-bg);
    border-bottom: 1px solid var(--vs-border);
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--vs-text-dim);
    overflow: hidden;
    flex-shrink: 0;
  }
  .breadcrumbs .crumb {
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
  }
  .breadcrumbs .crumb i { font-size: 14px; }
  .breadcrumbs .crumb-sep { color: var(--vs-text-dim); opacity: .5; }
  .breadcrumbs .crumb:last-child { color: var(--vs-text); }
  .breadcrumbs .crumb-actions { margin-inline-start: 8px; display: none; }
  .breadcrumbs:hover .crumb-actions { display: flex; }

  /* Toolbar */
  .editor-toolbar {
    height: 34px;
    padding: 0 8px;
    background: var(--vs-bg);
    border-bottom: 1px solid var(--vs-border);
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
  }
  .toolbar-btn {
    height: 26px;
    padding: 0 8px;
    display: flex; align-items: center; gap: 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--vs-text-dim);
    transition: background .1s, color .1s;
  }
  .toolbar-btn:hover { background: var(--vs-hover); color: var(--vs-text-bright); }
  .toolbar-btn.active { background: var(--vs-selected); color: var(--vs-text-bright); }
  .toolbar-btn i { font-size: 14px; }
  .toolbar-sep {
    width: 1px; height: 16px; background: var(--vs-border);
    margin: 0 4px;
  }
  .toolbar-spacer { flex: 1; }
  .lang-select {
    background: var(--vs-bg-2); color: var(--vs-text);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 11px; font-family: var(--vs-mono);
    outline: none; cursor: pointer;
  }
  .lang-select:hover, .lang-select:focus { border-color: var(--vs-accent); }
  .lang-select option { background: var(--vs-bg-2); color: var(--vs-text); }

  /* Editor */
  .editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }
  .editor-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }
  #editor {
    flex: 1;
    min-height: 0;
  }
  #preview {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--vs-bg);
    display: none;
  }
  #preview.active { display: block; }

  /* ===== STATUS BAR ===== */
  .status-bar {
    grid-area: status;
    background: var(--vs-status-bar);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    gap: 2px;
    user-select: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .status-bar::-webkit-scrollbar { height: 0; }
  .status-item {
    display: flex; align-items: center; gap: 5px;
    padding: 0 8px;
    height: 100%;
    cursor: default;
    white-space: nowrap;
    font-size: 11px;
  }
  .status-item.clickable { cursor: pointer; }
  .status-item.clickable:hover { background: rgba(255,255,255,.12); }
  .status-item i { font-size: 12px; }
  .status-spacer { flex: 1; }
  .status-item.status-error { color: #ffcccb; }
  .status-item.status-warning { color: #fff0b3; }
  .status-item.status-success { color: #b6fcb6; }
  .pulse-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vs-success);
    box-shadow: 0 0 0 0 rgba(137,209,133,.7);
    animation: pulse-status 2s infinite;
  }
  @keyframes pulse-status {
    0% { box-shadow: 0 0 0 0 rgba(137,209,133,.7); }
    70% { box-shadow: 0 0 0 6px rgba(137,209,133,0); }
    100% { box-shadow: 0 0 0 0 rgba(137,209,133,0); }
  }

  /* ===== CODEMIRROR THEME (VS Code Dark+) ===== */
  .cm-s-vscode-dark.CodeMirror {
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    background: var(--vs-bg);
    color: var(--vs-text);
    font-family: var(--vs-mono);
    font-size: 14px;
    line-height: 1.6;
  }
  .cm-s-vscode-dark .CodeMirror-scroll {
    height: 100% !important;
    min-height: 0 !important;
  }
  .cm-s-vscode-dark .CodeMirror-sizer {
    min-height: 0 !important;
  }
  .cm-s-vscode-dark .CodeMirror-line { padding: 0 16px; }
  .cm-s-vscode-dark .CodeMirror-gutters {
    background: var(--vs-bg);
    border-inline-end: 1px solid var(--vs-border);
  }
  .cm-s-vscode-dark .CodeMirror-linenumber {
    color: var(--vs-text-dim);
    padding: 0 12px 0 8px;
    font-size: 12px;
    font-family: var(--vs-mono);
  }
  .cm-s-vscode-dark .CodeMirror-cursor { border-inline-start: 2px solid #aeafad; }
  .cm-s-vscode-dark .CodeMirror-selected { background: #264f78 !important; }
  .cm-s-vscode-dark.CodeMirror-focused .CodeMirror-selected { background: #264f78 !important; }
  .cm-s-vscode-dark .CodeMirror-activeline-background { background: rgba(255,255,255,.03); }
  .cm-s-vscode-dark .CodeMirror-matchingbracket {
    background: rgba(191,191,191,.15) !important;
    outline: 1px solid #888 !important;
    color: inherit !important;
  }
  .cm-s-vscode-dark .cm-header { color: var(--vs-keyword); font-weight: 700; }
  .cm-s-vscode-dark .cm-header-1 { font-size: 1.5em; }
  .cm-s-vscode-dark .cm-header-2 { font-size: 1.3em; }
  .cm-s-vscode-dark .cm-header-3 { font-size: 1.15em; }
  .cm-s-vscode-dark .cm-strong { color: var(--vs-text-bright); font-weight: 700; }
  .cm-s-vscode-dark .cm-em { color: var(--vs-text); font-style: italic; }
  .cm-s-vscode-dark .cm-link { color: var(--vs-accent-light); text-decoration: underline; }
  .cm-s-vscode-dark .cm-url { color: var(--vs-accent-light); }
  .cm-s-vscode-dark .cm-quote { color: var(--vs-comment); font-style: italic; }
  .cm-s-vscode-dark .cm-comment { color: var(--vs-comment); font-style: italic; }
  .cm-s-vscode-dark .cm-string { color: var(--vs-string); }
  .cm-s-vscode-dark .cm-string-2 { color: var(--vs-string); }
  .cm-s-vscode-dark .cm-keyword { color: var(--vs-keyword); }
  .cm-s-vscode-dark .cm-builtin { color: var(--vs-type); }
  .cm-s-vscode-dark .cm-atom, .cm-s-vscode-dark .cm-bool { color: var(--vs-keyword); }
  .cm-s-vscode-dark .cm-number { color: var(--vs-number); }
  .cm-s-vscode-dark .cm-def { color: var(--vs-function); }
  .cm-s-vscode-dark .cm-variable { color: var(--vs-variable); }
  .cm-s-vscode-dark .cm-variable-2 { color: var(--vs-variable); }
  .cm-s-vscode-dark .cm-variable-3, .cm-s-vscode-dark .cm-type { color: var(--vs-type); }
  .cm-s-vscode-dark .cm-property { color: var(--vs-variable); }
  .cm-s-vscode-dark .cm-operator { color: var(--vs-operator); }
  .cm-s-vscode-dark .cm-bracket { color: var(--vs-operator); }
  .cm-s-vscode-dark .cm-tag { color: var(--vs-tag); }
  .cm-s-vscode-dark .cm-attribute { color: var(--vs-attribute); }
  .cm-s-vscode-dark .cm-meta { color: var(--vs-text-dim); }
  .cm-s-vscode-dark .cm-qualifier { color: var(--vs-type); }
  .cm-s-vscode-dark .cm-hr { color: var(--vs-text-dim); }
  .cm-s-vscode-dark .cm-formatting { color: var(--vs-text-dim); opacity: .6; }
  .cm-s-vscode-dark .cm-error {
    color: var(--vs-error);
    background: rgba(244,135,113,.1);
  }
  .cm-s-vscode-dark .CodeMirror-foldmarker {
    color: var(--vs-text-dim);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 0 6px;
    font-family: var(--vs-mono);
    font-size: 11px;
    cursor: pointer;
  }
  .cm-s-vscode-dark .CodeMirror-foldgutter-folded,
  .cm-s-vscode-dark .CodeMirror-foldgutter-open {
    color: var(--vs-text-dim);
  }
  .CodeMirror-dialog {
    background: var(--vs-bg-2);
    color: var(--vs-text);
    border-bottom: 1px solid var(--vs-border);
    padding: 6px 12px;
    font-family: var(--vs-mono);
    font-size: 12px;
  }
  .CodeMirror-dialog input {
    background: var(--vs-bg);
    color: var(--vs-text);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 3px 8px;
    font-family: var(--vs-mono);
    font-size: 12px;
    outline: none;
  }
  .CodeMirror-dialog input:focus { border-color: var(--vs-accent); }
  .CodeMirror-dialog button {
    background: var(--vs-bg-3);
    color: var(--vs-text);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: var(--vs-font);
    font-size: 12px;
    margin-inline-start: 6px;
  }
  .CodeMirror-dialog button:hover { background: var(--vs-bg-4); }
  .CodeMirror-search-match {
    background: rgba(234,92,0,.33) !important;
    border: 1px solid rgba(234,92,0,.5);
  }
  .CodeMirror-simplescroll-horizontal div,
  .CodeMirror-simplescroll-vertical div {
    background: rgba(121,121,121,.4) !important;
    border-radius: 0 !important;
  }

  /* ===== PRISM THEME (VS Code Dark+) ===== */
  code[class*="language-"], pre[class*="language-"] {
    color: var(--vs-text);
    background: none;
    font-family: var(--vs-mono);
    font-size: 13px;
    text-align: start;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.6;
    tab-size: 2;
    hyphens: none;
  }
  pre[class*="language-"] {
    padding: 12px 16px;
    margin: 12px 0;
    overflow: auto;
    border-radius: 3px;
    background: #1a1a1a;
    border: 1px solid var(--vs-border);
  }
  :not(pre) > code[class*="language-"] {
    background: rgba(255,255,255,.08);
    color: var(--vs-string);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: .9em;
  }
  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--vs-comment); font-style: italic; }
  .token.punctuation { color: var(--vs-operator); }
  .token.namespace { opacity: .7; }
  .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--vs-tag); }
  .token.boolean, .token.number { color: var(--vs-number); }
  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--vs-string); }
  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--vs-operator); }
  .token.atrule, .token.attr-value, .token.keyword { color: var(--vs-keyword); }
  .token.function, .token.class-name { color: var(--vs-function); }
  .token.regex, .token.important, .token.variable { color: #d16969; }
  .token.important, .token.bold { font-weight: bold; }
  .token.italic { font-style: italic; }
  .token.entity { cursor: help; }

  pre[class*="language-"].line-numbers { position: relative; padding-inline-start: 3.5em; counter-reset: linenumber; }
  pre[class*="language-"].line-numbers > code { position: relative; white-space: inherit; }
  .line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    inset-inline-start: -3.5em;
    width: 3em;
    letter-spacing: -1px;
    border-inline-end: 1px solid var(--vs-border);
    user-select: none;
  }
  .line-numbers-rows > span { display: block; counter-increment: linenumber; }
  .line-numbers-rows > span::before {
    content: counter(linenumber);
    color: var(--vs-text-dim);
    display: block;
    padding-inline-end: 0.8em;
    text-align: end;
    font-size: 12px;
    font-family: var(--vs-mono);
  }

  div.code-toolbar { position: relative; }
  div.code-toolbar > .toolbar {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    opacity: 0;
    transition: opacity .2s;
  }
  div.code-toolbar:hover > .toolbar, div.code-toolbar:focus-within > .toolbar { opacity: 1; }
  div.code-toolbar > .toolbar > .toolbar-item { display: inline-block; margin-inline-start: 4px; }
  div.code-toolbar > .toolbar > .toolbar-item > a,
  div.code-toolbar > .toolbar > .toolbar-item > button,
  div.code-toolbar > .toolbar > .toolbar-item > span {
    color: var(--vs-text-dim);
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--vs-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  div.code-toolbar > .toolbar > .toolbar-item > a:hover,
  div.code-toolbar > .toolbar > .toolbar-item > button:hover,
  div.code-toolbar > .toolbar > .toolbar-item > span:hover {
    background: var(--vs-hover);
    color: var(--vs-text-bright);
  }
  div.code-toolbar > .toolbar > .toolbar-item > span[data-language]::before {
    content: attr(data-language);
  }

  /* ===== MD PREVIEW ===== */
  .md-preview { line-height: 1.7; word-break: break-word; color: var(--vs-text); }
  .md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 {
    font-weight: 600; margin: 1.2em 0 .5em; color: var(--vs-text-bright);
    border-bottom: none;
  }
  .md-preview h1 { font-size: 1.7em; border-bottom: 1px solid var(--vs-border); padding-bottom: .3em; }
  .md-preview h2 { font-size: 1.4em; border-bottom: 1px solid var(--vs-border); padding-bottom: .3em; }
  .md-preview h3 { font-size: 1.2em; }
  .md-preview h4 { font-size: 1.05em; }
  .md-preview p { margin: .7em 0; }
  .md-preview a { color: var(--vs-accent-light); text-decoration: none; }
  .md-preview a:hover { text-decoration: underline; }
  .md-preview ul, .md-preview ol { margin: .7em 0; padding-inline-start: 2em; }
  .md-preview li { margin: .2em 0; }
  .md-preview blockquote {
    border-inline-start: 4px solid var(--vs-border);
    padding: 4px 16px;
    color: var(--vs-text-dim);
    margin: .8em 0;
    background: rgba(255,255,255,.02);
  }
  .md-preview hr { border: none; border-top: 1px solid var(--vs-border); margin: 1.5em 0; }
  .md-preview table { border-collapse: collapse; margin: .8em 0; }
  .md-preview th, .md-preview td {
    border: 1px solid var(--vs-border);
    padding: 6px 12px;
  }
  .md-preview th { background: var(--vs-bg-2); font-weight: 600; }
  .md-preview tr:nth-child(2n) { background: rgba(255,255,255,.02); }
  .md-preview img { max-width: 100%; border-radius: 3px; }
  .md-preview kbd {
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--vs-mono);
    font-size: .9em;
    color: var(--vs-text);
  }

  /* ===== TOASTS ===== */
  #toast-wrap {
    position: fixed;
    bottom: 40px;
    inset-inline-end: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    align-items: flex-end;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 40px);
  }
  .toast {
    pointer-events: auto;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
    font-size: 12px;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    transform: translateX(120%);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
  }
  html[dir="rtl"] .toast { transform: translateX(-120%); }
  .toast.show { transform: translateX(0); opacity: 1; }
  .toast.info { border-inline-start: 3px solid var(--vs-info); }
  .toast.success { border-inline-start: 3px solid var(--vs-success); }
  .toast.error { border-inline-start: 3px solid var(--vs-error); }
  .toast.warning { border-inline-start: 3px solid var(--vs-warning); }
  .toast .t-ic { font-size: 16px; flex-shrink: 0; }
  .toast.info .t-ic { color: var(--vs-info); }
  .toast.success .t-ic { color: var(--vs-success); }
  .toast.error .t-ic { color: var(--vs-error); }
  .toast.warning .t-ic { color: var(--vs-warning); }
  .toast .t-msg { flex: 1; line-height: 1.5; }
  .toast .t-x {
    cursor: pointer; opacity: .6; font-size: 14px; flex-shrink: 0;
    color: var(--vs-text-dim);
  }
  .toast .t-x:hover { opacity: 1; color: var(--vs-text-bright); }
  .toast .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: var(--vs-accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ===== COMMAND PALETTE ===== */
  #cmdPalette {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    background: rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, visibility .15s;
  }
  #cmdPalette.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .cmd-card {
    width: 92%;
    max-width: 620px;
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform .15s cubic-bezier(.2,.8,.2,1);
  }
  #cmdPalette.open .cmd-card { transform: translateY(0); }
  .cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--vs-border);
    background: var(--vs-bg);
  }
  .cmd-input-wrap i { color: var(--vs-text-dim); font-size: 16px; }
  .cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--vs-text);
    font-family: var(--vs-mono);
    font-size: 13px;
  }
  .cmd-input::placeholder { color: var(--vs-text-dim); }
  .cmd-mode {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-family: var(--vs-mono);
    text-transform: uppercase;
  }
  .cmd-mode.search { background: var(--vs-bg-4); color: var(--vs-text); }
  .cmd-mode.symbol { background: #4d2e80; color: #c9a6ff; }
  .cmd-mode.command { background: #7a4a00; color: #ffd27a; }
  .cmd-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
  }
  .cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .1s;
  }
  .cmd-item:hover, .cmd-item.active { background: var(--vs-hover); }
  .cmd-item.active { background: var(--vs-selected); }
  .cmd-item .cmd-icon {
    width: 22px; height: 22px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
  }
  .cmd-item .cmd-icon.sym-fn { background: #4d2e80; color: #c9a6ff; }
  .cmd-item .cmd-icon.sym-var { background: #0d4a6b; color: #89d1ff; }
  .cmd-item .cmd-icon.sym-cls { background: #6b4a0d; color: #ffd27a; }
  .cmd-item .cmd-icon.sym-cmd { background: var(--vs-bg-4); color: var(--vs-text); }
  .cmd-item .cmd-icon.sym-line { background: #6b0d4a; color: #ff89d1; }
  .cmd-item .cmd-body { flex: 1; min-width: 0; }
  .cmd-item .cmd-title {
    font-family: var(--vs-mono);
    font-size: 13px;
    color: var(--vs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmd-item .cmd-sub {
    font-size: 11px;
    color: var(--vs-text-dim);
    margin-top: 2px;
    font-family: var(--vs-mono);
  }
  .cmd-item .cmd-hint {
    font-size: 11px;
    color: var(--vs-text-dim);
    font-family: var(--vs-mono);
    background: var(--vs-bg-3);
    padding: 2px 6px;
    border-radius: 3px;
  }
  .cmd-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--vs-text-dim);
    font-size: 13px;
  }
  .cmd-footer {
    padding: 6px 12px;
    border-top: 1px solid var(--vs-border);
    font-size: 11px;
    color: var(--vs-text-dim);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--vs-bg);
  }
  .cmd-footer kbd {
    background: var(--vs-bg-3);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--vs-border);
    font-family: var(--vs-mono);
    color: var(--vs-text);
    font-size: 10px;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, visibility .2s;
  }
  .modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .modal-overlay.open { opacity: 1; pointer-events: auto; }
  .modal-card {
    width: 100%;
    max-width: 520px;
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    transform: translateY(-10px) scale(.98);
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
  }
  .modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
  .modal-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--vs-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .modal-header .mh-icon {
    width: 32px; height: 32px;
    background: var(--vs-bg-4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--vs-accent);
    flex-shrink: 0;
  }
  .modal-header .mh-body { flex: 1; min-width: 0; }
  .modal-header .mh-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--vs-text-bright);
    margin: 0 0 4px;
  }
  .modal-header .mh-sub {
    font-size: 11px;
    color: var(--vs-text-dim);
    margin: 0;
    font-family: var(--vs-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .modal-header .mh-close {
    width: 24px; height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-text-dim);
    font-size: 16px;
  }
  .modal-header .mh-close:hover { background: var(--vs-bg-4); color: var(--vs-text-bright); }
  .modal-body { padding: 16px 20px; }
  .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--vs-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .modal-footer .btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .btn {
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .1s, border-color .1s;
    border: 1px solid transparent;
    min-height: 28px;
  }
  .btn i { font-size: 14px; }
  .btn-primary {
    background: var(--vs-accent);
    color: white;
    border-color: var(--vs-accent);
  }
  .btn-primary:hover { background: var(--vs-accent-light); border-color: var(--vs-accent-light); }
  .btn-secondary {
    background: var(--vs-bg-3);
    color: var(--vs-text);
    border-color: var(--vs-border);
  }
  .btn-secondary:hover { background: var(--vs-bg-4); color: var(--vs-text-bright); }
  .btn-danger {
    background: transparent;
    color: var(--vs-error);
    border-color: var(--vs-error);
  }
  .btn-danger:hover { background: var(--vs-error); color: white; }
  .btn-block { width: 100%; }

  .info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    font-size: 12px;
    margin-bottom: 16px;
  }
  .info-grid .label { color: var(--vs-text-dim); }
  .info-grid .value {
    color: var(--vs-text);
    font-family: var(--vs-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .preview-box {
    background: var(--vs-bg);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 12px;
    max-height: 180px;
    overflow: auto;
    margin-bottom: 16px;
    font-family: var(--vs-mono);
    font-size: 12px;
  }

  /* Naming Modal */
  .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .form-row label {
    font-size: 12px;
    color: var(--vs-text);
    flex: 1;
    cursor: pointer;
  }
  .form-row input[type="text"],
  .form-row select {
    flex: 1;
    background: var(--vs-bg);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 4px 8px;
    color: var(--vs-text);
    font-family: var(--vs-mono);
    font-size: 12px;
    outline: none;
  }
  .form-row input[type="text"]:focus,
  .form-row select:focus { border-color: var(--vs-accent); }
  .form-row select option { background: var(--vs-bg-2); }
  .form-row input[type="checkbox"] {
    accent-color: var(--vs-accent);
    width: 14px; height: 14px;
    cursor: pointer;
  }
  .naming-preview {
    background: var(--vs-bg);
    border: 1px solid var(--vs-border);
    border-radius: 3px;
    padding: 10px 14px;
    margin-top: 14px;
    font-family: var(--vs-mono);
    font-size: 12px;
  }
  .naming-preview .preview-label {
    font-size: 10px;
    color: var(--vs-text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
  }
  .naming-preview .preview-value { color: var(--vs-text-bright); }

  .detect-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--vs-mono);
    text-transform: uppercase;
    letter-spacing: .3px;
  }
  .detect-badge.content { background: #2d4d1a; color: #b6fcb6; }
  .detect-badge.ext { background: #1a3d4d; color: #b6e4fc; }

  /* ===== WELCOME SCREEN ===== */
  .welcome-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--vs-text-dim);
    background: var(--vs-bg);
  }
  .welcome-screen.hidden { display: none; }
  .welcome-screen .welcome-logo {
    font-size: 64px;
    color: var(--vs-accent);
    margin-bottom: 20px;
    opacity: .6;
  }
  .welcome-screen h2 {
    font-size: 20px;
    font-weight: 400;
    color: var(--vs-text);
    margin: 0 0 8px;
  }
  .welcome-screen p {
    font-size: 13px;
    margin: 0 0 24px;
    max-width: 440px;
    line-height: 1.6;
  }
  .welcome-screen .shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    max-width: 600px;
    width: 100%;
  }
  .welcome-screen .shortcut-card {
    background: var(--vs-bg-2);
    border: 1px solid var(--vs-border);
    border-radius: 4px;
    padding: 16px;
    text-align: start;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .welcome-screen .shortcut-card:hover {
    background: var(--vs-hover);
    border-color: var(--vs-accent);
  }
  .welcome-screen .shortcut-card i {
    font-size: 22px;
    color: var(--vs-accent);
    margin-bottom: 8px;
    display: block;
  }
  .welcome-screen .shortcut-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-text);
    margin: 0 0 4px;
  }
  .welcome-screen .shortcut-card p {
    font-size: 11px;
    color: var(--vs-text-dim);
    margin: 0;
    line-height: 1.4;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: 0 1fr 22px 48px;
      grid-template-areas:
        "title"
        "main"
        "status"
        "activity";
    }
    .title-bar { display: none; }
    .activity-bar {
      flex-direction: row;
      border-inline-end: none;
      border-top: 1px solid var(--vs-border);
      padding: 0 6px;
      gap: 4px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .activity-btn {
      width: 40px;
      height: 40px;
      flex-direction: row;
      border-inline-start: none;
      border-top: 2px solid transparent;
    }
    .activity-btn.active { border-inline-start-color: transparent; border-top-color: var(--vs-text-bright); }
    .activity-btn i { font-size: 20px; }
    .activity-btn .badge { top: 2px; inset-inline-end: 2px; min-width: 14px; height: 14px; font-size: 8px; }
    .activity-spacer { display: none; }
    .sidebar {
      position: fixed;
      top: 0;
      inset-inline-start: 0;
      width: 85%;
      max-width: 320px;
      height: calc(100vh - 22px - 48px);
      z-index: 8500;
      box-shadow: 4px 0 16px rgba(0,0,0,.4);
      transform: translateX(-100%);
      transition: transform .25s ease;
    }
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 8499;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .25s, visibility .25s;
    }
    .sidebar-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
    }
    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
    .breadcrumbs { display: none; }
    .status-bar .status-item:nth-child(n+5) { display: none; }
    .cmd-card { width: 96%; max-width: 96%; }
    .welcome-screen .shortcuts { grid-template-columns: 1fr; }
    .welcome-screen h2 { font-size: 18px; }
    .welcome-screen .welcome-logo { font-size: 48px; }
  }
  @media (min-width: 769px) {
    .sidebar-overlay { display: none !important; }
  }