:root { --cv-bg: #f5f7fb; --cv-surface: #ffffff; --cv-surface-strong: #f8fafc; --cv-border: #dfe6f2; --cv-border-strong: #c8d2e2; --cv-text: #172033; --cv-muted: #607089; --cv-primary: #255bd6; --cv-primary-strong: #1748b3; --cv-primary-soft: #e8eefb; --cv-primary-soft-text: #24406f; --cv-danger: #b42318; --cv-success: #027a48; --cv-warning: #b54708; --cv-focus: #84c5ff; --cv-input-bg: #ffffff; --cv-skeleton-a: #eef2f7; --cv-skeleton-b: #f7f9fc; --cv-alert-error-bg: #fff4f2; --cv-alert-error-border: #f4b8b3; --cv-alert-success-bg: #ecfdf3; --cv-alert-success-border: #abefc6; --cv-badge-success-bg: #ecfdf3; --cv-badge-warning-bg: #fffaeb; --cv-badge-danger-bg: #fff4f2; --cv-radius-sm: 10px; --cv-radius-md: 16px; --cv-radius-lg: 22px; --cv-shadow-sm: 0 8px 30px rgba(21, 35, 60, 0.06); --cv-shadow-md: 0 18px 60px rgba(21, 35, 60, 0.10); --cv-space-1: 4px; --cv-space-2: 8px; --cv-space-3: 12px; --cv-space-4: 16px; --cv-space-5: 20px; --cv-space-6: 24px; --cv-space-8: 32px; --cv-space-10: 40px; color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--cv-text); background: var(--cv-bg); } /* * Dark palette. Activated by [data-theme="dark"] on , set by * assets/services/theme.js (or the no-flash inline script in index.html * before that module even loads). Every token name here mirrors :root — * components never reference a raw color, only these variables, so theme * switching needs zero changes anywhere else. */ [data-theme="dark"] { --cv-bg: #0f1420; --cv-surface: #161c2c; --cv-surface-strong: #1c2336; --cv-border: #2a3349; --cv-border-strong: #3a4560; --cv-text: #e8edf7; --cv-muted: #93a0bb; --cv-primary: #5b8cf0; --cv-primary-strong: #7da3f5; --cv-primary-soft: #1e2a47; --cv-primary-soft-text: #cddcff; --cv-danger: #f1716a; --cv-success: #3ddc91; --cv-warning: #f0a857; --cv-focus: #7da3f5; --cv-input-bg: #11172a; --cv-skeleton-a: #1c2336; --cv-skeleton-b: #232c44; --cv-alert-error-bg: #2c1716; --cv-alert-error-border: #5c2a26; --cv-alert-success-bg: #102b1f; --cv-alert-success-border: #1f4d35; --cv-badge-success-bg: #102b1f; --cv-badge-warning-bg: #2e2210; --cv-badge-danger-bg: #2c1716; --cv-shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.35); --cv-shadow-md: 0 18px 60px rgba(0, 0, 0, 0.5); color-scheme: dark; } body, .card, .input, .button, .alert, .entity-row, .badge { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } * { box-sizing: border-box; } html { min-height: 100%; } body { min-height: 100%; margin: 0; background: var(--cv-bg); } button, input { font: inherit; } button { touch-action: manipulation; } :focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--cv-radius-sm); background: var(--cv-text); color: #fff; text-decoration: none; } .skip-link:focus { top: 12px; } .app-root { min-height: 100vh; } .shell { width: min(1180px, 100%); margin: 0 auto; padding: 32px 20px 56px; } .stack { display: grid; gap: var(--cv-space-5); } .stack-sm { display: grid; gap: var(--cv-space-3); } .inline { display: flex; gap: var(--cv-space-3); align-items: center; flex-wrap: wrap; } .split { display: flex; align-items: center; justify-content: space-between; gap: var(--cv-space-4); } .grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr); gap: var(--cv-space-5); align-items: start; } .hero { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cv-space-6); margin-bottom: var(--cv-space-6); } .hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.06em; } .hero p { max-width: 720px; color: var(--cv-muted); margin: 12px 0 0; font-size: 1.05rem; } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; color: var(--cv-primary); margin: 0 0 10px; } .card { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); padding: var(--cv-space-6); box-shadow: var(--cv-shadow-sm); } .card-header { display: flex; justify-content: space-between; gap: var(--cv-space-4); align-items: flex-start; margin-bottom: var(--cv-space-5); } .card-title { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; } .card-description { margin: 6px 0 0; color: var(--cv-muted); } .form { display: grid; gap: var(--cv-space-4); } .field { display: grid; gap: var(--cv-space-2); } .label { font-weight: 750; color: var(--cv-text); } .help { color: var(--cv-muted); font-size: .88rem; } .input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--cv-border-strong); border-radius: var(--cv-radius-sm); color: var(--cv-text); background: var(--cv-input-bg); } .input[aria-invalid="true"] { border-color: var(--cv-danger); } .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--cv-radius-sm); padding: 10px 16px; background: var(--cv-primary); color: #fff; font-weight: 800; cursor: pointer; text-decoration: none; } .button:hover { background: var(--cv-primary-strong); } .button:disabled { cursor: not-allowed; opacity: .68; } .button.secondary { background: var(--cv-primary-soft); color: var(--cv-primary-soft-text); } .button.secondary:hover { background: var(--cv-primary-soft); filter: brightness(1.08); } .button.ghost { background: transparent; color: var(--cv-primary); border: 1px solid var(--cv-border); } .button.full { width: 100%; } .alert { border-radius: var(--cv-radius-md); padding: 12px 14px; border: 1px solid var(--cv-border); background: var(--cv-surface-strong); } .alert.error { border-color: var(--cv-alert-error-border); background: var(--cv-alert-error-bg); color: var(--cv-danger); } .alert.success { border-color: var(--cv-alert-success-border); background: var(--cv-alert-success-bg); color: var(--cv-success); } .list { display: grid; gap: var(--cv-space-3); } .entity-row { display: flex; justify-content: space-between; align-items: center; gap: var(--cv-space-4); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-md); padding: 14px; background: var(--cv-surface-strong); } .entity-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-weight: 850; } .entity-meta { margin: 0; color: var(--cv-muted); font-size: .9rem; overflow-wrap: anywhere; } .badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; background: var(--cv-primary-soft); color: var(--cv-primary-soft-text); font-size: .78rem; font-weight: 800; } .badge.success { background: var(--cv-badge-success-bg); color: var(--cv-success); } .badge.warning { background: var(--cv-badge-warning-bg); color: var(--cv-warning); } .badge.danger { background: var(--cv-badge-danger-bg); color: var(--cv-danger); } .empty-state { display: grid; place-items: center; min-height: 160px; text-align: center; border: 1px dashed var(--cv-border-strong); border-radius: var(--cv-radius-md); background: var(--cv-surface-strong); padding: var(--cv-space-6); } .empty-state h3 { margin: 0 0 6px; } .empty-state p { margin: 0; color: var(--cv-muted); } .skeleton { border-radius: var(--cv-radius-md); background: linear-gradient(90deg, var(--cv-skeleton-a) 25%, var(--cv-skeleton-b) 37%, var(--cv-skeleton-a) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .skeleton-row { height: 72px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .secret-box { /* Intentionally fixed dark-on-dark regardless of page theme — this is a "credentials terminal" look, not a themed surface, and keeps contrast correct in both light and dark mode without extra tokens. */ white-space: pre-wrap; background: #0d1728; color: #dbe9ff; padding: 14px; border-radius: var(--cv-radius-md); overflow: auto; max-height: 320px; font-size: .88rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .theme-toggle { display: inline-flex; border: 1px solid var(--cv-border); border-radius: 999px; padding: 3px; gap: 2px; background: var(--cv-surface-strong); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--cv-muted); cursor: pointer; font-size: 1.05rem; line-height: 1; } .theme-toggle button[aria-pressed="true"] { background: var(--cv-surface); color: var(--cv-primary); box-shadow: var(--cv-shadow-sm); } .theme-toggle button:hover { color: var(--cv-text); } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { scroll-behavior: auto !important; } body, .card, .input, .button, .alert, .entity-row, .badge { transition: none; } } @media (max-width: 880px) { .shell { padding: 24px 14px 40px; } .hero, .split, .card-header { flex-direction: column; align-items: stretch; } .grid { grid-template-columns: 1fr; } .entity-row { align-items: stretch; flex-direction: column; } .entity-row .button { width: 100%; } }