/* =========================================================
   All-in-One Viewer — Stylesheet
   Author: gnort67 | Built with Claude (Anthropic)
   ========================================================= */

/* ---------- Fonts (Be Vietnam Pro, self-hosted) ---------- */
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"),
      url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2"),
      url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"),
      url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2"),
      url("../fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root{
  --font-sans:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --sidebar-w:280px;
  --topbar-h:56px;

  --transition:160ms cubic-bezier(.4,0,.2,1);

  /* Accent (shared across themes) */
  --accent-h:243;
  --accent:hsl(var(--accent-h) 75% 59%);
  --accent-hover:hsl(var(--accent-h) 75% 53%);
  --accent-soft:hsl(var(--accent-h) 75% 59% / .12);
  --danger:#e5484d;
  --success:#30a46c;
  --warning:#f5a623;
}

/* Light theme */
:root, [data-theme="light"]{
  --bg:#f6f7fb;
  --bg-elevated:#ffffff;
  --bg-inset:#eef0f6;
  --border:#e2e4ec;
  --border-strong:#cdd1dd;
  --text:#1a1d29;
  --text-secondary:#5b5f70;
  --text-muted:#8a8fa3;
  --shadow:0 4px 20px rgba(20,20,43,.08);
  --shadow-sm:0 1px 3px rgba(20,20,43,.06);
  --scrollbar:#c7cad6;
  --code-bg:#f3f4f9;
  --overlay:rgba(20,20,30,.45);
}

/* Dark theme */
[data-theme="dark"]{
  --bg:#14151f;
  --bg-elevated:#1b1d2a;
  --bg-inset:#101119;
  --border:#2b2d3d;
  --border-strong:#3a3d52;
  --text:#eceef5;
  --text-secondary:#a6aabf;
  --text-muted:#71758c;
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --scrollbar:#33354a;
  --code-bg:#181a26;
  --overlay:rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition);
  overflow:hidden;
}
img{max-width:100%;}
button{font-family:inherit;}
a{color:var(--accent);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:10px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);background-clip:padding-box;}

.icon{
  width:18px;height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.icon-sm{width:15px;height:15px;}
.icon-lg{width:22px;height:22px;}

/* ---------- App shell ---------- */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  height:100vh;
  height:100dvh;
}

/* ---------- Topbar ---------- */
.topbar{
  grid-area:topbar;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border);
  min-width:0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  color:var(--text);
  text-decoration:none;
  flex-shrink:0;
}
.brand-logo{
  width:30px;height:30px;
  border-radius:9px;
  background:linear-gradient(135deg, hsl(var(--accent-h) 75% 62%), hsl(var(--accent-h) 70% 48%));
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.brand-logo svg{width:17px;height:17px;stroke:#fff;}
.brand-text{display:none;}
@media(min-width:520px){.brand-text{display:inline;}}

.menu-toggle{display:none;}

.topbar-search{
  flex:1;
  max-width:420px;
  position:relative;
  display:none;
}
@media(min-width:760px){.topbar-search{display:block;}}
.topbar-search input{
  width:100%;
  padding:9px 12px 9px 36px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-inset);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  outline:none;
  transition:border-color var(--transition), background var(--transition);
}
.topbar-search input:focus{border-color:var(--accent);background:var(--bg-elevated);}
.topbar-search .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.topbar-search-hint{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;
  pointer-events:none;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-shrink:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-secondary);
  border-radius:var(--radius-md);
  padding:8px 12px;
  font-size:13.5px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition), transform 80ms;
  white-space:nowrap;
  user-select:none;
}
.btn:hover{background:var(--bg-inset);color:var(--text);}
.btn:active{transform:scale(.96);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.btn-icon{padding:8px;width:36px;height:36px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);color:#fff;}
.btn-outline{border-color:var(--border-strong);}
.btn-ghost-active{background:var(--accent-soft);color:var(--accent);}
.btn-sm{padding:5px 9px;font-size:12.5px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:transparent;color:var(--text-secondary);}

/* Theme switcher */
.theme-switch{
  display:flex;
  background:var(--bg-inset);
  border-radius:var(--radius-md);
  padding:3px;
  gap:2px;
}
.theme-switch button{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.theme-switch button.active{background:var(--bg-elevated);color:var(--accent);box-shadow:var(--shadow-sm);}
.theme-switch .icon{width:16px;height:16px;}

.lang-switch{position:relative;}
.lang-switch .btn{min-width:64px;}

/* ---------- Sidebar ---------- */
.sidebar{
  grid-area:sidebar;
  background:var(--bg-elevated);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.sidebar-section{
  padding:14px 14px 6px;
}
.sidebar-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:0 4px 8px;
}
.dropzone{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:20px 14px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition);
  margin:0 4px;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--accent);background:var(--accent-soft);}
.dropzone svg{color:var(--accent);margin-bottom:8px;}
.dropzone-title{font-size:13.5px;font-weight:600;color:var(--text);}
.dropzone-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}

.format-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 4px 4px;
}
.chip{
  font-size:11px;
  padding:3px 8px;
  border-radius:20px;
  background:var(--bg-inset);
  color:var(--text-secondary);
  border:1px solid var(--border);
}

.file-list{
  flex:1;
  overflow-y:auto;
  padding:4px 8px 12px;
}
.file-list-empty{
  text-align:center;
  color:var(--text-muted);
  font-size:12.5px;
  padding:24px 12px;
}
.file-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-md);
  cursor:pointer;
  margin-bottom:2px;
  border:1px solid transparent;
  position:relative;
}
.file-item:hover{background:var(--bg-inset);}
.file-item.active{background:var(--accent-soft);border-color:hsl(var(--accent-h) 75% 59% / .3);}
.file-item.active .file-name{color:var(--accent);}
.file-icon{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:#fff;
  font-size:10px;
  font-weight:700;
}
.file-meta{min-width:0;flex:1;}
.file-name{
  font-size:13px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.file-sub{font-size:11px;color:var(--text-muted);}
.file-close{
  opacity:0;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  color:var(--text-muted);
  flex-shrink:0;
  background:transparent;border:none;cursor:pointer;
}
.file-item:hover .file-close{opacity:1;}
.file-close:hover{background:var(--border);color:var(--danger);}

.sidebar-footer{
  padding:12px 16px;
  border-top:1px solid var(--border);
  font-size:11.5px;
  color:var(--text-muted);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.sidebar-footer a{color:var(--text-secondary);text-decoration:none;font-weight:600;}
.sidebar-footer a:hover{color:var(--accent);}
.credit-ai{display:flex;align-items:center;gap:5px;}

/* ---------- Main ---------- */
.main{
  grid-area:main;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--bg);
}

.tabs{
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:8px 8px 0;
  overflow-x:auto;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  scrollbar-width:thin;
}
.tabs:empty{display:none;}
.tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 12px;
  border-radius:8px 8px 0 0;
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid transparent;
  border-bottom:none;
  max-width:200px;
  flex-shrink:0;
}
.tab:hover{color:var(--text);}
.tab.active{
  background:var(--bg);
  color:var(--text);
  border-color:var(--border);
}
.tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tab-close{
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  flex-shrink:0;
  color:var(--text-muted);
  background:transparent;border:none;cursor:pointer;
}
.tab-close:hover{background:var(--bg-inset);color:var(--danger);}

.viewer-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  overflow-x:auto;
  min-height:52px;
}
.toolbar-group{display:flex;align-items:center;gap:4px;}
.toolbar-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0;}
.toolbar-spacer{flex:1;}
.zoom-value{font-size:12.5px;color:var(--text-secondary);min-width:38px;text-align:center;}
.view-mode-switch{display:flex;background:var(--bg-inset);border-radius:var(--radius-md);padding:3px;}
.view-mode-switch button{
  padding:5px 10px;font-size:12px;font-weight:600;color:var(--text-muted);
  border:none;background:transparent;border-radius:7px;cursor:pointer;
}
.view-mode-switch button.active{background:var(--bg-elevated);color:var(--accent);box-shadow:var(--shadow-sm);}

.view-area{
  flex:1;
  overflow:auto;
  position:relative;
}

/* Empty state */
.empty-state{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px;
  color:var(--text-muted);
}
.empty-state svg{color:var(--border-strong);margin-bottom:18px;}
.empty-state h2{color:var(--text);font-size:19px;margin:0 0 8px;}
.empty-state p{font-size:13.5px;max-width:380px;margin:0 0 18px;}
.empty-formats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:460px;}

/* Content wrappers */
.content-pad{padding:20px 26px 60px;max-width:980px;margin:0 auto;}
.content-pad-wide{padding:20px 26px 60px;}

/* Text/code viewer */
.text-view{
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.65;
  background:var(--code-bg);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin:18px 26px 60px;
  border:1px solid var(--border);
}
.text-view-inner{
  display:grid;
  grid-template-columns:auto 1fr;
}
.text-line-num{
  text-align:right;
  color:var(--text-muted);
  padding:1px 12px;
  user-select:none;
  border-right:1px solid var(--border);
  background:var(--bg-inset);
}
.text-line-content{
  padding:1px 16px;
  white-space:pre-wrap;
  word-break:break-word;
}
.text-line-content mark{background:hsl(45 95% 60% / .55);color:inherit;border-radius:2px;}
.text-line-content mark.current{background:hsl(24 95% 55% / .7);}

/* JSON tree */
.json-view{font-family:var(--font-mono);font-size:13px;line-height:1.7;padding:18px 26px 60px;}
.json-node{margin-left:18px;}
.json-row{display:flex;align-items:flex-start;gap:4px;}
.json-toggle{
  width:16px;height:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-muted);
  margin-top:2px;
  border-radius:3px;
  background:none;border:none;padding:0;
}
.json-toggle:hover{background:var(--bg-inset);}
.json-toggle svg{width:11px;height:11px;transition:transform var(--transition);}
.json-toggle.collapsed svg{transform:rotate(-90deg);}
.json-key{color:#c2185b;}
[data-theme="dark"] .json-key{color:#f38ba8;}
.json-string{color:#0a7d3f;}
[data-theme="dark"] .json-string{color:#a6e3a1;}
.json-number{color:#1a56db;}
[data-theme="dark"] .json-number{color:#89b4fa;}
.json-boolean, .json-null{color:#b5560f;font-weight:600;}
[data-theme="dark"] .json-boolean, [data-theme="dark"] .json-null{color:#fab387;}
.json-punct{color:var(--text-muted);}
.json-count{color:var(--text-muted);font-size:11.5px;margin-left:4px;font-family:var(--font-sans);}
.json-collapsed-children{display:none;}

/* CSV table */
.csv-toolbar-info{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.table-wrap{padding:16px 26px 60px;overflow:auto;}
table.csv-table{
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  background:var(--bg-elevated);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
table.csv-table th, table.csv-table td{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
}
table.csv-table th:last-child, table.csv-table td:last-child{border-right:none;}
table.csv-table thead th{
  background:var(--bg-inset);
  position:sticky;top:0;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  color:var(--text-secondary);
  white-space:nowrap;
}
table.csv-table thead th .th-inner{display:flex;align-items:center;gap:5px;}
table.csv-table thead th svg{width:12px;height:12px;opacity:.5;flex-shrink:0;}
table.csv-table thead th.sorted svg{opacity:1;color:var(--accent);}
table.csv-table tbody tr:hover{background:var(--bg-inset);}
table.csv-table tbody tr:nth-child(even){background:color-mix(in srgb, var(--bg-inset) 40%, transparent);}
.row-num-col{width:1%;color:var(--text-muted);text-align:right !important;background:var(--bg-inset);font-variant-numeric:tabular-nums;}

/* Markdown view */
.md-view{padding:22px 30px 60px;max-width:820px;margin:0 auto;}
.md-view h1,.md-view h2,.md-view h3,.md-view h4{font-weight:700;line-height:1.3;margin:1.4em 0 .5em;}
.md-view h1{font-size:1.9em;border-bottom:1px solid var(--border);padding-bottom:.3em;}
.md-view h2{font-size:1.5em;border-bottom:1px solid var(--border);padding-bottom:.25em;}
.md-view h3{font-size:1.22em;}
.md-view h1:first-child, .md-view h2:first-child{margin-top:0;}
.md-view p{margin:.8em 0;}
.md-view a{text-decoration:none;}
.md-view a:hover{text-decoration:underline;}
.md-view img{border-radius:8px;margin:8px 0;}
.md-view code{
  font-family:var(--font-mono);font-size:.87em;
  background:var(--code-bg);padding:.15em .4em;border-radius:4px;
}
.md-view pre{
  background:var(--code-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
  overflow-x:auto;
  margin:1em 0;
}
.md-view pre code{background:none;padding:0;font-size:.85em;line-height:1.6;}
.md-view blockquote{
  margin:1em 0;padding:2px 16px;
  border-left:3px solid var(--accent);
  color:var(--text-secondary);
  background:var(--bg-inset);
  border-radius:0 8px 8px 0;
}
.md-view ul,.md-view ol{margin:.7em 0;padding-left:1.6em;}
.md-view li{margin:.3em 0;}
.md-view hr{border:none;border-top:1px solid var(--border);margin:2em 0;}
.md-view table{border-collapse:collapse;margin:1em 0;width:100%;font-size:.92em;}
.md-view th,.md-view td{border:1px solid var(--border);padding:6px 10px;text-align:left;}
.md-view th{background:var(--bg-inset);}
.md-view input[type="checkbox"]{margin-right:6px;}

/* HTML viewer */
.html-view-frame-wrap{height:100%;display:flex;flex-direction:column;}
.html-view-frame-wrap iframe{flex:1;width:100%;border:none;background:#fff;}
.html-banner{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:12px;color:var(--text-muted);
  background:var(--bg-inset);border-bottom:1px solid var(--border);
}
.html-banner svg{color:var(--warning);flex-shrink:0;}

/* Image viewer */
.image-view{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:
    linear-gradient(45deg, var(--bg-inset) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-inset) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-inset) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-inset) 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
}
.image-view img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:var(--shadow);object-fit:contain;}

/* Toast */
.toast-stack{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:1000;
  align-items:center;
}
.toast{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-elevated);
  color:var(--text);
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  font-size:13px;
  animation:toast-in 180ms ease;
}
.toast svg{flex-shrink:0;}
.toast.success svg{color:var(--success);}
.toast.error svg{color:var(--danger);}
.toast.info svg{color:var(--accent);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Modal / shortcuts */
.modal-overlay{
  position:fixed;inset:0;background:var(--overlay);
  display:flex;align-items:center;justify-content:center;
  z-index:1100;padding:20px;
}
.modal{
  background:var(--bg-elevated);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  width:100%;max-width:480px;
  max-height:80vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.modal-header h3{margin:0;font-size:15.5px;}
.modal-body{padding:14px 20px 20px;overflow-y:auto;}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13.5px;}
.kbd{
  font-family:var(--font-mono);font-size:11.5px;
  background:var(--bg-inset);border:1px solid var(--border-strong);
  border-bottom-width:2px;
  padding:2px 7px;border-radius:5px;color:var(--text-secondary);
}

/* Progress bar for loading */
.progress-bar{position:fixed;top:0;left:0;height:2.5px;background:var(--accent);z-index:2000;transition:width 200ms ease;}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg, var(--bg-inset) 25%, var(--border) 37%, var(--bg-inset) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:6px;}
@keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- Mobile / responsive ---------- */
.sidebar-backdrop{display:none;}

@media (max-width:900px){
  .app{
    grid-template-columns:1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .menu-toggle{display:inline-flex;}
  .sidebar{
    position:fixed;
    top:var(--topbar-h);
    left:0;bottom:0;
    width:min(300px, 84vw);
    z-index:60;
    transform:translateX(-100%);
    transition:transform 220ms ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{
    display:block;
    position:fixed;inset:var(--topbar-h) 0 0 0;
    background:var(--overlay);
    z-index:50;
    opacity:0;pointer-events:none;
    transition:opacity 220ms ease;
  }
  .sidebar-backdrop.show{opacity:1;pointer-events:auto;}
  .brand-logo{width:28px;height:28px;}
  .content-pad, .md-view{padding-left:16px;padding-right:16px;}
  .text-view{margin-left:12px;margin-right:12px;}
  .table-wrap{padding-left:12px;padding-right:12px;}
  .json-view{padding-left:14px;padding-right:14px;}
}

@media (max-width:520px){
  .topbar{padding:0 10px;gap:8px;}
  .viewer-toolbar{padding:8px 10px;}
  body{font-size:14.5px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* Focus visibility globally */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Utility */
.hidden{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}