/* ============================================================
Auth57 Labs — Shared Stylesheet
Apply to all new Tailwind pages via:
============================================================ */
/* ── Fonts ─────────────────────────────────────────────────── */
/* Always pair with this Google Fonts link in :
*/
/* ── Design system tokens ───────────────────────────────────── */
:root {
/* Typography */
--font-mono: 'IBM Plex Mono', monospace;
--font-sans: 'IBM Plex Sans', sans-serif;
--font-display: 'IBM Plex Sans', sans-serif;
/* Core sizing */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 28px;
--radius-pill: 999px;
/* Semantic radius */
--radius-card: var(--radius-sm);
--radius-panel: var(--radius-md);
--radius-button: var(--radius-xs);
--radius-input: var(--radius-xs);
--radius-badge: var(--radius-xs);
--radius-avatar: var(--radius-pill);
/* Shared palette */
--color-cyan: #00D4C8;
--color-cyan-bright: #00E5FF;
--color-pink: #F64D82;
--color-sky: #83C9F5;
--color-navy: #0d2d4a;
--color-blue: #0066CC;
--color-ink: #111827;
--color-ink-deep: #0a0e1a;
--color-paper: #f9fafb;
--color-white: #ffffff;
--color-sand: #f0efea;
--color-sand-border: #e8e4de;
/* Theme semantic tokens */
--surface-bg: #f9fafb;
--surface-muted: #f3f4f6;
--surface-panel: #ffffff;
--surface-panel-alt: #f9fafb;
--surface-inverse: #111827;
--text-strong: #111827;
--text-default: #1f2937;
--text-muted: #6b7280;
--text-subtle: #9ca3af;
--text-inverse: #ffffff;
--text-inverse-muted: rgba(255, 255, 255, 0.58);
--border-strong: #d1d5db;
--border-default: #e5e7eb;
--border-soft: #eef2f7;
--accent-primary: #00D4C8;
--accent-primary-strong: #00bfb4;
--accent-secondary: #0066CC;
--accent-cta: #F64D82;
--accent-highlight: #83C9F5;
--shadow-card: 0 12px 32px rgba(17, 24, 39, 0.06);
--shadow-panel: 0 20px 48px rgba(17, 24, 39, 0.08);
/* Legacy aliases kept for existing pages */
--teal: var(--accent-primary);
--teal-dark: var(--accent-primary-strong);
--ink: var(--text-strong);
--ink-soft: var(--surface-inverse);
--sand: var(--surface-bg);
--sand-border: var(--border-default);
/* Nav */
--nav-bg: var(--surface-inverse);
--nav-active: var(--accent-primary);
--nav-inactive: rgba(255, 255, 255, 0.55);
--nav-label: rgba(255, 255, 255, 0.2);
--nav-divider: rgba(255, 255, 255, 0.06);
--nav-font-size: 14px;
/* Topbar */
--topbar-height: 56px;
--topbar-dark-bg: var(--surface-inverse);
--topbar-light-bg: var(--surface-bg);
--topbar-border: var(--border-default);
--sidebar-width: 200px;
/* Status pills */
--pill-required-bg: #FFF3CD;
--pill-required-text: #7A4F00;
--pill-required-border: #F59E0B;
--pill-required-dot: #F59E0B;
--pill-clear-bg: #DCFCE7;
--pill-clear-text: #14532D;
--pill-clear-border: #22C55E;
--pill-clear-dot: #22C55E;
--pill-denied-bg: #FEE2E2;
--pill-denied-text: #7F1D1D;
--pill-denied-border: #EF4444;
--pill-denied-dot: #EF4444;
--pill-unknown-bg: #F1F5F9;
--pill-unknown-text: #475569;
--pill-unknown-border: #94A3B8;
--pill-unknown-dot: #94A3B8;
/* CTA buttons */
--btn-primary-bg: var(--accent-primary);
--btn-primary-text: var(--color-ink-deep);
--btn-upgrade-bg: #F59E0B;
--btn-upgrade-text: var(--color-ink-deep);
}
/* ── Product themes ─────────────────────────────────────────── */
body.theme-auth57-core,
body.theme-default {
--font-display: 'IBM Plex Sans', sans-serif;
--radius-card: 8px;
--radius-panel: 12px;
--radius-button: 4px;
--radius-input: 4px;
--radius-badge: 4px;
--surface-bg: #f9fafb;
--surface-muted: #f3f4f6;
--surface-panel: #ffffff;
--surface-panel-alt: #f9fafb;
--surface-inverse: #111827;
--text-strong: #111827;
--text-default: #1f2937;
--text-muted: #6b7280;
--text-subtle: #9ca3af;
--text-inverse: #ffffff;
--text-inverse-muted: rgba(255, 255, 255, 0.58);
--border-strong: #d1d5db;
--border-default: #e5e7eb;
--border-soft: #eef2f7;
--accent-primary: #00D4C8;
--accent-primary-strong: #00bfb4;
--accent-secondary: #0066CC;
--accent-cta: #F64D82;
--accent-highlight: #83C9F5;
--shadow-card: 0 10px 24px rgba(17, 24, 39, 0.05);
--shadow-panel: 0 18px 42px rgba(17, 24, 39, 0.08);
}
body.theme-watch {
--font-display: 'IBM Plex Mono', monospace;
--radius-card: 10px;
--radius-panel: 14px;
--radius-button: 8px;
--radius-input: 8px;
--radius-badge: 6px;
--surface-bg: #f4f1eb;
--surface-muted: #ede8de;
--surface-panel: #fffdf9;
--surface-panel-alt: #f9f6ef;
--surface-inverse: #111827;
--text-strong: #101828;
--text-default: #243040;
--text-muted: #6b7280;
--text-subtle: #98a2b3;
--text-inverse: #ffffff;
--text-inverse-muted: rgba(255, 255, 255, 0.66);
--border-strong: #d9d0c1;
--border-default: #e6dccf;
--border-soft: #f1ebe2;
--accent-primary: #00D4C8;
--accent-primary-strong: #0a8f87;
--accent-secondary: #0d2d4a;
--accent-cta: #F64D82;
--accent-highlight: #f59e0b;
--shadow-card: 0 14px 38px rgba(17, 24, 39, 0.08);
--shadow-panel: 0 28px 64px rgba(17, 24, 39, 0.12);
}
body.theme-meridian {
--font-display: 'IBM Plex Sans', sans-serif;
--radius-card: 18px;
--radius-panel: 24px;
--radius-button: 18px;
--radius-input: 14px;
--radius-badge: 999px;
--surface-bg: #f7f6f2;
--surface-muted: #f0ede5;
--surface-panel: #ffffff;
--surface-panel-alt: #fbfaf7;
--surface-inverse: #0d2d4a;
--text-strong: #0d2d4a;
--text-default: #244867;
--text-muted: #5f7590;
--text-subtle: #8ba0b6;
--text-inverse: #ffffff;
--text-inverse-muted: rgba(255, 255, 255, 0.7);
--border-strong: #c9d4df;
--border-default: #dde5ec;
--border-soft: #ebf0f4;
--accent-primary: #83C9F5;
--accent-primary-strong: #5aaedb;
--accent-secondary: #0066CC;
--accent-cta: #0d2d4a;
--accent-highlight: #00D4C8;
--shadow-card: 0 16px 42px rgba(13, 45, 74, 0.08);
--shadow-panel: 0 30px 72px rgba(13, 45, 74, 0.12);
}
body.theme-api {
--font-display: 'IBM Plex Sans', sans-serif;
--radius-card: 14px;
--radius-panel: 18px;
--radius-button: 12px;
--radius-input: 12px;
--radius-badge: 999px;
--surface-bg: #f8fbfd;
--surface-muted: #f1f6fa;
--surface-panel: #ffffff;
--surface-panel-alt: #f8fbfd;
--surface-inverse: #0f172a;
--text-strong: #0f172a;
--text-default: #1e293b;
--text-muted: #64748b;
--text-subtle: #94a3b8;
--text-inverse: #ffffff;
--text-inverse-muted: rgba(255, 255, 255, 0.7);
--border-strong: #cbd5e1;
--border-default: #e2e8f0;
--border-soft: #eff6ff;
--accent-primary: #00D4C8;
--accent-primary-strong: #00bfb4;
--accent-secondary: #0066CC;
--accent-cta: #0066CC;
--accent-highlight: #83C9F5;
--shadow-card: 0 14px 34px rgba(15, 23, 42, 0.07);
--shadow-panel: 0 26px 56px rgba(15, 23, 42, 0.1);
}
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-sans); background: var(--ink-soft); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
/* ── Shared Brand ───────────────────────────────────────────── */
.a57-brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.a57-brand-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.a57-brand-mark::before {
content: "";
width: 27px;
height: 27px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0.8L10.55 7.45L17.2 9L10.55 10.55L9 17.2L7.45 10.55L0.8 9L7.45 7.45L9 0.8Z' fill='%2300D4C8'/%3E%3Cpath d='M9 3.45L10.05 7.95L14.55 9L10.05 10.05L9 14.55L7.95 10.05L3.45 9L7.95 7.95L9 3.45Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.a57-brand-bracket {
display: none;
}
.a57-brand-star {
display: none;
}
.a57-brand-wordmark {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.a57-brand-wordmark span { color: inherit; }
.a57-brand--sm { gap: 10px; }
.a57-brand--sm .a57-brand-mark { width: 30px; height: 30px; }
.a57-brand--sm .a57-brand-mark::before { width: 24px; height: 24px; }
.a57-brand--sm .a57-brand-wordmark { font-size: 19px; letter-spacing: 0.08em; }
.a57-brand--ink .a57-brand-wordmark { color: var(--text-strong); }
.a57-brand--ink .a57-brand-mark::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0.8L10.55 7.45L17.2 9L10.55 10.55L9 17.2L7.45 10.55L0.8 9L7.45 7.45L9 0.8Z' fill='%2300D4C8'/%3E%3Cpath d='M9 3.45L10.05 7.95L14.55 9L10.05 10.05L9 14.55L7.95 10.05L3.45 9L7.95 7.95L9 3.45Z' fill='%23111827'/%3E%3C/svg%3E");
}
/* ── Layout shell ───────────────────────────────────────────── */
.a57-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.a57-body { display: flex; flex: 1; overflow: hidden; }
.a57-main { flex: 1; background: var(--sand); overflow-y: auto; padding: 32px 36px 60px; }
/* ── Topbar ─────────────────────────────────────────────────── */
.a57-topbar {
display: flex;
align-items: stretch;
height: var(--topbar-height);
flex-shrink: 0;
}
.a57-topbar-logo {
width: var(--sidebar-width);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 0 24px;
background: var(--topbar-dark-bg);
border-right: 1px solid #1e3333;
border-bottom: 2px solid var(--teal);
text-decoration: none;
}
.a57-topbar-logo-box {
width: 28px;
height: 28px;
background: var(--teal);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.a57-topbar-logo-text {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.4px;
color: #fff;
}
.a57-topbar-center {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 0 36px;
background: var(--topbar-light-bg);
border-bottom: 1px solid var(--topbar-border);
}
.a57-topbar-plan {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ink);
}
.a57-topbar-right {
display: flex;
align-items: center;
gap: 16px;
padding: 0 36px;
background: var(--topbar-light-bg);
border-bottom: 1px solid var(--topbar-border);
}
.a57-user-email { font-size: 13px; color: #6a6a62; }
.a57-signout {
font-size: 13px;
color: #8a8a82;
text-decoration: none;
transition: color 0.15s;
}
.a57-signout:hover { color: #4a4a42; }
/* ── Sidebar ────────────────────────────────────────────────── */
.a57-sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: 20px 0 8px;
background: var(--nav-bg);
overflow-y: auto;
}
.a57-nav-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--nav-label);
padding: 0 20px 8px;
}
.a57-nav-divider {
margin: 8px 20px;
border: none;
border-top: 1px solid var(--nav-divider);
}
.a57-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 20px;
font-size: var(--nav-font-size);
font-weight: 500;
color: var(--nav-inactive);
border-left: 2px solid transparent;
text-decoration: none;
transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.a57-nav-item:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.03);
}
.a57-nav-item.active {
color: var(--nav-active);
border-left-color: var(--nav-active);
background: rgba(0, 212, 200, 0.06);
}
.a57-nav-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.6;
}
.a57-nav-item.active svg { opacity: 1; }
/* ── Page header ────────────────────────────────────────────── */
.a57-breadcrumb {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8a8a82;
margin-bottom: 8px;
}
.a57-page-title {
font-size: 22px;
font-weight: 700;
color: var(--ink);
margin-bottom: 28px;
}
/* ── Result cards ───────────────────────────────────────────── */
.a57-card {
background: #fff;
border: 1px solid var(--sand-border);
border-left: 4px solid var(--teal);
padding: 20px 28px;
margin-bottom: 2px;
}
.a57-card-state {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 3px;
}
.a57-card-title {
font-size: 16px;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.a57-card-meta {
font-size: 12px;
color: #9ca3af;
margin-top: 10px;
display: flex;
gap: 8px;
align-items: center;
}
.a57-card-meta-sep { color: #d1d5db; }
/* Card left border colors per status */
.a57-card-required { border-left-color: var(--pill-required-border); }
.a57-card-clear { border-left-color: var(--pill-clear-border); }
.a57-card-denied { border-left-color: var(--pill-denied-border); }
.a57-card-unknown { border-left-color: var(--pill-unknown-border); }
/* ── Status pills ───────────────────────────────────────────── */
.a57-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1.5px solid;
white-space: nowrap;
}
.a57-pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.a57-pill-required {
background: var(--pill-required-bg);
color: var(--pill-required-text);
border-color: var(--pill-required-border);
}
.a57-pill-required .a57-pill-dot { background: var(--pill-required-dot); }
.a57-pill-clear {
background: var(--pill-clear-bg);
color: var(--pill-clear-text);
border-color: var(--pill-clear-border);
}
.a57-pill-clear .a57-pill-dot { background: var(--pill-clear-dot); }
.a57-pill-denied {
background: var(--pill-denied-bg);
color: var(--pill-denied-text);
border-color: var(--pill-denied-border);
}
.a57-pill-denied .a57-pill-dot { background: var(--pill-denied-dot); }
.a57-pill-unknown {
background: var(--pill-unknown-bg);
color: var(--pill-unknown-text);
border-color: var(--pill-unknown-border);
}
.a57-pill-unknown .a57-pill-dot { background: var(--pill-unknown-dot); }
/* ── Confidence badge ───────────────────────────────────────── */
.a57-confidence {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
background: #faeeda;
color: #633806;
}
/* ── CTA buttons ────────────────────────────────────────────── */
.a57-btn {
display: inline-block;
padding: 12px 28px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s, transform 0.1s;
cursor: pointer;
border: none;
white-space: nowrap;
}
.a57-btn:active { transform: scale(0.98); }
.a57-btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.a57-btn-primary:hover { background: var(--teal-dark); }
.a57-btn-upgrade {
background: var(--btn-upgrade-bg);
color: var(--btn-upgrade-text);
}
.a57-btn-upgrade:hover { background: #e08d00; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
.a57-sidebar { display: none; }
.a57-topbar-logo { width: auto; }
.a57-main { padding: 24px 20px 40px; }
}