:root { --ink:#102a43; --muted:#597386; --canvas:#eef6fb; --surface:#fff; --soft:#f8fbfc; --line:#c9dbe6; --primary:#087ea4; --action:#c96745; --success:#146b54; --success-bg:#dff5e9; --warning:#8b5a16; --warning-bg:#fff1c7; --danger:#9f2e2e; --danger-bg:#ffe2dd; --space-1:4px; --space-2:8px; --space-3:10px; --space-4:14px; --space-5:16px; --space-6:18px; --space-7:24px; --radius-sm:8px; --radius-md:14px; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.5 Inter,"Segoe UI",sans-serif; } .cloud-shell { max-width:1180px; margin:0 auto; padding:var(--space-7); } .topbar { display:flex; justify-content:space-between; gap:var(--space-7); align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:var(--space-7); margin-bottom:var(--space-7); } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:var(--space-2); font-size:clamp(28px,5vw,48px); line-height:1.05; } h2 { font-size:18px; margin-bottom:0; } h3 { font-size:15px; margin-bottom:var(--space-3); text-transform:capitalize; } .eyebrow { color:var(--primary); font-size:11px; letter-spacing:.12em; font-weight:700; } .lede,.muted { color:var(--muted); } .top-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; } select,input { border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--ink); } .section-heading { display:flex; justify-content:space-between; gap:var(--space-3); align-items:center; margin-bottom:var(--space-4); } .health-section,.panel { margin-bottom:var(--space-6); } .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-6); } .login-panel { border-left:3px solid var(--primary); } .login-form { display:grid; grid-template-columns:1fr 1fr auto auto; gap:var(--space-3); align-items:end; } .login-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:12px; } .login-form button { border:0; border-radius:var(--radius-sm); padding:var(--space-2) var(--space-4); color:white; background:var(--primary); cursor:pointer; } .login-form .secondary-button { color:var(--ink); background:var(--soft); border:1px solid var(--line); } .health-grid,.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); } .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .health-card { background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-4); min-height:92px; } .status-pill { display:inline-flex; align-items:center; border-radius:999px; border:1px solid currentColor; padding:2px 9px; font-size:11px; font-weight:700; } .connected { color:var(--success); background:var(--success-bg); } .disabled,.stale { color:var(--warning); background:var(--warning-bg); } .auth,.unavailable { color:var(--danger); background:var(--danger-bg); } .metric-list { display:grid; gap:var(--space-2); } .metric-row,.candidate-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); border-bottom:1px solid var(--line); padding:var(--space-2) 0; } .metric-row:last-child,.candidate-row:last-child { border-bottom:0; } .candidate-row { display:grid; grid-template-columns:minmax(120px,1fr) auto minmax(180px,2fr); } .candidate-row small { color:var(--muted); } .connector-form,.admin-forms { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); } .admin-forms { grid-template-columns:repeat(3,minmax(0,1fr)); } .connector-form label,.admin-forms label { display:grid; gap:var(--space-1); color:var(--muted); font-size:12px; } .connector-form input,.admin-forms input { width:100%; } .connector-form button,.admin-forms button { justify-self:start; border:0; border-radius:var(--radius-sm); padding:var(--space-2) var(--space-4); color:white; background:var(--primary); cursor:pointer; } .connector-form button { grid-column:1 / -1; } .connector-form .notice,.admin-forms .notice { grid-column:1 / -1; } .notice { color:var(--danger); min-height:1.5em; } :focus-visible { outline:3px solid color-mix(in srgb,var(--action) 65%,white); outline-offset:2px; } @media (max-width:768px) { .cloud-shell { padding:var(--space-5); } .topbar,.summary-grid,.health-grid,.admin-forms { display:grid; grid-template-columns:1fr; } .login-form,.connector-form { grid-template-columns:1fr; } .candidate-row { grid-template-columns:1fr; gap:var(--space-1); } } @media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }
/* Route-based cloud admin console */
.auth-page { min-height:100vh; display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 12% 10%,#d9f2f1 0,#eef6fb 42%,#e5edf7 100%); }
.auth-shell { width:min(1040px,100%); display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.auth-brand h1 { max-width:560px; font-size:clamp(34px,5vw,64px); line-height:1.02; margin:12px 0 18px; letter-spacing:-.04em; }
.auth-brand p { max-width:520px; color:var(--muted); font-size:17px; }
.auth-trust { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.auth-trust span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#ffffffa8; color:var(--primary); font-size:12px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 20px 55px #2141581c; }
.auth-card h2 { font-size:28px; margin:4px 0 0; }
.auth-form { display:grid; gap:16px; margin-top:20px; }
.auth-form label,.field { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.auth-form input,.field input,.filter-control,.search-input { width:100%; min-height:42px; }
.primary-button { border:0; border-radius:9px; padding:12px 16px; color:#fff; background:var(--primary); cursor:pointer; font-weight:700; }
.auth-footnote,.toolbar-note,.freshness-note { color:var(--muted); font-size:12px; }
.language-control { display:grid; gap:4px; color:var(--muted); font-size:11px; }
.console-page { min-height:100vh; background:#f3f7fa; }
.admin-console { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.console-sidebar { display:flex; flex-direction:column; gap:28px; padding:24px 16px; background:#0f2639; color:#dceaf2; }
.console-logo { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; padding:4px 8px 20px; border-bottom:1px solid #ffffff20; }
.console-logo small { display:block; color:#9eb5c6; font-size:11px; margin-top:2px; }
.logo-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#f09a70; color:#122b40; font-weight:900; }
#consoleNavigation { display:grid; gap:5px; }
#consoleNavigation a { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:11px 12px; border-radius:9px; color:#b8cddb; text-decoration:none; }
#consoleNavigation a small { color:#7692a5; font-size:10px; }
#consoleNavigation a:hover,#consoleNavigation a.active { color:#fff; background:#1d465d; }
#consoleNavigation a.active { box-shadow:inset 3px 0 #f09a70; }
.sidebar-foot { margin-top:auto; display:flex; gap:8px; align-items:center; color:#88a7b8; font-size:12px; padding:10px 8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#5fd6a4; box-shadow:0 0 0 4px #5fd6a422; }
.console-main { min-width:0; padding:28px clamp(18px,4vw,48px) 48px; }
.console-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding-bottom:24px; border-bottom:1px solid var(--line); }
.console-header h1 { font-size:clamp(28px,4vw,42px); margin:5px 0 4px; }
.console-header p { color:var(--muted); margin:0; }
.console-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.user-chip { padding:8px 12px; border-radius:999px; background:#dceef5; color:var(--primary); font-weight:700; font-size:12px; }
.console-notice { min-height:26px; color:var(--danger); padding-top:10px; }
.route-outlet { outline:0; }
.page-stack { display:grid; gap:18px; }
.metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.metric-card,.data-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.metric-label { display:block; color:var(--muted); font-size:12px; }
.metric-value { display:block; color:var(--ink); font-size:24px; margin-top:8px; }
.split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.card-heading { color:var(--ink); font-weight:800; margin-bottom:14px; }
.page-toolbar,.filter-bar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.search-input { max-width:340px; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th,.data-table td { padding:12px 10px; border-bottom:1px solid #e4edf2; white-space:nowrap; }
.data-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.table-link { color:var(--primary); font-weight:700; text-decoration:none; }
.status-pill[data-state="active"],.status-pill[data-state="connected"],.status-pill[data-state="enabled"] { color:var(--success); background:var(--success-bg); }
.status-pill[data-state="pending"],.status-pill[data-state="manual_only"] { color:var(--warning); background:var(--warning-bg); }
.status-pill[data-state="unconfigured"],.status-pill[data-state="disabled"],.status-pill[data-state="failed"] { color:var(--danger); background:var(--danger-bg); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .card-heading,.form-grid .primary-button,.form-grid .notice { grid-column:1/-1; }
.detail-heading { font-size:22px; font-weight:800; }
.empty-state,.loading-state,.error-state { padding:40px; border:1px dashed var(--line); border-radius:14px; background:#fff; color:var(--muted); text-align:center; }
@media (max-width:900px) { .admin-console { grid-template-columns:1fr; } .console-sidebar { position:static; } #consoleNavigation { grid-template-columns:repeat(4,1fr); } #consoleNavigation a { grid-template-columns:1fr; } .metric-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .auth-page { padding:16px; } .auth-shell { grid-template-columns:1fr; gap:20px; } .auth-brand h1 { font-size:38px; } .console-main { padding:20px 14px 32px; } .console-header { display:grid; } #consoleNavigation { grid-template-columns:repeat(2,1fr); } .metric-grid,.split-grid,.form-grid { grid-template-columns:1fr; } }
.account-detail { border-left: 3px solid var(--primary); }
.memory-pipeline .data-table td:first-child { font-weight: 700; color: var(--primary); }
.memory-pipeline .status-pill { min-width: 86px; justify-content: center; }
.console-main .data-table td { vertical-align: middle; }