:root {
      color-scheme: dark;
      --bg:#131314; --sidebar:#18191b; --surface:#202124; --card:#282a2d;
      --border:#45474b; --text:#e8eaed; --muted:#bdc1c6; --subtle:#92979f;
      --accent:#a8c7fa; --accent-ink:#062e6f; --selection:#174575;
      --danger:#f2b8b5; --danger-bg:#5b2728; --success:#a8dabb;
      --shadow:0 18px 54px #0008; --checker-a:#33363a; --checker-b:#242629;
      --focus:#8ab4f8; --radius:12px; --panel-radius:16px;
      --list-columns:minmax(190px,2.6fr) minmax(120px,1fr) minmax(92px,.8fr) minmax(135px,1fr) minmax(115px,.95fr) 84px;
      --list-gap:8px;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:14px; background:var(--bg); color:var(--text);
    }
    :root[data-theme="light"] {
      color-scheme:light;
      --bg:#f8fafd; --sidebar:#f0f4f9; --surface:#fff; --card:#f4f7fb;
      --border:#d8dde5; --text:#202124; --muted:#5f6368; --subtle:#70757a;
      --accent:#0b57d0; --accent-ink:#fff; --selection:#d3e3fd;
      --danger:#8c1d18; --danger-bg:#fce8e6; --success:#137333;
      --shadow:0 16px 48px #20212428; --checker-a:#e0e3e8; --checker-b:#f5f6f8;
      --focus:#0b57d0;
    }
    * { box-sizing:border-box; }
    html,body { height:100%; margin:0; overflow:hidden; }
    body { background:var(--bg); }
    button,input,select { font:inherit; color:inherit; }
    button { border:0; cursor:pointer; }
    button:disabled { opacity:.48; cursor:not-allowed; }
    :where([hidden]) { display:none!important; }
    :focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
    .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; }
    .icon { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none; }
    .icon.small { width:16px;height:16px; }
    .icon.large { width:24px;height:24px; }
    .app { height:100dvh; display:flex; flex-direction:column; min-width:0; }
    .topbar { height:68px; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,min(42vw,720px)) minmax(0,1fr); gap:24px; align-items:center; padding:0 24px 0 20px; border-bottom:1px solid var(--border); background:var(--sidebar); flex:none; }
    .brand { display:flex; align-items:center; gap:11px; min-width:0; }
    .brand-mark { width:34px;height:34px;aspect-ratio:1;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:17px; }
    .brand-name { font-size:18px;font-weight:650;letter-spacing:-.4px;white-space:nowrap; }
    .local-tag { color:var(--muted);font-size:11px;line-height:1.25;border:1px solid var(--border);border-radius:20px;padding:5px 8px;white-space:nowrap; }
    .searchbox { height:44px; max-width:720px; width:100%; justify-self:center; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid transparent; border-radius:24px; background:var(--surface); color:var(--muted); }
    .searchbox:focus-within { border-color:color-mix(in srgb,var(--focus) 55%,var(--border)); }
    .searchbox input:focus-visible { outline:none; }
    .searchbox:has(input:focus-visible) { outline:2px solid var(--focus);outline-offset:2px; }
    .searchbox input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text); }
    .searchbox input::placeholder { color:var(--muted); opacity:1; }
    .top-actions { justify-self:end;display:flex;align-items:center;gap:10px; }
    .role-select { height:38px; max-width:180px; border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:0 30px 0 10px; }
    .role-label { display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:10px;white-space:nowrap; }
    .role-label select { color:var(--text);font-size:12px; }
    .role-label.user-label { max-width:210px; }
    .role-label.user-label select { max-width:210px; }
    .button { min-height:38px; display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;border-radius:9px;background:transparent;color:var(--text);white-space:nowrap; }
    .button:hover:not(:disabled),.icon-button:hover:not(:disabled) { background:color-mix(in srgb,var(--text) 8%,transparent); }
    .button.outline { border:1px solid var(--border); }
    .button.primary { background:var(--accent); color:var(--accent-ink); font-weight:600; }
    .button.primary:hover { filter:brightness(1.07); }
    .button.danger { color:var(--danger); }
    .icon-button { width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;background:transparent;color:var(--muted);flex:none; }
    .mobile-menu { display:none; }
    .layout { min-height:0;flex:1;display:grid;grid-template-columns:230px minmax(0,1fr); }
    .sidebar { min-height:0;display:flex;flex-direction:column;padding:18px 12px 14px;background:var(--sidebar);border-right:1px solid var(--border); }
    .side-heading { padding:6px 12px 9px;color:var(--muted);font-size:12px;font-weight:600; }
    .project-list { min-width:0;display:grid;gap:4px;padding:0 3px; }
    .project-row { position:relative;width:100%;min-width:0;min-height:44px;display:flex;align-items:stretch;padding:0;border-radius:24px;color:var(--text); }
    .project-row:hover { background:color-mix(in srgb,var(--text) 7%,transparent); }
    .project-row.active { background:color-mix(in srgb,var(--selection) 34%,transparent);font-weight:600; }
    .project-select { min-width:0;min-height:44px;flex:1;display:flex;align-items:center;gap:10px;padding:0 8px;border-radius:inherit;background:transparent;color:inherit;text-align:left;line-height:1.25;overflow:hidden; }
    .project-row:has(.project-menu-button) .project-select { padding-right:42px; }
    .project-menu-button { position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;opacity:.72; }
    .project-menu-button:hover { opacity:1; }
    .project-dot { width:26px;height:26px;aspect-ratio:1;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--accent);font-size:12px;font-weight:700; }
    .project-name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; }
    .side-divider { height:1px;margin:16px 9px;background:var(--border); }
    .nav-button { width:100%;height:42px;display:flex;align-items:center;gap:12px;padding:0 13px;border-radius:12px;background:transparent;color:var(--muted);text-align:left; }
    .nav-button:hover { background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text); }
    .nav-button.active { background:var(--selection);color:var(--text);font-weight:600; }
    .nav-spacer { flex:1; }
    .storage { margin:12px 11px 0;color:var(--muted);font-size:11px;line-height:1.6; }
    .storage-bar { height:4px;border-radius:4px;background:var(--border);overflow:hidden;margin:5px 0; }
    .storage-bar span { display:block;height:100%;width:8%;background:var(--accent);border-radius:4px; }
    .main { min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px 22px 18px; }
    .project-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-height:62px; }
    .heading-copy { min-width:0; }
    .breadcrumbs { display:flex;align-items:center;gap:5px;min-width:0;color:var(--muted);font-size:12px;overflow:hidden;white-space:nowrap; }
    .breadcrumbs button { background:none;color:inherit;padding:3px 1px;border-radius:4px; }
    .breadcrumbs button:hover { color:var(--text);text-decoration:underline; }
    .crumb-current { color:var(--text)!important;font-weight:600;overflow:hidden;text-overflow:ellipsis; }
    .crumb-sep { color:var(--subtle); }
    h1 { margin:7px 0 0;font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:620; }
    .heading-actions { display:flex;align-items:center;gap:8px; }
    .toolbar { min-height:62px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 13px;border-bottom:1px solid var(--border); }
    .toolbar-left,.toolbar-right { display:flex;align-items:center;gap:8px;min-width:0; }
    .toolbar-right { flex-shrink:0; }
    .toolbar-note { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px; }
    .compact-button { min-height:36px;padding:0 10px;font-size:13px; }
    .view-toggle { display:flex;padding:3px;border:1px solid var(--border);border-radius:9px; }
    .view-toggle .icon-button { width:34px;height:30px;border-radius:6px; }
    .view-toggle .active { background:var(--selection);color:var(--text); }
    .content-split { position:relative;flex:1;min-height:0;display:flex;gap:14px;padding-top:14px; }
    .explorer { flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;scrollbar-gutter:stable;border-radius:var(--panel-radius);background:var(--surface);border:1px solid var(--border); }
    .items { flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:16px;align-content:start; }
    .items.root-sections:not(.list) { grid-template-columns:repeat(auto-fill,minmax(190px,230px));justify-content:start; }
    .items.list { display:block;padding:4px 0; }
    .items.is-empty { display:flex;align-items:stretch; }
    .items.is-empty .empty-state { flex:1; }
    .items:not(.list) .list-kind,.items:not(.list) .list-size,.items:not(.list) .list-date,.items:not(.list) .list-author { display:none; }
    .section-label { grid-column:1/-1;margin:7px 2px 0;color:var(--muted);font-size:12px;font-weight:600; }
    .entry { position:relative;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden;transition:border-color .14s,background .14s; }
    .entry:hover { border-color:color-mix(in srgb,var(--accent) 52%,var(--border)); }
    .entry.selected { border-color:var(--accent);background:var(--selection);box-shadow:0 0 0 1px var(--accent); }
    .entry-card { width:100%;padding:0;text-align:left;background:transparent;color:inherit; }
    .section-card { display:flex;align-items:center;min-height:72px; }
    .section-card .entry-card { flex:1;min-width:0;min-height:70px;display:flex;align-items:center;gap:12px;padding:10px 12px;text-align:left; }
    .section-card .thumb { display:none; }
    .section-card .entry-meta { padding:0; }
    .section-compact-icon { width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent); }
    .section-compact-icon .icon { width:23px;height:23px; }
    .entry { --thumb-height:116px;--meta-top:9px;--card-action-size:34px; }
    .thumb { height:var(--thumb-height);display:grid;place-items:center;overflow:hidden;background:var(--surface);position:relative; }
    .thumb.checker { background-color:var(--checker-b);background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0; }
    .thumb img { display:block;max-width:100%;max-height:100%;object-fit:contain; }
    .file-glyph { width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent); }
    .file-glyph .icon { width:27px;height:27px; }
    .section-glyph { position:absolute;inset:22px 28px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:16px;background:var(--surface);color:var(--accent); }
    .section-glyph .icon { width:46px;height:46px; }
    .entry-meta { display:block;padding:9px 10px 10px;min-width:0; }
    .entry-name-line { display:flex;align-items:center;gap:6px;min-width:0; }
    .entry-row-icon { display:none;flex:none;color:var(--muted); }
    .entry-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:560; }
    .entry-sub { margin-top:4px;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .entry-footer { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border-top:1px solid var(--border); }
    .entry-actions { display:flex;align-items:center;justify-content:flex-end;gap:4px; }
    .entry-actions .icon-button { width:34px;height:34px;color:var(--text);background:transparent; }
    .section-card .entry-footer { min-height:0;flex:none;justify-content:flex-end;padding:8px;border-top:0; }
    .items:not(.list) .entry:not(.section-card) .entry-name-line { min-height:var(--card-action-size);padding-right:calc(var(--card-action-size) + 4px); }
    .items:not(.list) .entry:not(.section-card):has(.entry-actions > :nth-child(2)) .entry-name-line { padding-right:calc(2 * var(--card-action-size) + 8px); }
    .items:not(.list) .entry:not(.section-card) .entry-sub { display:block; }
    .items:not(.list) .entry:not(.section-card) .entry-footer { position:absolute;top:calc(var(--thumb-height) + var(--meta-top));right:4px;min-height:0;padding:0;border-top:0; }
    .items.list .section-label { margin:16px 10px 7px; }
    .list-head,.items.list .entry { display:grid;grid-template-columns:var(--list-columns);align-items:center;gap:var(--list-gap);padding:0 12px; }
    .list-head { min-height:37px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--border); }
    .list-head > :nth-child(1) { grid-column:1; }
    .list-head > :nth-child(2) { grid-column:2; }
    .list-head > :nth-child(3) { grid-column:3; }
    .list-head > :nth-child(4) { grid-column:4; }
    .list-head > :nth-child(5) { grid-column:5; }
    .list-head > :nth-child(6) { grid-column:6; }
    .list-head > *,.items.list .entry-card,.items.list .list-kind,.items.list .list-size,.items.list .list-date,.items.list .list-author,.items.list .entry-footer > * { grid-row:1; }
    .items.list .entry { min-height:54px;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent; }
    .items.list .entry.selected { background:var(--selection);box-shadow:none; }
    .items.list .entry-card { grid-column:1;display:block;min-width:0; }
    .items.list .thumb { display:none; }
    .items.list .section-compact-icon { display:none; }
    .items.list .entry-meta { padding:0 10px; }
    .items.list .entry-meta > .entry-sub { display:none; }
    .items.list .entry-name-line { padding:0; }
    .items.list .entry-name { font-weight:500; }
    .items.list .entry-row-icon { display:inline-grid;place-items:center;width:20px;height:20px;margin-right:4px; }
    .items.list .entry[data-type="section"] .entry-row-icon { color:var(--accent); }
    .items.list .entry[data-type="folder"] .entry-row-icon { color:var(--muted); }
    .list-kind,.list-size,.list-date,.list-author { color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .items.list .entry-footer { display:contents; }
    .items.list .list-kind { grid-column:2; }
    .items.list .list-size { grid-column:3; }
    .items.list .list-date { grid-column:4; }
    .items.list .list-author { grid-column:5; }
    .items.list .entry-actions { grid-column:6;min-width:0;justify-content:flex-end; }
    .empty-state { min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;color:var(--muted); }
    .empty-state .icon { width:40px;height:40px;margin-bottom:13px;color:var(--accent); }
    .empty-state strong { color:var(--text);font-size:15px;margin-bottom:5px; }
    .empty-state p { max-width:320px;margin:0;line-height:1.5;font-size:13px; }
    .selection-marquee { position:fixed;z-index:24;border:1px solid var(--accent);border-radius:3px;background:color-mix(in srgb,var(--accent) 18%,transparent);pointer-events:none; }
    .detail-panel { position:absolute;z-index:8;top:14px;right:0;bottom:0;width:0;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--border);border-width:0;border-radius:var(--panel-radius);background:var(--surface);box-shadow:var(--shadow);opacity:0;transform:translateX(12px);visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s; }
    .detail-panel.is-open { width:310px;border-width:1px;overflow:auto;opacity:1;transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s; }
    .detail-head { display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border); }
    .detail-head strong { font-size:13px; }
    .detail-body { padding:16px; }
    .detail-preview { height:128px;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:var(--card);margin-bottom:14px; }
    .detail-preview.checker { background-color:var(--checker-b);background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0; }
    .detail-preview img { max-width:100%;max-height:100%;object-fit:contain; }
    .detail-name { font-size:15px;font-weight:620;line-height:1.4;overflow-wrap:anywhere;margin:0 0 4px; }
    .detail-kind { color:var(--muted);font-size:12px;margin-bottom:13px; }
    .detail-actions { display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 15px; }
    .detail-actions .button { min-height:34px;padding:0 9px;font-size:12px; }
    .detail-fields { display:grid;gap:12px;margin:0; }
    .detail-fields div { min-width:0; }
    .detail-fields dt { color:var(--muted);font-size:11px;margin-bottom:3px; }
    .detail-fields dd { margin:0;font-size:12px;line-height:1.4;overflow-wrap:anywhere; }
    .detail-empty { padding:25px 17px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center; }
    .detail-empty.neutral { height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; }
    .selection-toolbar { display:flex;align-items:center;gap:7px;min-height:36px;padding:2px 9px;border-radius:10px;background:var(--selection);overflow-x:auto; }
    .selection-toolbar > .icon-button { width:32px;height:32px; }
    .selection-toolbar strong { margin:0 5px;font-size:12px;white-space:nowrap; }
    .selection-toolbar .button { min-height:32px;padding:0 8px;font-size:12px; }
    .context-menu { position:fixed;z-index:30;min-width:205px;padding:6px;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:var(--shadow); }
    .context-menu button { width:100%;min-height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:7px;background:transparent;text-align:left;color:var(--text); }
    .context-menu button:hover:not(:disabled) { background:color-mix(in srgb,var(--text) 8%,transparent); }
    .context-menu button:disabled { color:var(--muted); }
    .context-menu .separator { height:1px;background:var(--border);margin:5px 4px; }
    dialog { width:min(460px,calc(100vw - 28px));max-height:min(86dvh,720px);padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:var(--shadow); }
    dialog.dialog-wide { width:min(780px,calc(100vw - 28px)); }
    dialog::backdrop { background:#050607a8;backdrop-filter:blur(2px); }
    .dialog-head { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border); }
    .dialog-head h2 { margin:0;font-size:17px;font-weight:620; }
    .dialog-body { max-height:calc(86dvh - 140px);overflow:auto;padding:18px; }
    .dialog-body p { color:var(--muted);line-height:1.5;margin:0 0 14px; }
    .dialog-body label { display:block;margin:0 0 6px;color:var(--muted);font-size:12px; }
    .dialog-body input,.dialog-body select { width:100%;height:44px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg); }
    .dialog-error { min-height:20px;margin-top:7px;color:var(--danger);font-size:12px; }
    .dialog-actions { display:flex;justify-content:flex-end;gap:9px;padding:12px 18px 16px;border-top:1px solid var(--border); }
    .dialog-actions .button { min-width:82px; }
    .dialog-note { padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--muted);font-size:12px;line-height:1.5; }
    .dialog-section-title { margin:18px 0 9px;font-size:13px;font-weight:650;color:var(--text); }
    .dialog-body > .dialog-section-title:first-child { margin-top:0; }
    .member-list,.invite-list { display:grid;gap:8px; }
    .invite-create-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px; }
    .invite-create-grid label { margin-bottom:4px!important; }
    .invite-create-grid select { display:block;margin-top:5px; }
    .invite-create-grid + .dialog-error:empty { display:none;min-height:0;margin:0; }
    .invite-create-actions { display:flex;justify-content:flex-end;margin:2px 0 0; }
    .invite-create-submit { min-height:32px!important;padding:0 10px!important;border-radius:8px;font-size:12px!important; }
    .invite-list { max-height:min(34dvh,280px);overflow:auto;overscroll-behavior:contain;align-content:start;padding:1px 3px 1px 1px; }
    .member-row { display:grid;grid-template-columns:minmax(120px,1fr) minmax(90px,.7fr) 150px auto auto;gap:9px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px; }
    .member-person { min-width:0;display:grid;gap:2px; }
    .member-person strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px; }
    .member-person span,.member-role-note { color:var(--muted);font-size:11px; }
    .member-row select { height:36px!important;padding:0 8px!important; }
    .member-row .button { min-height:34px;padding:0 9px;font-size:11px; }
    .invite-card { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:10px;border:1px solid var(--border);border-radius:10px; }
    .invite-card strong { font-size:13px; }
    .invite-meta { grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.5; }
    .invite-url { grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center; }
    .invite-url input { min-width:0;height:36px!important;font-size:11px; }
    .invite-url .button { min-height:36px;padding:0 11px;font-size:12px; }
    .invite-card-actions { grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px; }
    .invite-card-actions .member-role-note { margin-right:auto;line-height:1.3; }
    .invite-card-actions .button { min-height:30px;padding:0 8px;font-size:11px; }
    .file-share-list { display:grid;gap:8px;max-height:min(34dvh,280px);overflow:auto;overscroll-behavior:contain;align-content:start;padding:1px 3px 1px 1px; }
    .file-share-card { display:grid;gap:7px;padding:10px;border:1px solid var(--border);border-radius:10px; }
    .file-share-head,.file-share-actions { display:flex;align-items:center;flex-wrap:wrap;gap:7px; }
    .file-share-head strong { min-width:0;flex:1;font-size:12px; }
    .file-share-actions { justify-content:flex-end; }
    .file-share-actions .button { min-height:30px;padding:0 8px;font-size:11px; }
    .file-share-url { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center; }
    .file-share-url input { min-width:0;height:36px!important;font-size:11px; }
    .file-share-url .button { min-height:36px;padding:0 11px;font-size:12px; }
    .shared-file-preview { min-height:150px;max-height:42dvh;display:grid;place-items:center;overflow:hidden;margin:0 0 14px;border:1px solid var(--border);border-radius:10px;background:var(--card); }
    .shared-file-preview.checker { background-color:var(--checker-b);background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0; }
    .shared-file-preview img { display:block;max-width:100%;max-height:42dvh;object-fit:contain; }
    .shared-file-meta { display:grid;gap:8px;margin:0; }
    .shared-file-meta div { display:grid;gap:2px; }
    .shared-file-meta dt { color:var(--muted);font-size:11px; }
    .shared-file-meta dd { margin:0;font-size:12px;overflow-wrap:anywhere; }
    .access-table-wrap { overflow:auto;border:1px solid var(--border);border-radius:10px; }
    .access-table { width:100%;border-collapse:collapse;font-size:12px; }
    .access-table th,.access-table td { padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap; }
    .access-table th { color:var(--muted);font-weight:550; }
    .access-table tr:last-child td { border-bottom:0; }
    .dialog-check { display:flex!important;align-items:center;gap:9px;margin:9px 0!important;color:var(--text)!important;font-size:13px!important; }
    .dialog-check input { width:18px!important;height:18px!important;margin:0;accent-color:var(--accent); }
    .status-pill { display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;background:var(--card);font-size:11px;color:var(--muted); }
    .status-pill.active { color:var(--success); }
    .toast { position:fixed;z-index:50;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(700px,calc(100vw - 28px));min-height:48px;padding:8px 12px 8px 16px;border-radius:12px;background:#303134;color:#f1f3f4;box-shadow:var(--shadow); }
    .toast[hidden] { display:none; }
    .toast button { color:#a8c7fa;background:transparent;font-weight:650; }
    .upload-queue { position:fixed;z-index:32;right:22px;bottom:18px;width:min(360px,calc(100vw - 28px));max-height:min(48dvh,360px);overflow:auto;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow); }
    .upload-queue[hidden] { display:none; }
    .queue-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px; }
    .queue-head strong { font-size:13px; }
    .queue-head button { min-height:36px;padding:0 8px;border-radius:7px;background:transparent;color:var(--accent); }
    .queue-item { padding:8px 0;border-top:1px solid var(--border); }
    .queue-name { display:flex;justify-content:space-between;gap:12px;font-size:12px; }
    .queue-name span:first-child { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .queue-state { flex:none;color:var(--muted); }
    .queue-track { height:4px;margin-top:7px;border-radius:4px;background:var(--border);overflow:hidden; }
    .queue-track span { display:block;height:100%;background:var(--accent);transition:width .15s; }
    .queue-foot { margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.4; }
    .viewer { position:fixed;z-index:40;inset:0;display:flex;flex-direction:column;background:#101113;color:#e8eaed; }
    .viewer[hidden] { display:none; }
    .viewer-top { height:58px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #393b3e;background:#1b1c1f; }
    .viewer-title { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:550; }
    .viewer-controls { min-height:52px;flex:none;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 12px;border-bottom:1px solid #393b3e;background:#1b1c1f;flex-wrap:wrap; }
    #imageControls { display:flex;align-items:center;gap:7px; }
    #mediaSpeedControl { display:flex;align-items:center;gap:6px;font-size:11px;color:#bdc1c6;white-space:nowrap; }
    .viewer .button,.viewer .icon-button { color:#e8eaed; }
    .viewer .button.outline { border-color:#55585d; }
    .viewer .button:hover,.viewer .icon-button:hover { background:#ffffff18; }
    .viewer #pixelToggle[aria-pressed="true"] { background:#1e4165;border-color:#a8c7fa;color:#a8c7fa; }
    .viewer .viewer-controls select { height:34px;padding:0 7px;border:1px solid #55585d;border-radius:7px;background:#242529;color:#e8eaed; }
    .viewer-layout { flex:1;min-height:0;display:flex; }
    .viewer-stage { flex:1;min-width:0;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;background:#0b0c0e;touch-action:none; }
    .viewer-stage.bg-light { background:#e9eaec; }
    .viewer-stage.bg-checker { background-color:#292b2e;background-image:linear-gradient(45deg,#3c3e42 25%,transparent 25%),linear-gradient(-45deg,#3c3e42 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3c3e42 75%),linear-gradient(-45deg,transparent 75%,#3c3e42 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0; }
    .viewer-image { max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;touch-action:none;transform-origin:center center; }
    .viewer-image.pixel { image-rendering:pixelated; }
    .viewer-media-host { width:min(1040px,calc(100% - 40px));max-height:calc(100% - 40px);display:grid;place-items:center; }
    .viewer-media-host[hidden],.viewer-fallback[hidden] { display:none; }
    .viewer-media-host video { display:block;width:100%;height:auto;max-width:100%;max-height:calc(100dvh - 190px);object-fit:contain;background:#000; }
    .viewer-media-host audio { display:block;width:min(640px,100%); }
    .viewer-fallback { max-width:min(480px,calc(100% - 32px));padding:24px;text-align:center;color:#bdc1c6; }
    .viewer-fallback .icon { color:#a8c7fa;margin-bottom:14px; }
    .viewer-fallback strong { display:block;color:#e8eaed;font-size:15px;margin-bottom:6px; }
    .viewer-fallback p { margin:0;line-height:1.45;font-size:13px; }
    .viewer-info { width:300px;flex:none;overflow:auto;border-left:1px solid #393b3e;background:#1b1c1f;color:#e8eaed; }
    .viewer-info .detail-head { border-color:#393b3e; }
    .viewer-info .detail-preview { background:#292b2e; }
    .viewer-info .detail-kind,.viewer-info dt { color:#bdc1c6; }
    .viewer-info .detail-actions .button { color:#e8eaed; }
    .viewer-hint { position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:7px 10px;border-radius:20px;background:#202124cc;color:#e8eaed;font-size:11px;white-space:nowrap;pointer-events:none; }
    .viewer-info[hidden] { display:none; }
    .drop-overlay { position:fixed;z-index:35;inset:84px 22px 18px 252px;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:18px;background:color-mix(in srgb,var(--selection) 78%,transparent);color:var(--text);font-size:19px;font-weight:620;text-align:center;pointer-events:none; }
    .drop-overlay[hidden] { display:none; }
    .drop-overlay span { display:block;font-size:13px;font-weight:400;margin-top:8px; }
    @media (max-width:1150px) {
      .local-tag { display:none; }
    }
    @media (max-width:1050px) {
      .topbar { grid-template-columns:minmax(0,1fr) minmax(180px,min(40vw,520px)) minmax(0,1fr);gap:14px;padding:0 16px; }
      .layout { grid-template-columns:210px minmax(0,1fr); }
      .sidebar { padding-left:8px;padding-right:8px; }
      .main { padding-left:14px;padding-right:14px; }
      .local-tag { display:none; }
      .detail-panel.is-open { width:280px; }
      .items { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
      .items.root-sections:not(.list) { grid-template-columns:repeat(auto-fill,minmax(190px,230px)); }
      :root { --list-columns:minmax(150px,2fr) minmax(100px,1fr) minmax(76px,.7fr) 76px; }
      .list-head > :nth-child(4),.list-head > :nth-child(5),.items.list .list-date,.items.list .list-author { display:none; }
      .list-head > :nth-child(6) { grid-column:4; }
      .items.list .entry-actions { grid-column:4; }
      .section-card { flex-direction:column;align-items:stretch;min-height:98px; }
      .section-card .entry-card { min-height:58px;gap:8px;padding:8px; }
      .section-compact-icon { width:34px;height:34px; }
      .section-card .entry-footer { display:flex;justify-content:flex-end;padding:2px 6px 4px; }
    }
    @media (max-width:820px) {
      .topbar { height:60px;grid-template-columns:40px auto minmax(0,1fr) auto;gap:7px;padding:0 12px; }
      .mobile-menu { display:inline-grid;width:40px;height:40px;place-items:center;border-radius:50%;background:transparent;color:var(--muted); }
      .brand { gap:8px; }
      .brand-mark { width:31px;height:31px; }
      .brand-name { font-size:16px; }
      .local-tag { display:none; }
      .searchbox { height:40px; }
      .top-actions { gap:5px; }
      .role-label { display:flex; }
      .role-select { height:38px; }
      .top-actions > .icon-button { width:38px;height:38px; }
      .layout { display:block; }
      .sidebar { position:fixed;z-index:25;left:0;top:60px;bottom:0;width:min(300px,88vw);transform:translateX(-102%);transition:transform .2s ease;box-shadow:var(--shadow); }
      .sidebar.open { transform:translateX(0); }
      .main { height:calc(100dvh - 60px);padding:14px 12px 12px; }
      .project-heading { min-height:59px; }
      h1 { font-size:20px; }
      .heading-actions .upload-shortcut { display:none; }
      .content-split { position:relative; }
      .detail-panel { position:fixed;z-index:28;inset:60px 0 0;width:auto;border-radius:0;border-left:0;border-right:0;border-bottom:0;transform:translateY(12px);box-shadow:var(--shadow); }
      .detail-panel.is-open { width:auto;border-width:1px 0 0;transform:translateY(0); }
      .detail-body { max-width:560px;margin:auto;padding:18px 20px 32px; }
      .detail-preview { height:180px; }
      .detail-head { min-height:54px;position:sticky;top:0;background:var(--surface);z-index:1; }
      .toolbar { min-height:57px;padding:8px 0 10px; }
      .selection-toolbar { min-height:36px;padding:2px 9px; }
      :root { --list-columns:minmax(0,1fr) 70px 96px;--list-gap:4px; }
      .list-head { min-height:48px; }
      .list-head > :nth-child(3),.list-head > :nth-child(4),.list-head > :nth-child(5),.items.list .list-size,.items.list .list-date,.items.list .list-author { display:none; }
      .list-head > :nth-child(6) { grid-column:3; }
      .items.list .entry-actions { grid-column:3; }
      .items.list .list-kind { grid-column:2; }
      .entry-actions .icon-button { width:44px;height:44px; }
      .entry { --card-action-size:44px; }
      .toolbar-note { display:none; }
      .drop-overlay { inset:70px 12px 12px 12px; }
      .upload-queue { right:10px;bottom:10px; }
      .viewer-top { height:54px;padding:0 8px;gap:4px; }
      .viewer-top .icon-button { width:40px;height:40px; }
      .viewer-title { font-size:13px; }
      .viewer-controls { min-height:48px;gap:4px;padding:5px 6px; }
      #imageControls { gap:4px; }
      .viewer-controls .button { min-height:36px;padding:0 8px;font-size:12px; }
      .viewer-controls .icon-button { width:36px;height:36px; }
      .viewer-info { position:fixed;z-index:42;inset:102px 0 0;width:100%;border:0;border-top:1px solid #393b3e;box-shadow:var(--shadow); }
      .viewer-info .detail-body { padding-bottom:30px; }
    }
    @media (max-width:560px) {
      .topbar { grid-template-columns:40px auto minmax(0,1fr) auto; }
      .brand-name { display:block;font-size:14px; }
      .brand-mark { display:none; }
      .searchbox { gap:7px;padding:0 10px; }
      .searchbox .icon { width:18px;height:18px; }
      .role-select { max-width:90px;height:35px;padding-left:7px;padding-right:21px;font-size:11px; }
      .main { padding-left:10px;padding-right:10px; }
      .project-heading { gap:6px; }
      .heading-actions { gap:3px; }
      .heading-actions > .button { min-height:36px;padding:0 9px;font-size:12px; }
      .breadcrumbs { font-size:11px; }
      h1 { font-size:19px; }
      .toolbar { gap:5px; }
      .toolbar-left,.toolbar-right { gap:4px; }
      .compact-button { min-height:35px;padding:0 8px;font-size:12px; }
      .toolbar-right > .button span,.selection-toolbar .button span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
      .items { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px; }
      .items.root-sections:not(.list) { grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),min(100%,230px)));justify-content:start; }
      .entry { --thumb-height:106px;--meta-top:8px; }
      .entry-meta { padding:8px; }
      .entry-name { font-size:12px; }
      .entry-sub { font-size:10px; }
      .entry-footer { min-height:48px;padding:2px 6px; }
      .section-card .entry-footer { padding:0; }
      .items.list { padding:3px 7px; }
      .items.list .entry-meta { padding:0 7px; }
      .selection-toolbar { min-height:35px;padding:1px 9px;gap:2px;overflow:auto; }
      .selection-toolbar strong { font-size:11px; }
      .selection-toolbar .button { padding:0 6px;font-size:11px; }
      .detail-actions .button { min-height:42px; }
      .viewer-top .viewer-nav { display:none; }
      .viewer-controls { justify-content:space-around; }
      .viewer-controls .viewer-label { display:none; }
      .viewer-controls select { max-width:100px; }
      .viewer-hint { bottom:8px;font-size:10px; }
      .dialog-actions { position:sticky;bottom:0;background:var(--surface); }
      dialog.dialog-wide { width:calc(100vw - 16px);max-height:90dvh; }
      dialog.dialog-wide .dialog-body { max-height:calc(90dvh - 132px);padding:14px; }
      .member-row { grid-template-columns:minmax(0,1fr) 125px;gap:8px; }
      .member-row .member-person,.member-row .member-role-note { grid-column:1/-1; }
      .invite-card { grid-template-columns:minmax(0,1fr); }
      .invite-meta,.invite-url,.invite-card-actions { grid-column:1; }
      .invite-create-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:0 9px; }
      .invite-create-grid label:first-child { grid-column:1/-1; }
    }
    @media (min-width:821px) and (max-width:1180px), (min-width:1320px) and (max-width:1449px) {
      :root { --list-columns:minmax(150px,2fr) minmax(100px,1fr) minmax(76px,.7fr) 76px; }
      .list-head > :nth-child(4),.list-head > :nth-child(5),.items.list .list-date,.items.list .list-author { display:none; }
      .list-head > :nth-child(6) { grid-column:4; }
      .items.list .entry-actions { grid-column:4; }
    }
    @media (min-width:1320px) {
      .detail-panel { position:static;inset:auto;z-index:auto;flex:0 0 0;width:0;margin-left:-14px;box-shadow:none; }
      .detail-panel.is-open { flex-basis:310px;width:310px;margin-left:0; }
    }
    @media (prefers-reduced-motion:reduce) {
      :root:not([data-motion=normal]) *,:root:not([data-motion=normal]) *::before,:root:not([data-motion=normal]) *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important; }
    }
    .route-status{min-height:100vh;display:grid;place-content:center;text-align:center;padding:24px;color:var(--text)}
    .route-status strong{font-size:1.1rem}
    .route-status p{color:var(--muted);max-width:34rem;line-height:1.55}
    .app[hidden],.route-status[hidden]{display:none!important}
  

.icon-sprite { position:absolute;width:0;height:0;overflow:hidden; }
.auth-page { min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg); }
.auth-card { width:min(420px,100%);padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--surface); }
.auth-card h1 { margin-bottom:24px; }
.auth-card label,.form-stack label { display:block;margin:12px 0 5px; }
.auth-card input,.form-stack input,.form-stack select { width:100%; }
.auth-card button { margin-top:20px; }
.form-error { color:#f2aaa4;margin:12px 0;line-height:1.5; }
.auth-page[hidden],.app[hidden],.viewer[hidden] { display:none!important; }
.account-button { max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.project-row .project-select { cursor:pointer; }
.dialog-list { max-height:45dvh;overflow:auto;display:grid;gap:8px; }
.dialog-list-row { display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px;border-bottom:1px solid var(--border); }
.dialog-list-row strong { flex:1;min-width:120px; }
.link-result { display:flex;gap:8px;margin:12px 0; }
.link-result input { min-width:0;flex:1; }
.link-hint { color:var(--muted);font-size:12px;margin:8px 0; }
.acl-table { width:100%;border-collapse:collapse;margin-top:12px; }
.acl-table td,.acl-table th { text-align:left;padding:8px;border-bottom:1px solid var(--border);font-size:12px; }
.media-speed { display:flex;align-items:center;gap:8px; }
.viewer [aria-pressed="true"] { background:#1e4165;border-color:#a8c7fa;color:#a8c7fa; }
.upload-progress { position:fixed;bottom:20px;right:20px;z-index:60;padding:16px;max-width:360px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow); }
.upload-progress progress { width:100%; }
.upload-progress[hidden] { display:none; }
.entry.selected { outline:1px solid var(--accent); }
.entry-footer { cursor:default; }
.storage progress { width:100%;height:8px; }
.flex-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px; }
.screen-message { padding:40px;text-align:center;color:var(--muted); }
#viewerAudio { width:min(600px,90%); }
#viewerVideo { width:100%;max-width:1040px;max-height:calc(100dvh - 170px);object-fit:contain; }
.viewer-media-host { width:min(1040px,calc(100% - 40px)); }
.viewer-stage .viewer-media-host[hidden] { display:none; }
#loadMore { align-self:center;margin:12px; }
.inline-note { color:var(--muted);font-size:12px; }
.badge { display:inline-block;padding:3px 8px;border-radius:12px;background:var(--selection);font-size:12px; }
.auth-card input[type=checkbox],.dialog-body input[type=checkbox] { width:18px;height:18px;vertical-align:middle; }
#dialog.dialog-wide { width:min(820px,calc(100vw - 28px)); }
.viewer-nav,.viewer-top-actions { display:flex;align-items:center;gap:4px; }
.viewer-top-actions { margin-left:auto; }
#imageControls { flex-wrap:wrap;justify-content:center; }
.dialog-body label { margin-top:10px; }
.items .entry { user-select:none; }
.marquee-selection { position:fixed;z-index:15;pointer-events:none;background:#a8c7fa26;border:1px solid var(--accent); }
.auth-page { height:100dvh;overflow:auto; }
#dialogForm { display:flex;flex-direction:column;max-height:min(86dvh,720px); }
.dialog-head,.dialog-actions { flex:none; }
.dialog-body { min-height:0;overflow:auto; }
.viewer-stage { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr); }
@media (max-width:820px) {
  .topbar { grid-template-columns:auto minmax(0,1fr) auto; }
  .account-button { max-width:100px;padding:0 8px;font-size:12px; }
}
@media (max-width:560px) {
  .topbar { grid-template-columns:40px minmax(0,1fr) auto; }
  .brand-name { display:none; }
}

/* Account screens: compact fields and a quieter, rounded surface. */
.auth-page { padding:32px 20px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%),var(--bg); }
.auth-card { width:min(440px,100%);padding:36px;border-radius:30px;background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 65%,transparent);box-shadow:0 20px 70px #00000018; }
.auth-brand { display:flex;align-items:center;gap:12px;color:var(--text);font-weight:650;font-size:17px;margin-bottom:30px; }
.auth-card .brand-mark { display:grid;width:42px;height:42px;border-radius:15px;font-size:21px; }
.auth-card h1 { margin:0 0 28px;font-size:28px;line-height:1.2;letter-spacing:-.7px;font-weight:650; }
.auth-context { margin:-14px 0 24px;line-height:1.5;overflow-wrap:anywhere; }
.auth-context span { color:var(--muted); }
.auth-fields { display:grid;gap:20px; }
.auth-card .auth-field { display:block;margin:0;font-size:13px;font-weight:500;color:var(--muted); }
.auth-field > label { margin:0;color:inherit; }
.auth-card .auth-field input { display:block;width:100%;min-height:50px;margin:8px 0 0;padding:0 15px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--bg) 45%,var(--surface));color:var(--text);font-size:15px;outline:none;transition:border-color .12s,box-shadow .12s; }
.auth-card .auth-field input:focus { border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 16%,transparent); }
.auth-password { position:relative; }
.auth-card .auth-password input { padding-right:82px; }
.auth-card .auth-reveal { position:absolute;inset:0 7px 0 auto;margin:0;padding:0 9px;min-width:65px;background:transparent;border-radius:11px;color:var(--muted);font-size:12px;font-weight:550; }
.auth-reveal:hover { color:var(--text); }
.auth-card .auth-remember { display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:13px;font-weight:400;cursor:pointer; }
.auth-card .auth-remember input { flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent);border-radius:5px; }
.auth-card .form-error { margin:16px 0 0;font-size:13px; }
.auth-card .form-error:empty { display:none; }
.auth-card .auth-submit { width:100%;min-height:50px;margin:26px 0 0;border-radius:16px;justify-content:center;font-size:15px;font-weight:650; }
.auth-card .auth-secondary { width:100%;min-height:44px;margin:10px 0 0;padding:0 14px;border:1px solid var(--border);border-radius:15px;background:transparent;color:var(--text);font-size:14px; }
.auth-card .auth-support { display:block;margin:18px auto 0;padding:5px;background:transparent;border-radius:8px;color:var(--muted);font-size:12px; }
.auth-support:hover { color:var(--text); }
.auth-card .auth-assist { margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5; }
.auth-card #recoveryHelp { text-align:center; }
.auth-card button:focus-visible { outline:2px solid var(--focus);outline-offset:3px; }
@media (max-width:560px) {
  .auth-page { padding:20px 16px; }
  .auth-card { padding:28px 24px;border-radius:26px; }
  .auth-brand { margin-bottom:26px; }
  .auth-card h1 { font-size:26px; }
}
@media (max-height:650px) { .auth-page { align-items:start; } }
.auth-password { margin-top:8px; }
.auth-card .auth-password input { margin-top:0; }

/* Project identity, account and grouped actions. */
.heading-identity { display:flex;align-items:flex-start;gap:16px;min-width:0;flex:1; }
.heading-copy { min-width:0; }
.heading-title-line { display:flex;align-items:center;gap:8px;min-width:0; }
.heading-title-line h1 { margin:0;overflow-wrap:anywhere; }
.project-heading { min-height:72px;margin-bottom:12px; }
.heading-avatar .project-dot { width:60px;height:60px;border-radius:19px;font-size:25px; }
.project-dot { background:color-mix(in srgb,var(--project-color,var(--accent)) 15%,var(--surface));color:var(--project-color,var(--accent));border:1px solid color-mix(in srgb,var(--project-color,var(--accent)) 32%,transparent);overflow:hidden; }
.project-dot img,.user-avatar img { display:block;width:100%;height:100%;object-fit:cover; }
.location-description { margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.6;max-width:720px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto; }
.breadcrumbs[hidden] { display:none; }
.user-avatar { width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;flex:none;overflow:hidden;background:color-mix(in srgb,var(--accent) 17%,var(--surface));border:1px solid var(--border);color:var(--accent);font-weight:650;font-size:14px; }
.user-avatar.large { width:60px;height:60px;font-size:25px; }
.account-button { display:flex;align-items:center;gap:10px;max-width:240px;padding:6px 11px 6px 6px;border:1px solid var(--border);border-radius:24px;background:var(--surface); }
.account-copy { display:grid;text-align:left;min-width:0;gap:2px; }
.account-copy strong { font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis; }
.account-copy small { color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis; }
.account-summary { display:flex;align-items:center;gap:14px;margin-bottom:22px; }
.account-summary strong { font-size:18px;overflow-wrap:anywhere; }
.account-summary small,.person-row small,.dialog-list-row strong small { display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:400; }
.account-actions { display:grid;gap:8px; }
.menu-action { width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:13px;background:var(--card);color:var(--text);text-align:left;font-size:13px; }
.menu-action:hover { background:color-mix(in srgb,var(--accent) 8%,var(--card));border-color:var(--subtle); }
.menu-action.danger { color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--border));background:color-mix(in srgb,var(--danger) 4%,var(--card)); }
.menu-action .icon { width:19px;height:19px;flex:none; }
.project-hub { display:grid;gap:18px; }
.hub-people-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.hub-people-heading { margin-bottom:10px;flex-wrap:wrap; }
.hub-people-heading h3 { margin:0; }
.project-danger-zone { margin-top:22px;padding-top:16px;border-top:1px solid var(--border); }
.project-hub h3 { margin:0 0 16px;font-size:14px;font-weight:600; }
.hub-people { min-width:0; }
.count-badge { display:inline-grid;place-items:center;min-width:23px;min-height:22px;margin-left:5px;padding:0 6px;border-radius:8px;background:var(--card);color:var(--muted);font-size:11px; }
.hub-members { max-height:200px;overflow:auto;margin-bottom:14px; }
.person-row { display:flex;align-items:center;gap:10px;padding:8px 0; }
.person-row>span:last-child { min-width:0;overflow-wrap:anywhere; }
.person-row strong { font-size:13px;font-weight:500; }
.hub-invite { display:flex;align-items:flex-end;gap:8px;border-top:1px solid var(--border);margin-top:20px;padding-top:8px; }
.hub-invite label { flex:1;min-width:0;margin:0; }
.hub-invite select { margin-top:6px; }
.hub-invite .button { white-space:nowrap;min-height:44px; }
.text-button { padding:8px 0;margin-top:7px;background:transparent;color:var(--accent);font-size:12px; }
#quickInviteResult small { display:block;color:var(--muted);font-size:11px;line-height:1.5; }
.identity-editor { display:flex;align-items:center;gap:16px;margin:0 0 24px; }
.identity-editor .project-dot { width:64px;height:64px;border-radius:20px;font-size:25px; }
.identity-editor>div { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.identity-editor .file-choice { margin:0;display:inline-flex;width:auto;cursor:pointer;font-size:13px;align-items:center; }
.dialog-body textarea { display:block;resize:vertical;min-height:80px;width:100%;margin-top:8px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;line-height:1.5; }
.dialog-body input:not([type=checkbox]):not([type=color]),.dialog-body select { border-radius:12px;margin-top:6px; }
.dialog-body .color-choice { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px; }
.dialog-body input[type=color] { width:66px;height:40px;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--bg);cursor:pointer; }
.dialog-body .button:not(.primary) { border:1px solid var(--border);border-radius:12px; }
.dialog-body .button.danger { border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); }
.dialog-body .button:focus-visible,.menu-action:focus-visible,.text-button:focus-visible { outline:2px solid var(--focus);outline-offset:3px; }
select { appearance:none;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:35px!important; }
#sort { height:40px;min-width:130px;padding:0 36px 0 13px;border:1px solid var(--border);border-radius:12px;background-color:var(--surface);color:var(--text);font-size:13px; }
.order-direction { width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--surface); }
.order-direction .icon { width:23px;height:23px;stroke-width:2; }
.section-onboarding { gap:12px; }
.section-onboarding strong { color:var(--text);font-size:20px;font-weight:600; }
.section-onboarding p { margin:0;max-width:340px;font-size:13px;line-height:1.6; }
.section-onboarding .button { margin-top:8px; }
.section-onboarding small { font-size:11px;line-height:1.5; }
.section-onboarding>.icon { width:42px;height:42px;margin-bottom:4px; }
@media (max-width:650px) {
 .heading-avatar .project-dot { width:42px;height:42px;border-radius:14px;font-size:20px; }
 .heading-identity { gap:10px; }
 .location-description { max-height:85px;font-size:12px; }
 .account-button { max-width:145px;padding:4px 8px 4px 4px;gap:7px; }
 .account-copy small { display:none; }
 .account-copy strong { font-size:12px; }
 .user-avatar { width:30px;height:30px; }
 .project-heading { flex-wrap:wrap;gap:12px; }
 .heading-actions { margin-left:auto; }
}
@media (max-width:400px) { .account-copy { display:none; }.account-button { padding:4px; }.hub-invite { flex-wrap:wrap; } }
.hub-people .text-button { min-height:36px;padding:8px 11px;border:1px solid var(--border);border-radius:11px; }

/* Sidebar workspace navigation and project-scoped storage. */
.sidebar { padding-bottom:0; }
.sidebar-navigation { flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable; }
.sidebar-footer { flex:none; }
#sidebarTrash:not(:empty) { padding:7px 0; }
.storage-section { padding:12px 9px;border-top:1px solid var(--border); }
.storage-section progress { display:block;width:100%;height:5px;accent-color:var(--accent);margin:8px 0; }
.storage-amount { margin:5px 0;font-size:12px; }
.sidebar-account { border-top:1px solid var(--border);padding:8px 0; }
.sidebar-account .account-button { justify-content:flex-start;width:100%;max-width:none;min-height:52px;padding:7px 9px;background:transparent;border-color:transparent;border-radius:13px; }
.sidebar-account .account-button:hover { background:var(--surface); }
.sidebar-account .account-copy { display:grid;text-align:left; }
.sidebar-account .account-copy strong { font-size:13px; }
.sidebar-account .account-copy small { display:block;font-size:11px; }
.sidebar-account .user-avatar { width:34px;height:34px; }
.content-nav-heading { display:flex;align-items:center;gap:0;border-radius:12px; }
.content-nav-heading.active { background:var(--selection); }
.content-nav-heading .nav-button.active { background:transparent; }
.content-nav-heading .nav-button { flex:1;min-width:0; }
.navigation-toggle { width:34px;height:34px;margin-right:5px;flex:none;border-radius:9px;color:var(--muted); }
.content-nav-heading.active .navigation-toggle { color:var(--text); }
.navigation-toggle .icon { width:17px;height:17px; }
.navigation-toggle[aria-expanded=true] .icon { transform:rotate(90deg); }
.sidebar-location { display:flex;align-items:center;gap:4px;margin:0 0 0 22px;padding:7px 4px 4px 9px;border-left:1px solid var(--border);color:var(--muted); }
.sidebar-location .icon-button { width:28px;height:28px;flex:none; }
.sidebar-location span { font-size:11px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#sidebarChildren { margin:0 0 10px 22px;padding:5px 0 0 13px;border-left:1px solid var(--border); }
.sidebar-child { position:relative;display:flex;align-items:center;gap:9px;min-height:34px;width:100%;padding:7px 9px;border-radius:9px;text-align:left;background:transparent;color:var(--muted); }
.sidebar-child::before { content:"";position:absolute;left:-13px;top:50%;width:13px;border-top:1px solid var(--border); }
.sidebar-child:hover { background:var(--surface);color:var(--text); }
.sidebar-child .icon { width:16px;height:16px;flex:none; }
.sidebar-child span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
.sidebar-empty { margin:7px 9px;font-size:11px;color:var(--muted); }
.sidebar-more { min-height:32px;font-size:11px; }
.sidebar-child:focus-visible,.navigation-toggle:focus-visible,.picture-edit-toggle:focus-visible,.picture-actions button:focus-visible { outline:2px solid var(--focus);outline-offset:2px; }

/* Identity pictures remain circular at every size. */
.project-dot,.heading-avatar .project-dot,.identity-editor .project-dot { border-radius:50%; }
.identity-editor.identity-centered { justify-content:center;margin:8px 0 26px; }
.identity-centered .picture-editor { display:block;position:relative;width:112px;height:112px;flex:none; }
.identity-centered .project-dot,.identity-centered .user-avatar.large { display:grid;width:112px;height:112px;border-radius:50%;font-size:43px; }
.picture-edit-toggle { position:absolute;right:-2px;bottom:0;display:grid;place-items:center;width:36px;height:36px;padding:0;border:3px solid var(--surface);border-radius:50%;background:var(--card);color:var(--text);box-shadow:0 1px 6px #0003; }
.picture-edit-toggle .icon { width:18px;height:18px; }
.picture-edit-toggle:hover { background:var(--selection); }
.picture-actions { position:absolute;z-index:10;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:245px;padding:5px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow); }
.picture-actions button { display:flex;align-items:center;gap:9px;width:100%;min-height:41px;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--text);text-align:left;font-size:12px; }
.picture-actions button:hover { background:var(--card); }
.picture-actions .icon { width:18px;height:18px;flex:none; }
.picture-actions .danger { color:var(--danger); }

/* Keep the identity, title and description visually connected. */
.heading-identity { gap:12px; }
.heading-title-line { gap:7px; }
.heading-title-line h1 { line-height:1.2; }
#editLocation { width:28px;height:28px;min-height:0;padding:4px; }
#editLocation .icon { width:19px;height:19px; }
.heading-avatar .project-dot { width:52px;height:52px; }
.location-description { margin-top:3px;line-height:1.45; }
.project-heading { min-height:0;margin-bottom:10px; }
#upload .icon { width:22px;height:22px;stroke-width:2;flex:none; }
@media (max-width:650px) {
 .heading-avatar .project-dot { width:44px;height:44px; }
 .sidebar-account .account-copy { display:grid; }
 .picture-actions { width:225px; }
}

/* Pointer clicks stay quiet; keyboard traversal retains a visible focus cue. */
html[data-input-mode=pointer] :focus-visible { outline:none!important; }
html[data-input-mode=pointer] .searchbox:has(input:focus-visible) { outline:none; }
html[data-input-mode=pointer] .auth-card .auth-field input:focus { box-shadow:none; }

/* Personal explorer preferences; section cards keep their own navigation layout. */
:root { --grid-min:158px;--preview-height:116px; }
:root[data-thumbnails=small] { --grid-min:132px;--preview-height:88px; }
:root[data-thumbnails=large] { --grid-min:218px;--preview-height:164px; }
.items:not(.list):not(.root-sections) { grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--grid-min)),1fr)); }
.items:not(.list):not(.root-sections) .entry { --thumb-height:var(--preview-height); }
.preferences-form { display:grid;gap:4px; }
.dialog-body .preference-row { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:6px 0;color:var(--text); }
.dialog-body .preference-row select { width:min(62%,230px);margin:0;flex:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center; }
@media (max-width:480px) {
 .dialog-body .preference-row { display:grid;gap:5px;padding:3px 0; }
 .dialog-body .preference-row select { width:100%; }
}
@media (pointer:fine) {
 :root[data-density=compact] .items { padding:12px;gap:8px; }
 :root[data-density=compact] .items.list { padding:0;gap:0; }
 :root[data-density=compact] .items.list .entry { min-height:42px; }
 :root[data-density=compact] .section-card .entry-card { min-height:56px;padding:8px 10px; }
 :root[data-density=compact] .nav-button { height:36px; }
 :root[data-density=compact] .sidebar-child { min-height:30px;padding-top:5px;padding-bottom:5px; }
 :root[data-density=compact] .entry-meta { padding-top:6px;padding-bottom:6px; }
 :root[data-density=compact] .entry { --meta-top:6px; }
}
@media (max-width:650px) {
 :root { --grid-min:128px;--preview-height:106px; }
 :root[data-thumbnails=small] { --grid-min:104px;--preview-height:78px; }
 :root[data-thumbnails=large] { --grid-min:210px;--preview-height:150px; }
}
:root[data-motion=reduced] *, :root[data-motion=reduced] *::before, :root[data-motion=reduced] *::after {
 scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;
}

/* Larger, consistent arrow artwork, including every application select. */
:root { --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23bdc1c6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7'/%3E%3C/svg%3E"); }
:root[data-theme=light] { --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235f6368' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7'/%3E%3C/svg%3E"); }
select,.dialog-body select,.dialog-body .preference-row select,.viewer .viewer-controls select,.member-row select {
 background-image:var(--select-arrow);background-size:20px 20px;background-repeat:no-repeat;background-position:right 10px center;padding-right:36px!important;
}
.icon.arrow-icon,#upload .icon { width:22px;height:22px;stroke-width:1.9; }
.navigation-toggle .icon { width:18px;height:18px;stroke-width:2; }
.sidebar-location .icon-button .icon { width:20px;height:20px;stroke-width:1.9; }
.order-direction .icon,.viewer-top .arrow-icon { width:22px;height:22px;stroke-width:1.9; }
.breadcrumbs { display:flex;align-items:center;gap:3px; }
.breadcrumb-separator { display:inline-flex;align-items:center;color:var(--muted);flex:none; }
.breadcrumb-separator .arrow-icon { width:18px;height:18px; }

/* Detail metadata must wrap inside the panel, even for unbroken file names. */
.detail-panel.is-open,.viewer-info { overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; }
.detail-body { min-width:0;width:100%;max-width:100%; }
.detail-name { min-width:0;max-width:100%;margin:0 0 6px;font-size:16px;line-height:1.45;font-weight:650;overflow-wrap:anywhere;white-space:normal; }
.detail-kind { margin:0 0 8px;font-size:12px;line-height:1.5; }
.detail-fields { display:grid;gap:0;margin:0;min-width:0;text-align:left; }
.detail-fields>div { min-width:0;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); }
.detail-fields>div:last-child { border-bottom:0; }
.detail-fields dt { margin:0 0 5px;color:var(--muted);font-size:11px;font-weight:600;line-height:1.4; }
.detail-fields dd { min-width:0;max-width:100%;margin:0;color:var(--text);font-size:13px;line-height:1.55;overflow-wrap:anywhere;white-space:normal;text-align:left; }
.detail-head { position:sticky;top:0;z-index:2;background:var(--surface); }
.viewer-info .detail-head { background:#1b1c1f; }
.viewer-info .detail-fields dd { color:#e8eaed; }
@media (min-width:1320px) { .detail-panel.is-open { flex-basis:340px;width:340px; } }

.detail-image { min-width:0;margin:0 0 18px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card); }
.detail-image-stage { position:relative;width:100%;height:210px;overflow:hidden;touch-action:none;cursor:grab;background-color:var(--checker-b);background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0; }
.detail-image-stage:active { cursor:grabbing; }
.detail-image-content { position:absolute;left:50%;top:50%;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;pointer-events:none; }
.detail-image-content.pixel { image-rendering:pixelated; }
.detail-image-status { position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;color:var(--muted);font-size:12px;background:var(--card); }
.detail-image-controls { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;padding:6px;border-top:1px solid var(--border); }
.detail-image-controls .icon-button { width:32px;height:34px;flex:none;border-radius:8px; }
.detail-image-controls .icon { width:21px;height:21px; }
.detail-image-scale { min-width:46px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums; }
.detail-actual-size { font-size:12px;font-weight:600; }
@media (pointer:coarse) {
 .detail-image-controls .icon-button { width:42px;height:44px; }
}
@media (max-width:820px) {
 .detail-image-stage { height:240px; }
 .detail-body { padding-bottom:32px; }
}
/* The full viewer keeps its dark controls in either application theme. */
.viewer { --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23bdc1c6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7'/%3E%3C/svg%3E"); }
#canvasBg { min-width:150px;max-width:180px; }
#speed { min-width:88px; }

/* Local item actions, anchored to the pointer or the overflow button. */
.node-context-menu { position:fixed;z-index:55;width:min(248px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;overflow-x:hidden;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 10px 36px #0006; }
.context-menu-item { display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:8px 10px;border:0;border-radius:7px;text-align:left;background:transparent;color:var(--text);font-size:13px;line-height:1.35; }
.context-menu-item .icon { width:19px;height:19px;flex:none; }
.context-menu-item span { min-width:0;overflow-wrap:anywhere; }
.context-menu-item:hover,html[data-input-mode=keyboard] .context-menu-item:focus { background:var(--selection); }
.context-menu-item.danger { color:var(--danger); }
.context-menu-item.danger:hover,html[data-input-mode=keyboard] .context-menu-item.danger:focus { background:var(--danger-bg); }
.context-menu-separator { height:1px;background:var(--border);margin:5px 4px; }
@media (pointer:coarse) { .context-menu-item { min-height:44px; } }
@media (max-width:650px) {
 .project-heading>.heading-identity { flex:1 0 100%; }
 .heading-actions { flex-wrap:wrap;max-width:100%; }
}

/* Optical balance: close marks use the same SVG system as other controls. */
.icon-button .close-icon { width:22px;height:22px;stroke-width:2; }
#dialogClose,.detail-head>[data-close-details] { width:36px;height:36px;flex:none; }
.project-menu-button .icon { width:20px;height:20px; }

/* Project identity belongs in the header; the pencil is the customization entry. */
.dialog-project .dialog-head { position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;justify-items:center;gap:12px;padding:26px 48px 22px; }
.dialog-project #dialogIdentity { grid-row:1; }
.dialog-project #dialogTitle { grid-row:2;max-width:100%;text-align:center;font-size:21px;line-height:1.3;overflow-wrap:anywhere; }
.dialog-project #dialogClose { position:absolute;top:12px;right:12px; }
.hub-project-picture { position:relative;width:88px;height:88px; }
.hub-project-picture .project-dot { width:88px;height:88px;font-size:34px;border-radius:50%; }
.hub-customize { position:absolute;right:-4px;bottom:-2px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:3px solid var(--surface);border-radius:50%;background:var(--card);color:var(--text); }
.hub-customize:hover { background:var(--selection); }
.hub-customize .icon { width:17px;height:17px; }
@media (max-width:480px) {
 .dialog-project .dialog-head { gap:10px;padding:20px 44px 18px; }
 .hub-project-picture,.hub-project-picture .project-dot { width:76px;height:76px; }
 .hub-project-picture .project-dot { font-size:30px; }
 .dialog-project #dialogTitle { font-size:19px; }
}

/* Media previews share controls and clean up when leaving their surface. */
.media-preview,.document-preview,.text-preview { min-width:0;width:100%;margin:0 0 16px; }
.media-preview audio,.media-preview video { display:block;width:100%;max-width:100%;border-radius:10px; }
.media-preview video { max-height:340px;object-fit:contain;background:#101114; }
.media-preview small,.document-preview small,.text-preview small,.preview-status { display:block;margin:7px 0;color:var(--muted);font-size:12px; }
.document-preview img { display:block;width:100%;height:auto;object-fit:contain; }
.text-preview pre { margin:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:13px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:460px;overflow:auto;tab-size:4; }
.viewer-media-host { overflow:auto;align-self:stretch;align-content:center; }
.viewer-media-host .media-preview { max-width:960px; }
.viewer-media-host .document-preview { max-width:760px; }
.viewer-media-host .text-preview { align-self:stretch; }
.viewer-media-host .text-preview pre { max-height:calc(100dvh - 180px);background:#191a1d;color:#e8eaed; }
.quick-audio { height:var(--thumb-height); }
.items.list .quick-audio { grid-column:1/-1;grid-row:2;height:130px;padding:6px 10px; }
.wave-player { width:100%;min-width:0;border-radius:12px;overflow:hidden;background:transparent;color:var(--text); }
.wave-seek { position:relative;height:180px;padding:10px 8px;touch-action:pan-y;cursor:crosshair;user-select:none; }
.wave-seek svg { display:block;width:100%;height:100%;overflow:hidden; }
.wave-base,.wave-played { fill:none;stroke:color-mix(in srgb,var(--text) 50%,var(--accent));stroke-width:2.5;stroke-linecap:round; }
.wave-played { stroke:var(--accent); }
.wave-cursor { stroke:#ffb86b;stroke-width:3;vector-effect:non-scaling-stroke; }
:root[data-theme="light"] .wave-cursor { stroke:#a84800; }
.viewer .wave-cursor { stroke:#ffb86b; }
.wave-loading { position:absolute;bottom:6px;left:8px;font-size:10px;color:var(--muted); }
.wave-controls { display:flex;align-items:center;gap:3px;padding:4px 8px;background:transparent;user-select:none; }
.wave-controls .icon-button { width:32px;height:30px;color:inherit;flex:none; }
.wave-controls .icon { width:19px;height:19px; }
.wave-time { flex:1;min-width:0;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums; }
.wave-volume { width:64px;min-width:0;height:24px;margin:0;accent-color:var(--accent);cursor:pointer; }
.wave-thumbnail { display:block;position:relative;width:100%;padding:8px 8px 20px;border:0;border-radius:0;background:transparent;color:var(--text);cursor:pointer; }
.wave-thumbnail svg { display:block;width:100%;height:100%; }
.wave-thumbnail-duration { position:absolute;bottom:4px;right:8px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums; }
.viewer .wave-player { --text:#e8eaed;--accent:#a8c7fa;--muted:#bdc1c6; }
.detail-body>.wave-player { margin-bottom:16px; }
.viewer-media-host>.wave-player { width:100%;max-width:960px; }
.viewer-media-host>.wave-player .wave-seek { height:min(40dvh,280px); }
.marquee-active,.marquee-active * { user-select:none!important;-webkit-user-select:none!important; }
.touch-select { display:none;position:absolute;top:6px;left:6px;border:1px solid var(--border);background:var(--surface); }
.touch-select .icon { width:18px;height:18px;opacity:0; }
.entry.selected .touch-select .icon { opacity:1; }
.entry.selected .touch-select { background:var(--selection);border-color:var(--accent); }
@media (max-width:820px) {
 .items:not(.list) { justify-content:start;justify-items:stretch;align-content:start; }
 .items.root-sections:not(.list) { grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));justify-content:start; }
 .entry-card { touch-action:manipulation; }
 .touch-select { display:grid;width:36px;height:36px; }
 .items.root-sections .section-card { flex-direction:row;align-items:center;min-height:76px; }
 .items.root-sections .section-card .entry-card { min-height:74px;gap:8px;padding:10px 6px; }
 .items.root-sections .section-card .section-compact-icon { width:30px;height:30px; }
 .items.root-sections .section-card .touch-select { position:static;order:-1;flex:none;margin-left:6px;border-radius:8px; }
 .items.root-sections .section-card .entry-footer { padding:0; }
 .items.list .touch-select { position:static;grid-column:1;grid-row:1;justify-self:start;z-index:1; }
 .items.list .entry-card { padding-left:40px; }
 .project-heading,.heading-identity,.heading-title-line { justify-content:flex-start;text-align:left; }
 .heading-actions { justify-content:flex-start;margin-left:0; }
 .toolbar { flex-wrap:wrap;justify-content:flex-start; }
 .toolbar-right { margin-left:auto;max-width:100%; }
 .selection-toolbar { max-width:100%;flex-wrap:wrap; }
 .viewer-media-host { width:calc(100% - 20px);max-height:calc(100% - 20px); }
 .media-preview video { max-height:60dvh; }
 .audio-entry .touch-select { top:calc(var(--thumb-height) + 8px);left:8px; }
 .audio-entry .entry-meta { padding-left:48px; }
 .items.list .audio-entry .touch-select { position:static; }
 .items.list .audio-entry .entry-meta { padding-left:7px; }
}

/* Scoped membership editor: wrap paths and keep permissions usable on phones. */
.scope-locations { display:grid;gap:2px;margin:16px 0;padding:2px; }
.dialog-body .scope-location { margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,1fr);align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border); }
.scope-location span { overflow-wrap:anywhere; }
.scope-location select { min-width:0;width:100%; }
@media (max-width:560px) { .dialog-body .scope-location { grid-template-columns:1fr;gap:6px; } }

dialog.dialog-scope { overflow:hidden; }
.dialog-scope #dialogForm { display:flex;flex-direction:column;max-height:min(86dvh,720px); }
.dialog-scope .dialog-body { min-height:0;max-height:none;overflow:auto;flex:1; }
.dialog-scope .dialog-head,.dialog-scope .dialog-actions { flex-shrink:0; }

.member-fields { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
@media (max-width:560px) { .member-fields { grid-template-columns:1fr;gap:0; } }