:root { color-scheme: dark; --bg:#10151a; --surface:#172128; --surface-2:#1e2b33; --line:#2b3b45; --text:#e5eef1; --muted:#9bb0b8; --accent:#4fd1b5; --accent-ink:#08231f; --danger:#f08080; --focus:#8ee7d5; } * { box-sizing:border-box; } body { min-width:320px; margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .site-header,.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); } .site-footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); font-size:.875rem; } .brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--text); font-weight:700; text-decoration:none; } .site-nav { display:flex; gap:.9rem; } .site-nav a { color:var(--muted); text-decoration:none; } .site-nav a:hover,.site-nav a:focus-visible { color:var(--accent); } .locale-form { margin-left:auto; } .locale-form select { min-height:34px; padding:.3rem .55rem; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); } .page-shell { width:min(100% - 2rem,1100px); min-height:calc(100vh - 150px); margin:0 auto; padding:clamp(2rem,6vw,5rem) 0; } .card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,var(--surface),#142027); box-shadow:0 14px 40px #0004; } .hero { max-width:720px; padding:clamp(2rem,7vw,5rem); } .auth-card,.message-card { width:min(100%,480px); margin:0 auto; padding:2rem; } .eyebrow { margin:0; color:var(--accent); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .danger-text { color:var(--danger); } .hero h1 { max-width:14ch; margin:.6rem 0; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.05; } .lead { max-width:58ch; color:var(--muted); font-size:1.1rem; } .actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.6rem 1rem; border:1px solid transparent; border-radius:8px; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; } .button.primary { background:var(--accent); color:var(--accent-ink); } .button.secondary { border-color:var(--line); background:transparent; color:var(--text); } .button.danger { background:#4c2529; color:#ffd9d9; } .button:hover { filter:brightness(1.08); } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; } .stack { display:grid; gap:1rem; } .stack label { display:grid; gap:.35rem; font-weight:650; } .stack input,.inline-form input { width:100%; min-height:42px; padding:.55rem .65rem; border:1px solid var(--line); border-radius:8px; background:#0d151a; color:var(--text); font:inherit; } .flash { padding:.75rem; border-radius:8px; } .flash.error { border:1px solid #6e343b; background:#3a2025; color:#ffd9d9; } .dashboard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; } .table-card { padding:1.25rem; } .table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:.75rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { color:var(--muted); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; } .badge { display:inline-flex; padding:.2rem .55rem; border-radius:999px; font-size:.8rem; font-weight:700; } .badge.ok { background:#173d36; color:#91ecd9; }.badge.danger { background:#4c2529; color:#ffd9d9; } .inline-form { display:flex; min-width:250px; gap:.4rem; }.inline-form input { min-width:120px; } .link-button { padding:0; border:0; background:transparent; color:var(--muted); font:inherit; cursor:pointer; } .admin-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1.5rem; } .admin-nav { display:grid; align-content:start; gap:.35rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); } .admin-nav a { padding:.55rem .65rem; border-radius:7px; color:var(--muted); text-decoration:none; }.admin-nav a[aria-current="page"],.admin-nav a:hover { background:var(--surface-2); color:var(--accent); } .admin-content h1 { margin-top:0; }.panel { padding:1.25rem; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:1rem 0; }.stat { display:grid; gap:.35rem; padding:1.2rem; }.stat strong { color:var(--accent); font-size:1.8rem; }.stat span { color:var(--muted); } .details { display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:.6rem 1rem; }.details dt { color:var(--muted); }.details dd { margin:0; overflow-wrap:anywhere; } details { margin-top:.6rem; } summary { cursor:pointer; color:var(--accent); }.compact { margin-top:.7rem; }.compact input { min-height:36px; } .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.muted,.empty { color:var(--muted); }.empty { padding:2rem; text-align:center; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (max-width:760px) { .site-header,.site-footer,.dashboard-head,.section-heading { align-items:flex-start; flex-direction:column; }.locale-form { margin-left:0; }.page-shell { width:min(100% - 1.25rem,1100px); padding:2rem 0; }.hero { padding:1.5rem; }.inline-form { min-width:0; flex-wrap:wrap; }.admin-shell { grid-template-columns:1fr; }.admin-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-nav .eyebrow { grid-column:1 / -1; } }