/* Shared foundation: quiet surfaces, clear type, and one restrained accent. */
:root {
    color-scheme: dark;
    --page: #0d141d;
    --sidebar: #101923;
    --panel: #16212d;
    --panel-raised: #1d2a38;
    --line: #334352;
    --control-line: #637687;
    --text: #edf2f5;
    --muted: #afbdc9;
    --accent: #91c9bc;
    --accent-strong: #b5e3d7;
    --blue: #b5cbdf;
    --danger: #f0b5b5;
    --radius: 6px;
    --space-section: clamp(1.5rem, 3vw, 2.75rem);
    font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--text); }
::selection { background: var(--accent); color: var(--page); }
[hidden] { display: none !important; }
:where(h1, h2, h3, p) { margin: 0 0 1rem; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 5vw, 4.75rem); font-weight: 400; letter-spacing: -.055em; margin-bottom: 0; }
h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 450; letter-spacing: -.025em; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
small { font-size: .8rem; line-height: 1.6; }
a { color: var(--accent-strong); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, video, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 4px;
}
:where(button, a, input, select, textarea) { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--text);
    background: var(--page);
    border: 1px solid var(--control-line);
    border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
label, legend { color: var(--muted); font-size: .875rem; }
fieldset { min-inline-size: 0; margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
legend { padding: 0 .5rem; color: var(--text); }
pre, output { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
img, video { max-width: 100%; }
:where(main, section, article, form, fieldset, .profile-copy) { min-width: 0; }
:where(p, li, label, h1, h2, h3, strong) { overflow-wrap: anywhere; }
.eyebrow { margin-bottom: .85rem; color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .16em; line-height: 1.5; }
.muted { color: var(--muted); margin-bottom: 0; max-width: 68ch; }

/* Persistent navigation and account area. */
.app-shell { min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; background: var(--sidebar); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .85rem; color: var(--text); font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; font-size: 1.25rem; font-weight: 400; }
.sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.nav-link { display: flex; align-items: center; gap: .8rem; min-height: 44px; padding: .7rem .75rem; color: var(--muted); border-left: 2px solid transparent; text-decoration: none; border-radius: 0 3px 3px 0; font-size: .9rem; }
.nav-index { font-size: .65rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-link:hover { background: var(--panel); color: var(--text); }
.nav-link.active { color: var(--text); background: var(--panel-raised); border-left-color: var(--accent); }
.nav-link-secondary { font-size: .8rem; }
.sidebar-footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.avatar, .profile-button { display: grid; place-items: center; flex: 0 0 auto; color: var(--accent-strong); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 50%; font-size: .8rem; font-weight: 600; }
.avatar { width: 2.25rem; height: 2.25rem; }
.profile-button { width: 46px; height: 46px; }
.profile-copy { display: grid; gap: .15rem; font-size: .85rem; }
.profile-copy small { color: var(--muted); }

/* Overview: a clear reading order and generous space around the live summary. */
.main-content { width: min(1440px, 100%); margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: var(--space-section); margin-bottom: var(--space-section); border-bottom: 1px solid var(--line); }
.topbar .eyebrow { margin-bottom: .65rem; }
.welcome-card { display: grid; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.welcome-copy { align-self: center; padding: .5rem 0; }
.welcome-card h2 { max-width: 16ch; font-size: clamp(2rem, 3.5vw, 3.1rem); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; margin-bottom: 1.25rem; }
.welcome-card .muted { max-width: 37ch; }
.storage-card { padding: 1.5rem; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); }
.storage-label { display: block; color: var(--muted); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 1rem; }
.storage-card strong { display: block; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 1.25rem; line-height: 1.45; }
.storage-card strong span { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.storage-card small { display: block; color: var(--muted); overflow-wrap: anywhere; margin-top: .25rem; }
#storage-caption { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.progress-track { height: 4px; margin-bottom: 1rem; overflow: hidden; background: var(--line); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--accent); }
.quick-grid { display: grid; gap: 1px; margin: 1.25rem 0 0; border: 1px solid var(--line); background: var(--line); border-radius: var(--radius); overflow: hidden; }
.quick-card { min-width: 0; padding: 1.5rem; background: var(--sidebar); }
.quick-card h3 { margin-bottom: .65rem; }
.quick-card p { margin-bottom: 0; color: var(--muted); font-size: .85rem; max-width: 34ch; }
.card-icon { display: block; margin-bottom: 1.4rem; color: var(--accent); font-size: .7rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }

/* One control language for the existing dashboard, forms and owner tools. */
.button, button:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: .65rem 1.1rem; border: 1px solid var(--control-line); border-radius: var(--radius); color: var(--text); background: var(--panel-raised); font-size: .85rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; white-space: normal; }
.button:hover:not(:disabled), button:not([class]):hover:not(:disabled) { background: #2b3c4c; border-color: var(--muted); }
.button-primary { color: #10241f; background: var(--accent); border-color: var(--accent); }
.button-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); color: #10241f; }
.button-danger { color: var(--danger); background: #34272d; border-color: #9d6a74; }
.button-danger:hover:not(:disabled) { color: #ffe1e1; background: #493039; border-color: var(--danger); }
.folder-link { min-height: 44px; padding: .5rem 0; color: var(--accent-strong); background: none; border: 0; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: .22em; overflow-wrap: anywhere; }
.invitation-form { display: grid; gap: .65rem; width: 100%; max-width: 34rem; }
.invitation-form .button { justify-self: start; margin-top: .3rem; }
.invitation-form label:not(:first-child) { margin-top: .5rem; }
.upload-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.section-heading h2 { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: .5rem; }
.system-card, .upload-transfer { display: grid; justify-items: start; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem); margin-top: 1.75rem; margin-bottom: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.system-card > *, .upload-transfer > * { max-width: 100%; min-width: 0; }
.system-card > :is(div, form, ul, fieldset), .upload-transfer > :is(ul, fieldset) { width: 100%; }
.system-card p, .upload-transfer p { margin-bottom: 0; }
.system-card h2, .upload-transfer h2 { margin-bottom: .25rem; }
.system-card h3 { margin: 1rem 0 0; }
.connection-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
[role="status"] { color: var(--muted); font-size: .85rem; }
.main-content > [role="status"]:empty { margin: 0; }
.main-content > .muted { font-size: .85rem; }
.upload-transfer progress { display: block; width: 100%; height: .6rem; margin-top: .5rem; accent-color: var(--accent); }
#invitation-token { display: block; padding: 1rem; margin-top: 1rem; color: var(--accent-strong); background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); }
#folder-breadcrumb, #owner-files-path { margin: 1rem 0; color: var(--accent-strong); font-size: .85rem; }
:where(#folder-list, #file-list, #trash-list, #search-results, #zip-jobs, #audit-events, #owner-files-list, #owner-files-folders) { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; width: 100%; }
:where(#folder-list, #file-list, #trash-list, #search-results, #zip-jobs, #audit-events, #owner-files-list, #owner-files-folders) > li { min-width: 0; padding: 1.1rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
#folder-list > li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
#folder-list .folder-link { flex: 1 1 13rem; }
:where(#file-list, #trash-list, #owner-files-list) .button { margin: .35rem .35rem .35rem 0; }
.folder-browser li .button-primary { color: var(--text); background: var(--panel-raised); border-color: var(--control-line); }
.file-preview-image, .file-preview-video { display: block; width: min(100%, 640px); max-height: 480px; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); object-fit: contain; background: var(--page); }

/* Media geometry and lazy-loading behavior stay unchanged. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; width: 100%; }
.gallery-item { min-width: 0; padding: .75rem; background: var(--sidebar); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery-preview { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: #080e14; }
video.gallery-preview { object-fit: contain; }
.gallery-filename { margin: 1rem 0 .25rem; font-size: .9rem; overflow-wrap: anywhere; }
.gallery-item small { color: var(--muted); }
.gallery-item .button { margin-top: .75rem; }
.status-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; color: var(--muted); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 3px; font-size: .8rem; }
.status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: #d5be83; }
.status-pill.is-up { color: var(--accent-strong); background: #1b332f; border-color: #43685d; }
.status-pill.is-up .status-dot { background: var(--accent); }
.status-pill.is-down { color: #ffd1d1; background: #3d252b; border-color: #9d6a74; }
.status-pill.is-down .status-dot { background: #ffabab; }
.page-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; letter-spacing: .03em; }

@media (min-width: 760px) {
    .app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; gap: 3rem; padding: 2rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 0; }
    .sidebar nav { display: flex; flex-direction: column; gap: .35rem; }
    .nav-link-secondary:first-of-type, .sidebar nav .nav-link:nth-last-child(2) { margin-top: 2rem; }
    .main-content { padding: 2.75rem clamp(1.5rem, 4vw, 4rem) 3rem; }
    .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-card { padding: 1.5rem 1.25rem; }
}
@media (min-width: 1100px) {
    .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
    .welcome-card { grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr); align-items: stretch; gap: 2.5rem; }
    .sidebar { padding: 2.5rem 1.5rem; }
}
@media (max-width: 759px) {
    .sidebar { gap: 1rem; padding: 1.25rem; }
    .sidebar-footer { padding-top: .85rem; }
    .nav-link { padding: .65rem .5rem; }
    .nav-index { display: none; }
    .topbar { align-items: flex-start; }
    .welcome-card { padding: 1.25rem; }
    .storage-card { padding: 1.25rem; }
    .quick-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .75rem; padding: 1.25rem; }
    .card-icon { grid-row: span 2; margin: .1rem 0 0; }
    .quick-card h3 { margin-bottom: .4rem; }
    .quick-card p { grid-column: 2; }
    .section-heading { margin-top: 2rem; gap: 1rem; }
    .upload-actions { width: 100%; }
    .upload-actions .button { flex: 1 1 9rem; }
    .connection-card { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared limestone palette for the dashboard and authentication shell. */
.dashboard {
    color-scheme: light;
    --page: #e8e4dc;
    --panel: #f8f6f1;
    --panel-raised: #ded8ce;
    --sidebar: #eeebe4;
    --text: #252420;
    --muted: #5e5950;
    --line: #c8c1b5;
    --control-line: #82796c;
    --accent: #97401f;
    --accent-strong: #803519;
    --danger: #962d2d;
    --radius: 2px;
}
.dashboard .sidebar, .dashboard .storage-card {
    color-scheme: dark;
    --page: #252420;
    --panel: #302f2a;
    --panel-raised: #3b3933;
    --text: #faf7ef;
    --muted: #d0c9bc;
    --line: #5e594e;
    --accent: #e6a174;
    --accent-strong: #f2b58b;
    color: var(--text);
    background: #252420;
}
.dashboard .sidebar { border-color: #252420; }
.dashboard .welcome-card { background: transparent; border: 0; padding: 0; gap: 3rem; }
.dashboard .welcome-copy h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; font-size: clamp(2.7rem, 4.6vw, 4.6rem); }
.dashboard .quick-card { background: var(--panel); }
.dashboard .quick-card h3 a { color: var(--text); }
.dashboard .button:hover:not(:disabled), .dashboard button:not([class]):hover:not(:disabled) { background: #d4ccbf; color: #252420; }
.dashboard .button-primary { color: #fffaf3; }
.dashboard .button-primary:hover:not(:disabled) { color: #fffaf3; background: #803519; }
.dashboard .button-danger { background: #f5e9e3; border-color: #a26355; }
.dashboard .button-danger:hover:not(:disabled) { color: #722323; background: #edcdc4; }
.dashboard .gallery-item { background: #eeebe4; }
.dashboard .gallery-preview { background: #252420; }
.dashboard .status-pill.is-up { color: #38352e; background: #e4ded2; border-color: #82796c; }
.dashboard .status-pill.is-up .status-dot { background: #97401f; }
.dashboard-page > :first-child { margin-top: 0; }
.dashboard-page > [role="status"]:empty { margin: 0; }
.dashboard-page > .muted { font-size: .85rem; }
.dashboard #page-title { outline-offset: 8px; }
@media (max-width: 759px) {
    .dashboard .sidebar { position: sticky; top: 0; z-index: 10; padding: .75rem 1rem; gap: .5rem; max-height: 50vh; overflow-y: auto; }
    .dashboard .sidebar .brand-mark, .dashboard .sidebar-footer { display: none; }
    .dashboard .sidebar .brand { font-size: .85rem; }
    .dashboard .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard .nav-link { min-height: 40px; padding: .45rem .5rem; }
    .dashboard .main-content { padding-top: 1.5rem; }
    .dashboard .welcome-card { gap: 1.5rem; }
}

/* Authentication keeps ordinary full-page form submission and navigation. */
.auth-card { width: 100%; max-width: 46rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--panel); border: 1px solid var(--line); }
.auth-card > :last-child { margin-bottom: 0; }
.auth-card form, .auth-card section { margin-bottom: 1.75rem; }
.auth-card #status { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.auth-card pre { padding: 1rem; background: var(--page); border: 1px solid var(--line); font-size: 1rem; }
.auth-card #authenticator-qr { display: block; background: white; }
.auth-card #recovery-option label { display: flex; align-items: center; gap: .65rem; }
.auth-page .sidebar nav .nav-link:nth-last-child(2) { margin-top: 2rem; }
@media (max-width: 759px) {
    .auth-page .sidebar nav .nav-link:nth-last-child(2) { margin-top: 0; }
    .auth-page h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
}