/* ============================================================================= Vault — design system Layers: reset → tokens → base → components → utilities Theme: data-theme="light|dark|auto" on ; auto follows OS pref. Accent: data-accent="teal|blue|violet|amber" on . ============================================================================= */ @layer reset, tokens, base, components, utilities; /* -------- font ------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } /* -------- @layer reset ----------------------------------------------------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; } input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-4) 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } } /* -------- @layer tokens ---------------------------------------------------- */ @layer tokens { :root { /* spacing */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; /* radius */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* type */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; /* motion */ --t-fast: 120ms cubic-bezier(.2,.6,.2,1); --t-med: 220ms cubic-bezier(.2,.6,.2,1); /* z */ --z-toast: 1000; --z-modal: 900; --z-dropdown: 800; --z-sticky: 100; /* light theme defaults */ --bg: #f6f8fb; --surface-1: #ffffff; --surface-2: #f1f5f9; --surface-3: #e2e8f0; --text: #0f172a; --text-muted: #475569; --text-subtle: #64748b; --border-subtle:#e2e8f0; --border-strong:#cbd5e1; --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04); --shadow-2: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --shadow-3: 0 14px 30px rgba(15,23,42,.12); --ok-bg:#dcfce7; --ok-fg:#14532d; --ok-border:#86efac; --warn-bg:#fef3c7; --warn-fg:#78350f; --warn-border:#fcd34d; --err-bg:#fee2e2; --err-fg:#7f1d1d; --err-border:#fca5a5; --info-bg:#dbeafe; --info-fg:#1e3a8a; --info-border:#93c5fd; color-scheme: light; } /* --- accent palettes ---------------------------------------------------- */ :root, [data-accent="teal"] { --accent: #0d9488; --accent-hover: #0f766e; --accent-fg: #ffffff; --accent-muted: #ccfbf1; --accent-soft: rgba(13,148,136,.10); --brand-from: #14b8a6; --brand-to: #0d9488; } [data-accent="blue"] { --accent: #2563eb; --accent-hover:#1d4ed8; --accent-fg:#fff; --accent-muted:#dbeafe; --accent-soft:rgba(37,99,235,.10); --brand-from:#3b82f6; --brand-to:#2563eb; } [data-accent="violet"] { --accent:#7c3aed; --accent-hover:#6d28d9; --accent-fg:#fff; --accent-muted:#ede9fe; --accent-soft:rgba(124,58,237,.10); --brand-from:#8b5cf6; --brand-to:#7c3aed; } [data-accent="amber"] { --accent:#d97706; --accent-hover:#b45309; --accent-fg:#1a1206; --accent-muted:#fef3c7; --accent-soft:rgba(217,119,6,.10); --brand-from:#f59e0b; --brand-to:#d97706; } /* --- dark theme --------------------------------------------------------- */ [data-theme="dark"] { --bg: #0b1220; --surface-1: #131c2e; --surface-2: #1a2438; --surface-3: #243049; --text: #e6edf6; --text-muted: #a3b1c6; --text-subtle: #7d8aa0; --border-subtle:#243049; --border-strong:#324061; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.45); --shadow-3: 0 18px 40px rgba(0,0,0,.55); --ok-bg:#0f3a23; --ok-fg:#a7f3d0; --ok-border:#15803d; --warn-bg:#3a2a08; --warn-fg:#fde68a; --warn-border:#b45309; --err-bg:#3a1414; --err-fg:#fecaca; --err-border:#991b1b; --info-bg:#0d2548; --info-fg:#bfdbfe; --info-border:#1e40af; color-scheme: dark; } [data-theme="dark"][data-accent="teal"] { --accent:#2dd4bf; --accent-hover:#5eead4; --accent-fg:#062b27; --accent-muted:#134e4a; --accent-soft:rgba(45,212,191,.12); --brand-from:#5eead4; --brand-to:#2dd4bf; } [data-theme="dark"][data-accent="blue"] { --accent:#60a5fa; --accent-hover:#93c5fd; --accent-fg:#0a1a3d; --accent-muted:#1e3a8a; --accent-soft:rgba(96,165,250,.12); --brand-from:#93c5fd; --brand-to:#60a5fa; } [data-theme="dark"][data-accent="violet"] { --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-fg:#1f1043; --accent-muted:#4c1d95; --accent-soft:rgba(167,139,250,.12); --brand-from:#c4b5fd; --brand-to:#a78bfa; } [data-theme="dark"][data-accent="amber"] { --accent:#fbbf24; --accent-hover:#fcd34d; --accent-fg:#1a1206; --accent-muted:#78350f; --accent-soft:rgba(251,191,36,.12); --brand-from:#fcd34d; --brand-to:#fbbf24; } /* --- auto theme follows OS --------------------------------------------- */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg:#0b1220; --surface-1:#131c2e; --surface-2:#1a2438; --surface-3:#243049; --text:#e6edf6; --text-muted:#a3b1c6; --text-subtle:#7d8aa0; --border-subtle:#243049; --border-strong:#324061; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.45); --shadow-3: 0 18px 40px rgba(0,0,0,.55); --ok-bg:#0f3a23; --ok-fg:#a7f3d0; --ok-border:#15803d; --warn-bg:#3a2a08; --warn-fg:#fde68a; --warn-border:#b45309; --err-bg:#3a1414; --err-fg:#fecaca; --err-border:#991b1b; --info-bg:#0d2548; --info-fg:#bfdbfe; --info-border:#1e40af; color-scheme: dark; } [data-theme="auto"][data-accent="teal"] { --accent:#2dd4bf; --accent-hover:#5eead4; --accent-fg:#062b27; --accent-muted:#134e4a; --accent-soft:rgba(45,212,191,.12); } [data-theme="auto"][data-accent="blue"] { --accent:#60a5fa; --accent-hover:#93c5fd; --accent-fg:#0a1a3d; --accent-muted:#1e3a8a; --accent-soft:rgba(96,165,250,.12); } [data-theme="auto"][data-accent="violet"] { --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-fg:#1f1043; --accent-muted:#4c1d95; --accent-soft:rgba(167,139,250,.12); } [data-theme="auto"][data-accent="amber"] { --accent:#fbbf24; --accent-hover:#fcd34d; --accent-fg:#1a1206; --accent-muted:#78350f; --accent-soft:rgba(251,191,36,.12); } } } /* -------- @layer base ------------------------------------------------------ */ @layer base { html { font-family: var(--font-sans); } body { background: radial-gradient(1200px 600px at 100% -10%, var(--accent-soft), transparent 60%), radial-gradient(1000px 500px at -10% 110%, var(--accent-soft), transparent 60%), var(--bg); color: var(--text); font-size: var(--fs-md); line-height: 1.55; } h1,h2,h3,h4 { line-height: 1.2; margin: 0 0 var(--s-3) 0; letter-spacing: -0.01em; } h1 { font-size: var(--fs-3xl); font-weight: 700; } h2 { font-size: var(--fs-2xl); font-weight: 650; } h3 { font-size: var(--fs-xl); font-weight: 600; } p { margin: 0 0 var(--s-3) 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); } small, .small { font-size: var(--fs-sm); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } main { max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-12); } footer { text-align: center; color: var(--text-subtle); padding: var(--s-6) var(--s-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); } } /* -------- @layer components ----------------------------------------------- */ @layer components { /* topbar / brand --------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6); background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border-subtle); } .topbar > .spacer { flex: 1; } .brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; letter-spacing: -.01em; font-size: var(--fs-lg); color: var(--text); text-decoration: none; } .brand-mark { width: 28px; height: 28px; display: block; } .who { color: var(--text-muted); font-size: var(--fs-sm); } .user-nav { display: inline-flex; align-items: center; gap: var(--s-3); } .user-nav .inline { display: inline; margin: 0; } td.actions { white-space: nowrap; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } td.actions form.inline + form.inline { margin-left: 0; } td.actions .btn + .btn, td.actions form + .btn, td.actions form + form { margin-left: 0; } .badge { display: inline-flex; align-items: center; background: var(--accent-muted); color: var(--text); padding: 0 .5rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; font-style: normal; line-height: 1.6; } .badge.danger { background: var(--err-bg); color: var(--err-fg); } /* prefs cluster (theme toggle + accent swatches) ------------------------ */ .prefs { display: inline-flex; align-items: center; gap: var(--s-3); } .theme-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-full); } .theme-toggle button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); } .theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); } .theme-toggle button:hover { color: var(--text); } .accent-swatches { display: inline-flex; gap: 6px; } .accent-swatches button { width: 22px; height: 22px; border-radius: var(--r-full); box-shadow: inset 0 0 0 2px var(--surface-1), 0 0 0 1px var(--border-strong); transition: transform var(--t-fast); } .accent-swatches button:hover { transform: scale(1.08); } .accent-swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--surface-1), 0 0 0 2px var(--text); } .swatch-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); } .swatch-blue { background: linear-gradient(135deg, #60a5fa, #2563eb); } .swatch-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); } .swatch-amber { background: linear-gradient(135deg, #fcd34d, #d97706); } /* icon helper ----------------------------------------------------------- */ .icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .icon-lg { width: 1.5rem; height: 1.5rem; } .icon-xl { width: 2.5rem; height: 2.5rem; } .icon-2xl{ width: 3.5rem; height: 3.5rem; } /* buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: .55rem 1.05rem; background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); box-shadow: var(--shadow-1); } .btn:hover { background: var(--accent-hover); text-decoration: none; box-shadow: var(--shadow-2); } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn.small, .btn-small { padding: .35rem .7rem; font-size: var(--fs-xs); } .btn-primary { /* alias kept for compat */ } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .btn.ghost:hover { background: var(--surface-2); border-color: var(--text-muted); } .btn.danger, .btn-danger { background: var(--err-fg); color: #fff; } [data-theme="dark"] .btn.danger, [data-theme="dark"] .btn-danger, [data-theme="auto"] .btn.danger, [data-theme="auto"] .btn-danger { background: #dc2626; } .btn.danger:hover, .btn-danger:hover { filter: brightness(1.1); } .btn.icon-only { width: 36px; height: 36px; padding: 0; } .btn.btn-large, .btn-large { padding: .9rem 1.8rem; font-size: var(--fs-md); } /* qr code (link_created) ------------------------------------------------ */ .qr-block { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: var(--s-4) 0; } .qr { background: #fff; padding: 8px; border-radius: var(--r-md); box-shadow: var(--shadow-1); } /* hero ------------------------------------------------------------------ */ .hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-8); align-items: center; padding: var(--s-10) var(--s-6); } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-bottom: var(--s-3); } .hero p { color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch; } .hero .cta { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; } .hero-art { aspect-ratio: 1 / 1; max-width: 380px; margin-left: auto; background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-art img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-art { max-width: 240px; margin: 0 auto; } } /* card ------------------------------------------------------------------ */ .card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); min-width: 0; overflow-wrap: anywhere; } .card + .card { margin-top: var(--s-4); } .card h2, .card h3 { margin-top: 0; } /* dashboard ------------------------------------------------------------- */ .dashboard { display: flex; flex-direction: column; gap: var(--s-5); } .dash-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-subtle); } .dash-header h1 { margin: 0; } .dash-header > div { flex: 1 1 auto; } .brand-art { width: 96px; height: 96px; border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow-2); background: var(--surface-1); flex: 0 0 auto; } .brand-art-sm { width: 64px; height: 64px; border-radius: var(--r-md); } .auth-hero { text-align: center; max-width: 480px; margin: var(--s-8) auto; } .auth-hero .brand-art { width: 120px; height: 120px; margin: 0 auto var(--s-4); display: block; border-radius: var(--r-xl); } .dash-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .dash-stats .stat-mini { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); } .dash-stats .stat-mini b { font-size: var(--fs-xl); font-weight: 700; display: block; } .dash-stats .stat-mini span { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; } /* file card (refreshed) ------------------------------------------------- */ .file-card { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-4); align-items: start; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-1); transition: box-shadow var(--t-fast), border-color var(--t-fast); } .file-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); } .file-card__icon { width: 56px; height: 56px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; } .file-card__icon .icon { width: 28px; height: 28px; } .file-card__body h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; word-break: break-word; } .file-card__meta { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; } .file-card__meta > * { margin-right: .65rem; } .file-card__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; } .file-card__details { grid-column: 1 / -1; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--border-subtle); } .file-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); } .file-head h3 { margin: 0; } /* link form & table ----------------------------------------------------- */ .link-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); align-items: end; margin: var(--s-3) 0; } .link-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); } .link-form .check { flex-direction: row; align-items: center; gap: var(--s-2); color: var(--text); } .link-form button { grid-column: span 1; align-self: end; } .link-table { width: 100%; font-size: var(--fs-sm); } .link-table th, .link-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; } .link-table .col-short, .link-table .col-num, .link-table .col-status, .link-table .col-date, .link-table .col-source, .link-table .col-owner, .link-table .col-actions { white-space: nowrap; width: 1%; } .link-table .col-num { text-align: right; } /* The "Long" column has no class — it gets max-width:0 so the inner .truncate span ellipsizes instead of stretching the table. */ .link-table td:not([class]) { max-width: 0; } .link-table th { font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; } .state-active { color: var(--ok-fg); font-weight: 600; } .state-revoked, .state-expired, .state-exhausted { color: var(--text-subtle); } /* upload dropzone ------------------------------------------------------- */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-8) var(--s-5); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-muted); text-align: center; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); cursor: pointer; } .dropzone:hover, .dropzone.is-hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .dropzone .icon-xl { color: var(--accent); margin-bottom: var(--s-3); } .dropzone strong { display: block; color: var(--text); margin-bottom: var(--s-1); font-size: var(--fs-lg); } .dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .dropzone-picked { color: var(--text); margin-top: var(--s-2); font-weight: 500; } /* progress -------------------------------------------------------------- */ .upload-progress { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); } .upload-progress progress { flex: 1; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--r-full); overflow: hidden; background: var(--surface-3); accent-color: var(--accent); } .upload-progress progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-full); } .upload-progress progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); transition: width .15s linear; } .upload-progress progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-full); } .upload-progress[data-state="done"] progress::-webkit-progress-value { background: var(--ok-fg); } .upload-progress[data-state="error"] progress::-webkit-progress-value { background: #dc2626; } /* form controls --------------------------------------------------------- */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select { width: 100%; padding: .55rem .7rem; background: var(--surface-1); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--accent); } /* token / link reveal --------------------------------------------------- */ .token, .link-reveal { display: block; background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border-subtle); overflow-x: auto; word-break: break-all; } /* short-link: prominent, code-only display on link-created page --------- */ a.short-link { display: inline-block; padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; letter-spacing: .08em; color: var(--accent); text-decoration: none; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } a.short-link:hover, a.short-link:focus { background: var(--accent-soft); border-color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } /* short-cell: monospace code badge inside link-table -------------------- */ .short-cell { display: inline-block; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 3px 8px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; line-height: 1.2; } /* truncate: single-line ellipsis for long URLs in tables and prose ----- */ .truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.truncate { display: table-cell; } /* toasts (replacement for .flash) -------------------------------------- */ .toasts { position: fixed; top: var(--s-4); right: var(--s-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); max-width: min(380px, calc(100vw - var(--s-6))); } .toast { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface-1); border: 1px solid var(--border-subtle); border-left: 4px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: toast-in var(--t-med) both; } .toast .icon { color: var(--accent); margin-top: 2px; } .toast.is-ok { border-left-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); } .toast.is-ok .icon { color: var(--ok-fg); } .toast.is-error { border-left-color: var(--err-border); background: var(--err-bg); color: var(--err-fg); } .toast.is-error .icon { color: var(--err-fg); } .toast.is-info { border-left-color: var(--info-border);background: var(--info-bg);color: var(--info-fg);} .toast.is-info .icon { color: var(--info-fg);} .toast .body { flex: 1; font-size: var(--fs-sm); } .toast .close { color: inherit; opacity: .6; transition: opacity var(--t-fast); } .toast .close:hover { opacity: 1; } @keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* legacy .flash mapped to toast look (no-JS fallback) ------------------ */ .flash { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border-subtle); border-left-width: 4px; background: var(--surface-1); margin: var(--s-3) 0; } .flash.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); } .flash.err { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); } .flash.link { background: var(--info-bg);color: var(--info-fg);border-color: var(--info-border);} .flash .token { background: color-mix(in srgb, var(--surface-1) 70%, transparent); } /* admin nav ------------------------------------------------------------- */ .admin-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-4) 0 var(--s-5) 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--s-2); } .admin-nav .tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: background var(--t-fast), color var(--t-fast); } .admin-nav .tab:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .admin-nav .tab.on { background: var(--accent); color: var(--accent-fg); } /* admin stats grid + tables -------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: var(--s-3); margin-top: var(--s-3); } .stat { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); } .stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .stat-val { font-size: var(--fs-2xl); font-weight: 700; } .grid-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--s-3); align-items: end; margin: var(--s-3) 0; } .grid-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); } .grid-form label.inline { flex-direction: row; align-items: center; gap: var(--s-2); color: var(--text); } table.data { font-size: var(--fs-sm); margin-top: var(--s-3); } table.data th, table.data td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; } table.data th { background: var(--surface-2); position: sticky; top: 0; font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; } table.data tbody tr:hover { background: var(--surface-2); } table.data input[type=text], table.data input[type=number], table.data select { width: 100%; } table.data .ua { color: var(--text-subtle); word-break: break-all; font-size: var(--fs-xs); } /* providers (login page) ----------------------------------------------- */ .provider-buttons { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); } .provider-buttons .btn { width: 100%; justify-content: center; } .auth-card { max-width: 420px; margin: var(--s-10) auto; padding: var(--s-8); border-radius: var(--r-xl); background: var(--surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-3); } .auth-card .brand { justify-content: center; margin-bottom: var(--s-5); } /* download landing ----------------------------------------------------- */ .download-hero { max-width: 540px; margin: var(--s-10) auto; text-align: center; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--s-8) var(--s-6); box-shadow: var(--shadow-3); } .download-hero .file-icon-big { width: 96px; height: 96px; margin: 0 auto var(--s-4); background: var(--accent-soft); color: var(--accent); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; } .download-hero .file-icon-big .icon { width: 56px; height: 56px; } .download-hero h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s-2); word-break: break-word; } .download-hero .meta { color: var(--text-muted); font-size: var(--fs-sm); list-style: none; padding: 0; margin: var(--s-4) 0; } .download-hero .meta li { margin: 2px 0; } .download-hero .btn { font-size: var(--fs-md); padding: .8rem 1.6rem; margin-top: var(--s-4); } /* empty state ---------------------------------------------------------- */ .empty { text-align: center; padding: var(--s-10) var(--s-4); color: var(--text-muted); } .empty img { width: 200px; margin: 0 auto var(--s-4); opacity: .85; } .empty h3 { color: var(--text); } } /* -------- @layer utilities ------------------------------------------------- */ @layer utilities { .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .stack > * + * { margin-top: var(--s-3); } .text-right { text-align: right; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } }