@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

      * {
        box-sizing: border-box;
      }

      html,
      body {
        --bg: #f3f7fb;
        --bg-accent: rgba(41, 121, 255, 0.16);
        --bg-accent-2: rgba(14, 165, 233, 0.12);
        --surface: rgba(255, 255, 255, 0.76);
        --surface-strong: rgba(255, 255, 255, 0.96);
        --surface-muted: #e8eef6;
        --surface-deep: #d9e4f1;
        --line: rgba(15, 23, 42, 0.08);
        --line-strong: rgba(15, 23, 42, 0.16);
        --text: #0b1220;
        --muted: #6b7a90;
        --accent: #2563eb;
        --accent-2: #0ea5e9;
        --accent-soft: rgba(37, 99, 235, 0.1);
        --danger: #dc2626;
        --shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
        --shadow-strong: 0 24px 80px rgba(15, 23, 42, 0.14);
        --input-bg: rgba(255, 255, 255, 0.86);
        --input-text: #0b1220;
        --overlay: rgba(15, 23, 42, 0.08);
        --terminal-bg: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
        --terminal-text: #10203a;
        --terminal-muted: #58708d;
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background:
          radial-gradient(circle at top left, var(--bg-accent), transparent 30%),
          radial-gradient(circle at 80% 0%, var(--bg-accent-2), transparent 24%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(243, 247, 251, 0.94)),
          var(--bg);
        color: var(--text);
        font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      button {
        min-height: 38px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-strong);
        color: var(--text);
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
        font-weight: 600;
      }

      button:hover {
        border-color: rgba(37, 99, 235, 0.22);
        background: rgba(248, 250, 252, 0.92);
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
      }

      button:disabled {
        cursor: not-allowed;
        opacity: 0.45;
      }

      input,
      select,
      textarea {
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--input-bg);
        color: var(--input-text);
        padding: 0 12px;
      }

      textarea {
        min-height: 88px;
        resize: vertical;
        padding: 10px;
      }

      #loading {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        background: rgba(16, 18, 20, 0.92);
      }

      #loading.hidden {
        display: none;
      }

      .loading-card {
        width: min(360px, calc(100vw - 32px));
        display: grid;
        gap: 16px;
        justify-items: center;
        padding: 28px 24px 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      }

      .loading-label {
        color: #e5eefc;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
      }

      .loading-transfer {
        width: 100%;
        display: grid;
        gap: 8px;
      }

      .loading-progress-track {
        width: 100%;
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.2);
      }

      .loading-progress-fill {
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #38bdf8, #2f81f7);
        transition: width 120ms linear;
      }

      .loading-transfer.indeterminate .loading-progress-fill {
        width: 32%;
        animation: loading-progress-slide 1.2s ease-in-out infinite;
      }

      .loading-transfer-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #d7e3fb;
        font-size: 12px;
        font-weight: 600;
      }

      .loading-transfer-meta {
        color: rgba(215, 227, 251, 0.7);
        font-size: 12px;
        text-align: center;
      }

      body.app-mode-active {
        background: #020617;
      }

      body.app-mode-active #app {
        visibility: hidden;
      }

      body.app-mode-active #appModeShell {
        visibility: visible;
      }

      .busy-spinner {
        width: 48px;
        height: 48px;
        border: 5px solid rgba(255, 255, 255, 0.18);
        border-top-color: #2f81f7;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes loading-progress-slide {
        0% {
          transform: translateX(-120%);
        }
        100% {
          transform: translateX(320%);
        }
      }

      #boot-error {
        max-width: min(760px, calc(100vw - 32px));
        margin: 24vh auto 0;
        color: #ff7b72;
        white-space: pre-wrap;
        font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      }

      .app {
        --sidebar-width: 260px;
        display: grid;
        grid-template-columns: var(--sidebar-width) 10px minmax(0, 1fr);
        width: 100%;
        height: 100%;
        position: relative;
      }

      .app.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
      }

      .app.sidebar-collapsed .sidebar {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--sidebar-width);
        z-index: 28;
        transform: translateX(-100%);
        transition: transform 160ms ease;
        opacity: 0;
        pointer-events: none;
      }

      .app.sidebar-collapsed .main {
        grid-column: 1;
      }

      .app.sidebar-collapsed .sidebar-resizer {
        display: none;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
        border-right: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 252, 0.72));
        backdrop-filter: blur(28px);
        padding: 18px 14px;
      }

      .sidebar-resizer {
        position: relative;
        cursor: col-resize;
        background: rgba(15, 23, 42, 0.7);
        border-right: 1px solid rgba(148, 163, 184, 0.1);
        border-left: 1px solid rgba(148, 163, 184, 0.06);
      }

      .sidebar-resizer::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 42px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.32);
        transform: translate(-50%, -50%);
      }

      .sidebar-resizer:hover::before,
      .sidebar-resizer.dragging::before {
        background: rgba(56, 189, 248, 0.72);
      }

      .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(2, 6, 23, 0.52);
        backdrop-filter: blur(2px);
      }

      .brand {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 48px;
      }

      .brand strong {
        font-size: 30px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0;
      }

      .brand span {
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
      }

      .workspace-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .workspace-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        overflow: auto;
        min-height: 0;
      }

      .workspace-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        min-height: 54px;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 10px 12px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 253, 0.7));
      }

      .workspace-item.active {
        border-color: rgba(37, 99, 235, 0.36);
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 233, 0.12));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }

      .workspace-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
      }

      .workspace-meta {
        color: #8b949e;
        font-size: 11px;
      }

      .main {
        display: grid;
        grid-template-rows: 48px minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(26px);
        padding: 10px 14px;
        position: sticky;
        top: 0;
        z-index: 24;
      }

      .topbar-left,
      .topbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .sidebar-toggle {
        display: none;
        width: 38px;
        padding: 0;
        justify-content: center;
        align-items: center;
      }

      .tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .tabs .tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: rgba(255, 255, 255, 0.44);
      }

      .tabs .tab svg {
        width: 16px;
        height: 16px;
      }

      .tab.active {
        border-color: rgba(37, 99, 235, 0.28);
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
        box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
      }

      .active-title {
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        min-width: 0;
      }

      .view {
        display: none;
        min-width: 0;
        min-height: 0;
      }

      .view.active {
        display: block;
      }

      .terminal-view {
        position: relative;
        height: 100%;
      }

      #terminal {
        height: 100%;
      }

      .terminal {
        --size: 1.35;
        --color: var(--text);
        background: var(--terminal-bg);
        color: var(--terminal-text);
        border-left: 1px solid var(--line);
      }

      #terminal,
      .terminal .terminal-scroller,
      .terminal .cmd,
      .terminal .cmd div,
      .terminal .terminal-output > div {
        background: transparent;
        color: var(--terminal-text);
        --color: var(--terminal-text);
        --background: #081223;
        --link-color: #60a5fa;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
      }

      .terminal .terminal-output,
      .terminal .terminal-output > div,
      .terminal .terminal-output > div > div,
      .terminal .terminal-output [data-text],
      .terminal .terminal-output span,
      .terminal .terminal-output span span {
        background: transparent !important;
        background-color: transparent !important;
        color: inherit;
      }

      body[data-theme="light"] #terminal *::selection,
      body[data-theme="light"] #terminal::selection,
      body[data-theme="light"] .terminal *::selection,
      body[data-theme="light"] .terminal::selection {
        background: #1d4ed8;
        color: #f8fbff !important;
        -webkit-text-fill-color: #f8fbff;
        text-shadow: none;
      }

      body[data-theme="light"] #terminal *::-moz-selection,
      body[data-theme="light"] #terminal::-moz-selection,
      body[data-theme="light"] .terminal *::-moz-selection,
      body[data-theme="light"] .terminal::-moz-selection {
        background: #1d4ed8;
        color: #f8fbff !important;
        text-shadow: none;
      }

      .terminal-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: var(--surface-muted);
      }

      .terminal-fullscreen .fullscreen-exit {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 42;
      }

      .terminal-fullscreen #terminal {
        height: 100%;
      }

      .file-view {
        display: none;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
      }

      .file-view.active {
        display: grid;
      }

      .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid var(--line);
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.8);
      }

      .toolbar input.path {
        flex: 1 1 280px;
        min-width: 180px;
      }

      .file-list {
        position: relative;
        overflow: auto;
        min-height: 0;
        background: transparent;
      }

      .marquee-box {
        position: absolute;
        z-index: 20;
        border: 1px solid rgba(56, 189, 248, 0.95);
        background: rgba(14, 165, 233, 0.16);
        border-radius: 8px;
        pointer-events: none;
      }

      .file-row {
        display: grid;
        grid-template-columns: 28px 36px minmax(0, 1fr) 110px 160px;
        gap: 12px;
        align-items: center;
        height: 48px;
        border-bottom: 1px solid var(--line);
        padding: 0 14px;
        cursor: default;
      }

      .file-row:hover,
      .file-row.selected {
        background: rgba(14, 165, 233, 0.12);
      }

      .file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-check {
        width: 16px;
        height: 16px;
        accent-color: #0ea5e9;
      }

      .file-muted {
        color: var(--muted);
        font-size: 12px;
      }

      .editor-view {
        display: none;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .editor-view.active {
        display: flex;
      }

      .editor-shell {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        background: rgba(255, 255, 255, 0.72);
        overflow: hidden;
      }

      .editor-menubar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.76);
      }

      .menu-button {
        position: relative;
        min-width: 0;
        height: 30px;
        padding: 0 10px;
        border-radius: 7px;
        border-color: transparent;
        background: transparent;
        font-size: 13px;
      }

      .menu-button:hover,
      .menu-button.active {
        background: rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.16);
      }

      .menu-popover {
        position: fixed;
        z-index: 90;
        min-width: 240px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-strong);
        padding: 8px;
      }

      .menu-item {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 34px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        text-align: left;
      }

      .menu-item svg {
        width: 15px;
        height: 15px;
      }

      .menu-item:hover {
        background: rgba(14, 165, 233, 0.14);
      }

      .menu-item .menu-shortcut {
        color: var(--muted);
        font-size: 12px;
      }

      .menu-item .menu-hint {
        color: var(--muted);
        font-size: 12px;
      }

      .preview-modal {
        position: fixed;
        inset: 0;
        z-index: 96;
        display: grid;
        place-items: center;
        padding: 22px;
        background: rgba(3, 7, 18, 0.72);
        backdrop-filter: blur(10px);
      }

      .preview-shell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: min(1200px, calc(100vw - 40px));
        height: min(88vh, 860px);
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.98);
        overflow: hidden;
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
      }

      .preview-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
      }

      .preview-stage {
        min-width: 0;
        min-height: 0;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.98));
      }

      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .preview-iframe {
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
      }

      .menu-separator {
        height: 1px;
        margin: 6px 4px;
        background: var(--line);
      }

      .editor-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.78);
      }

      .editor-toolbar-group {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .editor-toolbar .path {
        width: 100%;
      }

      .editor-toolbar .icon-only.primary {
        background: linear-gradient(135deg, #2563eb, #0891b2);
        border-color: rgba(56, 189, 248, 0.55);
      }

      .editor-toolbar .icon-only svg,
      .editor-menubar .icon-only svg {
        width: 15px;
        height: 15px;
      }

      .editor-status {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
      }

      .editor-main {
        display: flex;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .editor-main.split {
        flex-direction: row;
      }

      .theme-toggle-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
      }

      body[data-theme="dark"] {
        --bg: #07111f;
        --bg-accent: rgba(37, 99, 235, 0.24);
        --bg-accent-2: rgba(14, 165, 233, 0.14);
        --surface: rgba(10, 19, 34, 0.76);
        --surface-strong: rgba(13, 24, 42, 0.94);
        --surface-muted: #0f1b2f;
        --surface-deep: #091221;
        --line: rgba(148, 163, 184, 0.14);
        --line-strong: rgba(148, 163, 184, 0.24);
        --text: #edf4ff;
        --muted: #8fa3c0;
        --accent-soft: rgba(59, 130, 246, 0.14);
        --shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
        --shadow-strong: 0 36px 90px rgba(2, 6, 23, 0.44);
        --input-bg: rgba(7, 17, 31, 0.82);
        --input-text: #edf4ff;
        --overlay: rgba(2, 6, 23, 0.58);
        --terminal-bg: linear-gradient(180deg, #081223 0%, #0c1528 100%);
        --terminal-text: #eef5ff;
        --terminal-muted: #8ba3c4;
        background:
          radial-gradient(circle at top left, var(--bg-accent), transparent 30%),
          radial-gradient(circle at 80% 0%, var(--bg-accent-2), transparent 24%),
          linear-gradient(180deg, rgba(8, 17, 31, 0.9), rgba(7, 17, 31, 0.98)),
          var(--bg);
      }

      body[data-theme="dark"] .sidebar,
      body[data-theme="dark"] .topbar,
      body[data-theme="dark"] .toolbar,
      body[data-theme="dark"] .display-view,
      body[data-theme="dark"] .settings-view,
      body[data-theme="dark"] .manager-view,
      body[data-theme="dark"] .editor-shell,
      body[data-theme="dark"] .editor-menubar,
      body[data-theme="dark"] .editor-toolbar,
      body[data-theme="dark"] .workspace-item,
      body[data-theme="dark"] .file-list,
      body[data-theme="dark"] .menu-popover,
      body[data-theme="dark"] .preview-shell,
      body[data-theme="dark"] .panel,
      body[data-theme="dark"] .editor-modal,
      body[data-theme="dark"] #contextMenu,
      body[data-theme="dark"] .app-mode-card,
      body[data-theme="dark"] .dialog {
        background: var(--surface-strong);
        color: var(--text);
      }

      body[data-theme="dark"] .settings-view,
      body[data-theme="dark"] .manager-view,
      body[data-theme="dark"] .display-view {
        background:
          radial-gradient(circle at top left, rgba(37, 99, 235, 0.1), transparent 24%),
          radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.08), transparent 20%),
          linear-gradient(180deg, rgba(8, 17, 31, 0.98), rgba(7, 17, 31, 1));
      }

      body[data-theme="dark"] input,
      body[data-theme="dark"] select,
      body[data-theme="dark"] textarea,
      body[data-theme="dark"] .editor-modal input,
      body[data-theme="dark"] .path {
        background: var(--input-bg);
        color: var(--input-text);
        border-color: var(--line);
      }

      body[data-theme="dark"] input:disabled,
      body[data-theme="dark"] select:disabled,
      body[data-theme="dark"] textarea:disabled {
        background: rgba(10, 19, 34, 0.62);
        color: rgba(237, 244, 255, 0.64);
      }

      body[data-theme="dark"] input::placeholder,
      body[data-theme="dark"] textarea::placeholder {
        color: rgba(143, 163, 192, 0.72);
      }

      body[data-theme="dark"] input:-webkit-autofill,
      body[data-theme="dark"] input:-webkit-autofill:hover,
      body[data-theme="dark"] input:-webkit-autofill:focus,
      body[data-theme="dark"] textarea:-webkit-autofill,
      body[data-theme="dark"] select:-webkit-autofill {
        -webkit-text-fill-color: var(--input-text);
        box-shadow: 0 0 0 1000px var(--input-bg) inset;
        -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
        caret-color: var(--input-text);
        border-color: var(--line);
      }

      body[data-theme="dark"] .preview-stage,
      body[data-theme="dark"] .display-surface,
      body[data-theme="dark"] .display-stage,
      body[data-theme="dark"] .terminal,
      body[data-theme="dark"] #terminal,
      body[data-theme="dark"] .terminal .terminal-scroller,
      body[data-theme="dark"] .terminal .cmd,
      body[data-theme="dark"] .terminal .cmd div,
      body[data-theme="dark"] .terminal .terminal-output > div,
      body[data-theme="dark"] .terminal-fullscreen {
        background: var(--terminal-bg);
        color: var(--terminal-text);
      }

      body[data-theme="dark"] .menu-button:hover,
      body[data-theme="dark"] .menu-button.active,
      body[data-theme="dark"] .file-row:hover,
      body[data-theme="dark"] .file-row.selected,
      body[data-theme="dark"] .menu-item:hover {
        background: rgba(37, 99, 235, 0.18);
      }

      body[data-theme="dark"] button:hover,
      body[data-theme="dark"] .tabs .tab:hover,
      body[data-theme="dark"] .icon-button:hover,
      body[data-theme="dark"] .icon-only:hover {
        background: rgba(18, 31, 53, 0.98);
        border-color: rgba(59, 130, 246, 0.34);
        color: var(--text);
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.24);
      }

      body[data-theme="dark"] .tab.active:hover,
      body[data-theme="dark"] .editor-toolbar .icon-only.primary:hover,
      body[data-theme="dark"] .button-primary:hover {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
      }

      body[data-theme="dark"] .brand span,
      body[data-theme="dark"] .workspace-meta,
      body[data-theme="dark"] .file-muted,
      body[data-theme="dark"] .editor-status,
      body[data-theme="dark"] .active-title,
      body[data-theme="dark"] .setting-field .hint,
      body[data-theme="dark"] .app-mode-card p {
        color: var(--muted);
      }

      body[data-theme="dark"] .setting-checkbox,
      body[data-theme="dark"] .setting-field label,
      body[data-theme="dark"] .context-item,
      body[data-theme="dark"] .menu-item,
      body[data-theme="dark"] .palette-item {
        color: var(--text);
      }

      body[data-theme="dark"] .setting-guide {
        background: rgba(15, 23, 42, 0.58);
      }

      .editor-pane {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        border-right: 1px solid rgba(148, 163, 184, 0.12);
        overflow: hidden;
      }

      .editor-pane:last-child {
        border-right: 0;
      }

      .editor-pane-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(15, 23, 42, 0.8);
      }

      .editor-pane-header .path {
        width: 100%;
      }

      #editor,
      #editorSplit {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }

      .editor-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 58;
      }

      .editor-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 95;
        display: grid;
        place-items: start center;
        padding-top: 10vh;
        background: rgba(2, 6, 23, 0.52);
      }

      .editor-modal {
        width: min(760px, calc(100vw - 28px));
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .editor-modal input {
        width: 100%;
        height: 42px;
        border: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        border-radius: 0;
        background: transparent;
        padding: 0 14px;
      }

      .palette-list {
        max-height: min(56vh, 420px);
        overflow: auto;
      }

      .palette-item {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 42px;
        padding: 0 14px;
        border: 0;
        background: transparent;
        color: var(--text);
        text-align: left;
      }

      .palette-item:hover,
      .palette-item.active {
        background: rgba(14, 165, 233, 0.14);
      }

      .display-view {
        display: none;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        background: rgba(255, 255, 255, 0.78);
      }

      .display-view.active {
        display: grid;
      }

      .display-shell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
      }

      .display-surface {
        position: relative;
        display: grid;
        place-items: start center;
        min-height: 0;
        overflow: auto;
        background:
          radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
          linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.96));
        padding: 20px;
      }

      .display-stage {
        position: relative;
        width: min(100%, 1200px);
        min-height: min(100%, 680px);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
        overflow: hidden;
      }

      .display-empty,
      .display-content,
      .display-canvas {
        width: 100%;
        height: 100%;
      }

      .display-empty {
        display: grid;
        place-items: center;
        padding: 28px;
        color: var(--muted);
        text-align: center;
      }

      .display-empty strong {
        display: block;
        margin-bottom: 6px;
        color: var(--text);
        font-size: 15px;
      }

      .display-canvas {
        display: block;
        outline: none;
        background: #ffffff;
      }

      .display-content {
        overflow: auto;
        padding: 20px;
      }

      .display-html {
        line-height: 1.6;
        color: var(--text);
      }

      .display-html table,
      .display-table {
        width: 100%;
        border-collapse: collapse;
      }

      .display-html th,
      .display-html td,
      .display-table th,
      .display-table td {
        border: 1px solid rgba(148, 163, 184, 0.16);
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
      }

      .display-html th,
      .display-table th {
        background: rgba(226, 232, 240, 0.72);
      }

      .display-media {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
      }

      .display-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 55;
        padding: 16px;
        background: rgba(241, 245, 249, 0.98);
      }

      .hidden {
        display: none !important;
      }

      .dialog-backdrop {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(15, 23, 42, 0.34);
        backdrop-filter: blur(12px);
      }

      .dialog {
        width: min(560px, calc(100vw - 20px));
        max-height: min(86vh, 760px);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-strong);
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
        padding: 18px;
        overflow: hidden;
      }

      .dialog h2 {
        margin: 0;
        font-size: 18px;
      }

      .dialog p {
        margin: 8px 0 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .dialog-fields {
        display: grid;
        gap: 12px;
        margin-top: 16px;
        min-height: 0;
        overflow: auto;
        padding-right: 4px;
        padding-bottom: 92px;
        scrollbar-gutter: stable;
      }

      .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 14px -18px -18px;
        position: sticky;
        bottom: 0;
        background: var(--surface-strong);
        padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
      }

      .dialog-actions button {
        min-width: 92px;
        min-height: 36px;
        height: 36px;
        border-radius: 10px;
      }

      .dialog-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        padding: 2px 0;
      }

      .dialog-checkbox label {
        margin: 0;
        font-size: 13px;
        color: var(--text);
      }

      .dialog-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        accent-color: var(--accent);
        flex: 0 0 auto;
      }

      .button-primary {
        border-color: rgba(37, 99, 235, 0.35);
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
      }

      .button-danger {
        border-color: rgba(220, 38, 38, 0.28);
        color: var(--danger);
      }

      .setting-stack {
        display: grid;
        gap: 14px;
      }

      .setting-field {
        display: grid;
        gap: 8px;
      }

      .setting-field label {
        font-size: 13px;
        color: var(--text);
      }

      .setting-field .hint {
        font-size: 12px;
        color: var(--muted);
      }

      .setting-guide {
        display: grid;
        gap: 10px;
        margin: 0 0 16px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.06);
      }

      .setting-guide div {
        display: grid;
        gap: 4px;
      }

      .setting-guide strong {
        font-size: 13px;
        color: var(--text);
      }

      .setting-guide span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
      }

      .hint-inline {
        margin: -4px 0 2px 26px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
      }

      .setting-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        color: var(--text);
      }

      .setting-checkbox input {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
      }

      .setting-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      #appModeShell {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: grid;
        grid-template-rows: 1fr;
        background: #020617;
        visibility: hidden;
      }

      #appModeShell.hidden {
        display: none !important;
      }

      .app-mode-frame-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background: #020617;
      }

      #appModeShell.windowed {
        inset: 24px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
      }

      #appModeFrame {
        width: 100%;
        height: 100%;
        border: 0;
        background: #ffffff;
      }

      .app-mode-overlay,
      .app-mode-error {
        position: absolute;
        inset: 0;
        display: grid;
        align-items: start;
        justify-items: center;
        padding: 32px;
        overflow: auto;
        background: rgba(2, 6, 23, 0.9);
      }

      .app-mode-overlay.hidden,
      .app-mode-error.hidden {
        display: none !important;
      }

      .app-mode-card {
        width: min(680px, 100%);
        max-height: calc(100vh - 64px);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 24px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
        overflow: auto;
        margin: auto 0;
      }

      .app-mode-card h2 {
        margin: 0 0 10px;
        font-size: 20px;
      }

      .app-mode-card p {
        margin: 0 0 12px;
        color: var(--muted);
      }

      .app-mode-hint {
        margin-top: 12px;
        font-size: 12px;
        color: var(--accent);
      }

      .app-mode-error pre {
        margin: 0;
        padding: 14px;
        overflow: auto;
        border-radius: 10px;
        background: rgba(2, 6, 23, 0.9);
        color: #f8fafc;
        white-space: pre-wrap;
      }

      body[data-theme="light"] .app-mode-error pre {
        background: rgba(241, 245, 249, 0.96);
        color: var(--text);
      }

      .flex {
        display: flex;
      }

      .gap-2 {
        gap: 8px;
      }

      .ml-auto {
        margin-left: auto;
      }

      #contextMenu {
        position: fixed;
        z-index: 70;
        min-width: 180px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow);
        padding: 6px;
      }

      .context-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 36px;
        border: 0;
        background: transparent;
        border-radius: 8px;
        color: var(--text);
        justify-content: flex-start;
        padding: 0 10px;
      }

      .context-item:hover {
        background: rgba(14, 165, 233, 0.14);
      }

      #notice {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 60;
        min-width: 220px;
        max-width: min(420px, calc(100vw - 36px));
        border: 1px solid rgba(56, 189, 248, 0.42);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        color: var(--text);
        padding: 10px 12px;
        font-size: 13px;
        transform: translateY(16px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease;
      }

      #notice.show {
        transform: translateY(0);
        opacity: 1;
      }

      body[data-theme="dark"] #notice {
        background: rgba(7, 17, 31, 0.96);
        border-color: rgba(96, 165, 250, 0.34);
        color: #eef5ff;
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
      }

      .icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        height: 36px;
        padding: 0 12px;
        line-height: 1;
        white-space: nowrap;
      }

      .icon-only {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 36px;
        padding: 0;
        line-height: 1;
      }

      .icon-button svg,
      .icon-only svg,
      .file-icon svg {
        width: 16px;
        height: 16px;
      }

      .file-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(30, 41, 59, 0.9);
        color: #38bdf8;
      }

      .file-icon.file {
        color: #a78bfa;
      }

      .manager-view,
      .settings-view {
        display: none;
        height: 100%;
        overflow: auto;
        padding: 24px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
        min-width: 0;
      }

      .manager-view.active,
      .settings-view.active {
        display: block;
      }

      .panel-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 16px;
        align-items: start;
        min-width: 0;
      }

      .panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-strong);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        padding: 20px;
        min-width: 0;
      }

      .panel h2 {
        margin: 0 0 10px;
        font-size: 24px;
        line-height: 1.1;
        font-weight: 800;
        color: var(--text);
      }

      .product-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: end;
        margin-bottom: 18px;
      }

      .product-header h1 {
        margin: 0;
        font-size: 28px;
        line-height: 1.05;
      }

      .product-header p {
        margin: 6px 0 0;
        color: var(--muted);
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .cloud-gate {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 420px);
        gap: 18px;
        align-items: stretch;
      }

      .feature-list {
        display: grid;
        gap: 10px;
        margin-top: 16px;
      }

      .feature-list div,
      .metric-strip div {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        padding: 12px;
      }

      .metric-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-bottom: 16px;
      }

      .metric-strip span,
      .feature-list span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .metric-strip strong,
      .feature-list strong {
        display: block;
        margin-top: 4px;
        color: var(--text);
        font-size: 18px;
      }

      .cloud-panel-grid {
        grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.35fr) minmax(320px, 0.95fr);
      }

      .cloud-panel-wide {
        grid-column: span 2;
      }

      .cloud-panel-full {
        grid-column: 1 / -1;
      }

      .admin-platform-grid {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
      }

      .admin-toolbar {
        display: grid;
        gap: 12px;
      }

      .admin-toolbar-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
      }

      .setting-field.compact {
        margin: 0;
      }

      .admin-metric-strip strong {
        font-size: 20px;
      }

      .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      .panel-head h2 {
        margin: 0;
      }

      .backup-toolbar,
      .backup-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .backup-toolbar {
        margin: 14px 0 10px;
      }

      .admin-pagination-block {
        margin-top: 12px;
      }

      .backup-pagination {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }

      .backup-pagination-controls,
      .backup-toolbar-actions,
      .backup-toolbar-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
      }

      .backup-pagination label,
      .backup-toolbar label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
      }

      .backup-pagination select,
      .backup-toolbar select {
        width: auto;
        min-width: 88px;
      }

      .backup-list {
        display: grid;
        gap: 10px;
      }

      .backup-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        padding: 12px;
      }

      .backup-card-select {
        align-self: start;
        margin-top: 4px;
      }

      .backup-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        color: var(--muted);
        font-size: 12px;
      }

      .workspace-item .flex.gap-2 {
        flex-wrap: wrap;
      }

      .notice-block {
        margin-bottom: 16px;
      }

      .notice-html {
        line-height: 1.6;
        color: var(--text);
      }

      .notice-html > :first-child {
        margin-top: 0;
      }

      .notice-html > :last-child {
        margin-bottom: 0;
      }

      .notice-html a {
        color: var(--accent);
      }

      .tos-inline-panel {
        margin-top: 12px;
        padding: 14px 16px;
        background: var(--panel-soft);
        border: 1px solid var(--border);
      }

      .tos-inline-panel .panel-head {
        margin-bottom: 10px;
      }

      .tos-inline-panel h2 {
        font-size: 16px;
      }

      @media (max-width: 900px) {
        .cloud-gate,
        .product-header {
          grid-template-columns: 1fr;
        }

        .cloud-panel-grid {
          grid-template-columns: 1fr;
        }

        .cloud-panel-wide {
          grid-column: auto;
        }

        .cloud-panel-full {
          grid-column: auto;
        }

        .admin-platform-grid {
          grid-template-columns: 1fr;
        }

        .admin-toolbar-grid {
          grid-template-columns: 1fr;
        }

      }

      @media (max-width: 640px) {
        .manager-view,
        .settings-view,
        .display-view {
          padding: 10px;
        }

        .panel-grid,
        .cloud-gate {
          grid-template-columns: minmax(0, 1fr);
        }

        .product-header {
          gap: 12px;
          margin-bottom: 14px;
        }

        .product-header h1 {
          font-size: 24px;
        }

        .metric-strip {
          grid-template-columns: 1fr 1fr;
        }

        .panel {
          padding: 16px;
        }

        .panel h2 {
          font-size: 20px;
        }

        .panel-head,
        .setting-row,
        .user-row,
        .backup-card,
        .backup-toolbar,
        .backup-pagination,
        .backup-toolbar-controls,
        .backup-toolbar-actions,
        .setting-actions {
          align-items: stretch;
        }

        .panel-head,
        .setting-row,
        .user-row,
        .backup-card,
        .backup-toolbar,
        .backup-pagination,
        .backup-toolbar-controls,
        .backup-toolbar-actions {
          flex-direction: column;
        }

        .setting-row,
        .user-row {
          min-height: 0;
        }

        .backup-card {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .backup-card-select {
          justify-self: start;
          margin-top: 0;
        }

        .backup-pagination-controls,
        .backup-toolbar-controls,
        .backup-toolbar-actions,
        .setting-actions {
          width: 100%;
        }

        .backup-pagination-controls button,
        .backup-toolbar-actions button,
        .setting-actions button {
          flex: 1 1 auto;
        }

        .backup-toolbar label,
        .backup-pagination label {
          width: 100%;
          justify-content: space-between;
        }

        .backup-pagination select,
        .backup-toolbar select,
        .setting-actions select {
          min-width: 0;
          width: 100%;
        }

        .cloud-panel-grid,
        .admin-platform-grid {
          grid-template-columns: 1fr;
        }

        .display-surface {
          padding: 10px;
        }

        .display-stage {
          width: 100%;
          min-height: min(100%, 420px);
        }

        .display-content {
          padding: 12px;
        }

        .editor-main {
          flex-direction: column;
        }

        .editor-pane {
          min-height: 280px;
          border-right: 0;
          border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        }

        .editor-pane:last-child {
          border-bottom: 0;
        }

        .dialog {
          width: calc(100vw - 16px);
          max-height: min(92vh, 920px);
          padding: 14px 14px 0;
        }

        .dialog-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          margin: 12px -14px 0;
          padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        }

        .dialog-actions button {
          width: 100%;
          min-width: 0;
        }
      }

      .user-row,
      .setting-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        border-top: 1px solid var(--line);
        padding: 10px 0;
      }

      .user-row:first-of-type,
      .setting-row:first-of-type {
        border-top: 0;
      }

      @media (max-width: 820px) {
        .app {
          grid-template-columns: minmax(0, 1fr);
        }

        .sidebar {
          position: absolute;
          inset: 0 auto 0 0;
          width: min(86vw, 320px);
          max-width: 320px;
          height: 100%;
          z-index: 35;
          border-right: 0;
          transform: translateX(-100%);
          transition: transform 160ms ease;
          box-shadow: none;
        }

        .app.sidebar-open .sidebar {
          border-right: 1px solid rgba(148, 163, 184, 0.16);
          box-shadow: 18px 0 44px rgba(0, 0, 0, 0.35);
          transform: translateX(0);
        }

        .sidebar-resizer {
          display: none;
        }

        .main {
          grid-column: 1;
        }

        .sidebar-toggle {
          display: inline-flex;
        }

        .topbar {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 8px;
          padding: 8px 10px;
        }

        .topbar-left,
        .topbar-right {
          gap: 8px;
          width: 100%;
        }

        .topbar-left {
          min-width: 0;
        }

        .topbar-right {
          min-width: 0;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .active-title {
          font-size: 12px;
          flex: 1 1 140px;
        }

        .file-row {
          grid-template-columns: 28px minmax(0, 1fr) 80px;
        }

        .file-row .file-muted:last-child {
          display: none;
        }

        .workspace-actions {
          grid-template-columns: 1fr 1fr;
        }

        .tabs {
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          padding-bottom: 2px;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .tabs::-webkit-scrollbar {
          display: none;
        }

        .tabs .tab {
          flex: 0 0 auto;
          width: 42px;
          height: 42px;
        }

        .toolbar,
        .editor-toolbar,
        .editor-pane-header {
          flex-wrap: wrap;
        }

        .toolbar > .ml-auto {
          margin-left: 0;
          width: 100%;
          justify-content: flex-end;
        }

        .path {
          min-width: 0;
          width: 100%;
          flex: 1 1 100%;
        }

        #topbarShareWriteback {
          min-width: 36px;
          width: 36px;
          padding: 0;
          overflow: hidden;
          white-space: nowrap;
          text-indent: -9999px;
          position: relative;
        }

        #topbarShareWriteback i {
          position: absolute;
          inset: 0;
          margin: auto;
          text-indent: 0;
        }

        #toggleFullscreen {
          min-width: 36px;
          width: 36px;
          padding: 0;
          overflow: hidden;
          white-space: nowrap;
          text-indent: -9999px;
          position: relative;
        }

        #toggleFullscreen i {
          position: absolute;
          inset: 0;
          margin: auto;
          text-indent: 0;
        }
      }

      @media (max-width: 480px) {
        .brand strong {
          font-size: 24px;
        }

        .workspace-actions {
          grid-template-columns: 1fr;
        }

        .metric-strip {
          grid-template-columns: 1fr;
        }

        .file-row {
          grid-template-columns: 24px minmax(0, 1fr);
          height: auto;
          min-height: 48px;
          padding: 10px 12px;
        }

        .file-row > :nth-child(4),
        .file-row > :nth-child(5) {
          display: none;
        }

        .editor-menubar {
          overflow-x: auto;
          overflow-y: hidden;
          scrollbar-width: none;
        }

        .editor-menubar::-webkit-scrollbar {
          display: none;
        }

        .topbar-right {
          gap: 6px;
        }

        .status-pill {
          width: 100%;
          justify-content: center;
        }

        .display-stage {
          min-height: min(100%, 320px);
        }
      }