/* =========================================================================
COWORK DESIGN SYSTEM · v1.0
A portable, rebrandable UI kit (dark + light) extracted from the
INVNT × Claude Cowork hub. Drop this one file into any page.
QUICK START
1) Add the fonts to :
…
REBRAND IN 10 SECONDS
Change the four --brand-accent* values in :root below (and, if you like,
--canvas / the ivory used in [data-theme="light"]). Every component
re-colors automatically because they all reference semantic tokens.
========================================================================= */
/* -------------------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------------------- */
:root {
/* --- BRAND SEED (change these to rebrand) --- */
--brand-accent: #D97757; /* primary action / accent */
--brand-accent-light: #EC9A7C; /* lighter accent (dark-mode hover) */
--brand-accent-deep: #BD5D3A; /* deeper accent (light-mode action) */
--brand-accent-deeper: #9E4426; /* deepest accent (light-mode hover) */
--brand-ivory: #F0EEE6; /* warm light-mode canvas */
/* --- DARK THEME (default) --- */
--canvas: #0F0E0C;
--surface-1: #1A1815;
--surface-2: #252220;
--surface-3: #322E29;
--ink: #FAF9F6;
--ink-muted: #B8B0A6;
--ink-dim: #837B71;
--hairline: rgba(255,255,255,0.10);
--hairline-soft: rgba(255,255,255,0.05);
--accent: var(--brand-accent);
--accent-strong: var(--brand-accent-light);
--on-accent: #FFFFFF;
--logo-color: var(--ink);
/* semantic status colors */
--ok: #5FB58E; --ok-soft: rgba(95,181,142,0.14); --ok-border: rgba(95,181,142,0.38);
--warn: #E0A35E; --warn-soft: rgba(224,163,94,0.14);
--no: #E0735E; --no-soft: rgba(224,115,94,0.14); --no-border: rgba(224,115,94,0.40);
/* accent helpers (rgba of the accent for glows/soft fills) */
--accent-rgb: 217,119,87;
--gradient-accent: linear-gradient(135deg, var(--brand-accent-deeper) 0%, var(--brand-accent) 55%, var(--brand-accent-light) 100%);
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 20px;
--maxw: 1199px;
}
[data-theme="light"] {
--canvas: var(--brand-ivory);
--surface-1: #E8E4D8;
--surface-2: #DED9CB;
--surface-3: #CFC8B6;
--ink: #1A1815;
--ink-muted: #4A443C;
--ink-dim: #837B71;
--hairline: rgba(26,24,21,0.14);
--hairline-soft: rgba(26,24,21,0.07);
--accent: var(--brand-accent-deep);
--accent-strong: var(--brand-accent-deeper);
--logo-color: var(--brand-accent-deep);
--ok: #2E7D58;
--warn: #B5791F;
--no: #B24A36;
}
/* -------------------------------------------------------------------------
2. BASE / RESET
------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--canvas); color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-feature-settings: 'cv01','cv05','cv09','cv11','ss03','ss07','dlig';
font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
transition: background 0.5s cubic-bezier(0.4,0,0.2,1), color 0.5s cubic-bezier(0.4,0,0.2,1);
}
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-strong); }
em { font-style: normal; color: var(--accent); }
img { max-width: 100%; display: block; }
/* -------------------------------------------------------------------------
3. TYPOGRAPHY
------------------------------------------------------------------------- */
.display-xxl, .display-xl, .display-lg, .display-md {
font-family: 'Mona Sans', 'Inter', sans-serif; font-weight: 600; color: var(--ink);
}
.display-xxl { font-size: clamp(54px, 8.5vw, 104px); line-height: 0.86; letter-spacing: 0; }
.display-xl { font-size: clamp(44px, 6.5vw, 85px); line-height: 0.95; letter-spacing: 0; }
.display-lg { font-size: clamp(34px, 4.5vw, 60px); line-height: 1; letter-spacing: 0; }
.display-md { font-size: clamp(20px, 2.4vw, 32px); line-height: 1.13; letter-spacing: 0; }
.subhead { font-size: 22px; line-height: 1.35; letter-spacing: 0; font-weight: 400; color: var(--ink-muted); }
.lede { font-size: 18px; line-height: 1.5; color: var(--ink-muted); }
.micro { font-size: 11px; line-height: 1.2; letter-spacing: 0.10em; font-weight: 600; text-transform: uppercase; color: var(--ink-dim); }
.eyebrow-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
/* -------------------------------------------------------------------------
4. LAYOUT
------------------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 810px) { .container { padding: 0 20px; } }
.section { padding: 40px 0; }
.section h2 { margin-bottom: 12px; }
.section-sub { margin-bottom: 34px; max-width: 62ch; color: var(--ink-muted); font-size: 18px; line-height: 1.5; }
.stack > * + * { margin-top: 12px; } /* simple vertical rhythm helper */
/* -------------------------------------------------------------------------
5. NAV / HEADER
------------------------------------------------------------------------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--canvas) 84%, transparent);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-bottom: 1px solid var(--hairline-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 810px) { .nav-inner { padding: 0 20px; height: 68px; } }
.nav-brand { display: flex; align-items: center; gap: 14px; }
.nav-brand .sep { color: var(--ink-dim); font-weight: 300; font-size: 16px; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 950px) { .nav-links { display: none; } }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.wordmark { font-family: 'Mona Sans','Inter',sans-serif; font-weight: 600; font-size: 21px; letter-spacing: 0; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.spark { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
/* -------------------------------------------------------------------------
6. BUTTONS / PILLS
------------------------------------------------------------------------- */
.pill {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
letter-spacing: 0; border-radius: 100px; padding: 11px 19px; white-space: nowrap; text-decoration: none;
transition: transform 0.15s, background 0.2s, color 0.2s, opacity 0.2s;
}
.pill:active { transform: scale(0.97); }
.pill-primary { background: var(--accent); color: var(--on-accent); }
.pill-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.pill-ghost { background: var(--surface-1); color: var(--ink); }
.pill-ghost:hover { background: var(--surface-2); color: var(--ink); }
.pill-on-dark { background: #FFFFFF; color: #20140E; }
.pill-on-dark:hover { opacity: 0.92; color: #20140E; }
.pill-outline-dark { background: rgba(255,255,255,0.10); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.30); }
.pill-outline-dark:hover { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.pill-icon {
width: 42px; height: 42px; padding: 0; background: var(--surface-1); color: var(--ink);
border: none; cursor: pointer; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background 0.2s;
}
.pill-icon:hover { background: var(--surface-2); }
.pill-icon svg { width: 18px; height: 18px; flex: 0 0 auto; }
.theme-toggle svg { position: absolute; transition: opacity 0.3s; }
/* Theme toggle (sun/moon swap by current theme) */
[data-theme="dark"] .theme-toggle .sun { opacity: 1; }
[data-theme="dark"] .theme-toggle .moon { opacity: 0; }
[data-theme="light"] .theme-toggle .sun { opacity: 0; }
[data-theme="light"] .theme-toggle .moon { opacity: 1; }
/* -------------------------------------------------------------------------
7. BADGES / STATUS
------------------------------------------------------------------------- */
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: var(--surface-2); color: var(--ink-muted); }
.tag.accent { background: rgba(var(--accent-rgb),0.16); color: var(--accent); }
.status-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; }
.status-pill.open { background: rgba(var(--accent-rgb),0.16); color: var(--accent-strong); }
.status-pill.req { background: var(--brand-accent-deeper); color: #FFFFFF; }
.status-pill.up { background: var(--surface-2); color: var(--ink-muted); }
/* level pills for comparison tables */
.lvl { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.lvl.high { background: var(--ok-soft); color: var(--ok); }
.lvl.mid { background: var(--warn-soft); color: var(--warn); }
.lvl.low { background: var(--no-soft); color: var(--no); }
/* confidential / lock chip */
.conf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 100px; padding: 5px 11px; }
[data-theme="light"] .conf-chip { color: var(--brand-accent-deeper); }
.conf-chip svg { width: 11px; height: 11px; }
/* live-dot pulse (use inside a pill/note) */
.dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: ds-pulse 2.5s ease-in-out infinite; }
@keyframes ds-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); } }
/* -------------------------------------------------------------------------
8. CARDS
------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; min-height: 150px; transition: background 0.2s, transform 0.2s; }
.card:hover { background: var(--surface-2); transform: translateY(-2px); }
.card .c-tag { font-family:'Mona Sans','Inter',sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 9px; }
.card .c-title { font-family:'Mona Sans','Inter',sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.25; color: var(--ink); margin-bottom: 6px; }
.card .c-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); flex: 1; }
.card .c-foot { margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.card .c-foot::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* -------------------------------------------------------------------------
9. STAT TILES
------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius); padding: 24px 22px; }
.tile .t-num { font-family:'Mona Sans','Inter',sans-serif; font-size: 40px; font-weight: 600; letter-spacing: 0; color: var(--ink); line-height: 1; margin-bottom: 8px; }
.tile .t-num em { color: var(--accent); font-style: normal; }
.tile .t-label { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
/* -------------------------------------------------------------------------
10. PANELS
------------------------------------------------------------------------- */
.panel { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius); padding: 22px 24px; }
.panel.accent { border-color: rgba(var(--accent-rgb),0.4); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.07) 0%, rgba(var(--accent-rgb),0) 70%); }
.panel .p-kick { font-family:'Mona Sans','Inter',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.panel .p-title { font-family:'Mona Sans','Inter',sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: 10px; }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li { padding: 7px 0; font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; display: flex; gap: 9px; border-bottom: 1px solid var(--hairline-soft); }
.panel li:last-child { border-bottom: none; }
.panel li::before { content:''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .grid-2 { grid-template-columns: 1fr; } }
/* -------------------------------------------------------------------------
11. TABLES
------------------------------------------------------------------------- */
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th { text-align: left; font-family:'Mona Sans','Inter',sans-serif; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: bottom; }
table.grid td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--hairline-soft); color: var(--ink-muted); vertical-align: top; line-height: 1.5; }
table.grid td strong { color: var(--ink); font-weight: 600; }
table.grid tr:last-child td { border-bottom: none; }
/* -------------------------------------------------------------------------
12. CALLOUT
------------------------------------------------------------------------- */
.callout { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 22px; }
.callout p { margin: 0; font-size: 14px; color: var(--ink-muted); }
.callout p strong { color: var(--ink); }
/* -------------------------------------------------------------------------
13. ACCORDION (generic — pair with cowork-design-system.js)
Markup:
JS toggles .open on .acc-item.
------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.acc-item { background: var(--surface-1); border-radius: var(--radius); overflow: hidden; transition: background 0.2s; }
.acc-item:hover:not(.open) { background: var(--surface-2); }
.acc-trigger { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--ink); font-family:'Mona Sans','Inter',sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.acc-trigger .acc-spacer { flex: 1; }
.acc-chevron { width: 18px; height: 18px; color: var(--ink-muted); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.acc-item.open .acc-chevron { transform: rotate(180deg); color: var(--accent); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4,0,0.2,1); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > .acc-inner { overflow: hidden; }
.acc-panel .acc-body { padding: 0 24px 20px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
/* Numbered action list (nice inside accordion panels) */
.actions { list-style: none; padding: 0; margin: 0; }
.actions li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); }
.actions li:last-child { border-bottom: none; }
.actions .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family:'Mona Sans','Inter',sans-serif; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.actions .text strong { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; line-height: 1.35; }
.actions .text span { display: block; color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
/* -------------------------------------------------------------------------
14. HORIZONTAL TIMELINE
------------------------------------------------------------------------- */
.ptimeline { display: flex; gap: 6px; }
.pt-item { flex: 1; position: relative; padding-top: 30px; text-align: center; }
.pt-item::before { content:''; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: var(--hairline); z-index: 0; }
.pt-item:last-child::before { display: none; }
.pt-item.done::before { background: var(--accent); }
.pt-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--hairline); z-index: 1; transition: background .2s, border-color .2s; }
.pt-item.done .pt-dot { background: var(--accent); border-color: var(--accent); }
.pt-item.active .pt-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.18); animation: ds-pulse 2.6s ease-in-out infinite; }
.pt-when { font-family:'Mona Sans','Inter',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.pt-label { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.pt-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.3; }
@media (max-width: 760px) {
.ptimeline { flex-direction: column; gap: 0; }
.pt-item { padding: 12px 0 12px 30px; text-align: left; }
.pt-item::before { top: 0; left: 8px; width: 2px; height: 100%; }
.pt-item:last-child::before { display: block; height: 14px; }
.pt-dot { top: 14px; left: 8px; transform: none; }
}
/* -------------------------------------------------------------------------
15. DO / DON'T COLUMNS
------------------------------------------------------------------------- */
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .dd-grid { grid-template-columns: 1fr; } }
.dd { border-radius: var(--radius); padding: 24px 26px; border: 1px solid var(--hairline-soft); }
.dd.yes { background: var(--ok-soft); border-color: var(--ok-border); }
.dd.no { background: var(--no-soft); border-color: var(--no-border); }
.dd h4 { font-family:'Mona Sans','Inter',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.dd.yes h4 { color: var(--ok); }
.dd.no h4 { color: var(--no); }
.dd ul { list-style: none; padding: 0; margin: 0; }
.dd li { padding: 8px 0; font-size: 14px; line-height: 1.45; color: var(--ink); border-bottom: 1px solid var(--hairline-soft); display: flex; gap: 10px; }
.dd li:last-child { border-bottom: none; }
.dd li::before { flex-shrink: 0; font-weight: 700; }
.dd.yes li::before { content:'✓'; color: var(--ok); }
.dd.no li::before { content:'✕'; color: var(--no); }
/* -------------------------------------------------------------------------
16. SPOTLIGHT (full-bleed gradient CTA)
------------------------------------------------------------------------- */
.spotlight { border-radius: 30px; padding: 48px 44px; color: #FFFFFF; position: relative; overflow: hidden; background: var(--gradient-accent); }
@media (max-width: 810px) { .spotlight { padding: 36px 26px; } }
.spotlight h3 { font-family:'Mona Sans','Inter',sans-serif; font-size: clamp(26px,3.5vw,38px); font-weight: 600; letter-spacing: 0; line-height: 1.05; margin-bottom: 14px; max-width: 24ch; }
.spotlight p { font-size: 16px; line-height: 1.55; max-width: 60ch; color: rgba(255,255,255,0.95); margin-bottom: 24px; }
/* -------------------------------------------------------------------------
17. DRAWER (right-side slide-in) + SCRIM
Toggle .open on .drawer and .scrim via JS.
------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(10,8,6,0.55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.35s; z-index: 90; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(620px, 94vw); background: var(--canvas); border-left: 1px solid var(--hairline); z-index: 91; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,0.35); }
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--hairline-soft); flex-shrink: 0; }
.drawer-body { overflow-y: auto; padding: 26px; }
.drawer-close { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-1); border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.drawer-close:hover { background: var(--surface-2); }
/* -------------------------------------------------------------------------
18. MODAL / PASSWORD GATE (centered)
------------------------------------------------------------------------- */
.gate { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.gate.open { opacity: 1; pointer-events: auto; }
.gate-scrim { position: absolute; inset: 0; background: rgba(10,8,6,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gate-card { position: relative; z-index: 1; width: min(390px, 94vw); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); transform: translateY(10px) scale(0.98); transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1); }
.gate.open .gate-card { transform: none; }
.gate-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--accent-rgb),0.16); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.gate-title { font-family:'Mona Sans','Inter',sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.gate-sub { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 18px; }
.input { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.2s; }
.input:focus { outline: none; border-color: var(--accent); }
.field-err { font-size: 12.5px; color: var(--no); min-height: 16px; margin: 8px 2px 0; }
/* -------------------------------------------------------------------------
19. FOOTER
------------------------------------------------------------------------- */
.footer { padding: 56px 0 40px; border-top: 1px solid var(--hairline-soft); margin-top: 20px; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.foot-meta { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; }
.foot-meta a { color: var(--ink-muted); }
.foot-meta a:hover { color: var(--ink); }
/* -------------------------------------------------------------------------
20. MASKED LOGO HELPER
Recolors a PNG/SVG silhouette to --logo-color so a single logo asset
works in both dark and light themes.