/* ============================================================
   Biim — design system
   Principles (DESIGN-apple.md): flat surfaces, tight display
   typography, frosted chrome, no shadows on chrome.
   Light + dark via Bootstrap's data-bs-theme.

   Colour rule: exactly ONE canvas per mode. Light mode is
   bg-light (#f8f9fa) everywhere; dark mode is bg-dark
   (#212529) everywhere. Surfaces never introduce a second
   background tone — they are the same colour, outlined with
   a hairline so their shape still reads.

   Buttons carry no blue at all: in light mode they are filled
   with the ink colour; in dark mode they are transparent with
   a light border and light text (hover = inverted).
   ============================================================ */

:root {
    color-scheme: light; /* keep native widgets (datalist popup etc.) light by default */
    /* Type */
    --biim-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --biim-tracking-display: -.022em;
    --biim-tracking-body: -.011em;

    /* Radius grammar */
    --biim-radius-sm: .5rem;
    --biim-radius-md: .75rem;
    --biim-radius-lg: 1rem;
    --biim-radius-pill: 999px;

    /* Motion */
    --biim-ease: cubic-bezier(.25, .1, .25, 1);

    /* Light palette — one canvas: bg-light */
    --biim-canvas: #f8f9fa;          /* page + surfaces: identical      */
    --biim-ink: #212529;             /* primary text / button fill      */
    --biim-ink-muted: #495057;       /* secondary text                  */
    --biim-hairline: rgba(33, 37, 41, .16);
    --biim-danger: #c92a2a;
    --biim-success: #2b8a3e;
    --biim-warning: #b06a00;
}

html[data-bs-theme="dark"] {
    /* Dark palette — one canvas: bg-dark */
    color-scheme: dark; /* native widgets (datalist popup, inputs, scrollbars) go dark */
    --biim-canvas: #212529;          /* page + surfaces: identical      */
    --biim-ink: #f8f9fa;             /* primary text                    */
    --biim-ink-muted: #ced4da;       /* secondary text                  */
    --biim-hairline: rgba(248, 249, 250, .22);
    --biim-danger: #ff6b6b;
    --biim-success: #69db7c;
    --biim-warning: #ffa94d;
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

/* The page class uses .bg-body in markup; point Bootstrap's token at the
   biim canvas so the whole shell renders bg-light (#f8f9fa) / bg-dark. */
:root { --bs-body-bg: var(--biim-canvas); --bs-body-bg-rgb: 248, 249, 250; }
html[data-bs-theme="dark"] { --bs-body-bg: var(--biim-canvas); --bs-body-bg-rgb: 33, 37, 41; }

body {
    font-family: var(--biim-font);
    font-size: 1rem;
    letter-spacing: var(--biim-tracking-body);
    background-color: var(--biim-canvas);
    color: var(--biim-ink);
    margin: 0;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-4, .display-5, .display-6 {
    letter-spacing: var(--biim-tracking-display);
    font-weight: 600;
}
h1, .display-4 { font-weight: 700; }

.text-muted { color: var(--biim-ink-muted) !important; }
.text-body-secondary { color: var(--biim-ink-muted) !important; }
.lead { color: var(--biim-ink-muted); }

a { color: var(--biim-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--biim-ink); text-decoration: underline; }

hr { border-color: var(--biim-hairline); opacity: 1; }

::selection { background: color-mix(in srgb, var(--biim-ink) 18%, transparent); }

/* Focus ring — ink, consistent with the button language */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--biim-ink);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ---------- Chrome: navbar & footer ---------- */

.navbar {
    background: color-mix(in srgb, var(--biim-canvas) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--biim-hairline);
}
body.bg-body > nav.navbar { position: sticky; top: 0; z-index: 1020; }

.navbar-brand { letter-spacing: -.04em; color: var(--biim-ink); font-weight: 700; }
.nav-link { color: var(--biim-ink-muted); transition: color .18s var(--biim-ease); border-radius: var(--biim-radius-sm); }
.nav-link:hover { color: var(--biim-ink); }
.navbar-toggler { border-color: var(--biim-hairline); }
.navbar-toggler-icon { filter: none; }

footer.footer {
    background: var(--biim-canvas);
    border-top: 1px solid var(--biim-hairline);
    color: var(--biim-ink-muted);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--biim-radius-sm);
    padding: .5rem 1.05rem;
    font-weight: 500;
    letter-spacing: var(--biim-tracking-body);
    transition: transform .12s var(--biim-ease), background-color .18s var(--biim-ease),
        border-color .18s var(--biim-ease), color .18s var(--biim-ease), opacity .18s var(--biim-ease);
}
.btn:active { transform: scale(.97); }

/*
 * Primary action — no blue anywhere:
 * light mode: filled ink button (dark fill, light label)
 * dark mode : transparent surface, light border + light text,
 *             hover flips to filled ink (the look you liked)
 * Every "primary" class maps here so all pages stay uniform.
 */
.btn-dark,
.btn-primary,
.btn-outline-dark {
    --bs-btn-color: var(--biim-canvas);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--biim-canvas);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--biim-canvas);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--biim-canvas);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

html:not([data-bs-theme="dark"]) .btn-dark,
html:not([data-bs-theme="dark"]) .btn-primary,
html:not([data-bs-theme="dark"]) .btn-outline-dark:not(.storage-option) {
    --bs-btn-bg: var(--biim-ink);
    --bs-btn-border-color: var(--biim-ink);
    --bs-btn-color: #f8f9fa;
    --bs-btn-hover-bg: #343a40;
    --bs-btn-hover-border-color: #343a40;
    --bs-btn-hover-color: #f8f9fa;
    --bs-btn-active-bg: #495057;
    --bs-btn-active-border-color: #495057;
    --bs-btn-active-color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--biim-ink) 55%, transparent);
    --bs-btn-color: var(--biim-ink);
    --bs-btn-hover-bg: var(--biim-ink);
    --bs-btn-hover-border-color: var(--biim-ink);
    --bs-btn-hover-color: var(--biim-canvas);
    --bs-btn-active-bg: color-mix(in srgb, var(--biim-ink) 85%, transparent);
    --bs-btn-active-border-color: var(--biim-ink);
    --bs-btn-active-color: var(--biim-canvas);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--biim-ink) 25%, transparent);
    --bs-btn-disabled-color: color-mix(in srgb, var(--biim-ink) 40%, transparent);
}

/* Secondary/quiet actions follow the same outline grammar in both modes */
.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--biim-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--biim-ink) 32%, transparent);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--biim-ink);
    --bs-btn-hover-border-color: var(--biim-ink);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: var(--biim-ink);
    --bs-btn-active-border-color: var(--biim-ink);
    --bs-btn-disabled-color: color-mix(in srgb, var(--biim-ink) 40%, transparent);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--biim-ink) 15%, transparent);
}

/* Radio pill groups (upload share toggle etc.) keep checked state readable */
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-light {
    --bs-btn-color: var(--biim-canvas);
    --bs-btn-bg: var(--biim-ink);
    --bs-btn-border-color: var(--biim-ink);
}

.btn-link { color: inherit; }

/* Quiet icon buttons used across tables */
.icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; padding: 0;
    border: 0; border-radius: var(--biim-radius-sm);
    background: transparent; color: var(--biim-ink-muted);
    transition: color .15s var(--biim-ease), background-color .15s var(--biim-ease);
}
.icon-action:hover, .icon-action:focus-visible { color: var(--biim-canvas); background: var(--biim-ink); }
.icon-action.danger:hover, .icon-action.danger:focus-visible { color: var(--biim-canvas); background: var(--biim-danger); }

/* Theme toggle: sun/moon in the navbar */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 0; border-radius: var(--biim-radius-sm);
    background: transparent; color: var(--biim-ink-muted);
    transition: color .15s var(--biim-ease), background-color .15s var(--biim-ease);
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--biim-ink); background: color-mix(in srgb, var(--biim-ink) 8%, transparent); }
.theme-toggle .ti-sun { display: none; }
.theme-toggle .ti-moon { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .ti-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .ti-moon { display: none; }

/* ---------- Surfaces ---------- */

.container { max-width: 1080px; padding-inline: clamp(1rem, 3vw, 1.5rem); }

/*
 * Surfaces sit on the single canvas colour but lift off it: white in
 * light mode (canvas stays bg-light), one step lighter in dark mode,
 * shaped by a hairline outline plus a soft shadow.
 */
.surface, .account-surface, .login-card, .password-surface,
.download-surface, .edit-surface, .landing-panel {
    background: #ffffff;
    border: 1px solid var(--biim-hairline);
    border-radius: var(--biim-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .07) !important;
}
html[data-bs-theme="dark"] .surface, html[data-bs-theme="dark"] .account-surface,
html[data-bs-theme="dark"] .login-card, html[data-bs-theme="dark"] .password-surface,
html[data-bs-theme="dark"] .download-surface, html[data-bs-theme="dark"] .edit-surface,
html[data-bs-theme="dark"] .landing-panel {
    background: #2b3035;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3) !important;
}

.border, .border-top, .border-bottom { border-color: var(--biim-hairline) !important; }

/* Upload card sits directly on the canvas colour; inputs stay white. */
.surface-canvas { background: var(--biim-canvas); box-shadow: none !important; }
html[data-bs-theme="dark"] .surface-canvas { background: var(--biim-canvas); }

/* While uploading, the progress panel replaces the form edge-to-edge: no
   border/shadow of its own so it reads as part of the upload card. */
.upload-progress-panel {
    background: transparent;
    border: 0 !important;
    border-radius: var(--biim-radius-md);
    box-shadow: none !important;
}
html[data-bs-theme="dark"] .upload-progress-panel { background: transparent; }
.upload-progress { height: 10px !important; }
.surface-canvas .form-control, .surface-canvas .form-select,
.surface-canvas .dropzone { background: #ffffff; }
html[data-bs-theme="dark"] .surface-canvas .form-control,
html[data-bs-theme="dark"] .surface-canvas .form-select,
html[data-bs-theme="dark"] .surface-canvas .dropzone { background: #2b3035; }

/* Legacy flat-card compat */
.card, .card-body { box-shadow: none !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Hero */
.landing-hero { padding-block: clamp(2.5rem, 8vw, 5.5rem); }
.landing-hero h1 { letter-spacing: -.03em; }

/* Pricing */
.pricing-section { padding: 1.5rem; }

/* Upload progress panel */
html[data-bs-theme="dark"] .upload-progress-panel .text-muted { color: var(--biim-ink-muted) !important; }

/* Forms */
.form-label { font-weight: 500; margin-bottom: .35rem; }
.form-control, .form-select {
    min-height: 42px;
    border-radius: var(--biim-radius-sm);
    border-color: var(--biim-hairline);
    background: #ffffff;
    color: var(--biim-ink);
    transition: border-color .15s var(--biim-ease), box-shadow .15s var(--biim-ease);
}
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background: var(--biim-canvas); }
.form-control::placeholder { color: color-mix(in srgb, var(--biim-ink-muted) 70%, transparent); }
/* Fields the user types in or picks from stay white in light mode. */
html:not([data-bs-theme="dark"]) .input-group-text { background: #ffffff; }
.form-control:focus, .form-select:focus {
    border-color: var(--biim-ink);
    box-shadow: none;
    outline: 2px solid color-mix(in srgb, var(--biim-ink) 35%, transparent);
    outline-offset: 0;
}
.input-group-text { background: var(--biim-canvas); border-color: var(--biim-hairline); color: var(--biim-ink-muted); }
.form-check-input:checked { background-color: var(--biim-ink); border-color: var(--biim-ink); }

.dropzone {
    border: 1.5px dashed color-mix(in srgb, var(--biim-ink) 30%, transparent);
    border-radius: var(--biim-radius-lg);
    padding: 34px 24px;
    text-align: center;
    color: var(--biim-ink-muted);
    cursor: pointer;
    background: #ffffff;
    transition: border-color .18s var(--biim-ease), background-color .18s var(--biim-ease), color .18s var(--biim-ease);
}
html[data-bs-theme="dark"] .dropzone { background: var(--biim-canvas); }
}
.dropzone.hover {
    border-color: var(--biim-ink);
    color: var(--biim-ink);
    background: color-mix(in srgb, var(--biim-ink) 5%, #ffffff);
}
html[data-bs-theme="dark"] .dropzone.hover { background: color-mix(in srgb, var(--biim-ink) 5%, var(--biim-canvas)); }

/* Progress */
.progress { height: 8px; background: color-mix(in srgb, var(--biim-ink) 10%, transparent); border-radius: var(--biim-radius-pill); overflow: hidden; }
.progress-bar { background: var(--biim-ink); transition: width .35s linear; }

/* Alerts */
.alert { border-radius: var(--biim-radius-md); border-width: 1px; border-style: solid; border-color: transparent; }
.alert-danger { background: color-mix(in srgb, var(--biim-danger) 9%, var(--biim-canvas)); border-color: color-mix(in srgb, var(--biim-danger) 35%, transparent); color: var(--biim-danger); }
.alert-success { background: color-mix(in srgb, var(--biim-success) 10%, var(--biim-canvas)); border-color: color-mix(in srgb, var(--biim-success) 35%, transparent); color: var(--biim-success); }
.alert-primary { background: color-mix(in srgb, var(--biim-ink) 7%, var(--biim-canvas)); border-color: color-mix(in srgb, var(--biim-ink) 25%, transparent); color: var(--biim-ink); }

/* Badges */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .65em; border-radius: var(--biim-radius-pill); }
.badge-success-subtle { background: color-mix(in srgb, var(--biim-success) 14%, transparent) !important; color: var(--biim-success) !important; }
.badge-secondary-subtle { background: color-mix(in srgb, var(--biim-ink) 10%, transparent) !important; color: var(--biim-ink-muted) !important; }
.badge-accent-subtle { background: color-mix(in srgb, var(--biim-ink) 13%, transparent) !important; color: var(--biim-ink) !important; }
.badge-warning-subtle { background: color-mix(in srgb, var(--biim-warning) 14%, transparent) !important; color: var(--biim-warning) !important; }
.badge-danger-subtle { background: color-mix(in srgb, var(--biim-danger) 14%, transparent) !important; color: var(--biim-danger) !important; }
/* Any pill without an explicit palette entry stays readable on both canvases. */
.badge { border: 1px solid var(--biim-hairline); color: inherit; }
.badge:not([class*="badge-"]) { color: var(--biim-ink) !important; }

/* Tables — admin included */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--biim-ink);
    --bs-table-border-color: var(--biim-hairline);
    --bs-table-hover-bg: color-mix(in srgb, var(--biim-ink) 5%, transparent);
    --bs-table-striped-bg: color-mix(in srgb, var(--biim-ink) 4%, transparent);
}
.table thead th {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--biim-ink-muted); border-bottom: 1px solid var(--biim-hairline);
}
.table form { margin-bottom: 0; }

/* Tabs / pills */
.nav-pills { gap: .35rem; }
.nav-pills .nav-link { border-radius: var(--biim-radius-sm); color: var(--biim-ink-muted); padding: .38rem .85rem; transition: color .15s var(--biim-ease), background-color .15s var(--biim-ease); }
.nav-pills .nav-link:hover { color: var(--biim-ink); }
.nav-pills .nav-link.active { background: var(--biim-ink); color: var(--biim-canvas); }

/* Dropdowns */
.dropdown-menu {
    background: color-mix(in srgb, var(--biim-canvas) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--biim-hairline);
    border-radius: var(--biim-radius-md);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
}
.dropdown-item { color: var(--biim-ink); border-radius: calc(var(--biim-radius-md) - .25rem); }
.dropdown-item:hover, .dropdown-item:focus { background: color-mix(in srgb, var(--biim-ink) 8%, transparent); color: var(--biim-ink); }
.dropdown-item.active { background: var(--biim-ink); color: var(--biim-canvas); }
.dropdown-divider { border-color: var(--biim-hairline); opacity: 1; }
.dropdown-header { color: var(--biim-ink-muted); }

/* Compact admin table keeps its density but inherits tokens */
.compact-admin-table th, .compact-admin-table td { font-size: .74rem; line-height: 1.2; white-space: nowrap; }
.compact-admin-table small { font-size: .66rem; }

/* My Biims table — compact density with explicit column widths */
.my-biims-page table { width: 100%; table-layout: fixed; font-size: .78rem; }
.my-biims-page table th, .my-biims-page table td { padding-top: .3rem !important; padding-bottom: .3rem !important; }
.my-biims-page .title-column { width: 24%; }
.my-biims-page .files-column { width: 5%; }
.my-biims-page .size-column { width: 9%; }
.my-biims-page .expiry-column { width: 20%; }
.my-biims-page .expires-column { width: 10%; }
.my-biims-page .password-column { width: 9%; }
.my-biims-page .link-column { width: 6%; text-align: center; }
.my-biims-page .actions-column { width: 7%; }
.my-biims-page .title-column a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.password-cell { width: 9rem; max-width: 9rem; }
.password-form, .password-input-group { width: 100%; max-width: 9rem; }
.password-input-group { display: flex; align-items: center; gap: .25rem; }
.password-input-group .form-control { min-height: 30px; min-width: 0; }
.my-biims-page .expiry-input { width: 100%; min-width: 150px; max-width: 165px; min-height: 30px; padding: .15rem .3rem; font-size: .78rem; }
.transfers-filter .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; }
.transfers-filter .btn-check:checked + .btn { color: var(--biim-canvas); background: var(--biim-ink); border-color: var(--biim-ink); }

/* Storage selector on billing */
.storage-option { min-height: 78px; padding: .75rem .5rem !important; text-align: center !important; border-radius: var(--biim-radius-md); transition: border-color .15s var(--biim-ease); }
.storage-option:hover { border-color: var(--biim-ink); }
/* Unchecked storage options keep a visible hairline border and readable label in light mode. */
html:not([data-bs-theme="dark"]) .storage-option {
    --bs-btn-color: var(--biim-ink);
    --bs-btn-border-color: color-mix(in srgb, var(--biim-ink) 32%, transparent);
    --bs-btn-hover-color: var(--biim-ink);
    --bs-btn-hover-border-color: var(--biim-ink);
}
/* Selected storage option keeps the canvas background — outlined, never filled dark. */
.btn-check:checked + .storage-option {
    --bs-btn-color: var(--biim-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--biim-ink);
    color: var(--biim-ink) !important;
    background: transparent;
    border-color: var(--biim-ink);
    box-shadow: 0 0 0 1px var(--biim-ink);
}

/* Receipt links inside billing history */
.receipt-link { color: var(--biim-ink) !important; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.receipt-link:hover { color: var(--biim-ink) !important; text-decoration-color: var(--biim-ink); }

/* Status pills in payment history */
.status-paid { color: var(--biim-success); }
.status-refunded { color: var(--biim-ink-muted); }
.status-failed, .status-void { color: var(--biim-danger); }
.status-open { color: var(--biim-ink); }

/* File thumbs */
.file-thumb, .file-icon {
    display: inline-flex; width: 1.75rem; height: 1.75rem;
    align-items: center; justify-content: center;
    border-radius: var(--biim-radius-sm);
    background: color-mix(in srgb, var(--biim-ink) 9%, transparent);
    color: var(--biim-ink);
}

/* Edit page */
.edit-biim-page section { background: var(--biim-canvas); border: 1px solid var(--biim-hairline); border-radius: var(--biim-radius-lg); }
.edit-biim-page input[type="file"] { min-height: 38px; padding: .375rem .5rem; background: var(--biim-canvas); color: var(--biim-ink); }
.edit-biim-page #addFilesForm input[type="file"]::file-selector-button {
    height: 38px; margin-right: .75rem; padding: .375rem .75rem; border: 0;
    border-radius: var(--biim-radius-sm);
    background: transparent; color: var(--biim-ink);
    border: 1px solid color-mix(in srgb, var(--biim-ink) 45%, transparent);
}
.edit-biim-page #addFilesForm input[type="file"]::file-selector-button:hover { background: var(--biim-ink); color: var(--biim-canvas); }

/* Language switcher */
.lang-switch { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--biim-hairline); border-radius: var(--biim-radius-pill); padding: .14rem; background: transparent; }
.lang-switch .lang-option {
    border: 0; background: transparent; color: var(--biim-ink-muted);
    font-size: .74rem; font-weight: 600; letter-spacing: .02em;
    padding: .16rem .55rem; border-radius: var(--biim-radius-pill);
    cursor: pointer; transition: color .15s var(--biim-ease), background-color .15s var(--biim-ease);
}
.lang-switch .lang-option[aria-pressed="true"] { background: var(--biim-ink); color: var(--biim-canvas); }
.lang-switch .lang-option:hover:not([aria-pressed="true"]) { color: var(--biim-ink); }

/* Utility compatibility kept from previous sheets */
.narrow-page { max-width: 720px; margin-inline: auto; }
.upload-container, .register-container, .login-container { max-width: 600px; margin-inline: auto; }
.login-card { max-width: 460px; margin-inline: auto; }
.error-page { max-width: 700px; margin-top: 60px; }
.hero { padding: 45px 0 35px; text-align: center; }
.settings-section { padding-bottom: 20px; }
.metric-card { background: transparent; border: 0; padding: 0; }
.download-page { max-width: 960px; margin-inline: auto; }
.table-compact { width: 100%; border-collapse: collapse; text-align: left; }
.table-compact th, .table-compact td { padding: 6px 12px !important; font-size: 13px; }
.table-compact tbody tr { border-bottom: 1px solid var(--biim-hairline); }
@media (max-width: 767px) { .table-compact { display: block; overflow-x: auto; white-space: nowrap; } }
.list-group-item { background: var(--biim-canvas); border-color: var(--biim-hairline); color: var(--biim-ink); }
.modal-content { background: var(--biim-canvas); border-radius: var(--biim-radius-lg); }

/* Small-screen polish */
@media (max-width: 767.98px) {
    .container { padding-inline: 1rem; }
    .landing-hero h1 { font-size: 2.1rem; }
    .login-card { padding: 1.25rem !important; }
}

/* ---------- Share-method toggles: white cards that stand out ---------- */
.share-method-group { width: 100%; }
.share-method-btn {
    color: var(--biim-ink) !important;
    background-color: #ffffff !important;
    border-color: var(--biim-hairline) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.share-method-btn:hover { border-color: color-mix(in srgb, var(--biim-ink) 45%, transparent) !important; }
.btn-check:checked + .share-method-btn {
    color: #111827 !important;
    background-color: #ffffff !important;
    border-color: var(--biim-ink) !important;
    box-shadow: inset 0 0 0 1px var(--biim-ink);
    font-weight: 600;
}
html[data-bs-theme="dark"] .share-method-btn {
    color: #f8f9fa !important;
    background-color: #2b3035 !important;
    border-color: rgba(248, 249, 250, .22) !important;
}
html[data-bs-theme="dark"] .btn-check:checked + .share-method-btn {
    color: #f8f9fa !important;
    background-color: #2b3035 !important;
    border-color: #f8f9fa !important;
    box-shadow: inset 0 0 0 1px #f8f9fa;
}