:root{color-scheme:light;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--canvas:#f5f7fb;--surface:#fff;--surface-soft:#f8fafc;--text:#182238;--strong:#0f172a;--muted:#69768e;--border:#dfe6f1;--brand-950:#0c1024;--brand-900:#141a34;--brand-700:#4548c9;--brand-600:#5956e8;--brand-100:#ebeaff;--accent:#18b7a6;--success:#147a53;--warning:#9a5b00;--danger:#b4233b;--shadow:0 16px 44px rgba(15,23,42,.08);--sidebar:268px;--mobile-nav:72px}
*{box-sizing:border-box}
html{min-width:320px;background:var(--canvas);scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(circle at 85% -10%,rgba(35, 103, 242,.1),transparent 30rem),var(--canvas);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:var(--brand-700)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(35, 103, 242,.25);outline-offset:2px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;background:#fff;padding:10px 14px;border-radius:10px}
.skip-link:focus{top:16px}
.client-layout{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:22px 18px;display:flex;flex-direction:column;background:var(--brand-950);color:#fff;z-index:30}
.brand,.mobile-brand,.auth-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand{color:#fff;padding:4px 8px 24px}
.brand img,.mobile-brand img,.auth-brand img,.loading-page>img{width:42px;height:42px;border-radius:13px;object-fit:cover}
.brand span,.auth-brand span{display:grid;gap:2px}
.brand strong{font-size:1.05rem}
.brand small{color:#aeb8d4}
.client-context,.client-switcher{display:grid;gap:6px;padding:14px;margin:0 2px 20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06)}
.client-context span,.client-switcher span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#9ea9c8}
.client-context strong{font-size:.92rem}
.client-switcher select{background:#fff;color:var(--text)}
.sidebar-nav{display:grid;gap:5px;overflow:auto}
.nav-link,.mobile-link{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-link{padding:11px 12px;border-radius:11px;color:#bfc8df}
.nav-link:hover,.nav-link.is-active{background:rgba(255,255,255,.1);color:#fff}
.nav-link>span,.mobile-link>span{width:21px;height:21px}
.nav-link svg,.mobile-link svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-link strong,.mobile-link strong{font-size:.9rem}
.sidebar-footer{margin-top:auto;padding:18px 10px 4px;display:flex;gap:9px;align-items:center;color:#9ea9c8;font-size:.78rem}
.secure-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(35, 103, 242,.12)}
.workspace{min-height:100vh;margin-left:var(--sidebar)}
.topbar{position:sticky;top:0;z-index:20;height:72px;padding:0 clamp(20px,4vw,54px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.mobile-brand{display:none;color:var(--strong)}
.topbar-context{display:grid;gap:3px}
.topbar-context small{color:var(--muted)}
.profile-menu{position:relative}
.profile-menu summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.profile-menu summary::-webkit-details-marker{display:none}
.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand-100);color:var(--brand-700);font-weight:900}
.profile-copy{display:grid}
.profile-copy small{color:var(--muted);font-size:.74rem}
.profile-popover{position:absolute;right:0;top:calc(100% + 12px);width:240px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);display:grid}
.profile-workspace{display:grid;gap:2px;padding:11px 12px;margin-bottom:4px;border-radius:9px;background:var(--surface-soft)}
.profile-workspace span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.profile-workspace strong{color:var(--strong)}
.profile-workspace small{color:var(--muted)}
.profile-popover a,.profile-popover button{padding:11px 12px;border:0;border-radius:9px;background:none;text-align:left;text-decoration:none;color:var(--text)}
.profile-popover a:hover,.profile-popover button:hover{background:var(--surface-soft)}
.profile-popover__group-label{display:block;padding:10px 12px 4px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.sidebar-nav .profile-popover__group-label{color:#9ea9c8}
.main-content{width:min(1460px,calc(100% - 48px));margin:0 auto;padding:38px 0 72px}
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.page-heading h1{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.04em;margin:6px 0 9px;color:var(--strong)}
.page-heading p{margin:0;color:var(--muted);line-height:1.65;max-width:760px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.71rem;font-weight:850;color:var(--brand-600)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 16px;font-weight:780;text-decoration:none;border:1px solid transparent}
.button--primary{background:var(--brand-900);color:#fff}
.button--secondary{background:#fff;border-color:var(--border);color:var(--text)}
.button--google{width:100%;background:#fff;border-color:#cdd7e6;color:var(--text)}
.button--facebook{width:100%;background:#1877F2;border-color:#1877F2;color:#fff}
.button--danger{background:#fff;border-color:#f1bfc7;color:var(--danger)}
.button:disabled{opacity:.5;cursor:not-allowed}
.text-button{border:0;background:none;color:var(--brand-700);padding:10px}
.link-button{background:none;border:none;padding:0;font-size:.8rem;color:var(--muted);text-decoration:underline;cursor:pointer}
.button-group{display:flex;gap:10px;flex-wrap:wrap}
.panel,.subpanel,.billing-hero,.metric-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}
.panel{padding:24px;margin-bottom:20px}
.subpanel{padding:20px;margin-top:18px}
.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:19px}
.panel-heading h2{margin:0 0 6px;color:var(--strong)}
.panel-heading p{margin:0;color:var(--muted);line-height:1.55}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.metric-card{padding:20px;display:grid;gap:7px}
.metric-card>span{font-size:.82rem;color:var(--muted)}
.metric-card>strong{font-size:1.85rem;letter-spacing:-.04em;color:var(--strong);font-variant-numeric:tabular-nums}
.metric-card small{color:var(--muted)}
.metric-card--brand{border:0;border-top:2px solid var(--brand-600);color:#fff}
.metric-card--brand>span,.metric-card--brand>strong,.metric-card--brand small{color:#fff}
.overview-grid,.billing-grid,.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.progress{height:9px;border-radius:999px;overflow:hidden;background:#e9edf5}
.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-600),var(--accent))}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.check-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;background:var(--surface-soft);color:var(--muted)}
.check-item>span{width:24px;height:24px;border:1px solid #cbd4e2;border-radius:50%;display:grid;place-items:center}
.check-item.is-done{color:var(--success);background:#ebf8f1}
.check-item.is-done>span{background:var(--success);border-color:var(--success);color:#fff}
.usage-summary>strong,.large-usage>strong{font-size:2.1rem;letter-spacing:-.04em;color:var(--strong)}
.usage-summary small,.large-usage small{font-size:1rem;color:var(--muted)}
.usage-summary .progress,.large-usage .progress{margin:16px 0}
.usage-summary dl,.large-usage dl,.source-summary dl,.destination-card dl,.settings-dl,.limit-list,.pending-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.usage-summary dl div,.large-usage dl div,.source-summary dl div,.destination-card dl div,.settings-dl div,.limit-list div,.pending-card dl div{padding:12px;border-radius:11px;background:var(--surface-soft)}
dt{font-size:.74rem;color:var(--muted)}
dd{margin:5px 0 0;font-weight:750;overflow-wrap:anywhere}
.website-list,.alert-list{display:grid}
.website-row,.alert-list a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 4px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}
.website-row:last-child,.alert-list a:last-child{border-bottom:0}
.website-row>div:first-child,.alert-list a>div{display:grid;gap:4px}
.website-row span,.alert-list small{color:var(--muted)}
.alert-list a{justify-content:flex-start}
.alert-dot{width:9px;height:9px;background:var(--warning);border-radius:50%;flex:0 0 auto}
.inline-empty{display:grid;gap:5px;padding:24px;border:1px dashed #cfd7e5;border-radius:13px;background:var(--surface-soft);color:var(--muted)}
.inline-empty strong{color:var(--text)}
.notice{padding:14px 16px;border-radius:12px;margin-bottom:18px;border:1px solid}
.notice--info{background:#eef3ff;border-color:#c8d6ff}
.notice--success{background:var(--success-notice-bg);border-color:var(--success-notice-border);color:var(--success-ink)}
.notice--warning{background:var(--warning-notice-bg);border-color:var(--warning-notice-border);color:var(--warning-notice-ink)}
.notice--danger{background:var(--danger-notice-bg);border-color:var(--danger-notice-border);color:var(--danger-ink)}
.status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:820;background:#edf1f7;color:#52617b;white-space:nowrap}
.status>span{width:6px;height:6px;border-radius:50%;background:currentColor}
.status--active,.status--ready,.status--normal,.status--succeeded,.status--connected{background:var(--success-bg);color:var(--success-ink)}
.status--pending,.status--provisioning,.status--configuring,.status--warning,.status--critical{background:var(--warning-bg);color:var(--warning-ink)}
.status--failed,.status--blocked,.status--exceeded{background:var(--danger-bg);color:var(--danger-ink)}
.setup-steps{display:grid;gap:12px;margin-bottom:20px}
.setup-step{display:flex;gap:16px;padding:19px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}
.setup-step>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf1f7;font-weight:900}
.setup-step h2{margin:0 0 5px;font-size:1.05rem}
.setup-step p{margin:0;color:var(--muted)}
.setup-step.is-current{border-color:#aaa9ff;box-shadow:0 0 0 3px rgba(35, 103, 242,.09)}
.setup-step.is-current>span{background:var(--brand-600);color:#fff}
.setup-step.is-done>span{background:#e6f7ed;color:var(--success)}
.progress-pill,.privacy-note{padding:8px 11px;border-radius:999px;background:var(--brand-100);color:var(--brand-700);font-weight:800;font-size:.78rem}
.platform-grid,.roadmap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.platform-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:17px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xs)}
.platform-card--coming-soon{opacity:.72;background:var(--surface-soft)}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:820;white-space:nowrap;align-self:start}
.badge--coming-soon{background:var(--neutral-bg);color:var(--neutral-ink)}
.badge--success{background:var(--success-bg);color:var(--success-ink)}
.badge--neutral{background:var(--neutral-bg);color:var(--neutral-ink)}
.badge--muted{background:var(--surface-soft);color:var(--muted)}
.source-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--brand-100);color:var(--brand-700);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bar-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr) auto;gap:12px;align-items:center;padding:9px 0}
.bar-row+.bar-row{border-top:1px solid var(--border)}
.bar-row__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--text)}
.bar-row__value{white-space:nowrap;color:var(--muted);font-size:.85rem;text-align:right}
.funnel-stage{display:grid;gap:6px;padding:14px 0}
.funnel-stage+.funnel-stage{border-top:1px solid var(--border)}
.funnel-stage__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.funnel-stage__head strong{color:var(--strong)}
.funnel-stage__conversion{font-size:.78rem;color:var(--muted)}
.trend-value{display:flex;align-items:baseline;gap:8px}
.trend-delta{font-size:.82rem;font-weight:800;border-radius:999px;padding:3px 9px}
.trend-delta--up{background:var(--success-bg);color:var(--success-ink)}
.trend-delta--down{background:var(--danger-bg);color:var(--danger-ink)}
.trend-delta--flat{background:var(--neutral-bg);color:var(--neutral-ink)}
.visitor-journey-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.visitor-journey-filter label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
.visitor-journey-filter input{width:auto}
.platform-card h3,.roadmap-grid strong{margin:0 0 5px}
.platform-card p,.roadmap-grid span{margin:0;color:var(--muted);line-height:1.55}
.platform-card.is-muted{opacity:.7}
.platform-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--brand-100);color:var(--brand-700);font-weight:900}
.instruction-list{display:grid;gap:10px;padding-left:24px;color:var(--text)}
.instruction-list li{padding-left:5px;line-height:1.5}
.instruction-list.compact{font-size:.9rem}
.directory-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}
.directory-list{display:grid;gap:8px;align-content:start}
.directory-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:13px;background:#fff;text-decoration:none;color:var(--text);box-shadow:var(--shadow-xs)}
.directory-item>div{display:grid;gap:3px}
.directory-item small{color:var(--muted)}
.directory-item.is-active{border-color:#aaa9ff;background:#f7f6ff}
.directory-detail{min-width:0}
.detail-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px;background:#fff;border:1px solid var(--border);border-radius:18px}
.detail-heading h2{margin:5px 0}
.detail-heading>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.detail-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.detail-metrics article{padding:15px;border:1px solid var(--border);background:#fff;border-radius:13px;display:grid;gap:5px;box-shadow:var(--shadow-xs)}
.detail-metrics span{color:var(--muted);font-size:.8rem}
.source-summary__head,.destination-card__head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:15px}
.source-summary h3,.destination-card h3{margin:5px 0 0}
.success-copy{padding:15px;background:#ecfaf2;border-radius:12px;color:var(--success)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.stack-form,.profile-form,.support-form{display:grid;gap:15px}
.profile-form fieldset{border:0;padding:0;margin:0 0 8px}
.profile-form legend{font-size:1rem;font-weight:850;margin-bottom:14px}
.credential-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
label{display:grid;gap:7px;color:#2f3d58;font-weight:700}
input,select,textarea{width:100%;border:1px solid #cdd7e6;border-radius:10px;padding:11px 12px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(35, 103, 242,.12);outline:0}
.connector-card{position:relative;overflow:hidden;padding-top:22px}
.connector-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.connector-card--claude::before{background:linear-gradient(90deg,var(--brand-600),var(--brand-700))}
.connector-card--chatgpt::before{background:linear-gradient(90deg,var(--accent),#0f8e80)}
.connector-card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.connector-card__mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:.95rem;color:#fff;flex:0 0 auto}
.connector-card--claude .connector-card__mark{background:linear-gradient(145deg,var(--brand-600),var(--brand-700))}
.connector-card--chatgpt .connector-card__mark{background:linear-gradient(145deg,var(--accent),#0f8e80)}
.connector-card__head h3{margin:0}
.connector-steps{list-style:none;counter-reset:connector-step;display:grid;gap:11px;margin:0 0 20px;padding:0}
.connector-steps li{counter-increment:connector-step;display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.55;color:var(--text)}
.connector-steps__text{flex:1;min-width:0}
.connector-steps li::before{content:counter(connector-step);flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:1px}
.connector-chip-list{display:grid;gap:8px}
.connector-chip{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;background:var(--surface-soft);border:1px solid var(--border)}
.connector-chip__label{flex:0 0 auto;width:92px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--muted)}
.connector-chip__value{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.connector-chip__value code{flex:1;min-width:0;overflow-wrap:anywhere;background:none;font-size:.84rem;color:var(--strong);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.connector-icon-preview{width:28px;height:28px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex:0 0 auto;background:#fff}
.copy-button{border:1px solid #cdd7e6;border-radius:10px;padding:0 12px;background:#fff;color:var(--brand-700);font-weight:750;text-decoration:none;display:inline-flex;align-items:center;height:32px;flex:0 0 auto;font-size:.82rem}
.icon-copy-button{width:30px;height:30px;flex:0 0 auto;border:1px solid #cdd7e6;border-radius:9px;background:#fff;color:var(--brand-700);display:grid;place-items:center;text-decoration:none}
.icon-copy-button:hover{background:var(--brand-100);border-color:var(--brand-600)}
.icon-copy-button svg{width:16px;height:16px}
.manual-boundary{display:grid;gap:4px;margin:18px 0;padding:14px;border-radius:12px;background:#f5f7fb;color:var(--muted)}
.manual-boundary strong{color:var(--text)}
.destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.destination-card{padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.empty-state{text-align:center;padding:56px 24px;border:1px dashed #cfd7e5;border-radius:18px;background:#fff}
.empty-state__icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;margin:0 auto 16px;background:var(--brand-100);color:var(--brand-700);font-size:1.5rem;font-weight:900}
.empty-state h2{margin:0 0 8px}
.empty-state p{margin:0 auto 18px;max-width:620px;color:var(--muted);line-height:1.6}
.roadmap-panel{margin-top:20px}
.roadmap-grid article{padding:16px;border:1px solid var(--border);border-radius:13px;display:grid;gap:5px}
.billing-hero{padding:24px;margin-bottom:20px;display:flex;justify-content:space-between;gap:20px;align-items:center;background:linear-gradient(145deg,var(--brand-900),#123a85);color:#fff;border:0}
.billing-hero span,.billing-hero p{color:#ccd2e7}
.billing-hero h2{font-size:2.2rem;margin:5px 0}
.large-usage>span{display:block;color:var(--muted);margin-top:3px}
.feature-chips{display:flex;gap:8px;flex-wrap:wrap}
.feature-chips span{padding:8px 11px;border-radius:999px;background:var(--brand-100);color:var(--brand-700);font-weight:750;font-size:.8rem}
.support-grid .panel{margin-bottom:0}
.support-form{margin-top:10px}
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}
.settings-nav{display:grid;gap:6px;align-content:start;position:sticky;top:94px}
.settings-nav a{padding:11px 13px;border-radius:10px;text-decoration:none;color:var(--text)}
.settings-nav a:hover{background:#fff}
.team-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:13px;margin-bottom:14px}
.team-row>div:nth-child(2){display:grid}
.team-row small{color:var(--muted)}
.team-row__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.team-row__confirm{display:flex;gap:8px}
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,560px) 1fr;background:#fff}
.auth-panel{padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:center;max-width:620px;width:100%;margin:auto}
.auth-brand{color:var(--strong);margin-bottom:42px}
.auth-brand small{color:var(--muted)}
.auth-heading h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em;margin:0 0 9px}
.auth-heading p{color:var(--muted);line-height:1.6;margin:0 0 25px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:16px 0}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}
.auth-switch{text-align:center;color:var(--muted)}
.auth-visual{padding:52px;display:grid;place-items:center;background:radial-gradient(circle at 85% 15%,rgba(35, 103, 242,.25),transparent 18rem),linear-gradient(145deg,var(--brand-950),#0a2a66);color:#fff}
.auth-visual>div{max-width:620px}
.auth-visual h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.05;letter-spacing:-.05em;margin:12px 0 28px}
.auth-visual ul{display:grid;gap:14px;color:#d8dcee;padding-left:20px}
.form-row{display:flex;justify-content:flex-end}
.verification-card,.pending-card{padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft);margin-bottom:18px;box-shadow:var(--shadow-xs)}
.verification-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--brand-100);color:var(--brand-700);font-weight:900;font-size:1.3rem}
.check-row{display:flex;align-items:center;gap:9px}
.check-row input{width:auto}
.pending-card h2{margin:15px 0 8px}
.loading-page{min-height:100vh;display:grid;place-items:center;align-content:center;gap:16px;text-align:center}
.spinner{width:32px;height:32px;border:3px solid #dce2ed;border-top-color:var(--brand-600);border-radius:50%;animation:spin .8s linear infinite}
.error-card{max-width:480px}
.toast{position:fixed;right:22px;bottom:22px;z-index:300;max-width:min(420px,calc(100% - 44px));padding:14px 17px;border-radius:12px;background:var(--brand-900);color:#fff;box-shadow:var(--shadow)}
.toast--success{background:var(--success)}
.toast--danger{background:var(--danger)}
.toast--warning{background:var(--warning);color:#fff}
.toast--info{background:var(--brand-900)}
.mobile-nav{display:none}
/* Plain-table shell -- shared primitive for every <table> in this app (see
   features/billing/widgets/invoices-widget.js, features/analytics/widgets/
   visitor-journey-sessions-widget.js, features/customer-profile/widgets/
   customer-profile-table-widget.js). Referenced by class name in several
   widgets for a long time but never actually defined here, so those tables
   rendered with raw browser default styling next to fully-styled panels. */
.table-shell{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table th{color:var(--muted);font-weight:750;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;background:var(--surface-soft)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface-soft)}
.data-table td{color:var(--text)}
.data-table td strong{color:var(--strong)}
.data-table code{font-size:.85em}
/* Pagination -- shared Prev/Next control under a paginated table (Sessions,
   Customer Profile). */
.pagination{display:flex;align-items:center;gap:12px;margin-top:16px}
.pagination span{color:var(--muted);font-size:.85rem}
@media(max-width:720px) {
/* Card-style collapse for wide tables on narrow viewports, driven by each
     <td>'s data-label attribute -- keeps the page itself from ever needing
     to scroll horizontally, the table-shell's own overflow-x is the only
     fallback (e.g. for tables that opt out of .responsive-table). */
  .responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}
  .responsive-table tr{padding:12px 14px;border-bottom:1px solid var(--border)}
  .responsive-table tr:last-child{border-bottom:0}
  .responsive-table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border:0;white-space:normal;text-align:right}
  .responsive-table td::before{content:attr(data-label);flex:0 0 auto;color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;text-align:left}
  .table-shell{overflow-x:visible}
}
@keyframes spin {
  to{transform:rotate(360deg)}
}
@media(max-width:1100px) {
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .directory-layout{grid-template-columns:250px minmax(0,1fr)}
}
@media(max-width:820px) {
  body{padding-bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .workspace{margin-left:0}
  .topbar{height:64px;padding:0 16px}
  .mobile-brand{display:flex}
  .mobile-brand img{width:34px;height:34px}
  .topbar-context{display:grid;gap:1px;flex:1;min-width:0;margin:0 8px}
  .topbar-context small,.topbar-context strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .profile-copy{display:none}
  .main-content{width:min(100% - 24px,1460px);padding:24px 0 44px}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0;z-index:50;height:calc(var(--mobile-nav) + env(safe-area-inset-bottom));padding:6px 5px env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--border)}
  .toast{bottom:calc(var(--mobile-nav) + 18px + env(safe-area-inset-bottom))}
  .mobile-link{display:grid;place-items:center;gap:3px;color:var(--muted);padding:5px;text-align:center}
  .mobile-link>span{width:22px;height:22px}
  .mobile-link strong{font-size:.68rem}
  .mobile-link.is-active{color:var(--brand-600)}
  .mobile-more{position:relative}
  .mobile-more>summary{list-style:none}
  .mobile-more>summary::-webkit-details-marker{display:none}
  .mobile-more>div{position:absolute;right:0;bottom:calc(100% + 10px);width:230px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
  .mobile-more>div .mobile-link{display:flex;justify-content:flex-start;padding:10px}
  .overview-grid,.billing-grid,.support-grid,.directory-layout,.settings-layout{grid-template-columns:1fr}
  .directory-list{display:flex;overflow:auto}
  .directory-item{min-width:230px}
  .settings-nav{display:flex;overflow:auto;position:static}
  .settings-nav a{white-space:nowrap}
  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-panel{padding:28px 22px}
  .page-heading{display:grid}
  .page-heading>.button{justify-self:start}
}
@media(max-width:590px) {
  .metrics-grid,.platform-grid,.roadmap-grid,.destination-grid,.form-grid,.credential-grid,.detail-metrics,.checklist{grid-template-columns:1fr}
  .panel{padding:18px}
  .panel-heading,.detail-heading{display:grid}
  .usage-summary dl,.large-usage dl,.source-summary dl,.destination-card dl,.settings-dl,.limit-list,.pending-card dl{grid-template-columns:1fr}
  .platform-card{grid-template-columns:auto 1fr}
  .platform-card>.status{grid-column:2}
  .team-row{grid-template-columns:auto 1fr}
  .team-row>span,.team-row>.team-row__meta{grid-column:2}
  .profile-form .button{width:100%}
  .bar-row{grid-template-columns:1fr;gap:4px}
  .bar-row__value{text-align:left}
  .trend-value{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}