:root {
/* Paper */
--paper: #f3eee5; /* base cream */
--paper-2: #ece5d6; /* slightly deeper */
--paper-3: #e3dac4; /* hover/active */
--ink: #14110d; /* near-black, warm */
--ink-2: #3a352d; /* secondary */
--ink-3: #6b6457; /* muted */
--rule: #14110d; /* hairline color */
/* Accents */
--stamp: #c8311a; /* sharp red stamp */
--stamp-dim: #a52612;
--valid: #2e5d35; /* dark forest, for [USED] */
/* Form fields */
--field-bg: #fbf8f0;
--field-bg-focus: #ffffff;
/* Typography */
/* Type stack: Inter for body/labels (most-legible modern UI sans),
Fraunces for display headlines (variable serif with real character),
Geist Mono for labels-in-mono + actual code blocks (HWID, secrets,
client snippets). */
--serif: "Fraunces", "Times New Roman", Georgia, serif;
--mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Metrics */
--hairline: 1px;
--rule-thick: 2px;
--maxw: 1180px;
}
* {
box-sizing: border-box;
}
*::selection {
background: var(--ink);
color: var(--paper);
}
/* Make the hidden attribute reliably win over author display: rules.
Without this, .auth-view { display: flex } overrides [hidden] from the
user-agent stylesheet and every section shows at once. */
[hidden] {
display: none !important;
}
html, body {
margin: 0;
background: var(--paper);
color: var(--ink);
/* Sans by default (Plex Sans) for prose / table cells / form inputs /
anything that doesn't explicitly opt into mono. Kickers, monogram, code
and form labels still use var(--mono) explicitly. */
font-family: var(--sans);
font-size: 13px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
/* Subtle paper grain via radial noise + warm cast */
background-image: radial-gradient(ellipse at 10% 0%, rgba(232,210,160,0.25), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(200,49,26,0.04), transparent 55%);
background-attachment: fixed;
min-height: 100vh;
}
/* Tiny noise overlay for paper texture */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.18;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
main, header {
position: relative;
z-index: 1;
}
/* ─── Typography ────────────────────────────────────────────── */
.display {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.85rem, 3.2vw, 2.85rem);
line-height: 1.02;
letter-spacing: -0.012em;
margin: 0;
color: var(--ink);
}
.display em {
font-style: italic;
color: var(--stamp);
}
h3.display {
font-size: 1.65rem;
}
.kicker {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 0.6rem;
}
.muted {
color: var(--ink-3);
}
.meta-line {
font-size: 0.72rem;
color: var(--ink-3);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ─── Rules (the horizontal hairlines) ──────────────────────── */
.rule {
height: var(--hairline);
background: var(--ink);
margin: 1rem 0 1.5rem;
}
.rule.rule-double {
height: 4px;
background: linear-gradient(var(--ink), var(--ink)) top/100% var(--hairline) no-repeat, linear-gradient(var(--ink), var(--ink)) bottom/100% var(--hairline) no-repeat;
background-color: transparent;
}
/* ─── Top bar ───────────────────────────────────────────────── */
header#topbar {
padding: 1.5rem 2rem 0;
max-width: var(--maxw);
margin: 0 auto;
}
.topbar-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.brand {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.brand-mark {
font-family: var(--mono);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.06em;
color: var(--ink);
}
.brand-mark .emdash {
color: var(--stamp);
margin: 0 0.05em;
}
.brand-sub {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.16em;
color: var(--ink-3);
}
.topbar-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
/* ─── Main layout ───────────────────────────────────────────── */
main#app {
max-width: var(--maxw);
margin: 0 auto;
padding: 2rem 2rem 6rem;
}
/* Auth views are full-bleed and self-pad. When one is visible, the
wrapper must contribute zero vertical chrome — otherwise main's
padding pushes the body taller than the viewport and the document
gets a scrollbar even when the auth-view itself fits perfectly. */
main#app:has(> .auth-view:not([hidden])) {
max-width: none;
padding: 0;
}
/* ─── Section heads ─────────────────────────────────────────── */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-top: 2rem;
}
.section-head > div {
max-width: 36rem;
}
.section-head .muted {
margin-top: 0.6rem;
}
.head-actions {
display: flex;
gap: 0.6rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
/* ─── Buttons ───────────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
font-weight: 500;
text-transform: uppercase;
padding: 0.72rem 1.1rem;
background: var(--ink);
color: var(--paper);
border: var(--hairline) solid var(--ink);
cursor: pointer;
transition: transform 0.08s ease, background 0.12s ease;
}
.btn-primary:hover {
background: var(--stamp);
border-color: var(--stamp);
}
.btn-primary:active {
transform: translateY(1px);
}
.btn-primary[disabled] {
opacity: 0.5;
cursor: progress;
}
.btn-primary .btn-arrow {
transition: transform 0.12s ease;
}
.btn-primary:hover .btn-arrow {
transform: translateX(2px);
}
.btn-ghost {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
font-weight: 500;
text-transform: uppercase;
padding: 0.6rem 0.95rem;
background: transparent;
color: var(--ink);
border: var(--hairline) solid var(--ink);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.btn-ghost:hover {
background: var(--ink);
color: var(--paper);
}
.btn-ghost.danger {
color: var(--stamp);
border-color: var(--stamp);
}
.btn-ghost.danger:hover {
background: var(--stamp);
color: var(--paper);
}
.btn-ghost[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.link {
background: none;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
padding: 0;
border-bottom: var(--hairline) solid transparent;
transition: color 0.12s ease, border-color 0.12s ease;
}
.link:hover {
color: var(--stamp);
border-bottom-color: var(--stamp);
}
.link .arrow {
font-family: var(--serif);
font-size: 0.95rem;
}
.back-link {
background: none;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
padding: 0;
transition: color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.back-link:hover {
color: var(--ink);
}
.back-link .back-arrow {
font-family: var(--serif);
font-size: 1.1rem;
transition: transform 0.12s ease;
}
.back-link:hover .back-arrow {
transform: translateX(-2px);
}
/* ─── Forms ─────────────────────────────────────────────────── */
.form {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: 28rem;
}
.form .field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.form label {
font-family: var(--mono);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
.form input, .form select {
font-family: var(--mono);
font-size: 0.9rem;
padding: 0.65rem 0.8rem;
background: var(--field-bg);
border: var(--hairline) solid var(--ink);
color: var(--ink);
border-radius: 0;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.form input:focus, .form select:focus {
outline: none;
background: var(--field-bg-focus);
box-shadow: inset 0 -2px 0 0 var(--stamp);
}
.form input::placeholder {
color: var(--ink-3);
opacity: 0.55;
}
.field-hint {
font-size: 0.7rem;
color: var(--ink-3);
letter-spacing: 0.02em;
}
.field-error {
font-size: 0.7rem;
color: var(--stamp);
letter-spacing: 0.02em;
min-height: 1em;
}
/* ─── Auth views (setup/login) ──────────────────────────────── */
.auth-view {
/* Lock to exactly the viewport so the document never scrolls. If the
auth content ever genuinely exceeds the viewport (very short screens,
phone in landscape, devtools open), the scrollbar shows up INSIDE
this container — not on the body. The dvh fallback handles mobile
browsers where the URL bar shrinks the visible area. */
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
/* ── Page marginalia (corner marks + spine text on auth views) ── */
.page-marks {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
color: var(--ink-3);
text-transform: uppercase;
}
.page-mark {
position: absolute;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 1.6rem 1.8rem;
}
.page-mark.top-left {
top: 0;
left: 0;
}
.page-mark.top-right {
top: 0;
right: 0;
}
.page-mark.bottom-left {
bottom: 0;
left: 0;
}
.page-mark.bottom-right {
bottom: 0;
right: 0;
}
.crop-mark {
width: 12px;
height: 12px;
position: relative;
flex-shrink: 0;
}
.crop-mark::before, .crop-mark::after {
content: "";
position: absolute;
background: var(--ink-3);
}
.crop-mark::before {
left: 50%;
top: 0;
bottom: 0;
width: 1px;
transform: translateX(-50%);
}
.crop-mark::after {
top: 50%;
left: 0;
right: 0;
height: 1px;
transform: translateY(-50%);
}
.page-spine {
position: absolute;
left: 1.4rem;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.page-spine span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.45em;
color: var(--ink-3);
opacity: 0.55;
white-space: nowrap;
}
@media (max-width: 820px) {
.page-marks {
display: none;
}
}
/* ── Refined editorial auth card (login / setup / register) ───────────
A single centered card. (The legacy .auth-frame / .auth-mark split-panel
layout it replaced has been removed.) */
.auth-card {
width: 100%;
max-width: 460px;
background: var(--paper-2);
border: var(--hairline) solid var(--ink);
box-shadow: 2px 2px 0 var(--ink);
padding: 2.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
z-index: 2;
}
.auth-card-head {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-bottom: 1.1rem;
border-bottom: var(--hairline) solid var(--ink);
}
.auth-monogram {
font-family: var(--mono);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.32em;
color: var(--ink);
line-height: 1;
}
.auth-tagline {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.22em;
color: var(--ink-3);
text-transform: uppercase;
}
.auth-title {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 2rem;
line-height: 1.05;
color: var(--ink);
}
.auth-sub {
margin: 0.4rem 0 0;
color: var(--ink-3);
font-size: 0.9rem;
line-height: 1.5;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: none;
}
.auth-submit {
width: 100%;
justify-content: center;
}
.auth-alt {
margin: 0.25rem 0 0;
padding-top: 1.25rem;
border-top: var(--hairline) solid var(--ink);
text-align: center;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.auth-alt a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--ink);
padding-bottom: 1px;
transition: color 120ms, border-color 120ms;
}
.auth-alt a:hover {
color: var(--stamp);
border-bottom-color: var(--stamp);
}
.auth-foot {
/* Center on its own midpoint so width = content. Avoids edge cases where
left:0/right:0 fails to stretch the element (e.g. a transformed ancestor
that becomes the containing block, or a horizontal scrollbar). */
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.22em;
color: var(--ink-3);
text-transform: uppercase;
z-index: 1;
pointer-events: none;
}
@media (max-width: 480px) {
.auth-card { padding: 1.75rem 1.4rem; gap: 1.1rem; }
.auth-title { font-size: 1.7rem; }
.auth-foot { display: none; }
}
/* ─── Modern auth — "Mono" ──────────────────────────────────────────────
Pure black & white minimal. No color anywhere — the only chrome is value
(lightness). Light + dark adaptive via [data-theme="dark"]. Scoped to
body.modern-auth so reverting is one class-name removal. */
body.modern-auth {
/* Light mode: paper white. */
--m-bg: #f7f7f8; /* off-white */
--m-card-bg: #ffffff; /* card */
--m-ink: #0a0a0a; /* near-black */
--m-ink-2: #4a4a4a; /* body */
--m-ink-3: #8a8a8a; /* meta */
--m-border: #ececee; /* hairline */
--m-border-strong: #d4d4d6; /* input */
--m-input-bg: #ffffff;
--m-accent: #0a0a0a; /* solid ink CTA */
--m-accent-hover: #1f1f1f;
--m-accent-soft: rgba(10, 10, 10, 0.08);
--m-error: #1a1a1a; /* even errors stay grey */
--m-shadow: /* == dash-pro --shadow-lg */
0 16px 40px -16px rgba(0, 0, 0, 0.12),
0 8px 24px -8px rgba(0, 0, 0, 0.06);
color: var(--m-ink);
background-color: var(--m-bg);
background-image: none;
overflow: hidden;
}
body.modern-auth::before { display: none; }
body.modern-auth::after { display: none; }
/* Dark mode: deep ink. */
[data-theme="dark"] body.modern-auth {
--m-bg: #0a0a0a;
--m-card-bg: #131313;
--m-ink: #f5f5f5;
--m-ink-2: #b8b8b8;
--m-ink-3: #6e6e6e;
--m-border: #232323;
--m-border-strong: #333333;
--m-input-bg: #0f0f0f;
--m-accent: #f5f5f5; /* solid white CTA */
--m-accent-hover: #ffffff;
--m-accent-soft: rgba(245, 245, 245, 0.1);
--m-error: #e5e5e5;
--m-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.85),
0 12px 30px -12px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
background-color: var(--m-bg);
background-image: none;
}
@media (prefers-reduced-motion: reduce) {
.modern-auth .auth-card { transition: none; }
.modern-auth .reveal { animation: none; }
}
.modern-auth .auth-view {
background: transparent;
z-index: 2;
}
.modern-auth .auth-card {
width: 100%;
max-width: 420px;
background: var(--m-card-bg);
border: 1px solid var(--m-border);
border-radius: 16px;
box-shadow: var(--m-shadow);
padding: 2.5rem 2.25rem 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
z-index: 2;
}
.modern-auth .auth-title {
margin: 0;
font-family: var(--sans);
font-style: normal;
font-weight: 650;
font-size: 1.6rem;
line-height: 1.25;
color: var(--m-ink);
text-align: center;
letter-spacing: -0.02em;
}
.modern-auth .auth-sub {
margin: -0.55rem 0 0.4rem;
color: var(--m-ink-2);
font-size: 0.92rem;
line-height: 1.55;
text-align: center;
font-family: var(--sans);
}
.modern-auth .auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: none;
}
.modern-auth .auth-card .field label {
display: block;
font-family: var(--sans);
font-weight: 550;
font-size: 0.82rem;
color: var(--m-ink-2);
margin-bottom: 0.4rem;
text-transform: none;
letter-spacing: 0;
}
.modern-auth .auth-card .field input {
width: 100%;
background: var(--m-input-bg);
border: 1px solid var(--m-border-strong);
border-radius: 10px;
padding: 0.72rem 0.9rem;
font-family: var(--sans);
font-size: 0.94rem;
color: var(--m-ink);
transition: border-color 140ms, box-shadow 180ms, background 140ms;
}
.modern-auth .auth-card .field input::placeholder {
color: var(--m-ink-3);
}
.modern-auth .auth-card .field input:hover:not(:focus) {
border-color: var(--m-ink-3);
}
.modern-auth .auth-card .field input:focus {
outline: none;
border-color: var(--m-ink);
box-shadow: 0 0 0 3px var(--m-accent-soft);
}
.modern-auth .auth-card .field-hint {
display: block;
margin-top: 0.4rem;
font-size: 0.76rem;
color: var(--m-ink-3);
font-family: var(--sans);
}
.modern-auth .auth-card .field-error {
display: block;
margin-top: 0.4rem;
font-size: 0.78rem;
color: var(--m-error);
font-family: var(--sans);
font-weight: 500;
}
.modern-auth .auth-card .btn-primary {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
background: var(--m-accent);
color: var(--m-card-bg); /* inverts with theme */
border: 1px solid var(--m-accent);
border-radius: 10px;
padding: 0.82rem 1rem;
font-family: var(--sans);
font-weight: 600;
font-size: 0.94rem;
letter-spacing: 0.005em;
text-transform: none;
cursor: pointer;
transition: transform 140ms, background 160ms, color 160ms, box-shadow 200ms;
margin-top: 0.4rem;
box-shadow: none;
}
.modern-auth .auth-card .btn-primary:hover {
transform: translateY(-1px);
background: var(--m-accent-hover);
box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35);
}
.modern-auth .auth-card .btn-primary:active {
transform: translateY(0);
}
.modern-auth .auth-card .btn-primary[disabled] {
opacity: 0.55;
cursor: progress;
transform: none;
}
.modern-auth .auth-card .btn-primary .btn-arrow { display: none; }
/* ── Loading state: replace the global red bottom-bar with a centered
ring spinner. `currentColor` makes it adopt the button's text color, so
it inverts cleanly between light (white spinner on black btn) and dark
(black spinner on white btn). */
.modern-auth .auth-card .btn-primary.loading {
cursor: progress;
}
.modern-auth .auth-card .btn-primary.loading .btn-label {
opacity: 0;
transition: opacity 120ms;
}
.modern-auth .auth-card .btn-primary.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
background: transparent;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: authBtnSpin 0.7s linear infinite;
transform-origin: center;
}
@keyframes authBtnSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.modern-auth .auth-card .btn-primary.loading::after {
animation: authBtnPulse 1.4s ease-in-out infinite;
border-top-color: currentColor;
}
@keyframes authBtnPulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
}
.modern-auth .auth-alt {
margin: 0.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--m-border);
text-align: center;
font-family: var(--sans);
font-size: 0.88rem;
color: var(--m-ink-2);
text-transform: none;
letter-spacing: 0;
}
.modern-auth .auth-alt a {
color: var(--m-ink);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid var(--m-border-strong);
padding-bottom: 1px;
transition: border-color 140ms;
}
.modern-auth .auth-alt a:hover {
border-bottom-color: var(--m-ink);
}
.modern-auth .auth-foot {
font-family: var(--sans);
font-size: 0.76rem;
letter-spacing: 0;
color: var(--m-ink-3);
text-transform: none;
}
/* ── Theme toggle (fixed, top-right). Two stacked SVGs; CSS hides the
one not matching current data-theme. */
.theme-toggle {
position: fixed;
top: 1.25rem;
right: 1.25rem;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--m-card-bg, #ffffff);
color: var(--m-ink, #0a0a0a);
border: 1px solid var(--m-border, #ececee);
border-radius: 50%;
cursor: pointer;
z-index: 100;
transition: background 160ms, color 160ms, border-color 160ms, transform 140ms;
}
.theme-toggle:hover {
transform: translateY(-1px);
border-color: var(--m-ink-3, #8a8a8a);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle svg { display: block; }
/* Light theme shows moon (click → go dark). Dark theme shows sun. */
.theme-toggle .t-sun { display: none; }
.theme-toggle .t-moon { display: block; }
[data-theme="dark"] .theme-toggle .t-sun { display: block; }
[data-theme="dark"] .theme-toggle .t-moon { display: none; }
@media (max-width: 480px) {
.modern-auth .auth-card {
padding: 2rem 1.5rem 1.6rem;
border-radius: 14px;
}
.modern-auth .auth-title { font-size: 1.35rem; }
.modern-auth .auth-foot { display: none; }
.theme-toggle { top: 0.85rem; right: 0.85rem; width: 34px; height: 34px; }
}
/* ═══════════════════════════════════════════════════════════════════
░ Customer portal — uses the modern-auth template ──────────────
Login + transient states share the standard .auth-card.
Dashboard view uses a wider .portal-dash-card variant with
subscription / download / info-grid sections inside.
═══════════════════════════════════════════════════════════════════ */
/* Loading state — CSS ring spinner centered in the auth card. */
.modern-auth .portal-loading-card {
align-items: center;
justify-content: center;
padding: 3rem 2rem;
min-height: 180px;
}
.modern-auth .portal-spinner {
width: 42px;
height: 42px;
border: 3px solid var(--m-border);
border-top-color: var(--m-accent);
border-radius: 50%;
animation: portalSpin 0.75s linear infinite;
}
@keyframes portalSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.modern-auth .portal-spinner {
animation-duration: 2.5s;
}
}
.modern-auth .portal-dash-card {
max-width: 560px;
padding: 2rem 2rem 1.75rem;
gap: 1.1rem;
}
.modern-auth .portal-dash-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--m-border);
margin-bottom: 0.25rem;
text-align: left;
}
.modern-auth .portal-dash-head .auth-title {
text-align: left;
font-size: 1.35rem;
margin: 0;
}
.modern-auth .portal-dash-head .auth-title em {
font-style: normal;
color: var(--m-accent);
}
.modern-auth .portal-dash-head .auth-sub {
text-align: left;
margin: 0 0 0.15rem;
font-size: 0.7rem;
color: var(--m-ink-3);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
}
.modern-auth .portal-logout-btn {
flex-shrink: 0;
background: transparent;
color: var(--m-ink-2);
border: 1px solid var(--m-border-strong);
border-radius: 8px;
padding: 0.45rem 0.75rem;
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.modern-auth .portal-logout-btn:hover {
background: var(--m-accent-soft);
color: var(--m-ink);
border-color: var(--m-ink-3);
}
.modern-auth .portal-logout-btn .arrow {
margin-left: 0.25rem;
font-size: 0.85rem;
}
.modern-auth .portal-section-label {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--m-ink-3);
margin: 0 0 0.3rem;
display: block;
}
/* Subscription card — inset surface */
.modern-auth .portal-sub-card {
background: var(--m-input-bg);
border: 1px solid var(--m-border);
border-radius: 12px;
padding: 1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.modern-auth .portal-sub-status {
margin: 0;
font-family: var(--sans);
font-size: 1.2rem;
font-weight: 700;
color: var(--m-ink);
letter-spacing: -0.015em;
}
.modern-auth .portal-sub-status.ok,
.modern-auth .portal-sub-status.active { color: #15803d; }
.modern-auth .portal-sub-status.expired,
.modern-auth .portal-sub-status.warn { color: #b45309; }
.modern-auth .portal-sub-status.banned,
.modern-auth .portal-sub-status.danger { color: #b91c1c; }
[data-theme="dark"] .modern-auth .portal-sub-status.ok,
[data-theme="dark"] .modern-auth .portal-sub-status.active { color: #4ade80; }
[data-theme="dark"] .modern-auth .portal-sub-status.expired,
[data-theme="dark"] .modern-auth .portal-sub-status.warn { color: #fbbf24; }
[data-theme="dark"] .modern-auth .portal-sub-status.banned,
[data-theme="dark"] .modern-auth .portal-sub-status.danger { color: #f87171; }
.modern-auth .portal-sub-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 1.25rem;
border-top: 1px solid var(--m-border);
padding-top: 0.75rem;
}
.modern-auth .portal-sub-meta > div {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.modern-auth .portal-sub-value {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--m-ink);
font-variant-numeric: tabular-nums;
}
/* Download / external-link cards */
.modern-auth .portal-download-card {
background: var(--m-input-bg);
border: 1px solid var(--m-border);
border-radius: 12px;
padding: 0.9rem 1.15rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.modern-auth .portal-download-card > div { flex: 1; min-width: 0; }
.modern-auth .portal-download-name {
font-family: var(--sans);
font-size: 0.92rem;
font-weight: 600;
color: var(--m-ink);
margin: 0.2rem 0;
word-break: break-all;
}
.modern-auth #portal-link-url {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--m-ink-2);
}
.modern-auth .portal-download-card .muted {
margin: 0;
font-size: 0.78rem;
color: var(--m-ink-3);
}
.modern-auth .portal-download-card .btn-primary {
flex-shrink: 0;
width: auto;
padding: 0.55rem 1rem;
}
/* Info grid */
.modern-auth .portal-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem 1.25rem;
background: var(--m-card-bg);
border: 1px solid var(--m-border);
border-radius: 12px;
padding: 1rem 1.15rem;
}
.modern-auth .portal-info-grid > div {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.modern-auth .portal-info-wide {
grid-column: 1 / -1;
}
.modern-auth .portal-info-grid span:not(.portal-section-label),
.modern-auth .portal-info-grid code {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--m-ink);
word-break: break-all;
}
.modern-auth .portal-info-grid code {
font-family: var(--mono);
font-size: 0.76rem;
background: var(--m-input-bg);
padding: 0.3rem 0.5rem;
border-radius: 5px;
border: 1px solid var(--m-border);
color: var(--m-ink-2);
}
/* Mobile: collapse the 2-col grids */
@media (max-width: 540px) {
.modern-auth .portal-dash-card { padding: 1.5rem 1.25rem; }
.modern-auth .portal-sub-meta,
.modern-auth .portal-info-grid {
grid-template-columns: 1fr;
}
.modern-auth .portal-download-card {
flex-direction: column;
align-items: stretch;
}
.modern-auth .portal-download-card .btn-primary {
width: 100%;
}
}
/* ─── Landing page (public/index.html, anon /) ──────────────────────────
Pure marketing surface — no JS. Reuses the brand tokens (paper/ink/mono,
stamp red) so it reads as the same product as the dashboard. */
.landing-body { min-height: 100vh; }
.landing-nav {
max-width: 1100px;
margin: 0 auto;
padding: 1.4rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
position: relative;
z-index: 2;
}
.landing-brand {
display: flex;
flex-direction: column;
gap: 0.15rem;
text-decoration: none;
color: var(--ink);
line-height: 1;
}
.landing-monogram {
font-family: var(--mono);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.32em;
color: var(--ink);
}
.landing-brand-sub {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
}
.landing-nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.landing-nav-link {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 120ms;
}
.landing-nav-link:hover { border-bottom-color: var(--ink); }
.landing {
max-width: 1100px;
margin: 0 auto;
padding: 1rem 2rem 4rem;
position: relative;
z-index: 2;
}
/* Hero */
.landing-hero {
padding: 4rem 0 4.5rem;
max-width: 720px;
}
.landing-eyebrow { margin-bottom: 1.5rem; }
.landing-headline {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: 0.96;
color: var(--ink);
letter-spacing: -0.01em;
}
.landing-headline em { font-style: italic; }
.landing-deck {
margin: 1.5rem 0 2rem;
max-width: 560px;
font-family: var(--sans);
font-size: 1.1rem;
line-height: 1.55;
color: var(--ink-2);
}
.landing-hero-actions {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.landing-hero-foot {
margin: 0;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
color: var(--ink-3);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.landing-hero-foot code {
font-family: var(--mono);
color: var(--ink);
text-transform: none;
letter-spacing: 0;
}
.dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--stamp);
flex-shrink: 0;
}
.landing-rule {
max-width: 1100px;
margin: 0 auto;
height: 0;
border-top: var(--hairline) solid var(--ink);
position: relative;
z-index: 2;
}
.landing-section { padding: 4rem 0; }
.landing-section-head {
margin-bottom: 2.5rem;
max-width: 720px;
}
.landing-h2 {
margin: 0.5rem 0 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.2rem, 4vw, 3rem);
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.005em;
}
.landing-h2 em { font-style: italic; }
.landing-prose {
margin: 1.2rem 0 0;
max-width: 600px;
font-family: var(--sans);
font-size: 1.02rem;
line-height: 1.65;
color: var(--ink-2);
}
.landing-prose em { font-style: italic; color: var(--ink); }
/* Feature grid (border-collapse trick: outer borders + per-cell right/bottom) */
.landing-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: var(--hairline) solid var(--ink);
border-left: var(--hairline) solid var(--ink);
}
.landing-feature {
padding: 1.8rem 1.6rem;
border-right: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
background: var(--paper-2);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.landing-feature .kicker {
margin: 0;
color: var(--stamp);
}
.landing-feature-title {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.15;
color: var(--ink);
}
.landing-feature-body {
margin: 0;
font-family: var(--sans);
font-size: 0.97rem;
line-height: 1.55;
color: var(--ink-2);
}
/* Why section */
.landing-why {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3rem;
align-items: start;
}
.landing-creed {
list-style: none;
margin: 0;
padding: 1.5rem;
background: var(--paper-2);
border: var(--hairline) solid var(--ink);
display: flex;
flex-direction: column;
gap: 0.95rem;
font-family: var(--sans);
font-size: 0.95rem;
line-height: 1.5;
color: var(--ink-2);
}
.landing-creed li {
display: flex;
align-items: baseline;
gap: 0.7rem;
}
/* Invite CTA strip — inverts in dark mode (intentional surface change) */
.landing-cta {
padding: 3.5rem 2.5rem;
background: var(--ink);
color: var(--paper);
margin-top: 1rem;
}
.landing-cta .kicker { color: var(--paper-2); }
.landing-cta-h { color: var(--paper); }
.landing-cta .landing-prose { color: var(--paper-2); max-width: 620px; }
.landing-cta .landing-prose em { color: var(--paper); }
.landing-cta-btn {
margin-top: 1.5rem;
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.landing-cta-btn:hover {
background: var(--stamp);
color: var(--paper);
border-color: var(--stamp);
}
/* Footer */
.landing-foot {
max-width: 1100px;
margin: 0 auto;
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
border-top: var(--hairline) solid var(--ink);
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-3);
position: relative;
z-index: 2;
}
.landing-foot-left,
.landing-foot-right {
display: flex;
align-items: center;
gap: 1rem;
}
.landing-foot-meta {
letter-spacing: 0.18em;
text-transform: uppercase;
}
.landing-foot-link {
color: var(--ink-3);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 120ms, border-color 120ms;
}
.landing-foot-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
@media (max-width: 800px) {
.landing-nav { padding: 1rem 1.2rem; }
.landing-nav-links { gap: 0.9rem; }
.landing { padding: 0.5rem 1.2rem 3rem; }
.landing-hero { padding: 2.5rem 0 3rem; }
.landing-features { grid-template-columns: 1fr; }
.landing-why { grid-template-columns: 1fr; gap: 1.5rem; }
.landing-cta { padding: 3rem 1.5rem; }
.landing-foot {
flex-direction: column;
align-items: flex-start;
padding: 1.5rem 1.2rem;
}
}
@media (max-width: 480px) {
.landing-brand-sub { display: none; }
.landing-nav-link { display: none; }
}
/* ─── Apps grid ─────────────────────────────────────────────── */
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
border-left: var(--hairline) solid var(--ink);
border-top: var(--hairline) solid var(--ink);
}
.app-card {
padding: 1.5rem;
background: var(--paper);
border-right: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
cursor: pointer;
position: relative;
transition: background 0.15s ease;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 150px;
}
.app-card:hover {
background: var(--paper-2);
}
.app-card:hover .app-card-arrow {
transform: translate(3px, -3px);
color: var(--stamp);
}
.app-card-id {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.18em;
color: var(--ink-3);
text-transform: uppercase;
}
.app-card-name {
font-family: var(--serif);
font-size: 1.6rem;
line-height: 1.05;
color: var(--ink);
margin: 0.2rem 0 0.7rem;
}
.app-card-stats {
font-size: 0.72rem;
color: var(--ink-3);
letter-spacing: 0.04em;
display: flex;
gap: 1rem;
margin-top: auto;
font-variant-numeric: tabular-nums;
}
.app-card-stats strong {
color: var(--ink);
font-weight: 500;
}
.app-card-status {
position: absolute;
top: 1.4rem;
right: 1.5rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
font-weight: 500;
}
.app-card-status.on {
color: var(--valid);
}
.app-card-status.off {
color: var(--stamp);
}
.app-card-status::before {
content: "[";
}
.app-card-status::after {
content: "]";
}
.app-card-arrow {
position: absolute;
bottom: 1.4rem;
right: 1.5rem;
font-family: var(--serif);
font-size: 1.4rem;
color: var(--ink-3);
transition: transform 0.15s ease, color 0.15s ease;
}
/* ─── Empty states ──────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 5rem 1.5rem;
border: var(--hairline) dashed var(--ink);
margin-top: 1rem;
}
.empty-state.small {
padding: 2.5rem 1.5rem;
}
.empty-state .display {
margin-bottom: 0.6rem;
}
.empty-state .muted {
margin-bottom: 1.6rem;
}
.empty-state .btn-primary {
margin: 0 auto;
}
/* ─── App detail: meta grid ─────────────────────────────────── */
.meta-grid {
display: grid;
grid-template-columns: max-content 1fr max-content 1fr;
gap: 0.45rem 1.5rem;
margin: 1.5rem 0 0;
padding: 1.25rem 0;
border-top: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
font-size: 0.85rem;
}
@media (max-width: 640px) {
.meta-grid {
grid-template-columns: max-content 1fr;
}
}
.meta-grid dt {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
align-self: center;
}
.meta-grid dd {
margin: 0;
align-self: center;
font-variant-numeric: tabular-nums;
}
.meta-grid .copyable {
cursor: pointer;
border-bottom: var(--hairline) dotted var(--ink-3);
transition: color 0.12s ease, border-color 0.12s ease;
}
.meta-grid .copyable:hover {
color: var(--stamp);
border-bottom-color: var(--stamp);
}
/* ─── Stat row ──────────────────────────────────────────────── */
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 1.5rem 0 0;
}
@media (max-width: 640px) {
.stat-row {
grid-template-columns: repeat(2, 1fr);
}
}
.stat {
padding: 1.4rem 1.25rem;
border-right: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
border-top: var(--hairline) solid var(--ink);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.stat:first-child {
border-left: var(--hairline) solid var(--ink);
}
@media (max-width: 640px) {
.stat:nth-child(odd) {
border-left: var(--hairline) solid var(--ink);
}
}
.stat-label {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
color: var(--ink-3);
}
.stat-value {
font-family: var(--serif);
font-size: 2.3rem;
line-height: 1;
color: var(--ink);
/* Fraunces digits are proportional by default; tabular keeps the four
stats (TOTAL / UNUSED / USED / BANNED) visually aligned in a row. */
font-variant-numeric: tabular-nums;
}
.stat-value.danger {
color: var(--stamp);
}
/* ─── Filter bar ────────────────────────────────────────────── */
.filter-bar {
display: flex;
gap: 0;
border: var(--hairline) solid var(--ink);
}
.filter-bar input, .filter-bar select {
border: none;
background: var(--field-bg);
padding: 0.55rem 0.75rem;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink);
}
.filter-bar input {
border-right: var(--hairline) solid var(--ink);
min-width: 14rem;
}
.filter-bar input:focus, .filter-bar select:focus {
outline: none;
background: var(--field-bg-focus);
}
/* ─── Data table ────────────────────────────────────────────── */
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 0.5rem;
font-size: 0.85rem;
border: var(--hairline) solid var(--ink);
}
.data-table th {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
font-weight: 500;
text-transform: uppercase;
color: var(--ink-3);
text-align: left;
padding: 0.7rem 0.85rem;
background: var(--paper-2);
border-bottom: var(--hairline) solid var(--ink);
white-space: nowrap;
}
.data-table td {
padding: 0.7rem 0.85rem;
border-bottom: var(--hairline) solid var(--paper-3);
vertical-align: middle;
/* Inter has proportional digits — tabular keeps dates / counts / IDs
lining up cleanly across rows in the data tables. */
font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover td {
background: var(--paper-2);
}
/* Leading multi-select column — keep it tight and centered on the box. */
.data-table th.col-select,
.data-table td.col-select {
width: 1%;
padding-right: 0.4rem;
text-align: center;
white-space: nowrap;
}
.data-table .col-select input {
cursor: pointer;
accent-color: var(--ink);
vertical-align: middle;
}
.data-table td.key {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
cursor: pointer;
white-space: nowrap;
transition: color 0.12s ease;
}
.data-table td.key:hover {
color: var(--stamp);
}
.data-table td.key::before {
content: "№ ";
color: var(--ink-3);
font-family: var(--serif);
font-size: 0.95rem;
margin-right: 0.2rem;
}
.bracket-tag {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
font-weight: 500;
}
.bracket-tag::before {
content: "[";
color: var(--ink-3);
}
.bracket-tag::after {
content: "]";
color: var(--ink-3);
}
.bracket-tag.unused {
color: var(--ink);
}
.bracket-tag.used {
color: var(--valid);
}
.bracket-tag.banned {
color: var(--stamp);
}
/* Expired (lapsed sub) and paused (soft hold) are non-punitive states —
muted rather than the red of a ban. The dash-pro skin lifts .expired to
amber on its own; this is the editorial/base treatment. */
.bracket-tag.expired,
.bracket-tag.paused {
color: var(--ink-3);
}
.row-actions {
display: flex;
gap: 0.35rem;
justify-content: flex-end;
}
.row-actions .icon-btn {
background: transparent;
border: var(--hairline) solid var(--ink-3);
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.55rem;
color: var(--ink-2);
cursor: pointer;
transition: all 0.1s ease;
}
.row-actions .icon-btn:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.row-actions .icon-btn.danger {
color: var(--stamp);
border-color: var(--stamp);
}
.row-actions .icon-btn.danger:hover {
background: var(--stamp);
color: var(--paper);
}
.date-tip {
font-size: 0.75rem;
color: var(--ink-3);
letter-spacing: 0.02em;
cursor: help;
}
/* ─── Dialogs ───────────────────────────────────────────────── */
.paper-dialog {
background: var(--paper);
color: var(--ink);
border: var(--hairline) solid var(--ink);
padding: 2rem;
min-width: 380px;
max-width: 92vw;
border-radius: 0;
box-shadow: 8px 8px 0 var(--ink);
}
.paper-dialog.wide {
min-width: 600px;
max-width: 92vw;
}
.paper-dialog::backdrop {
background: rgba(20, 17, 13, 0.55);
backdrop-filter: blur(2px);
}
.paper-dialog .display {
margin: 0.3rem 0 1rem;
}
.paper-dialog .muted {
margin: 0 0 1.25rem;
max-width: 36rem;
}
.paper-dialog .form {
gap: 0.95rem;
max-width: none;
}
.dialog-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.75rem;
}
.dialog-actions {
display: flex;
justify-content: space-between;
gap: 0.6rem;
margin-top: 0.6rem;
}
.dialog-actions.end {
justify-content: flex-end;
}
.secret-block {
display: flex;
gap: 0;
align-items: stretch;
border: var(--hairline) solid var(--ink);
background: var(--paper-2);
margin: 0.4rem 0 1.5rem;
}
.secret-block code {
flex: 1;
padding: 0.9rem 1rem;
font-family: var(--mono);
font-size: 0.78rem;
word-break: break-all;
color: var(--ink);
}
.secret-block .copy-btn {
border-left: var(--hairline) solid var(--ink);
border-width: 0 0 0 var(--hairline);
}
.keys-reveal-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 0.6rem;
}
.key-list {
border: var(--hairline) solid var(--ink);
max-height: 360px;
overflow-y: auto;
background: var(--paper-2);
}
.key-list .key-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.55rem 0.9rem;
border-bottom: var(--hairline) solid var(--paper-3);
font-family: var(--mono);
font-size: 0.8rem;
}
.key-list .key-row:last-child {
border-bottom: none;
}
.key-list .key-row:hover {
background: var(--paper-3);
}
.key-list .key-row .copy-icon {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
color: var(--ink-3);
cursor: pointer;
transition: color 0.12s ease;
}
.key-list .key-row .copy-icon:hover {
color: var(--stamp);
}
/* ─── Toasts ────────────────────────────────────────────────── */
#toasts {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--ink);
color: var(--paper);
border: var(--hairline) solid var(--ink);
padding: 0.7rem 1rem;
box-shadow: 4px 4px 0 var(--stamp);
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
min-width: 220px;
max-width: 380px;
animation: toastIn 0.18s ease-out;
display: flex;
align-items: center;
gap: 0.7rem;
}
.toast.success {
box-shadow: 4px 4px 0 var(--valid);
}
.toast.error {
background: var(--stamp);
box-shadow: 4px 4px 0 var(--ink);
}
.toast::before {
content: "▸";
color: var(--paper);
font-family: var(--serif);
}
.toast.success::before {
content: "✓";
}
.toast.error::before {
content: "✕";
}
.toast.leaving {
animation: toastOut 0.2s ease-in forwards;
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toastOut {
to {
opacity: 0;
transform: translateX(20px);
}
}
/* ─── Loading shimmer on async buttons ──────────────────────── */
.btn-primary.loading,
.btn-ghost.loading {
position: relative;
pointer-events: none;
}
.btn-primary.loading::after,
.btn-ghost.loading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: var(--stamp);
animation: btnLoad 0.9s ease-in-out infinite;
}
@keyframes btnLoad {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform: scaleX(1);
transform-origin: left;
}
50.01% {
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
/* ─── Page-load reveal ──────────────────────────────────────── */
.reveal {
animation: reveal 0.35s ease-out both;
}
@keyframes reveal {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ─── Sidebar layout ────────────────────────────────────────── */
/* Body becomes a flex row only when the sidebar is visible.
On auth views (sidebar hidden) the layout stays as before. */
body:has(#sidebar:not([hidden])) {
display: flex;
align-items: stretch;
}
#sidebar {
width: 260px;
flex-shrink: 0;
padding: 1.75rem 1.25rem 1.25rem;
border-right: var(--rule-thick) solid var(--ink);
background: var(--paper-2);
display: flex;
flex-direction: column;
gap: 1.4rem;
min-height: 100vh;
position: sticky;
top: 0;
align-self: flex-start;
z-index: 2;
background-image: radial-gradient(ellipse at 20% 0%, rgba(232,210,160,0.35), transparent 60%);
}
/* When sidebar is visible, let main fill the remaining space */
body:has(#sidebar:not([hidden])) main#app {
flex: 1;
min-width: 0;
max-width: none;
margin: 0;
padding: 2.5rem 2.5rem 6rem;
}
.sidebar-head {
display: flex;
flex-direction: column;
}
.sidebar-head .brand-mark {
font-size: 1.4rem;
display: block;
}
.sidebar-head .brand-sub {
font-size: 0.56rem;
margin-top: 0.4rem;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.sidebar-section {
margin: 0 0 0.55rem;
font-size: 0.62rem;
}
.sidebar-list {
list-style: none;
padding: 0.35rem 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
border-top: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
}
.sidebar-list li {
margin: 0;
}
.sidebar-list li button {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0.5rem 0.55rem;
font-family: var(--mono);
font-size: 0.76rem;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: baseline;
gap: 0.55rem;
letter-spacing: 0.02em;
transition: background 0.12s ease, padding-left 0.12s ease;
border-left: 2px solid transparent;
}
.sidebar-list li button:hover {
background: var(--paper-3);
padding-left: 0.8rem;
}
.sidebar-list li button.active {
background: var(--paper);
border-left-color: var(--stamp);
font-weight: 500;
padding-left: 0.8rem;
}
.sidebar-list .app-num {
font-family: var(--serif);
font-size: 0.88rem;
font-style: italic;
color: var(--ink-3);
flex-shrink: 0;
}
.sidebar-list li button.active .app-num {
color: var(--stamp);
}
.sidebar-list .app-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-muted {
font-size: 0.72rem;
color: var(--ink-3);
padding: 0.5rem 0.3rem;
margin: 0;
}
.sidebar-action {
margin-top: 0.7rem;
width: 100%;
background: transparent;
border: var(--hairline) dashed var(--ink);
padding: 0.65rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
color: var(--ink);
transition: background 0.12s ease, border-style 0.12s ease, color 0.12s ease;
}
.sidebar-action:hover {
background: var(--paper);
border-style: solid;
color: var(--stamp);
}
.sidebar-footer {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.sidebar-user {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.sidebar-user .kicker {
margin: 0;
font-size: 0.6rem;
}
.sidebar-username {
font-family: var(--serif);
font-size: 1.05rem;
font-style: italic;
color: var(--ink);
line-height: 1.1;
}
.sidebar-logout {
background: transparent;
border: 0;
padding: 0.3rem 0;
text-align: left;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
cursor: pointer;
transition: color 0.12s ease;
}
.sidebar-logout:hover {
color: var(--stamp);
}
.sidebar-logout .arrow {
display: inline-block;
transition: transform 0.12s ease;
}
.sidebar-logout:hover .arrow {
transform: translate(2px, -2px);
}
/* Mobile: sidebar collapses to a horizontal top strip */
@media (max-width: 820px) {
body:has(#sidebar:not([hidden])) {
flex-direction: column;
}
#sidebar {
width: 100%;
min-height: auto;
position: relative;
padding: 1rem 1.25rem;
border-right: 0;
border-bottom: var(--rule-thick) solid var(--ink);
flex-direction: row;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.sidebar-head {
flex: 1;
min-width: 0;
}
.sidebar-head .brand-sub {
display: none;
}
.sidebar-nav {
display: none;
}
.sidebar-footer {
flex-direction: row;
align-items: center;
gap: 1rem;
}
.sidebar-footer .rule {
display: none;
}
.sidebar-user {
flex-direction: row;
align-items: baseline;
gap: 0.4rem;
}
.sidebar-user .kicker {
display: none;
}
.sidebar-username {
font-size: 0.9rem;
}
body:has(#sidebar:not([hidden])) main#app {
padding: 1.5rem 1.25rem 4rem;
}
}
/* ─── Sidebar — per-app mode ────────────────────────────────── */
.sidebar-mode {
display: flex;
flex-direction: column;
}
/* Back link */
.sidebar-back {
background: transparent;
border: 0;
padding: 0.3rem 0;
margin-bottom: 1rem;
text-align: left;
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
transition: color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.sidebar-back:hover {
color: var(--stamp);
}
.sidebar-back .back-arrow {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
transition: transform 0.12s ease;
}
.sidebar-back:hover .back-arrow {
transform: translateX(-3px);
}
/* Current application block */
.sidebar-current {
padding: 0.7rem 0 1rem;
border-top: var(--hairline) solid var(--ink);
border-bottom: var(--hairline) solid var(--ink);
margin-bottom: 1.1rem;
}
.sidebar-current .kicker {
margin: 0 0 0.4rem;
font-size: 0.6rem;
}
.sidebar-current-name {
font-family: var(--serif);
font-size: 1.2rem;
line-height: 1.1;
margin: 0;
color: var(--ink);
font-style: italic;
word-break: break-word;
}
.sidebar-current-id {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
color: var(--ink-3);
margin: 0.25rem 0 0;
text-transform: uppercase;
}
/* Numbered nav list */
.sidebar-nav-list {
padding: 0.35rem 0;
}
.sidebar-nav-item {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0.55rem 0.55rem;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: baseline;
gap: 0.6rem;
letter-spacing: 0.02em;
transition: background 0.12s ease, padding-left 0.12s ease, color 0.12s ease;
border-left: 2px solid transparent;
}
.sidebar-nav-item:hover:not(.disabled) {
background: var(--paper-3);
padding-left: 0.8rem;
}
.sidebar-nav-item.active {
background: var(--paper);
border-left-color: var(--stamp);
font-weight: 500;
padding-left: 0.8rem;
}
.sidebar-nav-item .nav-num {
font-family: var(--serif);
font-style: italic;
font-size: 0.95rem;
color: var(--ink-3);
width: 1.6rem;
flex-shrink: 0;
}
.sidebar-nav-item.active .nav-num {
color: var(--stamp);
}
.sidebar-nav-item .nav-label {
flex: 1;
}
.sidebar-nav-item.disabled {
color: var(--ink-3);
cursor: not-allowed;
font-style: italic;
}
.sidebar-nav-item.disabled:hover {
background: var(--paper-3);
color: var(--ink-2);
}
.soon-tag {
font-family: var(--mono);
font-size: 0.55rem;
letter-spacing: 0.16em;
padding: 0.12rem 0.4rem;
border: var(--hairline) solid var(--ink-3);
color: var(--ink-3);
text-transform: uppercase;
font-style: normal;
border-radius: 1px;
}
/* Mobile: hide nav modes entirely; back link from main view still works */
@media (max-width: 820px) {
.sidebar-mode {
display: none;
}
}
/* ─── Dark mode ─────────────────────────────────────────────── */
/* Variables redefined for "paper at night" — dark warm brown
instead of cream, cream-toned ink reads on it. */
:root[data-theme="dark"] {
/* Tells the browser to render native form controls (password reveal eye,
scrollbars, select dropdown arrows, calendar widgets) in dark mode.
Without this, the Edge ::-ms-reveal eye renders as a dark icon
invisible against the dark input bg. */
color-scheme: dark;
--paper: #1a1612;
--paper-2: #221d17;
--paper-3: #2d2620;
--ink: #fdf7e8; /* brighter primary text */
--ink-2: #e3d9c1; /* brighter secondary */
--ink-3: #ada288; /* brighter muted */
--rule: #fdf7e8;
--stamp: #f25638;
--stamp-dim: #d04023;
--valid: #7fcf7f;
--field-bg: #15110d;
--field-bg-focus: #1f1a13;
}
/* The body has hardcoded warm radial-gradients. Tone them down in dark. */
:root[data-theme="dark"] body {
background-image: radial-gradient(ellipse at 10% 0%, rgba(232,210,160,0.04), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(200,49,26,0.08), transparent 55%);
}
/* The body::before paper-grain noise has dark colors baked into its SVG;
in dark mode just fade it heavily so it doesn't muddy the background. */
:root[data-theme="dark"] body::before {
opacity: 0.06;
}
/* Selection contrast in dark mode */
:root[data-theme="dark"] *::selection {
background: var(--ink);
color: var(--paper);
}
/* ─── Theme toggle button ───────────────────────────────────── */
.sidebar-theme-toggle {
background: transparent;
border: var(--hairline) solid var(--ink);
padding: 0.55rem 0.7rem;
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.6rem;
transition: background 0.12s ease, color 0.12s ease;
width: 100%;
}
.sidebar-theme-toggle:hover {
background: var(--paper-3);
color: var(--stamp);
}
.theme-icon {
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1;
}
/* On mobile the footer rows out; toggle stays compact */
@media (max-width: 820px) {
.sidebar-theme-toggle {
width: auto;
padding: 0.4rem 0.6rem;
font-size: 0.6rem;
}
.sidebar-theme-toggle .theme-label {
display: none;
}
}
/* ─── Users table cells ─────────────────────────────────────── */
.data-table td.user-name {
font-family: var(--mono);
font-weight: 500;
white-space: nowrap;
}
.data-table td.user-name::before {
content: "@";
color: var(--ink-3);
margin-right: 0.1rem;
}
.data-table td.user-hwid {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-3);
letter-spacing: 0.04em;
}
/* ─── Bulk action bar (licenses) ────────────────────────────── */
.bulk-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 0.65rem 0.9rem;
margin-top: 0.75rem;
background: var(--paper-2);
border: var(--hairline) solid var(--ink);
border-bottom: none;
}
.bulk-bar-count {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
}
.bulk-bar-count strong {
color: var(--ink);
font-weight: 700;
margin-right: 0.25rem;
}
.bulk-bar-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.bulk-bar-actions .btn-ghost {
padding: 0.45rem 0.85rem;
font-size: 0.65rem;
}
/* When bulk bar is visible, drop the table's top border so they read as one block */
.bulk-bar:not([hidden]) + .data-table {
margin-top: 0;
}
/* ─── Selection column ──────────────────────────────────────── */
.data-table th.col-select,
.data-table td.col-select {
width: 1.6rem;
padding-right: 0.4rem;
text-align: center;
}
.data-table td.col-select {
vertical-align: middle;
}
.data-table input[type="checkbox"] {
cursor: pointer;
accent-color: var(--ink);
margin: 0;
vertical-align: middle;
}
/* ─── Pagination ────────────────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
padding: 0.4rem 0;
border-top: var(--hairline) solid var(--paper-3);
flex-wrap: wrap;
}
.page-btn {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
font-weight: 500;
text-transform: uppercase;
padding: 0.5rem 0.9rem;
background: transparent;
color: var(--ink);
border: var(--hairline) solid var(--ink-3);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.page-btn:hover:not([disabled]) {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.page-btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.page-btn .page-arrow {
transition: transform 0.12s ease;
}
.page-btn:hover:not([disabled]) .page-arrow {
transform: translateX(2px);
}
.page-btn:first-child:hover:not([disabled]) .page-arrow {
transform: translateX(-2px);
}
/* Themed focus ring. Without this the button fell back to the browser's
default outline (a blue/black halo) that clashed with the mono palette
in both light and dark. --ink is theme-aware (near-black in light,
near-white in dark), matching the switch/checkbox focus treatment.
Mouse clicks get no stray ring; keyboard focus gets a clear one. */
.page-btn:focus { outline: none; }
.page-btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.page-info {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
justify-content: center;
}
.page-info strong {
color: var(--ink);
font-weight: 700;
}
.page-range {
font-size: 0.62rem;
color: var(--ink-3);
letter-spacing: 0.12em;
}
.page-range::before {
content: "· ";
color: var(--ink-3);
margin-right: 0.15rem;
}
/* ─── Settings panel ───────────────────────────────────────── */
.settings-form {
max-width: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-top: 0.6rem;
}
.settings-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.settings-section-kicker {
margin: 0;
color: var(--ink-3);
}
.settings-grid-two {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
@media (max-width: 760px) {
.settings-grid-two { grid-template-columns: 1fr; }
}
.settings-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.75rem;
margin-top: 0.25rem;
padding-top: 1rem;
border-top: 1px solid var(--ink-3);
}
/* ─── Service status card with toggle ──────────────────────── */
.status-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.65rem 1.25rem;
background: var(--paper-2);
border: 1px solid var(--ink);
border-left: 4px solid var(--valid);
transition: border-left-color 200ms, background 200ms;
}
.status-card.paused {
border-left-color: var(--stamp);
background: color-mix(in srgb, var(--stamp) 5%, var(--paper-2));
}
.status-card-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.status-card-meta .kicker { margin: 0 0 0.2rem 0; }
.status-card-title {
font-family: var(--serif);
font-size: 1.3rem;
font-style: italic;
margin: 0;
color: var(--ink);
line-height: 1.1;
}
.status-card-title strong {
font-weight: 400;
color: var(--valid);
border-bottom: 2px solid currentColor;
padding-bottom: 1px;
}
.status-card.paused .status-card-title strong { color: var(--stamp); }
.status-card-sub {
margin: 0.15rem 0 0 0;
font-family: var(--mono);
font-size: 0.74rem;
color: var(--ink-3);
letter-spacing: 0.04em;
}
/* ─── Switch (custom toggle) ───────────────────────────────── */
.switch {
--w: 60px;
--h: 32px;
--pad: 3px;
position: relative;
display: inline-block;
width: var(--w);
height: var(--h);
cursor: pointer;
flex-shrink: 0;
}
.switch.small { --w: 48px; --h: 26px; --pad: 3px; }
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.switch-track {
position: absolute;
inset: 0;
background: var(--paper-3);
border: 1px solid var(--ink);
border-radius: calc(var(--h) / 2);
transition: background 180ms ease;
}
.switch-thumb {
position: absolute;
top: var(--pad);
left: var(--pad);
width: calc(var(--h) - 2 * var(--pad) - 2px);
height: calc(var(--h) - 2 * var(--pad) - 2px);
background: var(--paper);
border: 1px solid var(--ink);
border-radius: 50%;
transition: transform 180ms ease, background 180ms ease;
box-shadow: 0 1px 2px rgba(20, 17, 13, 0.25);
}
.switch input:checked + .switch-track {
background: var(--valid);
}
.switch input:checked + .switch-track .switch-thumb {
transform: translateX(calc(var(--w) - var(--h)));
background: var(--paper);
}
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* ─── Broadcast card (developer message) ───────────────────── */
.broadcast-card {
border: 1px solid var(--ink);
background: var(--field-bg);
display: flex;
flex-direction: column;
}
.broadcast-head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
background: var(--paper-2);
border-bottom: 1px solid var(--ink);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-3);
text-transform: uppercase;
}
.broadcast-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--valid);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--valid) 30%, transparent);
flex-shrink: 0;
}
.broadcast-label { flex: 1; }
.broadcast-counter {
font-variant-numeric: tabular-nums;
color: var(--ink-3);
}
.broadcast-counter.near-limit { color: var(--stamp); }
.broadcast-card textarea {
border: 0;
background: transparent;
padding: 0.75rem 1rem;
font-family: var(--mono);
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink);
resize: vertical;
min-height: 70px;
outline: 0;
}
.broadcast-card textarea::placeholder { color: var(--ink-3); font-style: italic; }
.broadcast-card:focus-within {
outline: 1px solid var(--ink);
outline-offset: -2px;
}
/* ─── Inline help "?" badge + tooltip ───────────────────────────
Small circular "?" next to a heading; reveals an explanatory bubble on
hover or keyboard focus. Theme-aware (uses --ink / --surface). Tooltip
text comes from data-tip; aria-label carries the same text for AT. */
.help-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
margin-left: 0.4rem;
border: 1px solid var(--ink-3);
border-radius: 50%;
font-family: var(--sans);
font-size: 0.62rem;
font-weight: 700;
line-height: 1;
color: var(--ink-3);
text-transform: none;
letter-spacing: 0;
cursor: help;
position: relative;
vertical-align: middle;
transition: color 120ms ease, border-color 120ms ease;
}
.help-tip:hover,
.help-tip:focus-visible {
color: var(--ink);
border-color: var(--ink);
outline: none;
}
.help-tip::after {
content: attr(data-tip);
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 60;
width: max-content;
max-width: 280px;
padding: 0.55rem 0.7rem;
background: var(--surface, var(--paper-2));
color: var(--ink-2);
border: 1px solid var(--border-strong, var(--ink-3));
border-radius: 8px;
box-shadow: var(--shadow-md, 0 8px 20px -8px rgba(0, 0, 0, 0.4));
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
white-space: normal;
text-align: left;
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
transition: opacity 130ms ease, transform 130ms ease, visibility 130ms;
pointer-events: none;
}
.help-tip:hover::after,
.help-tip:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ─── Toggle row (HWID + similar) ──────────────────────────── */
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.75rem 1.1rem;
border: 1px solid var(--ink-3);
background: var(--field-bg);
}
.toggle-row-info { display: flex; flex-direction: column; gap: 0.2rem; }
.toggle-row-info strong {
font-family: var(--mono);
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--ink);
}
.toggle-row-info span {
font-size: 0.8rem;
color: var(--ink-3);
}
/* ─── Secret-reveal: code snippet block ────────────────────── */
.code-snippet {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.code-snippet pre {
margin: 0;
padding: 0.75rem 0.9rem;
background: color-mix(in srgb, currentColor 5%, transparent);
border: 1px solid var(--ink-3);
border-radius: 2px;
overflow-x: auto;
font-family: var(--mono);
font-size: 0.82rem;
line-height: 1.55;
white-space: pre;
}
.code-snippet pre code {
background: none;
padding: 0;
font-size: inherit;
}
.code-snippet .copy-btn {
align-self: flex-end;
}
/* ─── Admin overview: compact layout ──────────────────────── */
#view-admin .section-head { margin-bottom: 0.5rem; }
.stat-row.admin-stats {
grid-template-columns: repeat(6, 1fr);
margin: 1rem 0 0;
}
@media (max-width: 980px) {
.stat-row.admin-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
.stat-row.admin-stats { grid-template-columns: repeat(2, 1fr); }
}
#view-admin .stat {
padding: 0.9rem 1rem;
gap: 0.25rem;
}
#view-admin .stat-value {
font-size: 1.75rem;
}
#view-admin .stat-label {
font-size: 0.58rem;
}
/* 7-day activity as an inline strip, not a full section */
.admin-7d-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
padding: 0.65rem 1rem;
margin-top: 0.75rem;
background: var(--paper-2);
border: 1px solid var(--ink-3);
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.admin-7d-strip .kicker {
margin: 0;
padding-right: 1rem;
border-right: 1px solid var(--ink-3);
color: var(--ink-3);
}
.admin-7d-strip .strip-item {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.admin-7d-strip .strip-item strong {
font-family: var(--serif);
font-style: italic;
font-size: 1.2rem;
color: var(--ink);
font-weight: 400;
line-height: 1;
}
/* Compact section: just a kicker + optional button, no big display title */
.admin-section {
margin-top: 1.5rem;
}
.admin-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--ink-3);
}
.admin-section-head .kicker {
margin: 0;
font-size: 0.7rem;
color: var(--ink);
}
/* ─── Customer portal ──────────────────────────────────────── */
.portal-body {
background: var(--paper);
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 4rem 1.5rem 2rem;
}
.portal-main {
width: 100%;
max-width: 540px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.portal-card {
background: var(--paper-2);
border: 1px solid var(--ink);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.portal-card .kicker {
margin: 0;
color: var(--ink-3);
}
.portal-card .display {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: 2rem;
line-height: 1.05;
}
.portal-card .muted {
margin: 0 0 0.5rem 0;
color: var(--ink-3);
font-size: 0.88rem;
line-height: 1.5;
}
.portal-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--ink-3);
margin: 0.75rem 0 0.25rem;
}
.portal-tab {
flex: 1;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 0.7rem 0.5rem;
cursor: pointer;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-3);
transition: color 140ms, border-color 140ms;
}
.portal-tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
}
.portal-tab:hover { color: var(--ink); }
.portal-form {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.75rem;
}
.portal-form .btn-primary {
align-self: flex-start;
margin-top: 0.5rem;
}
/* ─── Customer dashboard ──────────────────────────────────── */
.portal-dashboard {
gap: 1.25rem;
}
.portal-dash-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.portal-dash-head .display em {
font-style: italic;
color: var(--ink);
}
.portal-sub-card {
border: 1px solid var(--ink);
background: var(--paper);
padding: 1.1rem 1.25rem;
border-left: 4px solid var(--ink-3);
}
.portal-sub-card.active { border-left-color: var(--valid); }
.portal-sub-card.expired { border-left-color: var(--stamp); }
.portal-sub-card .kicker { margin: 0 0 0.3rem 0; }
.portal-sub-status {
margin: 0 0 1rem 0;
font-family: var(--serif);
font-style: italic;
font-size: 1.3rem;
color: var(--ink);
}
.portal-sub-card.expired .portal-sub-status { color: var(--stamp); }
.portal-sub-card.active .portal-sub-status { color: var(--valid); }
.portal-sub-meta {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
.portal-sub-meta > div {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.portal-sub-meta .kicker { margin: 0; }
.portal-sub-value {
font-family: var(--mono);
font-size: 0.95rem;
color: var(--ink);
}
.portal-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem 1.25rem;
padding-top: 0.75rem;
border-top: 1px solid var(--ink-3);
}
.portal-info-grid > div {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.portal-info-grid .kicker { margin: 0; }
.portal-info-grid > div > :last-child {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--ink);
word-break: break-all;
}
.portal-info-wide { grid-column: 1 / -1; }
.portal-footer {
text-align: center;
margin: 1rem 0 0 0;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-3);
letter-spacing: 0.08em;
}
.portal-footer a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--ink-3);
}
.portal-footer a:hover { color: var(--ink); }
@media (max-width: 540px) {
.portal-info-grid { grid-template-columns: 1fr; }
.portal-sub-meta { grid-template-columns: 1fr; }
.portal-dash-head { flex-direction: column; }
}
/* ─── App meta: customer portal link cell ──────────────────── */
.portal-link-cell {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.portal-link-cell a {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
word-break: break-all;
}
.portal-link-cell a:hover { color: var(--stamp); }
.portal-copy-btn {
flex-shrink: 0;
padding: 0.3rem 0.65rem;
font-size: 0.7rem;
}
/* ─── Settings: distribution section ──────────────────────── */
.dist-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.9rem;
border: 1px solid var(--ink-3);
background: var(--field-bg);
flex-wrap: wrap;
}
.dist-label {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
color: var(--ink-3);
white-space: nowrap;
}
.dist-url {
flex: 1;
min-width: 200px;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
word-break: break-all;
}
.dist-url:hover { color: var(--stamp); }
.dist-action {
flex-shrink: 0;
padding: 0.3rem 0.65rem;
font-size: 0.7rem;
}
.dist-loader {
margin-top: 0.75rem;
border: 1px dashed var(--ink-3);
background: var(--field-bg);
transition: border-color 140ms, background 140ms, transform 140ms;
}
/* Filled loader (current) reads better with a solid border than dashed. */
.dist-loader:has(.dist-loader-current:not([hidden])) {
border-style: solid;
}
/* Drag-over feedback. Pointer-events on children get disabled so dragleave
doesn't flicker as the cursor crosses inner element boundaries. */
.dist-loader.drag-over {
border-color: var(--ink);
background: var(--paper, var(--field-bg));
transform: scale(1.005);
}
.dist-loader.drag-over * { pointer-events: none; }
.dist-loader-current {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
flex-wrap: wrap;
}
.dist-loader-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.dist-loader-meta strong {
font-family: var(--mono);
font-size: 0.88rem;
color: var(--ink);
word-break: break-all;
}
.dist-loader-meta .muted {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-3);
}
.dist-loader-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.dist-loader-empty {
padding: 1.1rem 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: center;
text-align: center;
}
/* Upload-arrow icon — Unicode glyph keeps it asset-free. */
.dist-loader-empty::before {
content: '\21EA'; /* ⇪ */
display: block;
font-size: 1.5rem;
line-height: 1;
color: var(--ink-3);
margin-bottom: 0.1rem;
transition: color 140ms, transform 140ms;
}
.dist-loader.drag-over .dist-loader-empty::before {
color: var(--ink);
transform: translateY(-2px);
}
.dist-loader-empty .dist-label { margin-bottom: 0; }
.dist-loader-empty .muted {
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
max-width: 38rem;
}
.dist-loader-empty .field-hint {
margin-top: 0.25rem;
font-style: italic;
opacity: 0.85;
}
/* ─── TAMPER CHECK hash drop-zone ─────────────────────────────
Visual twin of .dist-loader but for in-browser SHA-256 compute. No upload
happens — the file is read via FileReader and digested with crypto.subtle. */
.hash-dropzone {
margin-top: 0.75rem;
border: 1px dashed var(--ink-3);
background: var(--paper-2);
transition: border-color 140ms, background 140ms, transform 140ms;
cursor: pointer;
}
.hash-dropzone.drag-over {
border-color: var(--ink);
background: var(--paper, var(--field-bg));
transform: scale(1.005);
}
.hash-dropzone.drag-over * { pointer-events: none; }
.hash-dropzone-state {
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: center;
text-align: center;
}
.hash-dropzone-state strong {
font-family: var(--mono);
font-size: 0.92rem;
letter-spacing: 0.04em;
color: var(--ink);
}
.hash-dropzone-state em {
font-family: var(--mono);
font-style: normal;
color: var(--ink);
}
.hash-dropzone-state .muted {
margin: 0;
font-size: 0.8rem;
line-height: 1.5;
max-width: 38rem;
}
/* Mirrors .dist-loader-empty .field-hint so both dropzones read identically. */
.hash-dropzone-state .field-hint {
margin-top: 0.25rem;
font-style: italic;
opacity: 0.85;
}
/* Monochrome glyph for the empty state. \2317 (⌗) is the viewdata square —
reads as "hash" without summoning the colored emoji renderer that Windows
uses for U+1F5xx codepoints. */
.hash-dropzone-state[data-state="empty"]::before {
content: '\2317'; /* ⌗ */
display: block;
font-family: var(--mono);
font-size: 1.4rem;
line-height: 1;
color: var(--ink-3);
margin-bottom: 0.05rem;
transition: color 140ms, transform 140ms;
}
.hash-dropzone.drag-over .hash-dropzone-state[data-state="empty"]::before {
color: var(--ink);
transform: translateY(-2px) scale(1.08);
}
/* Tamper tab header: kicker row above the toggle. */
.tamper-head {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 0.3rem;
}
/* Toggle sits between the status head and the hash dropzone. */
.tamper-toggle-row { margin: 0.4rem 0 1.25rem; }
/* List of registered hashes, one row per stored entry. */
.hash-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.75rem;
}
.hash-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 0.85rem;
border: 1px solid var(--ink-3);
background: var(--field-bg);
}
.hash-row-meta {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
flex: 1;
}
.hash-row-meta strong {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hash-row-meta code {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-3);
word-break: break-all;
user-select: all; /* one click selects the whole hash */
}
.hash-row-meta .muted {
font-size: 0.7rem;
}
.hash-row .btn-ghost { flex-shrink: 0; }
.hash-empty-note {
margin-top: 0.6rem;
font-style: italic;
text-align: center;
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
/* Subtle animated dots while we're hashing. Pure CSS, no JS-driven RAF loop. */
.hash-dropzone-state[data-state="working"] strong::after {
content: '';
display: inline-block;
width: 1.2em;
text-align: left;
animation: hash-dots 1.1s steps(4, end) infinite;
}
@keyframes hash-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/* ─── Customer portal: download card ──────────────────────── */
.portal-download-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border: 1px solid var(--ink);
background: var(--paper);
flex-wrap: wrap;
}
.portal-download-card .kicker { margin: 0 0 0.25rem 0; }
.portal-download-name {
margin: 0;
font-family: var(--mono);
font-size: 0.95rem;
color: var(--ink);
word-break: break-all;
}
.portal-download-card .muted {
margin: 0.2rem 0 0 0;
font-family: var(--mono);
font-size: 0.74rem;
color: var(--ink-3);
}
.portal-download-card .btn-primary { flex-shrink: 0; }
/* ─── Settings: tab bar ───────────────────────────────────── */
.settings-tabbar {
display: flex;
gap: 0;
margin: 1.25rem 0 0;
border-bottom: 1px solid var(--ink-3);
}
.settings-tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 0.7rem 1.1rem;
cursor: pointer;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--ink-3);
text-transform: uppercase;
transition: color 140ms, border-color 140ms;
margin-bottom: -1px;
}
.settings-tab:hover { color: var(--ink); }
.settings-tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
}
.settings-tab-panel {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-top: 1rem;
}
/* Stack of related toggles (e.g. SECURITY: HWID lock + Require nonce).
One outer card, internal rows borderless with hairline dividers. */
.toggle-stack {
border: 1px solid var(--ink-3);
background: var(--field-bg);
display: flex;
flex-direction: column;
}
.toggle-row.in-stack {
border: 0;
background: transparent;
padding: 0.85rem 1.1rem;
}
.toggle-row.in-stack + .toggle-row.in-stack {
border-top: 1px solid var(--ink-3);
}
/* Opt-in toggle inside confirm dialogs (e.g. "also delete bound user").
Native checkbox is restyled into an iOS-style pill switch.
The dialog form globally uppercases