:root {
    --bg: #f5f6f8;
    --panel: #ffffff;
    --text: #1d2330;
    --muted: #6b7280;
    --line: #e2e5ea;
    --accent: #2f6feb;
    --danger: #c0392b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181f;
        --panel: #1c222b;
        --text: #e6e9ef;
        --muted: #93a0b4;
        --line: #2b333f;
        --accent: #6b9cff;
        --danger: #ff7b6b;
    }
}

* { box-sizing: border-box; }

/* display rules below would otherwise override the hidden attribute */
[hidden] { display: none !important; }

/* Browsers give forms default margins, which knocks buttons off the flex
   baseline in the top bar and toolbar. */
form { margin: 0; }

body {
    margin: 0;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

body.centered {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

a { color: var(--accent); }

.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Header contents stay inside the same column as the page content. */
.topbar-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.brand { white-space: nowrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.inline { display: inline; }
.crumbs { display: flex; gap: .35rem; flex-wrap: wrap; font-size: .95rem; }
.crumbs a { text-decoration: none; }
.sep { color: var(--muted); }

/* Content is centred in a readable column; the header keeps full-bleed
   background with the same inner width so both line up. */
main { padding: 1.25rem; max-width: 80rem; margin: 0 auto; width: 100%; }

.toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

button, .button, .dropzone, summary.button {
    font: inherit;
    line-height: 1.4;
    padding: .45rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
    min-height: 2.1rem;
}

button:hover, .button:hover, .dropzone:hover { border-color: var(--accent); }
button.ghost { background: transparent; }
button.danger { color: var(--danger); }
.dropzone.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

/* The file input is hidden; the label is the button. */
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone { position: relative; }

.listing { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; }
.listing th, .listing td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.listing th { font-weight: 600; font-size: .85rem; color: var(--muted); }
.listing tr:last-child td { border-bottom: 0; }
.listing td:first-child { word-break: break-all; }
.listing .actions { text-align: right; white-space: nowrap; }
.listing .actions button { padding: .2rem .5rem; font-size: .85rem; }
.listing.compact td, .listing.compact th { padding: .35rem .5rem; }

.card {
    background: var(--panel);
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    width: min(360px, 92vw);
}

.card h1 { font-size: 1.25rem; margin: 0 0 1rem; }

label:not(.dropzone) { display: block; margin-bottom: .75rem; font-size: .9rem; color: var(--muted); }
label:not(.dropzone) input { display: block; width: 100%; margin-top: .25rem; padding: .45rem .6rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
label:not(.dropzone) input[type=checkbox] { display: inline-block; width: auto; }

/* Full-width accent submit, scoped to the sign-in/setup cards only. */
.card form button[type=submit], .card button { width: 100%; margin-top: .5rem; background: var(--accent); color: #fff; border-color: var(--accent); }

.error { color: var(--danger); font-size: .9rem; }
.ok { color: #1a7f37; font-size: .9rem; }

.transfers { margin-top: 1rem; display: grid; gap: .4rem; }
.transfer { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .75rem; font-size: .9rem; }
.transfer progress { width: 100%; height: .5rem; margin-top: .3rem; }

dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); padding: 1.25rem; width: min(460px, 94vw); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
dialog h2 { margin-top: 0; font-size: 1.1rem; }
dialog menu { display: flex; gap: .5rem; justify-content: flex-end; padding: 0; margin: 1rem 0 0; }
dialog menu button { width: auto; }
/* Explicit, so styling never depends on child order. */
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:hover { filter: brightness(1.08); }
dialog code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }
dialog output { display: block; margin-top: .75rem; word-break: break-all; }

/* bulk selection, search and index controls */
.listing th.check, .listing td.check { width: 2.2rem; text-align: center; }
.listing td.check input, .bulkbar input[type=checkbox] { width: auto; margin: 0; }

.bulkbar { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .75rem; }
.bulkbar label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }

.toolbar > *, .topbar > * { flex: 0 0 auto; }
/* The spacer must still grow, or nothing gets pushed to the right edge. */
.toolbar > .spacer, .topbar > .spacer { flex: 1 1 auto; }
.search { display: inline-flex; gap: .35rem; align-items: center; }
.search input { width: 14rem; padding: .45rem .6rem; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }

/* share list: keep the path on one line, let the URL wrap instead */
#dlg-shares { width: min(640px, 94vw); }
#dlg-shares td:first-child { white-space: nowrap; }
#dlg-shares td a { word-break: break-all; }

/* "shared" marker in listings */
.badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    vertical-align: middle;
    /* Clickable: keep it out of the button sizing rules. */
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
}

button.badge {
    min-height: 0;
    padding: .05rem .45rem;
}

button.badge:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent);
}
#dlg-share { width: min(620px, 94vw); }
#dlg-share h3 { font-size: .9rem; margin: 1.1rem 0 .5rem; color: var(--muted); }
#dlg-share h3:first-of-type { margin-top: 0; }

/* Status line sits under the toolbar, not inside the centred button row. */
.status-line { margin: -.4rem 0 1rem; font-size: .9rem; text-align: center; min-height: 1.2em; }

/* share links: one row per link, copy + delete actions right-aligned */
.share-list { list-style: none; margin: 0 0 .25rem; padding: 0; display: grid; gap: .5rem; }
.share-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; }
.share-row { display: flex; align-items: center; gap: .5rem; }
.share-url {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}
.share-details { margin-top: .25rem; font-size: .78rem; }
button.small { padding: .2rem .5rem; font-size: .8rem; min-height: 0; }
.small { font-size: .8rem; }
#share-result { font-size: .85rem; word-break: break-all; }