:root {
      color-scheme: dark;
      --bg: #0f1115;
      --card: #171a21;
      --card-hover: #202530;
      --border: #2a303b;
      --text: #f4f6f8;
      --muted: #9199a8;
      --accent: #6ea8fe;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    .app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); padding: 0 14px 10px; }
    .app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
    .sidebar { min-width: 0; height: calc(100dvh - 10px); position: sticky; top: 0; overflow-x: hidden; padding: 16px 10px; border: 1px solid var(--border); border-radius: 14px 0 0 14px; background: #12151b; }
    .brand { position: relative; display: flex; gap: 11px; align-items: center; padding: 4px 48px 24px 8px; }
    .brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
    .brand-copy { min-width: 0; }
    .brand h1 { margin: 0; font-size: 17px; line-height: 1.2; }
    .brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .side-label { padding: 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .file-menu { display: grid; gap: 8px; margin-top: 10px; }
    .file-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
    .file-item:hover { background: var(--card-hover); border-color: var(--border); }
    .file-item.active { background: color-mix(in srgb, var(--file-accent, var(--accent)) 14%, transparent); border-color: color-mix(in srgb, var(--file-accent, var(--accent)) 70%, transparent); }
    .file-item .meta { min-width: 0; flex: 1; overflow: hidden; }
    .file-item .title { display: -webkit-box; overflow: hidden; font-size: 13px; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .file-item .file { max-height: 2.4em; margin-top: 3px; overflow: hidden; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
    .file-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--file-accent, var(--accent)) 16%, #252b36); color: var(--file-accent, var(--accent)); font-size: 13px; font-weight: 800; }
    .file-icon img { width: 100%; height: 100%; object-fit: contain; }
    .sidebar-toggle { position: absolute; top: 0; right: 0; display: grid; width: 36px; min-height: 36px; padding: 7px; place-items: center; }
    .sidebar-toggle svg { width: 18px; height: 18px; transition: transform .15s ease; }
    .mobile-file-picker { display: none; }
    .sidebar-collapsed .brand { justify-content: center; padding-right: 0; padding-left: 0; }
    .sidebar-collapsed .brand-copy, .sidebar-collapsed .side-label, .sidebar-collapsed .status, .sidebar-collapsed .empty { display: none; }
    .sidebar-collapsed .actions { display: grid; gap: 8px; }
    .app-shell.sidebar-collapsed .actions button { width: 100%; min-height: 44px; padding: 9px; font-size: 0; }
    .button-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; flex: 0 0 auto; }
    .button-icon svg { width: 18px; height: 18px; }
    .sidebar-collapsed .file-item { justify-content: center; padding-right: 6px; padding-left: 6px; }
    .sidebar-collapsed .file-item .meta { display: none; }
    .sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
    .workspace { min-width: 0; padding: 0; display:grid; grid-template-rows:48px minmax(0,1fr); }
    .viewer { position: relative; min-height: calc(100dvh - 58px); height:calc(100dvh - 58px); border: 1px solid var(--border); border-top:0; border-left: 0; border-radius: 0 0 14px 0; overflow: auto; background: var(--bg); }
    .viewer iframe { display: block; width: 100%; height: calc(100vh - 50px); min-height: 560px; border: 0; background: #fff; }
    .viewer iframe[hidden] { display: none; }
    .save-status { position: fixed; right: 24px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); box-shadow: 0 4px 20px #0004; font-size: 14px; }
    .save-status[hidden] { display: none; }
    .save-status .save-spinner { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: dashboard-load-spin .75s linear infinite; }
    .file-item:disabled { opacity: .55; cursor: wait; }
    @media (max-width: 760px) { .save-status { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: 12px; } }
    @media (prefers-reduced-motion: reduce) { .save-status .save-spinner, .dashboard-load-spinner { animation: none; } .dashboard-load-progress, .dashboard-load-progress.indeterminate { animation: none; } }
    .empty-viewer { display: grid; min-height: calc(100vh - 50px); place-items: center; padding: 32px; color: var(--muted); text-align: center; }
    .dashboard-load-state { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; background: rgba(15, 17, 21, .9); color: var(--text); text-align: center; }
    .dashboard-load-state.hidden { display: none; }
    .dashboard-load-state.visible { display: grid; }
    .dashboard-load-card { width: min(360px, 100%); padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 18px 56px rgba(0, 0, 0, .3); }
    .dashboard-load-spinner { width: 30px; height: 30px; margin: 0 auto 14px; border: 3px solid rgba(110, 168, 254, .24); border-top-color: var(--accent); border-radius: 50%; animation: dashboard-load-spin .75s linear infinite; }
    .dashboard-load-state h2 { margin: 0; font-size: 17px; }
    .dashboard-load-state p { min-height: 22px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .dashboard-load-progress-wrap { height: 5px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #293342; }
    .dashboard-load-progress { width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
    .dashboard-load-progress.active { animation: dashboard-load-progress-pulse 1.15s ease-in-out infinite alternate; }
    .dashboard-load-progress.indeterminate { width: 38%; animation: dashboard-load-progress-slide 1.2s ease-in-out infinite alternate; }
    @keyframes dashboard-load-progress-slide { from { transform: translateX(0); } to { transform: translateX(165%); } }
    @keyframes dashboard-load-spin { to { transform: rotate(360deg); } }
    @keyframes dashboard-load-progress-pulse { from { opacity: .55; } to { opacity: 1; } }

    h1 {
      margin: 0 0 6px;
      font-size: clamp(24px, 4vw, 36px);
    }

    .subtitle, .status {
      color: var(--muted);
      font-size: 14px;
    }

    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .sidebar .actions { display: grid; grid-template-columns: 1fr; }
    .sidebar .actions button { width: 100%; }
    .actions-footer { margin: 18px 8px 0; }
    .app-shell.sidebar-collapsed .actions-footer { margin-left: 0; margin-right: 0; }

    button {
      appearance: none;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      min-height: 44px;
      touch-action: manipulation;
    }

    button:hover { background: var(--card-hover); }

    button:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

    .title {
      font-weight: 700;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .group {
      margin-top: 4px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .description {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .empty {
      padding: 30px;
      border: 1px dashed var(--border);
      border-radius: 14px;
      color: var(--muted);
      text-align: center;
    }

    .hidden { display: none; }
    @media (max-width: 760px) {
      .app-shell { display: block; }
      .app-shell { padding: 0; }
      .sidebar { height: auto; position: relative; padding: 4px 12px; border: 0; border-bottom: 0; border-radius: 0; }
      .brand { min-height: 40px; padding: 0 0 0 4px; }
      .brand-mark { width: 30px; height: 30px; }
      .sidebar-toggle { display: none; }
      .mobile-file-picker { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; margin-left: auto; padding: 6px 10px; }
      .mobile-file-picker::after { content: '⌄'; color: var(--muted); font-size: 18px; }
      .mobile-file-picker[aria-expanded="true"]::after { content: '⌃'; }
      .side-label { display: none; }
      .sidebar > .status,
      .sidebar > .actions-footer { display: none; }
      .file-menu { display: none; grid-template-columns: 1fr; margin-top: 8px; }
      .mobile-menu-open .file-menu { display: grid; }
      .file-item { min-height: 40px; }
      .workspace { padding: 0; display:block; }
      .viewer { height:auto; min-height: calc(100dvh - 84px); border: 0; border-radius: 0; }
      .viewer iframe { height: calc(100dvh - 84px); min-height: 0; }
      .empty-viewer { min-height: calc(100dvh - 64px); }
    }
    @media (max-width: 340px) { .brand-copy { display: none; } }

    .workspace-heading { min-width: 0; }
    .workspace-heading button { width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--border); color: var(--text); font-size: 24px; line-height: 1; }
    .workspace-tools #installApp { width: auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 12px; }
    .install-help { width: min(360px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 20px 70px #0009; }
    .install-help::backdrop { background: #0009; }
    .install-help form { position: relative; }
    .install-help h2 { margin: 0 36px 10px 0; font-size: 18px; }
    .install-help p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
    .install-help-close { position: absolute; top: -12px; right: -12px; width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; font-size: 24px; }
    .install-help-ok { width: 100%; }
    @media (max-width: 760px) {
      body { padding-top: env(safe-area-inset-top); }
      input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
      select:focus,
      textarea:focus { font-size: 16px !important; }
      .workspace-bar { padding-inline: 12px; }
      .workspace-tools { display: flex; align-items: center; gap: 2px; }
      .viewer { min-height: calc(100dvh - 84px - env(safe-area-inset-top)); }
      .viewer iframe { height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; }
      .save-status { bottom: max(12px, env(safe-area-inset-bottom)); }
    }