@font-face { font-family: Geist; src: url('fonts/Geist-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('fonts/Geist-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url('fonts/Geist-SemiBold.ttf'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Phosphor; src: url('fonts/Phosphor.ttf'); font-weight: 400; font-display: block; }
:root {
  color-scheme: dark;
  --sidebar: #181818; --window: #1c1c1c; --card: #232323;
  --raised: #292929; --control: #303030; --active: #353535;
  --border: #303030; --text: #efeeeb; --secondary: #c5c4c2;
  --muted: #959491; --accent: #8c9bff; --success: #5fd0bc;
  font: 13px "Geist", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--window); color:var(--text); }
body { display:flex; height:100dvh; }
button, input, summary { font:inherit; color:inherit; }
button { cursor:pointer; background:var(--control); border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
button:hover:not(:disabled) { background:var(--active); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#sidebar { flex:0 0 240px; min-width:0; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:12px 8px; gap:2px; }
#sidebar[hidden] { display:none; }
.sidebar-head { display:flex; align-items:center; gap:9px; min-height:40px; padding:0 8px; margin-bottom:6px; }
.sidebar-head strong { font-size:14px; font-weight:600; }
.brand-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:#181818; background:var(--accent); font-size:13px; font-weight:600; }
.phosphor { font-family:Phosphor; font-weight:400; font-variant-ligatures:none; line-height:1; speak:none; }
.icon-button { border:0; background:transparent; padding:5px 8px; font-size:17px; line-height:24px; color:var(--secondary); }
#collapse-sidebar { margin-left:auto; }
.sidebar-action, .recent-files button { width:100%; min-height:36px; display:flex; align-items:center; gap:11px; padding:0 10px; background:transparent; border:0; text-align:left; border-radius:7px; }
.sidebar-action:hover, .recent-files button:hover { background:var(--active); }
.sidebar-action > span:first-child { width:18px; flex:none; text-align:center; color:var(--secondary); font-size:17px; }
.shortcut { margin-left:auto; color:var(--muted); font-size:11px; }
.sidebar-heading { margin:25px 10px 8px; color:var(--muted); font-size:11px; }
.recent-files button { display:flex; overflow:hidden; white-space:nowrap; align-items:center; gap:11px; color:var(--secondary); font-size:12px; }
.recent-files button > .phosphor { width:18px; flex:none; text-align:center; font-size:17px; }
.recent-name { overflow:hidden; text-overflow:ellipsis; }
.recent-files button.active { background:var(--active); color:var(--text); }
.sidebar-spacer { flex:1; }
.sidebar-user { display:flex; align-items:center; gap:9px; min-height:40px; padding:0 8px; font-size:12px; }
.avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--active); }
#app-version { margin-left:auto; color:var(--muted); font-size:11px; }
#app-content { min-width:0; flex:1; display:flex; flex-direction:column; }
header { position:relative; z-index:10; flex:none; height:48px; background:var(--window); border-bottom:1px solid var(--border); padding:0 10px; }
.menu-row { height:100%; display:flex; align-items:center; gap:9px; }
#file-heading { display:flex; align-items:center; gap:9px; min-width:0; }
#file-title { flex:none; border:0; background:none; padding:5px 2px; font-size:14px; font-weight:600; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chevron { color:var(--muted); margin-left:4px; }
#file-context { color:var(--muted); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#file-context:empty { display:none; }
#decode-badge { color:var(--success); background:#24413e; border-radius:999px; padding:4px 8px; font-size:11px; white-space:nowrap; }
#decode-badge.partial { color:#f0b45e; background:#443622; }
.header-spacer { flex:1; }
#header-export { flex:none; }
#app-menus { display:flex; flex:none; }
summary { list-style:none; cursor:pointer; border-radius:7px; padding:5px 10px; white-space:nowrap; }
summary::-webkit-details-marker { display:none; }
summary:hover, details[open]>summary { background:var(--active); }
.app-menu { position:relative; }
.app-menu>summary { font-size:21px; line-height:23px; }
.menu-items { display:grid; gap:2px; padding:5px; background:var(--card); border:1px solid var(--border); border-radius:8px; }
.app-menu>.menu-items { position:absolute; right:0; top:calc(100% + 7px); width:245px; max-height:75dvh; overflow:auto; box-shadow:0 10px 25px #0008; }
details:not([open])>.menu-items { display:none; }
.menu-items button { border:0; border-radius:6px; text-align:left; background:transparent; min-height:29px; white-space:normal; }
.submenu>summary:after { content:' ›'; color:var(--muted); }
.submenu[open]>summary:after { content:' ⌄'; }
.submenu>.menu-items { border:0; border-left:1px solid var(--border); margin-left:10px; padding-left:8px; }
#workspace { position:relative; flex:1; min-height:0; width:100%; background:var(--window); }
#binwave { width:100%; height:100%; display:block; }
#binwave[hidden] { display:none; }
.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; }
dialog { width:min(560px,calc(100vw - 24px)); max-height:80dvh; border:1px solid var(--border); border-radius:12px; background:var(--card); padding:18px; color:var(--text); box-shadow:0 20px 60px #000a; }
dialog::backdrop { background:#0009; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.dialog-header strong { font-size:15px; }
.dialog-header button { border:0; background:transparent; font-size:20px; }
#search-input { width:100%; border:1px solid var(--border); border-radius:8px; background:var(--sidebar); padding:10px; }
#search-results, #library-items { display:grid; gap:3px; max-height:55dvh; overflow:auto; margin-top:12px; }
#search-results button, #library-items button { text-align:left; background:transparent; border:0; padding:10px; }
#search-results button:hover, #library-items button:hover { background:var(--active); }
#decoder-library { width:min(1200px,96vw); height:min(800px,92dvh); max-height:92dvh; }
.library-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
#library-search { flex:1; min-width:0; background:var(--sidebar); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
#library-new, #library-open { background:var(--accent); border-color:var(--accent); color:#181818; font-weight:600; }
.library-layout { display:grid; grid-template-columns:minmax(280px,1.45fr) minmax(260px,1fr); gap:10px; height:calc(100% - 96px); min-height:0; }
#library-items { margin:0; max-height:none; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--window); align-content:start; }
#library-items button { border-bottom:1px solid var(--border); border-radius:6px; min-height:54px; }
#library-items button.selected { background:var(--active); color:var(--accent); }
.library-details { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--window); display:flex; flex-direction:column; align-items:flex-start; }
.library-details h2 { margin:0 0 8px; font-size:15px; }
.library-details p { color:var(--muted); margin:0 0 14px; }
#library-preview { width:100%; flex:1; min-height:0; overflow:auto; margin:16px 0 0; padding:14px; background:var(--sidebar); border-radius:8px; color:var(--secondary); font:12px/1.5 "Geist Mono",monospace; }
@media(max-width:700px) { .library-layout { grid-template-columns:1fr; grid-template-rows:35% 65%; } }
#graphics-error { max-width:680px; margin:48px auto; padding:24px; background:var(--card); border-radius:8px; }
#graphics-error pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
@media(max-width:899px) {
  #sidebar { position:absolute; z-index:12; top:0; bottom:0; box-shadow:8px 0 25px #0008; }
  header { padding:0 8px; }
  #file-context { display:none; }
  #file-title { max-width:38vw; }
  #workspace { padding-bottom:env(safe-area-inset-bottom); }
}