/* Inter (SIL OFL 1.1, bundled in fonts/inter/, see LICENSE.txt). Variable: one file per style, all weights. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter/InterVariable.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:italic; font-weight:100 900; font-display:swap; src:url("fonts/inter/InterVariable-Italic.woff2") format("woff2"); }
/* Calm, precise, macOS-like. System type, weights 400/600, one accent, hairlines, sheets. */
:root { --bg:#f5f5f7; --side:#ececef; --surface:#ffffff; --fg:#1d1d1f; --muted:#6e6e73; --line:#d9d9de;
  --accent:#1f5fae; --mark:#fff1b8; --warn:#b4561a; --radius:8px; --hover:rgba(0,0,0,.05); --sel:rgba(31,95,174,.12);
  --scrim:rgba(0,0,0,.28); --ok:#2f7d4f; --on-accent:#fff;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-doc: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#1c1c1e; --side:#232326; --surface:#2a2a2d; --fg:#f2f2f7; --muted:#a1a1a6; --line:#3a3a3e;
  --accent:#6ea8ec; --mark:#5a4a12; --warn:#f0975a; --hover:rgba(255,255,255,.07); --sel:rgba(110,168,236,.18);
  --scrim:rgba(0,0,0,.5); --ok:#6fcf97; --on-accent:#0b1d33; color-scheme: dark } }
:root[data-theme="dark"] { --bg:#1c1c1e; --side:#232326; --surface:#2a2a2d; --fg:#f2f2f7; --muted:#a1a1a6;
  --line:#3a3a3e; --accent:#6ea8ec; --mark:#5a4a12; --warn:#f0975a; --hover:rgba(255,255,255,.07);
  --sel:rgba(110,168,236,.18); --scrim:rgba(0,0,0,.5); --ok:#6fcf97; --on-accent:#0b1d33; color-scheme: dark }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; }
[hidden] { display:none !important; }
h1, h2, h3 { margin:0; font-weight:600; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.muted { color:var(--muted); }
.err { color:var(--warn); margin:10px 0 0; font-size:14px; text-align:center; }

/* icons and logo */
.i { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round;
  stroke-linejoin:round; vertical-align:-3px; }
.logo { display:inline-flex; width:56px; height:56px; color:var(--fg); }
.logo svg { width:100%; height:100%; }
.logo.sm { width:26px; height:26px; }
.logo [fill]:not([fill="none"]) { fill:var(--accent); } /* same blue as the file in light mode; the lighter accent in dark */

/* controls */
input:not([type=checkbox]):not([type=radio]) { width:100%; height:40px; padding:0 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); outline-offset:0; }
input::placeholder { color:var(--muted); }
input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
select { height:36px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-weight:600; white-space:nowrap;
  transition:background .15s, border-color .15s; }
.btn:hover { background:var(--hover); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover { filter:brightness(1.08); background:var(--accent); }
.btn.danger { color:var(--warn); }
.btn.block { width:100%; height:42px; }
.btn[disabled] { opacity:.45; cursor:default; pointer-events:none; }
.btn[aria-busy=true] { opacity:.7; cursor:progress; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0;
  border-radius:var(--radius); background:transparent; color:var(--muted); }
.icon-btn:hover { background:var(--hover); color:var(--fg); }
.group { border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; margin-bottom:14px; }
.group input { border:0 !important; border-radius:0 !important; height:46px !important; box-shadow:none !important; }
.group input + input { border-top:1px solid var(--line) !important; }
.group:focus-within { border-color:var(--accent); }

/* login */
#login { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  padding:24px 16px; }
.login-brand { display:flex; flex-direction:column; align-items:center; gap:12px; }
.login-brand h1 { font-size:24px; letter-spacing:-.01em; }
#lg-form { width:100%; max-width:320px; }

/* app frame */
#app { display:grid; grid-template-columns:264px minmax(0,1fr); height:100vh; height:100dvh; }
#side { background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.side-top { display:flex; align-items:center; gap:10px; padding:18px 16px 12px; font-weight:600; font-size:16px; }
#apps { padding:4px 8px; }
.app-item { display:flex; align-items:center; gap:9px; width:100%; height:34px; padding:0 10px; border:0; border-radius:7px;
  background:transparent; text-align:left; }
.app-item:hover { background:var(--hover); }
.app-item.sel { background:var(--sel); color:var(--accent); font-weight:600; }
#side-app { flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 8px 0; }
.side-h { display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 10px; color:var(--muted);
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
#tree { flex:1; overflow:auto; padding:6px 0 12px; }
.side-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 10px 16px;
  border-top:1px solid var(--line); padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
#whoami { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }

.tn { display:flex; align-items:center; gap:2px; height:32px; margin:1px 0; padding-right:2px; border-radius:7px;
  padding-left:calc(2px + var(--d, 0) * 16px); cursor:pointer; user-select:none; }
.tn:hover { background:var(--hover); }
.tn.sel { background:var(--sel); color:var(--accent); }
.tn .chev { width:22px; height:22px; border:0; background:transparent; color:var(--muted); padding:0; display:inline-flex;
  align-items:center; justify-content:center; border-radius:5px; }
.tn .chev .i { width:14px; height:14px; transition:transform .15s; }
.tn[aria-expanded=true] > .chev .i { transform:rotate(90deg); }
.tn .chev.none { visibility:hidden; }
.tn .lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn > .i { color:var(--muted); }
.tn.sel > .i { color:var(--accent); }
.tn .shr { width:14px; height:14px; color:var(--muted); }
.tn .more { opacity:0; width:26px; height:26px; }
.tn:hover .more, .tn.sel .more, .tn .more:focus-visible { opacity:1; }
@media (hover:none) { .tn .more { opacity:1; } }
.tn .tg { flex:none; margin:0 6px 0 4px; padding:0 6px; border-radius:4px; background:var(--hover); color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.04em; line-height:17px; }
.tn.sel .tg { background:transparent; color:var(--accent); }
.tree-empty { padding:10px; font-size:14px; }

/* main */
#main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar { display:flex; align-items:center; gap:8px; min-height:56px; padding:0 20px; border-bottom:1px solid var(--line);
  background:var(--bg); }
#menu { display:none; margin-left:-8px; }
#crumbs { display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow:hidden; font-weight:600; }
#crumbs .cr { border:0; background:transparent; padding:4px 6px; border-radius:6px; max-width:34vw; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-weight:400; }
#crumbs .cr:hover { background:var(--hover); color:var(--fg); }
#crumbs .cr.last { color:var(--fg); font-weight:600; }
#crumbs .tag { flex:none; margin-left:6px; padding:0 6px; border-radius:4px; background:var(--mark); color:var(--fg); font-size:12px; font-weight:600; line-height:20px; }
#crumbs .sep { color:var(--muted); display:inline-flex; }
#crumbs .sep .i { width:14px; height:14px; }
#actions { display:flex; align-items:center; gap:8px; flex:none; }
#doc-menu.ph-only { display:none; }
a.btn { text-decoration:none; color:inherit; }
/* a narrower window: the top bar's buttons drop their words before anything overlaps */
@media (max-width: 1100px) { #actions .lbl-d { display:none; } }
#view { flex:1; min-height:0; overflow:auto; }

/* library */
.lib { max-width:900px; margin:0 auto; padding:20px 20px 40px; }
.sec { margin:0 0 6px; padding:0 12px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.rows { margin-bottom:18px; }
.row, .frow { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 8px 6px 12px; border-radius:10px;
  cursor:pointer; position:relative; }
.row + .row, .frow + .frow { margin-top:1px; }
.row:hover, .frow:hover { background:var(--hover); }
.row > .i, .frow > .i { color:var(--muted); width:20px; height:20px; }
.frow > .i { color:var(--accent); }
.row .nm, .frow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fmt { font-size:11px; font-weight:600; letter-spacing:.04em; padding:2px 7px; border-radius:999px; background:var(--hover); color:var(--muted); }
.dt { color:var(--muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--warn); flex:none; }
.mk { color:var(--accent) !important; width:15px !important; height:15px !important; }
.row .more, .frow .more { opacity:0; }
.row:hover .more, .frow:hover .more, .row .more:focus-visible, .frow .more:focus-visible { opacity:1; }
@media (hover:none) { .row .more, .frow .more { opacity:1; } }
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:72px 16px; color:var(--muted); }
.empty > .i { width:40px; height:40px; stroke-width:1.25; }
.empty p { margin:0; }

/* document view */
.doc { display:grid; grid-template-columns:minmax(0,1fr) 340px; height:100%; }
.pv { overflow:auto; padding:28px 28px 48px; min-width:0; font-family:var(--font-doc); }
/* a document page is paper: white with dark text in both themes; only the app around it follows the theme */
.paper { --fg:#1d1d1f; --muted:#6e6e73; --line:#d9d9de; --accent:#1f5fae; --mark:#fff1b8; color-scheme:light; color:#1d1d1f;
  max-width:800px; margin:0 auto; padding:56px 64px; background:#fff; border:1px solid var(--line);
  border-radius:6px; font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.paper h1 { font-size:24px; margin:0 0 .6em; } .paper h2 { font-size:19px; margin:1.2em 0 .5em; } .paper h3 { font-size:16px; margin:1.1em 0 .4em; }
.paper p { margin:0 0 .85em; }
.paper table { border-collapse:collapse; width:100%; margin:0 0 1em; font-size:14px; }
.paper td, .paper th { border:1px solid var(--line); padding:6px 10px; vertical-align:top; }
.paper img { max-width:100%; height:auto; }
.paper a { color:var(--accent); }
.paper blockquote { margin:0 0 1em; padding-left:14px; border-left:3px solid var(--line); color:var(--muted); }
mark.ph { background:var(--mark); color:inherit; border-radius:4px; padding:0 3px; cursor:pointer; box-decoration-break:clone;
  -webkit-box-decoration-break:clone; transition:box-shadow .15s; }
mark.ph:hover { box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
mark.ph.on { box-shadow:0 0 0 2px var(--accent); }
/* Word, PDF and UDF previews: a white A4 sheet in both themes (dark text, page margins); TXT and Markdown keep the plain page above */
.paper.a4 { --fg:#1d1d1f; --muted:#6e6e73; --line:#d9d9de; --accent:#1f5fae; --mark:#fff1b8; color-scheme:light; background:#fff; color:#1d1d1f;
  width:min(100%, 794px); max-width:none; aspect-ratio:210 / 297; padding:76px; border-color:#d9d9de; border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.08); }
.paper.a4.land { width:min(100%, 1123px); aspect-ratio:297 / 210; padding:52px 60px; }
/* a Word-drawn sheet (wordhtml): the page carries its own width and margins in pt; on a narrow screen it scrolls sideways */
.paper:has(> .wd), .paper.a4:has(> .wd), .paper.a4.land:has(> .wd) { padding:0; width:max-content; max-width:none; line-height:normal; overflow-wrap:normal; }
.wd { box-sizing:border-box; color:#1d1d1f; }
/* several pages (a page break, an OCR'd document): each page its own white sheet, a gap between them */
.paper:has(> .wd + .wd) { display:flex; flex-direction:column; gap:18px; aspect-ratio:auto; background:transparent; border:0; box-shadow:none; }
.paper:has(> .wd + .wd) > .wd { background:#fff; border:1px solid #d9d9de; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.08); }
.wd p { margin:0; white-space:pre-wrap; }
.wd table { width:auto; margin:0; font-size:inherit; }
.wd .wd-h { margin-bottom:12pt; } .wd .wd-f { margin-top:18pt; }
.rotbox { margin:0 auto; }
.pages { display:flex; flex-direction:column; align-items:center; gap:16px; }
.pages .rotbox { width:min(100%, 820px); }
.pages img { display:block; width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:4px; }
.pv-note { text-align:center; padding:48px 0; }

.fill { display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--surface); border-left:1px solid var(--line); }
.fill-h { display:flex; align-items:baseline; justify-content:space-between; padding:16px 16px 10px; }
.fill-h h2 { font-size:15px; }
.fill-list { flex:1; overflow:auto; padding:0 12px 12px; }
.fr { padding:10px 4px 12px; border-top:1px solid var(--line); }
.fr:first-child { border-top:0; }
.fr label { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px; color:var(--muted); }
.fr .phc { background:var(--mark); color:var(--fg); border-radius:4px; padding:0 6px; font-weight:600; }
.fr .ct { margin-left:auto; }
.fr input { height:36px; }
.fr .cx b { font-weight:600; color:var(--fg); }
.fr .cx { margin:5px 2px 0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr.on .phc { box-shadow:0 0 0 2px var(--accent); }
.lc { padding:10px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.lc h3 { font-size:14px; margin:0 0 4px; } .lc > p { font-size:12px; margin:0 0 8px; }
.lcr { padding:6px 0; } .lcr label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; } .lcr input { height:34px; }
.lcr .cx { margin:4px 2px 0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lcr .cx b { color:var(--fg); }
.lc .btn { margin-top:8px; }
.fill-none { display:flex; align-items:center; gap:8px; padding:8px 8px 16px; color:var(--muted); }
.fill-tabs { display:flex; gap:4px; padding:12px 12px 4px; }
.fill-tabs button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-weight:600; font-size:14px; }
.fill-tabs button:hover { background:var(--hover); }
.fill-tabs button[aria-selected=true] { background:var(--sel); color:var(--accent); }
.fill-tabs .n { font-weight:400; }
.pane { display:flex; flex-direction:column; flex:1; min-height:0; overflow:auto; }
.doc.no-panel { grid-template-columns:minmax(0,1fr); }
.doc.no-panel .fill { display:none; }
.pv-col { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; position:relative; }
/* the preview zooms by itself (pinch, double-tap, ctrl+wheel); its own scrolling pans; 100% sets it back */
#pv { touch-action:pan-x pan-y; }
#pv > * { zoom:var(--z, 1); }
#pv.zoomed > * { width:var(--zw); max-width:none; margin-left:0; margin-right:0; }
.zoom-reset { position:absolute; right:14px; bottom:14px; z-index:3; box-shadow:0 2px 10px rgba(0,0,0,.18); font-variant-numeric:tabular-nums; }
.pv-col .pv { flex:1; min-height:0; }
.pv-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 28px; border-bottom:1px solid var(--line); }
.pv-bar .btn { height:30px; padding:0 12px; font-size:14px; }
#real-none { font-size:13px; }
.det { margin:0; padding:4px 4px 8px; }
.det > div { padding:9px 4px; border-top:1px solid var(--line); }
.det > div:first-child { border-top:0; }
.det dt { margin:0 0 2px; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.det dd { margin:0; overflow-wrap:anywhere; }
.tn.drop-on, #tree.drop-on { background:var(--sel); outline:2px dashed var(--accent); outline-offset:-2px; }

/* sheets, drawer, toast */
.sheet-wrap { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--scrim); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .18s; }
.sheet-wrap.open { opacity:1; }
.sheet { width:min(440px, 100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.18); transform:translateY(12px);
  transition:transform .18s; }
.sheet-wrap.open .sheet { transform:none; }
.sheet-h { display:flex; align-items:center; justify-content:space-between; padding:14px 12px 6px 18px; }
.sheet-h h2 { font-size:16px; }
.sheet-b { padding:8px 18px 4px; overflow:auto; }
.sheet-f { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px 16px; }
.sheet-b p { margin:0 0 10px; }
.drop { display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 12px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:12px; color:var(--muted); transition:border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--sel); }
.drop .i { width:26px; height:26px; color:var(--accent); }
.drop b { color:var(--fg); font-weight:600; }
.up-name { margin-top:4px; color:var(--fg); font-weight:600; word-break:break-all; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px 10px; cursor:pointer; }
.switch-row > span { display:flex; align-items:center; gap:8px; font-weight:600; }
.switch { appearance:none; -webkit-appearance:none; width:42px; height:26px; margin:0; border-radius:999px; background:var(--line);
  position:relative; cursor:pointer; transition:background .18s; flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s; }
.switch:checked { background:var(--accent); }
.switch:checked::after { transform:translateX(16px); }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 8px; }
.seg label { cursor:pointer; position:relative; }  /* its hidden radio stays inside a scrolling pane, never stretching the page */
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 6px; border:1px solid var(--line); border-radius:10px; font-weight:600; }
.seg small { font-weight:400; color:var(--muted); }
.seg input:checked + span { border-color:var(--accent); background:var(--sel); color:var(--accent); }
.seg input:focus-visible + span { outline:2px solid var(--accent); outline-offset:1px; }
.opt-cap { margin:0 0 8px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.prog { color:var(--muted); font-size:14px; text-align:center; position:relative; padding-bottom:12px; }
.prog::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.2 } 50% { opacity:.9 } }
.pick { max-height:300px; overflow:auto; margin:0 -8px 8px; }
.pk { display:flex; align-items:center; gap:8px; width:100%; height:36px; border:0; border-radius:7px; background:transparent; text-align:left;
  padding-left:calc(10px + var(--d, 0) * 16px); }
.pk:hover { background:var(--hover); }
.pk.sel { background:var(--sel); color:var(--accent); font-weight:600; }
.pk .i { color:var(--muted); }
.pop { position:fixed; z-index:50; min-width:190px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.16); }
.pop button { display:flex; align-items:center; gap:10px; width:100%; height:34px; padding:0 10px; border:0; border-radius:6px; background:transparent; text-align:left; }
.pop button:hover:not([disabled]) { background:var(--hover); }
.pop button[disabled] { color:var(--muted); cursor:default; }
.pop button.danger { color:var(--warn); }
.pop small { margin-left:auto; color:var(--muted); }
.pop hr { border:0; border-top:1px solid var(--line); margin:4px 0; }
#toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; pointer-events:none; }
#toast div { background:var(--fg); color:var(--bg); padding:9px 16px; border-radius:999px; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.2);
  animation:rise .2s ease-out; }
@keyframes rise { from { opacity:0; transform:translateY(8px) } }

/* phone */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #app { display:block; }
  /* two screens: the tree (first), then the preview */
  body:has(> #app:not([hidden])) { overflow:hidden; overscroll-behavior:none; }  /* the app scrolls inside its panes; the page never moves the bottom bar away (login can still scroll) */
  #side { height:100vh; height:100dvh; border-right:0; }
  #app[data-screen=doc] #side, #app:not([data-screen=doc]) #main { display:none; }
  .tn { height:44px; }
  #main { height:100vh; height:100dvh; }
  #menu { display:inline-flex; }
  .topbar { padding:0 8px 0 12px; gap:4px; min-height:52px; }
  /* the document screen: the back button, the name (cut with an ellipsis, tap for all of it), Download and the menu */
  #crumbs > .cr:not(.last), #crumbs > .sep { display:none; }
  #crumbs .cr.last { max-width:none; min-width:0; flex:0 1 auto; padding-left:2px; }
  #edit-go, #convert-go, .topbar #history { display:none; }
  #doc-menu.ph-only { display:inline-flex; }
  .doc:not(.no-panel) .fill { padding-bottom:env(safe-area-inset-bottom); }
  .ocr-text { max-height:none; }
  .tn .tg, .fv-tag, .fmt { font-size:12px; }
  .fill-tabs button { padding:0 6px; }
  .lib { padding:12px 8px 32px; }
  .dt, .lbl-d { display:none; }
  #crumbs .cr:first-child:not(.last), #crumbs .cr:first-child + .sep { display:none; }
  #crumbs .cr { max-width:44vw; }
  .doc { display:flex; flex-direction:column; }
  .pv-col { flex:1; height:auto; }
  .pv-bar { padding:6px 10px; }
  .pv { flex:1; padding:8px 8px 16px; }
  .paper { padding:22px 18px; }
  .paper.a4 { padding:34px 26px; font-size:14px; }
  .fill { max-height:50%; border-left:0; border-top:1px solid var(--line); border-radius:14px 14px 0 0; }
  .fill-h { padding:12px 16px 6px; }
  /* the panel as a bottom bar: folded, only its tabs show */
  .doc.no-panel .fill { display:flex; flex:none; border-radius:0; }
  .doc.no-panel .fill .pane { display:none; }
  .doc.no-panel .fill-tabs { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .doc.no-panel .fill-tabs button[aria-selected=true] { background:transparent; color:var(--muted); }
  .fill-tabs button { flex:1; justify-content:center; height:40px; }
  #toast { bottom:auto; top:calc(12px + env(safe-area-inset-top)); }
  .sheet-wrap { align-items:flex-end; padding:0; }
  .sheet { width:100%; border-radius:14px 14px 0 0; border-bottom:0; transform:translateY(40px); padding-bottom:env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
.fill-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:36px 12px; color:var(--muted); }
.fill-empty > .i { width:36px; height:36px; stroke-width:1.25; }
.fill-empty p { margin:0; }
.shared-h { margin-top:14px; min-height:32px; }
.seg span { position:relative; }
.seg .rec { position:absolute; top:-8px; right:8px; padding:1px 7px; border-radius:999px; background:var(--accent); color:var(--on-accent);
  font-size:10.5px; font-style:normal; font-weight:600; letter-spacing:.02em; line-height:16px; }
/* settings sheet: quiet sections, one caption each */
.set { display:flex; flex-direction:column; gap:18px; min-width:min(420px, 100%); }
.set .seg { margin:0; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.side-foot #whoami { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-keep { margin:-4px 4px 8px; font-size:13px; }
.set-row .num { display:flex; align-items:center; gap:6px; }
.set-row .num input { width:84px; text-align:right; font-variant-numeric:tabular-nums; }
.set-row .num .ok { display:inline-flex; color:var(--ok); }
.set-row .num .ok[hidden] { display:none; }
#set-limits { display:flex; flex-direction:column; gap:8px; }
.set-row .num > .muted { width:22px; }
/* built-in viewers: the browser's own player; code in Folio's colours (no vendored theme) */
.media { display:flex; justify-content:center; padding:24px 0; }
.media video { max-width:100%; max-height:calc(100dvh - 160px); border-radius:var(--radius); background:#111; }
.media audio { width:min(560px, 100%); }
.code { max-width:980px; margin:0 auto; }
.code pre { margin:0; padding:16px 20px; overflow:auto; font:13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); white-space:pre; tab-size:4; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color:var(--accent); font-weight:600; }
.hljs-string, .hljs-attr-value, .hljs-regexp { color:var(--ok); }
.hljs-number, .hljs-literal, .hljs-symbol { color:var(--warn); }
.hljs-comment, .hljs-quote, .hljs-meta { color:var(--muted); font-style:italic; }
.hljs-attr, .hljs-section, .hljs-title, .hljs-name, .hljs-property { color:var(--accent); }
/* history sheet: day captions, time in a narrow column, one hairline between lines */
.hist { display:flex; flex-direction:column; min-width:min(460px, 100%); }
.hist-d { margin:14px 0 4px; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.hist-d:first-child { margin-top:0; }
.hist-r { display:grid; grid-template-columns:44px 1fr; gap:8px; padding:7px 0; border-top:1px solid var(--line); line-height:1.4; }
.hist-r > .muted { font-variant-numeric:tabular-nums; }
.hist .btn { margin-top:12px; align-self:center; }
.side-tools { display:none; margin-left:auto; gap:2px; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) { .side-tools { display:flex; } }
/* bell: the count uses the badge look of "Önerilen"; unread notices read a little stronger in the list */
.bell { position:relative; }
.bell .cnt { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent);
  color:var(--on-accent); font-size:10.5px; font-weight:600; line-height:16px; text-align:center; pointer-events:none; }
.pop.notes { max-width:min(380px, calc(100vw - 16px)); }
.pop.notes button { height:auto; min-height:34px; padding:7px 10px; align-items:flex-start; line-height:1.4; }
.pop.notes button .i { margin-top:2px; flex:none; }
.pop.notes button.unread span { font-weight:600; }
.pop.notes button.warn .i { color:var(--warn); }
/* details like macOS Get Info: small-caps section titles that fold, label and value side by side, one hairline between sections */
.info + .info { border-top:1px solid var(--line); }
.info-h { display:flex; align-items:center; gap:6px; width:100%; padding:10px 4px 6px; border:0; background:none; color:var(--muted);
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; text-align:left; }
.info-h .i { width:14px; height:14px; transition:transform .18s ease-out; }
.info[open] .info-h .i { transform:rotate(90deg); }
.info:not([open]) .det { display:none; }
.info .det { padding:0 4px 10px; }
.info .det > div { display:grid; grid-template-columns:40% 1fr; gap:10px; padding:3px 4px; border-top:0; align-items:baseline; }
.info .det dt { margin:0; text-align:right; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; }
.info .det dd { font-size:13px; font-variant-numeric:tabular-nums; user-select:text; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* calm motion, one place: new rows fade in once, the preview arrives softly, the bell count appears; off under reduced motion */
@keyframes fade-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.tn.new, .hist-r { animation:fade-in .18s ease-out both; }
#pv > * { animation:fade-in .2s ease-out both; }
.bell .cnt { transition:transform .18s ease-out, opacity .18s ease-out; }
.bell .cnt[hidden] { display:inline-block; opacity:0; transform:scale(.6); }
.code-cut { margin:0 0 8px; font-size:13px; }
/* recent files: newest strongest, fading over three; a closed folder holding one gets the faintest tint */
.tn.r1 { background:color-mix(in srgb, var(--accent) 9%, transparent); }
.tn.r2 { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.tn.r3, .tn.r-in { background:color-mix(in srgb, var(--accent) 3.5%, transparent); }
/* the open one stands apart from the recent tints: a stronger fill and the accent's weight */
.tn.sel { background:color-mix(in srgb, var(--accent) 22%, transparent); font-weight:600; }
.tn { transition:background-color .4s ease-out; }
/* phone, document screen: the top bar keeps the title readable; the panel is the bottom bar there and the bell sits on the library screen */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) { #panel-toggle, #rotate, .topbar .bell { display:none; } }
/* 1.4 editing: the page edits in place, calmly marked; masks stay atomic */
.edit-bar { display:flex; align-items:center; gap:8px; }
.edit-bar .sp { flex:1; }
.paper.editing [data-p], .paper.editing [data-new] { outline:none; border-radius:2px; transition:background-color .15s ease-out; }
.paper.editing [data-p]:hover, .paper.editing [data-new]:hover { background:color-mix(in srgb, var(--accent) 5%, transparent); }
.paper.editing [data-p]:focus, .paper.editing [data-new]:focus { background:color-mix(in srgb, var(--accent) 9%, transparent); }
/* the formatting toolbar of the Word editor: one row of icons, scrolls sideways on a phone, never wraps over the text */
.fmt-bar { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; padding:6px 28px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.fmt-bar::-webkit-scrollbar { display:none; }
.fmt-bar > * { flex:none; }
.fmt-bar .fb { width:32px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--fg); font:15px/1 Georgia, serif; cursor:pointer; }
.fmt-bar .fb:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.fmt-bar .fb:focus-visible, .fmt-bar select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.fmt-bar .fb svg { width:18px; height:18px; }
.fmt-bar select { height:30px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--fg); font-size:14px; padding:0 6px; }
.fmt-bar select[data-f=font] { width:132px; }
.fmt-bar select[data-f=size] { width:64px; }
.fmt-bar .sep { width:1px; height:18px; background:var(--line); margin:0 4px; }
.paper table.newtbl { border-collapse:collapse; width:100%; margin:6px 0; }
.paper table.newtbl td { border:1px solid #808080; height:1.6em; }
.tbl-ask { display:flex; gap:12px; }
.tbl-ask label { display:flex; flex-direction:column; gap:4px; font-size:13px; flex:1; }
.tbl-ask input { height:34px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--fg); font-size:15px; }
@media (max-width: 760px) { .fmt-bar { padding:6px 10px; } }
.doc.editing #edit-go, .doc.editing ~ * #edit-go { display:none; }
.code-edit { width:100%; min-height:calc(100dvh - 220px); padding:16px 20px; font:13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--fg); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); resize:vertical; tab-size:4; }
.code-edit:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.rotbox.pdf-edit { position:relative; }
.pdfl { position:absolute; display:block; white-space:nowrap; line-height:1.15; color:transparent; background:transparent; border-radius:2px;
  cursor:text; outline:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); font-family:Arial, "Liberation Sans", sans-serif; }
.pdfl:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.pdfl:focus, .pdfl:not(:empty):focus-within { color:#1d1d1f; background:#fff; outline:2px solid var(--accent); z-index:1; }
.pop-cap { padding:6px 10px 4px; font-size:12px; color:var(--muted); font-weight:600; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seg.seg-n { grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); }
.vers { display:flex; flex-direction:column; gap:2px; padding:0 4px 10px; }
.ver { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:4px; font-size:13px; font-variant-numeric:tabular-nums; }
.btn.sm { height:28px; padding:0 10px; font-size:12.5px; }
.share { display:flex; flex-direction:column; gap:12px; min-width:min(440px, 100%); }
.share-r { display:grid; grid-template-columns:20px 1fr auto auto; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--line); }
.share-r:first-child { border-top:0; }
.share-add { display:grid; grid-template-columns:1fr auto auto; gap:8px; }
.share-add select { height:36px; }
.tn[draggable=true] { -webkit-user-drag:element; }
/* pictures and their notes: numbered pins in the accent, calm; the add button under the picture */
.imgv { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 0; }
.imgbox { position:relative; display:inline-block; max-width:100%; }
.imgbox img { display:block; max-width:100%; max-height:calc(100dvh - 190px); border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.imgv.placing .imgbox img { cursor:crosshair; outline:2px dashed var(--accent); outline-offset:3px; }
.pin { position:absolute; transform:translate(-50%, -50%); width:26px; height:26px; border-radius:999px; border:2px solid var(--surface);
  background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .15s ease-out; }
.pin:hover, .pin.on { transform:translate(-50%, -50%) scale(1.15); }
.pin.sm { position:static; transform:none; width:20px; height:20px; font-size:11px; border-width:0; flex:none; box-shadow:none; }
.notes { display:flex; flex-direction:column; gap:2px; padding:0 4px 10px; }
.note-r { display:flex; gap:10px; align-items:flex-start; padding:6px 4px; border:0; background:none; text-align:left; border-radius:6px; cursor:pointer; color:var(--fg); }
.note-r:hover { background:var(--hover); }
.note-r small { display:block; margin-top:2px; font-size:12px; }
.note-text { width:100%; min-width:min(420px, 100%); padding:10px 12px; font:inherit; color:var(--fg); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); resize:vertical; }
.note-view p { margin:0 0 8px; white-space:pre-wrap; }
/* the folder view: large previews or a list; the recent tints apply here too */
.fv { padding:20px 24px 32px; }
.fv-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.fv-seg { display:flex; gap:2px; }
.fv-seg .icon-btn[aria-pressed=true] { background:var(--sel); color:var(--accent); }
.fv-items.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
.fv-card { display:flex; flex-direction:column; gap:6px; padding:8px; border:0; border-radius:10px; background:none; color:var(--fg); cursor:pointer; text-align:left; }
.fv-card:hover { background:var(--hover); }
.fv-thumb { position:relative; display:grid; place-items:center; aspect-ratio:3 / 4; border-radius:6px; background:var(--surface); border:1px solid var(--line); overflow:hidden; color:var(--muted); }
.fv-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }
.fv-thumb .i { width:40px; height:40px; }
.fv-thumb img + .fb { display:none; }
.fv-card .fv-name { font-size:13px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.fv-card .tg { align-self:flex-start; }
.fv-items.list { display:flex; flex-direction:column; }
.fv-row { display:grid; grid-template-columns:20px 1fr auto 130px; gap:10px; align-items:center; height:38px; padding:0 8px; border:0;
  border-radius:7px; background:none; color:var(--fg); cursor:pointer; text-align:left; }
.fv-row:hover { background:var(--hover); }
.fv-row .fv-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-date { font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; }
.fv-card.r1, .fv-row.r1 { background:color-mix(in srgb, var(--accent) 9%, transparent); }
.fv-card.r2, .fv-row.r2 { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.fv-card.r3, .fv-row.r3 { background:color-mix(in srgb, var(--accent) 3.5%, transparent); }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) { .fv { padding:12px; } .fv-items.grid { grid-template-columns:repeat(2, 1fr); gap:10px; } .fv-row { grid-template-columns:20px 1fr auto; } .fv-date { display:none; } }
/* anonymise: the two steps, the running one marked */
.steps { margin:10px 0 0; padding:0 0 0 20px; color:var(--muted); font-size:13.5px; display:flex; flex-direction:column; gap:4px; }
.steps li[data-state=run] { color:var(--fg); font-weight:600; }
.steps li[data-state=run]::after { content:" …"; }
.steps li[data-state=done] { color:var(--ok); }
.steps li[data-state=done]::after { content:" ✓"; }
/* the OCR tab */
.ocr-pane { display:flex; flex-direction:column; gap:12px; padding:12px 8px; }
.ocr-text { max-height:46dvh; overflow:auto; margin:0; padding:10px 12px; font:12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); user-select:text; }
.ocr-actions { display:flex; flex-wrap:wrap; gap:8px; }
.fv-tag { font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); }
.fv-card .fv-tag { margin-top:-2px; }
/* the mask card: the one clicked, on its own; the list below without its context lines */
.mcard { display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; padding:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mcard[hidden] { display:none; }
.mc-h { display:flex; align-items:center; gap:8px; }
.mc-h .phc { background:var(--mark); color:var(--fg); border-radius:5px; padding:2px 8px; font-weight:700; font-size:15px; }
.mc-h .icon-btn { margin-left:auto; }
.mc-l { margin:6px 0 0; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mc-v { margin:0; }
.mcard select, .mcard input { height:36px; }
.mcard .mc-cx { margin:2px 0 0; font-size:12px; color:var(--muted); white-space:normal; }
.mcard .mc-cx b { color:var(--fg); }
.mcard .btn.danger { align-self:flex-start; margin-top:6px; color:var(--warn); }
.fr .cx { display:none; }
.fr label { cursor:pointer; }
.fr.sel { background:var(--sel); border-radius:8px; }
.tn.td .more { opacity:0; }
.tn.td:hover .more, .tn.td.sel .more { opacity:1; }
/* a contact file (.vcf): one quiet card per person, initials when it has no photo */
.vcards { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding:8px 0 24px; }
.vc-count { margin:0 4px; font-size:13px; }
.vcard { display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.vc-pic { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; overflow:hidden; background:var(--sel); color:var(--accent); font-weight:600; font-size:19px; }
.vc-pic img { width:100%; height:100%; object-fit:cover; }
.vc-body h3 { font-size:17px; overflow-wrap:anywhere; }
.vc-body > p { margin:2px 0 0; font-size:14px; }
.vc-body dl { margin:10px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; }
.vc-body dl > div { display:contents; }
.vc-body dt { color:var(--muted); font-size:13px; }
.vc-body dd { margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.vc-body a { color:var(--accent); text-decoration:none; }
.pdf-soon { margin:10px 4px 4px; font-size:13px; }

/* 1.4.19 smart saving: the duplicate line and the folder chip in the upload sheet */
.up-smart { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.up-smart:empty { display:none; }
.up-dup { margin:0; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13.5px; }
.chip { height:30px; padding:0 12px; border-radius:15px; border:1px solid var(--line, #d0d5dd); background:transparent; color:var(--fg); font:inherit; font-size:13px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip[aria-pressed="true"] { border-color:var(--accent, #2b6cb0); color:var(--accent, #2b6cb0); font-weight:600; }