:root {
  --bg: #fbfbff;
  --surface: #ffffff;
  --surface-soft: #f4f1ff;
  --ink: #17152b;
  --muted: #6d6983;
  --border: #e4e0f1;
  --grid: rgba(62, 48, 120, .055);
  --primary: #6c4df6;
  --primary-strong: #5735ef;
  --cyan: #19bfd0;
  --coral: #ff6b7a;
  --lime: #b6ed45;
  --shadow: 0 26px 70px rgba(64, 43, 134, .12);
}

.billing-payment-status {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 10%, transparent);
}

.billing-payment-status[hidden] {
  display: none;
}

.billing-payment-success-action {
  margin-top: 1rem;
}

.billing-payment-status-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
}

.billing-payment-status-copy {
  display: grid;
  gap: .2rem;
}

.billing-payment-status-copy strong {
  color: var(--ink);
  font-size: .82rem;
}

.billing-payment-status-copy > span {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: .69rem;
  line-height: 1.45;
}

.billing-payment-status[data-state='loading'] .billing-payment-status-icon {
  border: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  background: transparent;
  animation: billing-status-spin .8s linear infinite;
}

.billing-payment-status[data-state='pending'] {
  border-color: color-mix(in srgb, #e4a72c 55%, var(--border));
  background: color-mix(in srgb, #e4a72c 14%, var(--surface));
}

.billing-payment-status[data-state='pending'] .billing-payment-status-icon {
  background: color-mix(in srgb, #e4a72c 20%, var(--surface));
  color: color-mix(in srgb, #e4a72c 78%, var(--ink));
}

.billing-payment-status[data-state='pending'] .billing-payment-status-icon::before {
  content: '…';
}

.billing-payment-status[data-state='success'] {
  border-color: color-mix(in srgb, #55b96b 58%, var(--border));
  background: color-mix(in srgb, #55b96b 14%, var(--surface));
}

.billing-payment-status[data-state='success'] .billing-payment-status-icon {
  background: color-mix(in srgb, #55b96b 22%, var(--surface));
  color: color-mix(in srgb, #55b96b 74%, var(--ink));
}

.billing-payment-status[data-state='success'] .billing-payment-status-icon::before {
  content: '✓';
}

.billing-payment-status[data-state='error'] {
  border-color: color-mix(in srgb, var(--coral) 62%, var(--border));
  background: color-mix(in srgb, var(--coral) 14%, var(--surface));
}

.billing-payment-status[data-state='error'] .billing-payment-status-icon {
  background: color-mix(in srgb, var(--coral) 22%, var(--surface));
  color: color-mix(in srgb, var(--coral) 80%, var(--ink));
}

.billing-payment-status[data-state='error'] .billing-payment-status-icon::before {
  content: '!';
}

.billing-payment-status[data-state='info'] .billing-payment-status-icon::before {
  content: 'i';
}

@keyframes billing-status-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .billing-payment-status[data-state='loading'] .billing-payment-status-icon {
    animation-duration: 1.8s;
  }
}

[data-theme='dark'] {
  --bg: #0c0b16;
  --surface: #131120;
  --surface-soft: #1a1630;
  --ink: #f7f5ff;
  --muted: #a49dbd;
  --border: #2b2640;
  --grid: rgba(255, 255, 255, .045);
  --primary: #987cff;
  --primary-strong: #7b5df5;
  --cyan: #35d5df;
  --coral: #ff8390;
  --lime: #c6f366;
  --shadow: 0 28px 80px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.site-shell { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px); }
.nav-shell { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: url("logo-mark.a0dc8adbc42d.svg") center/contain no-repeat; box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 26%, transparent); }
[data-theme='dark'] .brand-mark { background-image: url("logo-mark-dark.3e0e357e3d4c.svg"); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-family: "Avenir Next","Segoe UI Variable Display","SF Pro Display",Manrope,Inter,system-ui,sans-serif;
  font-size: .96rem;
  font-weight: 760;
  letter-spacing: -.07em;
  line-height: 1;
}
.brand-wordmark-din {
  padding-right: .03em;
  background: linear-gradient(110deg,var(--primary) 12%,var(--cyan));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
}
[data-theme='dark'] .brand-wordmark-din {
  background-image: linear-gradient(110deg,#a79cf8 12%,#43dae4);
}
.nav-actions { display: flex; align-items: center; gap: .4rem; }
.language-form { display: flex; align-items: center; gap: .45rem; }
.language-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.nav-control { min-height: 32px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); padding: 0 .55rem; font-size: .68rem; cursor: pointer; }
.language-form select { width: 54px; }
.theme-toggle { width: 32px; padding: 0; display: grid; place-items: center; font-size: .7rem; }
.nav-link { appearance: none; border: 0; background: transparent; font-size: .74rem; font-weight: 600; color: var(--muted); padding: .55rem .65rem; cursor: pointer; white-space: nowrap; }
.nav-link:hover { color: var(--primary); }
.logout-form { margin: 0; }
.nav-actions .nav-cta { min-height: 38px; padding-inline: .85rem; font-size: .74rem; }

.button { appearance: none; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--border); border-left: 0 !important; border-radius: 12px; outline: 0; padding: 0 1.1rem; background: var(--surface); color: var(--ink); font-size: .82rem; font-weight: 650; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.button:hover { transform: translateY(-2px); border-color: var(--primary); }
.button-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--primary-strong), var(--primary) 58%, var(--cyan)); box-shadow: none; }
.button-ghost { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.button-arrow { transition: transform 160ms ease; }
.button:hover .button-arrow { transform: translateX(4px); }
.button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: none; }

.hero { position: relative; min-height: 680px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 46px 46px; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg), transparent 42%, transparent 72%, var(--bg)); }
.hero-glow { position: absolute; width: 600px; height: 600px; right: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent) 42%, transparent 68%); filter: blur(55px); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 5rem; align-items: center; padding-block: 6.5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font: 500 .68rem DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.hero h1 { max-width: 680px; margin: 1rem 0 1.4rem; font: 650 clamp(2.5rem, 5.2vw, 4.6rem)/.98 Manrope, sans-serif; letter-spacing: -.065em; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--primary); }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { display: flex; gap: 1rem; align-items: center; margin-top: 1.4rem; color: var(--muted); font-size: .72rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 18%, transparent); }

.system-visual { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: auto; }
.visual-grid { position: absolute; inset: 12%; border: 1px solid var(--border); border-radius: 26px; transform: rotate(45deg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; box-shadow: var(--shadow); }
.orbit { position: absolute; inset: 13%; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 50%; animation: spin 30s linear infinite; }
.orbit-two { inset: 31%; border-style: dashed; animation-duration: 19s; animation-direction: reverse; }
.visual-node { position: absolute; z-index: 2; display: grid; place-items: center; align-content: center; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 15px 38px color-mix(in srgb, var(--primary) 12%, transparent); backdrop-filter: blur(12px); transition: transform 180ms ease, border-color 180ms ease; }
.visual-node:hover { transform: scale(1.08); border-color: var(--primary); }
.visual-node span { color: var(--muted); font: 500 .5rem DM Mono, monospace; letter-spacing: .08em; }
.visual-node strong { margin-top: .15rem; font: 650 .72rem Manrope, sans-serif; }
.node-main { inset: 37%; background: linear-gradient(145deg, var(--surface), var(--surface-soft)); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.node-a, .node-b, .node-c, .node-d { width: 74px; height: 74px; }
.node-a { left: 5%; top: 20%; }
.node-b { right: 0; top: 23%; }
.node-c { left: 10%; bottom: 12%; }
.node-d { right: 8%; bottom: 8%; }
.node-a strong { color: var(--coral); }.node-b strong { color: var(--cyan); }.node-c strong { color: var(--primary); }.node-d strong { color: #7cab12; }
.visual-status { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: var(--muted); font: 500 .58rem DM Mono, monospace; letter-spacing: .08em; white-space: nowrap; }

.metric-strip { border-bottom: 1px solid var(--border); background: var(--surface); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric { padding: 2rem; border-right: 1px solid var(--border); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; font: 650 1.7rem Manrope, sans-serif; color: var(--primary); }
.metric span { color: var(--muted); font-size: .75rem; }

.section { padding-block: 7rem; }
.section-head { max-width: 760px; margin-bottom: 3rem; }
.section-head h2 { margin: .8rem 0 1rem; font: 650 clamp(2rem, 4vw, 3.4rem)/1.05 Manrope, sans-serif; letter-spacing: -.05em; }
.section-head p { margin: 0; color: var(--muted); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card { position: relative; min-height: 270px; overflow: hidden; padding: 1.7rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: transform 180ms ease, box-shadow 180ms ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-index { color: var(--primary); font: 500 .66rem DM Mono, monospace; }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 2.4rem 0 1.2rem; border-radius: 14px; background: var(--surface-soft); color: var(--primary); font-size: 1.2rem; }
.feature-card h3 { margin: 0 0 .7rem; font: 650 1.08rem Manrope, sans-serif; }
.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }

.cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), color-mix(in srgb, var(--cyan) 8%, var(--surface))); }
.cta { padding-block: 6rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.cta h2 { max-width: 720px; margin: .8rem 0 0; font: 650 clamp(2rem, 4vw, 3.6rem)/1.04 Manrope, sans-serif; letter-spacing: -.055em; }
.site-footer { padding-block: 2rem; color: var(--muted); font-size: .72rem; }

.page-main { min-height: calc(100vh - 72px); padding-block: 4rem 6rem; background-image: radial-gradient(circle at 80% 5%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 30rem); }
.form-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: start; }
.form-intro { position: sticky; top: 120px; }
.form-intro h1 { margin: 1rem 0; font: 650 clamp(2rem, 4vw, 3.5rem)/1.04 Manrope, sans-serif; letter-spacing: -.05em; }
.form-intro p { color: var(--muted); line-height: 1.7; }
.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.form-card h2 { margin-top: 0; }
.form-card form p, .field { display: grid; gap: .45rem; margin: 0 0 1rem; }
.form-card label { color: var(--muted); font-size: .76rem; font-weight: 600; }
.form-card input, .form-card textarea, .form-card select { width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 11px; outline: 0; background: var(--bg); color: var(--ink); }
.form-card textarea { min-height: 130px; resize: vertical; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.form-card ul { margin: -.25rem 0 1rem; padding-left: 1.15rem; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.password-reset-confirmation { display: grid; gap: 1.15rem; }
.password-reset-confirmation-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, #249e67 13%, var(--surface)); color: #18794e; }
.password-reset-confirmation-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.password-reset-confirmation h2 { margin: 0 0 .45rem; }
.password-reset-confirmation p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.password-reset-confirmation .password-reset-help { padding-top: 1rem; border-top: 1px solid var(--border); font-size: .72rem; }
.password-reset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .72rem; }
.password-reset-actions a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
.password-reset-actions a:hover { color: var(--primary); }
.password-reset-actions span { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.upload-zone { position: relative; min-height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.25rem; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--border)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, var(--bg)), color-mix(in srgb, var(--cyan) 5%, var(--bg))); text-align: center; transition: border-color 160ms ease, transform 160ms ease; }
.upload-zone:hover { border-color: var(--cyan); transform: translateY(-2px); }
.upload-zone .upload-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: #fff; font-size: 1.25rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent); }
.upload-zone strong { font: 650 .84rem Manrope, sans-serif; }
.upload-zone small { color: var(--muted); font-size: .68rem; }
.form-card .upload-zone input[type='file'] { min-height: 40px; max-width: 330px; margin-top: .4rem; padding: .25rem; border: 0; background: transparent; color: var(--muted); font-size: .68rem; }
.upload-zone input[type='file']::file-selector-button { appearance: none; margin-right: .7rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 650; cursor: pointer; }
.helptext { color: var(--muted); font-size: .68rem; }
.errorlist { color: var(--coral); font-size: .72rem; }
.client-errorlist{margin:.35rem 0 0;padding-left:1rem}.field.has-validation-error input,.field.has-validation-error select,.field.has-validation-error textarea,.preference-option-card.has-validation-error{border-color:var(--coral)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 12%,transparent)!important}.field.has-validation-error>label{color:var(--coral)}

.dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.dashboard-head h1 { margin: .7rem 0 0; font: 650 clamp(2rem, 4vw, 3.2rem)/1 Manrope, sans-serif; letter-spacing: -.05em; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem; }
.panel { padding: 1.5rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.panel-head h2 { margin: 0; font: 650 1rem Manrope, sans-serif; }
.plan-chip { padding: .45rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--lime) 20%, var(--surface)); color: var(--ink); font: 500 .62rem DM Mono, monospace; text-transform: uppercase; }
.plan-chip.is-inactive{background:color-mix(in srgb,var(--coral) 12%,var(--surface));color:var(--coral)}
.run-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.run-item { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); font-size: .75rem; }
.status { color: var(--primary); font: 500 .62rem DM Mono, monospace; text-transform: uppercase; }

/* Authenticated workspace: compact sidebar shell inspired by Stockfy's product UI. */
.app-body { min-width: 320px; }
.app-shell { min-height: 100vh; display: flex; background: color-mix(in srgb, var(--bg) 94%, var(--surface-soft)); }
.app-sidebar { position: sticky; top: 0; z-index: 50; width: 252px; height: 100vh; height: 100dvh; max-height: 100dvh; flex: 0 0 252px; display: flex; flex-direction: column; overflow: hidden; padding: 1rem .75rem .75rem; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft)); }
.app-sidebar-brand { min-height: 50px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 .55rem 1rem; }
.app-sidebar-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
.app-sidebar-close, .app-sidebar-toggle, .app-menu-toggle, .app-icon-button { appearance: none; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.app-sidebar-close { display: none; font-size: 1.4rem; }
.app-sidebar-toggle svg,.app-menu-toggle svg, .app-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-sidebar-close:hover,.app-sidebar-toggle:hover, .app-menu-toggle:hover, .app-icon-button:hover { color: var(--ink); background: var(--surface-soft); }
.app-nav { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .22rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: .55rem; }
.app-nav-label { padding: .8rem .75rem .55rem; color: var(--muted); font: 500 .58rem DM Mono, monospace; letter-spacing: .09em; text-transform: uppercase; }
.app-nav-link { position: relative; min-height: 43px; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem; border-radius: 10px; color: var(--muted); font-size: .78rem; font-weight: 550; transition: background .15s, color .15s, transform .15s; }
.app-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-nav-link:hover { color: var(--ink); background: var(--surface-soft); transform: translateX(2px); }
.app-nav-link.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-weight: 650; }
.app-nav-link.is-active::after { content: ''; position: absolute; right: .4rem; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.app-nav-link.is-active::after { display: none; }
.app-nav-badge { margin-left: auto; padding: .2rem .35rem; border-radius: 5px; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: white; font: 600 .5rem DM Mono, monospace; letter-spacing: .04em; }
.app-sidebar-spacer { display: none; }
.app-sidebar-footer { position: relative; flex: 0 0 auto; display: block; padding: .8rem .2rem .15rem; border-top: 1px solid var(--border); }
.app-user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: white; font: 650 .78rem Manrope, sans-serif; }
.app-user-avatar-wrap{position:relative;display:grid}.app-notification-avatar-badge{position:absolute;top:-5px;right:-7px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface);border-radius:999px;background:var(--primary);color:#fff;font:750 .44rem 'DM Mono',monospace}.app-notification-avatar-badge[hidden]{display:none}
.app-user-meta { min-width: 0; display: grid; gap: .1rem; }
.app-user-meta strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.app-user-meta span { color: var(--muted); font-size: .56rem; }
.app-user-menu{position:relative}.app-user-menu summary{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:.6rem;padding:.3rem;border-radius:10px;cursor:pointer;list-style:none}.app-user-menu summary::-webkit-details-marker{display:none}.app-user-menu summary:hover{background:var(--surface-soft)}.app-user-menu summary>svg{width:15px;fill:none;stroke:var(--muted);stroke-width:1.8}.user-plan-tag{width:max-content;padding:.14rem .35rem;border-radius:999px;background:color-mix(in srgb,var(--lime) 18%,var(--surface));color:var(--ink)!important;font:600 .48rem DM Mono,monospace;text-transform:uppercase}.app-user-popover{position:absolute;z-index:70;left:.2rem;right:.2rem;bottom:calc(100% + .45rem);display:grid;padding:.35rem;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:0 16px 36px rgba(15,12,35,.14)}.app-user-popover a,.app-user-popover button{width:100%;display:flex;justify-content:space-between;padding:.65rem .7rem;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:.66rem;text-align:left;cursor:pointer}.app-user-popover a:hover,.app-user-popover button:hover{background:var(--surface-soft)}.app-user-popover strong{color:var(--primary);font-size:.55rem;text-transform:uppercase}
.app-user-popover>div{display:grid}.app-user-popover>div[hidden]{display:none}.app-user-popover .app-user-menu-back{justify-content:flex-start;border-bottom:1px solid var(--border);border-radius:7px 7px 0 0;color:var(--muted);font-size:.58rem}
.app-notifications-popover{position:fixed;z-index:85;bottom:.95rem;left:calc(252px + .65rem);width:min(370px,calc(100vw - 1rem));overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 24px 65px rgba(15,12,35,.2)}.app-shell.sidebar-collapsed>.app-notifications-popover{left:calc(72px + .65rem)}.app-notifications-popover[hidden]{display:none}.app-notifications-popover>header{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.85rem .9rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}.app-notifications-popover h2{display:flex;align-items:center;gap:.4rem;margin:.15rem 0 0;font-size:.88rem}.app-notifications-popover h2 i{min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font:750 .48rem 'DM Mono',monospace;font-style:normal}.notification-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid var(--border)}.notification-toolbar button,.notification-pagination button,.notification-selection-actions button{padding:.35rem .45rem;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.56rem;font-weight:700;cursor:pointer}.notification-toolbar button:hover,.notification-pagination button:hover:not(:disabled),.notification-selection-actions button:hover{background:var(--surface-soft);color:var(--primary)}.notification-select-all span{font-size:.78rem}.notification-select-all[aria-pressed=true] span{color:var(--primary)}.notification-list{display:grid;max-height:min(390px,52dvh);overflow-y:auto}.notification-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.35rem;padding:.7rem;border-bottom:1px solid var(--border);background:var(--surface)}.notification-item.is-unread{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}.notification-item:last-child{border-bottom:0}.notification-item>input{width:15px;height:15px;margin:.15rem 0 0;accent-color:var(--primary)}.notification-item-open{min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.notification-item-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.notification-item-head strong{font-size:.66rem}.notification-item-head time{flex:0 0 auto;color:var(--muted);font-size:.47rem}.notification-item p{margin:.22rem 0 0;color:var(--muted);font-size:.58rem;line-height:1.45}.notification-item.is-unread .notification-item-head strong::before{content:'';display:inline-block;width:6px;height:6px;margin-right:.35rem;border-radius:50%;background:var(--primary);vertical-align:middle}.notification-empty{display:grid;justify-items:center;gap:.25rem;padding:2rem 1rem;color:var(--muted);text-align:center}.notification-empty span{font-size:1.1rem}.notification-empty strong{color:var(--ink);font-size:.68rem}.notification-empty p{margin:0;font-size:.56rem}.notification-selection-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .75rem;border-top:1px solid var(--border);background:color-mix(in srgb,var(--primary) 4%,var(--surface))}.notification-selection-actions[hidden]{display:none}.notification-selection-actions>span{color:var(--muted);font-size:.53rem}.notification-selection-actions>div{display:flex;gap:.25rem}.notification-pagination{display:flex;align-items:center;justify-content:center;gap:.65rem;padding:.5rem;border-top:1px solid var(--border)}.notification-pagination span{color:var(--muted);font-size:.5rem}.notification-pagination button:disabled{cursor:default;opacity:.35}@media(max-width:900px){.app-notifications-popover,.app-shell.sidebar-collapsed>.app-notifications-popover{position:fixed;right:.5rem;bottom:.5rem;left:.5rem;width:auto;max-height:calc(100dvh - 1rem)}.notification-list{max-height:55dvh}}
.app-workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.app-topbar { min-height: 62px; display: flex; align-items: center; gap: .75rem; padding: 0 clamp(1rem, 3vw, 2rem); background: transparent; }
.app-menu-toggle { display: none; }
.app-topbar-title { color: var(--muted); font-size: .7rem; font-weight: 600; }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.app-topbar .nav-control { min-height: 30px; height: 30px; }
.app-content { min-width: 0; flex: 1; scroll-behavior: smooth; }
.app-sidebar,.app-sidebar span,.app-sidebar .brand{transition:width .2s,flex-basis .2s,opacity .15s}.app-shell.sidebar-collapsed .app-sidebar{width:72px;flex-basis:72px}.app-shell.sidebar-collapsed .app-sidebar-brand{justify-content:center;padding-inline:0}.app-shell.sidebar-collapsed .app-sidebar-brand .brand,.app-shell.sidebar-collapsed .app-nav-label,.app-shell.sidebar-collapsed .app-nav-link>span,.app-shell.sidebar-collapsed .app-user-meta,.app-shell.sidebar-collapsed .app-user-menu summary>svg{display:none}.app-shell.sidebar-collapsed .app-nav-link{justify-content:center;padding:0}.app-shell.sidebar-collapsed .app-nav-link.is-active::after{right:.2rem}.app-shell.sidebar-collapsed .app-user-menu summary{display:flex;justify-content:center}.app-shell.sidebar-collapsed .app-user-popover{left:52px;right:auto;bottom:0;width:190px}.app-shell.sidebar-collapsed .app-sidebar-toggle{display:inline-grid}
.plans-page{padding-top:2.5rem;padding-bottom:5rem}.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.plan-card{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.plan-card.is-current{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}.plan-code{color:var(--primary);font:650 .66rem DM Mono,monospace;text-transform:uppercase}.plan-card h2{margin:.35rem 0 0;font:700 1.55rem Manrope,sans-serif}.plan-card h2 small{color:var(--muted);font-size:.62rem}.plan-card ul{min-height:185px;margin:0;padding-left:1.05rem;color:var(--muted);font-size:.68rem;line-height:1.9}.plan-card .button{margin-top:auto;text-align:center}.legal-page{max-width:900px}.legal-page h1{margin:.7rem 0}.legal-published{color:var(--muted)}.legal-copy{margin-top:1.25rem;line-height:1.8}.legal-links{font-size:.65rem}
.plan-cancel{font-size:.68rem}.plan-cancel summary{cursor:pointer;color:var(--muted);text-align:center}.plan-cancel p{color:var(--muted);line-height:1.5}.plan-cancel .button{width:100%}
.plan-support-link{color:var(--muted);font-size:.62rem;line-height:1.45;text-align:center}.plan-support-link:hover{color:var(--primary)}
@media(max-width:1000px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.plan-grid{grid-template-columns:1fr}}
.support-widget{position:fixed;z-index:90;right:1.1rem;bottom:1.1rem}.support-widget>summary{display:flex;align-items:center;gap:.5rem;padding:.72rem .95rem;border-radius:999px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,var(--cyan)));color:#fff;box-shadow:0 14px 34px color-mix(in srgb,var(--primary) 32%,transparent);cursor:pointer;list-style:none;font-size:.68rem}.support-widget>summary::-webkit-details-marker{display:none}.support-widget>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.support-widget[open]>summary{display:none}.support-widget-panel{position:absolute;right:0;bottom:0;width:min(390px,calc(100vw - 1.5rem));height:min(620px,calc(100vh - 2rem));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 22px 60px rgba(15,12,35,.24)}.support-widget-panel>header{display:grid;grid-template-columns:36px minmax(0,1fr) 30px;align-items:center;gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface))}.support-widget-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-weight:750}.support-widget h2{margin:0;font-size:.78rem}.support-widget header p{margin:.12rem 0 0;color:var(--muted);font-size:.53rem}.support-widget-close{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer}.support-widget-close:hover{background:var(--surface-soft);color:var(--ink)}.support-widget-tickets{display:flex;gap:.4rem;padding:.55rem .7rem;overflow-x:auto;border-bottom:1px solid var(--border)}.support-widget-tickets form{flex:0 0 auto}.support-widget-tickets button{display:grid;gap:.08rem;padding:.38rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);font:600 .51rem 'DM Mono',monospace;cursor:pointer}.support-widget-tickets button.is-active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary)}.support-widget-tickets small{color:var(--muted);font-size:.43rem}.support-widget-thread{flex:1;display:flex;flex-direction:column;gap:.65rem;overflow:auto;padding:1rem;background:color-mix(in srgb,var(--bg) 55%,var(--surface))}.support-widget-message{align-self:flex-start;max-width:82%;padding:.62rem .72rem;border:1px solid var(--border);border-radius:4px 13px 13px 13px;background:var(--surface)}.support-widget-message.is-customer{align-self:flex-end;border-color:transparent;border-radius:13px 4px 13px 13px;background:color-mix(in srgb,var(--primary) 14%,var(--surface))}.support-widget-message strong{display:block;font-size:.5rem}.support-widget-message p{margin:.22rem 0;font-size:.64rem;line-height:1.5;color:var(--ink)}.support-widget-message time{display:block;color:var(--muted);font-size:.46rem;text-align:right}.support-widget-welcome{flex:1;display:grid;place-items:center;align-content:center;gap:.35rem;padding:2rem;text-align:center}.support-widget-welcome span{font-size:1.6rem}.support-widget-welcome strong{font-size:.78rem}.support-widget-welcome p{max-width:28ch;margin:0;color:var(--muted);font-size:.6rem;line-height:1.55}.support-widget-compose{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:end;gap:.45rem;padding:.65rem;border-top:1px solid var(--border);background:var(--surface)}.support-widget input,.support-widget textarea,.support-thread textarea{width:100%;padding:.65rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);resize:none}.support-widget-compose textarea{max-height:100px}.support-widget-compose button{width:36px;height:36px;padding:0;border:0;border-radius:10px;background:var(--primary);color:#fff;cursor:pointer}.support-widget-new{padding:.1rem .7rem .65rem;background:var(--surface)}.support-widget-new>summary{color:var(--primary);font-size:.54rem;cursor:pointer}.support-widget-new form,.support-widget-new-form{display:grid;gap:.5rem;padding:.65rem}.support-widget label{font-size:.56rem;font-weight:650}.support-widget-new-form{margin-top:auto}.support-widget-new-form small,.support-widget-closed{color:var(--muted);font-size:.5rem}.backoffice-list{display:grid}.backoffice-list>a{display:grid;grid-template-columns:minmax(0,1fr) auto 130px;align-items:center;gap:1rem;padding:.9rem;border-bottom:1px solid var(--border)}.backoffice-list>a div{display:grid;gap:.2rem}.backoffice-list span,.backoffice-list time{color:var(--muted);font-size:.62rem}.support-thread{display:grid;gap:.75rem}.support-thread-message{max-width:78%;padding:.85rem 1rem;border-radius:12px;background:var(--surface-soft)}.support-thread-message.is-customer{margin-left:auto;background:color-mix(in srgb,var(--primary) 10%,var(--surface))}.support-thread-message p{margin:.35rem 0;font-size:.72rem}.support-thread-message time{color:var(--muted);font-size:.54rem}.support-thread form{display:grid;gap:.6rem;margin-top:1rem}@media(max-width:520px){.support-widget{right:.65rem;bottom:.65rem}.support-widget-panel{position:fixed;inset:.5rem;width:auto;height:auto;border-radius:14px}}
.support-center-grid{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);align-items:start;gap:1rem}.support-compose{display:grid;gap:.65rem;position:sticky;top:1rem}.support-compose h2{margin:0;font-size:1rem}.support-compose textarea{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical}.support-conversations{display:grid;gap:1rem}.backoffice-client-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 90px;align-items:center;gap:1rem;padding:.9rem;border-bottom:1px solid var(--border)}.backoffice-client-row div{display:grid;gap:.2rem}.backoffice-client-row span,.backoffice-client-row time{color:var(--muted);font-size:.62rem}@media(max-width:760px){.support-center-grid{grid-template-columns:1fr}.support-compose{position:static}.backoffice-client-row{grid-template-columns:1fr auto}.backoffice-client-row time{display:none}}
.integration-error{display:block;margin-top:.2rem;color:var(--danger)!important;max-width:52ch}
.backoffice-module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.backoffice-module{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:.8rem;color:var(--ink)}.backoffice-module>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);color:var(--primary)}.backoffice-module strong{font-size:.78rem}.backoffice-module p{margin:.25rem 0 0;color:var(--muted);font-size:.62rem}.backoffice-module i{font-style:normal;color:var(--muted)}
.backoffice-body{margin:0;background:var(--bg);color:var(--ink)}.backoffice-shell{min-height:100vh;display:grid;grid-template-columns:230px minmax(0,1fr)}.backoffice-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:1rem;background:#151226;color:#fff}.backoffice-sidebar .brand{color:#fff}.backoffice-sidebar-label{margin:1.25rem .65rem .45rem;color:#8f89a8;font-size:.57rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.backoffice-nav{display:grid;gap:.25rem}.backoffice-nav a{display:flex;align-items:center;gap:.65rem;padding:.65rem .7rem;border-radius:9px;color:#c9c5d8;font-size:.68rem}.backoffice-nav a:hover,.backoffice-nav a.is-active{background:rgba(255,255,255,.09);color:#fff}.backoffice-nav a span{width:18px;text-align:center}.backoffice-sidebar-user{display:grid;gap:.25rem;padding:.8rem .65rem;border-top:1px solid rgba(255,255,255,.1)}.backoffice-sidebar-user strong{font-size:.68rem}.backoffice-sidebar-user span{overflow:hidden;color:#9690aa;font-size:.56rem;text-overflow:ellipsis}.backoffice-sidebar-user form{margin-top:.5rem}.backoffice-sidebar-user button{padding:0;border:0;background:none;color:#d9d5e4;cursor:pointer;font-size:.62rem}.backoffice-content{min-width:0;padding:1.4rem 1.8rem}@media(max-width:760px){.backoffice-shell{grid-template-columns:1fr}.backoffice-sidebar{position:static;height:auto}.backoffice-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.backoffice-content{padding:1rem}.backoffice-sidebar .app-sidebar-spacer{display:none}}
.backoffice-inbox{display:grid;gap:1rem}.backoffice-inbox-head{display:flex;align-items:end;justify-content:space-between;gap:1rem}.backoffice-inbox-head h1{margin:.35rem 0 .2rem;font:700 1.8rem Manrope,sans-serif}.backoffice-inbox-head p{margin:0;color:var(--muted);font-size:.68rem}.backoffice-inbox-metrics{display:flex;align-items:center;gap:.55rem}.backoffice-inbox-metrics>span{padding:.45rem .6rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:.56rem}.backoffice-inbox-metrics strong{color:var(--ink)}.support-inbox-shell{height:calc(100vh - 155px);min-height:560px;display:grid;grid-template-columns:330px minmax(0,1fr);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.support-inbox-sidebar{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border)}.support-inbox-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;padding:.65rem;border-bottom:1px solid var(--border)}.support-inbox-filters a{padding:.45rem;border-radius:8px;color:var(--muted);font-size:.58rem;font-weight:650;text-align:center}.support-inbox-filters a.is-active{background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}.support-ticket-list{overflow:auto}.support-ticket-card{position:relative;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:.55rem;padding:.75rem;border-bottom:1px solid var(--border);color:var(--ink)}.support-ticket-card:hover,.support-ticket-card.is-active{background:var(--surface-soft)}.support-ticket-dot{width:7px;height:7px;margin-top:.25rem;border-radius:50%;background:var(--border)}.support-ticket-card.needs-reply .support-ticket-dot{background:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 14%,transparent)}.support-ticket-card>div{min-width:0;display:grid;gap:.12rem}.support-ticket-card strong{font:650 .58rem 'DM Mono',monospace}.support-ticket-card span,.support-ticket-card p,.support-ticket-card time,.support-ticket-card small{overflow:hidden;color:var(--muted);font-size:.51rem;text-overflow:ellipsis;white-space:nowrap}.support-ticket-card p{margin:.18rem 0 0}.support-ticket-card small{grid-column:2/4;color:var(--primary)}.support-inbox-empty{padding:2rem;color:var(--muted);font-size:.62rem;text-align:center}.support-inbox-conversation{min-width:0;display:flex;flex-direction:column}.support-inbox-conversation>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--border)}.support-inbox-conversation>header span{color:var(--primary);font:650 .54rem 'DM Mono',monospace}.support-inbox-conversation h2{margin:.15rem 0;font-size:.82rem}.support-inbox-conversation>header p{margin:0;color:var(--muted);font-size:.52rem}.support-inbox-actions{display:flex;align-items:center;gap:.5rem}.support-inbox-actions form{margin:0}.support-inbox-thread{flex:1;display:flex;flex-direction:column;gap:.7rem;overflow:auto;padding:1rem;background:color-mix(in srgb,var(--bg) 55%,var(--surface))}.support-inbox-compose{display:grid;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}.support-inbox-compose textarea{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);resize:none}.support-inbox-compose>div{display:flex;align-items:center;justify-content:space-between}.support-inbox-compose small,.support-inbox-closed{color:var(--muted);font-size:.52rem}.support-inbox-closed{padding:1rem;text-align:center;border-top:1px solid var(--border)}.support-inbox-empty-state{flex:1;display:grid;place-items:center;align-content:center;gap:.4rem;color:var(--muted);text-align:center}.support-inbox-empty-state span{font-size:1.6rem}.support-inbox-empty-state strong{color:var(--ink);font-size:.76rem}.support-inbox-empty-state p{margin:0;font-size:.58rem}@media(max-width:900px){.support-inbox-shell{grid-template-columns:280px minmax(0,1fr)}}@media(max-width:700px){.backoffice-inbox-head{align-items:flex-start;flex-direction:column}.support-inbox-shell{height:auto;grid-template-columns:1fr}.support-inbox-sidebar{max-height:320px;border-right:0;border-bottom:1px solid var(--border)}.support-inbox-conversation{min-height:560px}}
.app-sidebar-overlay { display: none; }
.app-page { width: min(1320px, calc(100% - clamp(2rem, 5vw, 5rem))); margin-inline: auto; padding: 2.4rem 0 5rem; }
.app-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.app-page-heading h1 { max-width: 720px; margin: .55rem 0 .4rem; font: 650 clamp(1.85rem, 3.2vw, 2.85rem)/1.05 Manrope, sans-serif; letter-spacing: -.05em; }
.app-page-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.button-play { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); font-size: .56rem; }

.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: .8rem; }
.metric-card { position: relative; min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .8rem; min-height: 126px; padding: 1.15rem; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.metric-card::before { content: ''; position: absolute; width: 110px; height: 110px; right: -55px; top: -55px; border-radius: 50%; background: color-mix(in srgb, var(--metric-color) 10%, transparent); }
.metric-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--metric-color) 12%, var(--surface)); color: var(--metric-color); font-size: 1.15rem; }
.metric-card > div:nth-child(2) { min-width: 0; display: grid; }
.metric-card span { color: var(--muted); font-size: .65rem; }
.metric-card strong { margin: .1rem 0; font: 650 1.75rem Manrope, sans-serif; letter-spacing: -.04em; }
.metric-card small { overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-card .metric-trend { position: absolute; top: .8rem; right: .8rem; padding: .25rem .42rem; border-radius: 999px; background: color-mix(in srgb, var(--metric-color) 9%, var(--surface)); color: var(--metric-color); font: 500 .48rem DM Mono, monospace; text-transform: uppercase; }
.metric-violet { --metric-color: var(--primary); }.metric-cyan { --metric-color: var(--cyan); }.metric-lime { --metric-color: #78a914; }.metric-coral { --metric-color: var(--coral); }
.linkedin-card { min-width: 0; display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; align-items: center; gap: 1rem; margin-bottom: .8rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(105deg, color-mix(in srgb,#0a66c2 6%,var(--surface)), var(--surface) 45%); }
.linkedin-brand { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: #0a66c2; color: white; font: 700 1rem Arial,sans-serif; }
.linkedin-copy { min-width: 0; }.linkedin-copy h2 { margin: .1rem 0 .22rem; font: 650 .92rem Manrope,sans-serif; }.linkedin-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.linkedin-state { display: grid; justify-items: end; gap: .35rem; }.linkedin-state small { color: var(--muted); font-size: .52rem; white-space: nowrap; }
.connection-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .52rem; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font: 600 .5rem DM Mono,monospace; text-transform: uppercase; }.connection-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.connection-chip.is-connected { color: #4c7b0b; background: color-mix(in srgb,var(--lime) 20%,var(--surface)); }.connection-chip.is-warning { color: #946b00; background: #fff6d8; }
.linkedin-action:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .6fr); gap: .8rem; margin-bottom: .8rem; }
.activity-lines{display:block;width:100%;min-width:700px;height:auto;overflow:visible}.activity-grid line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}.activity-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 5px color-mix(in srgb,currentColor 16%,transparent))}.activity-line.opportunities{stroke:#78a914;color:#78a914}.activity-line.applications{stroke:var(--primary);color:var(--primary)}.activity-line.connections{stroke:var(--cyan,#22b8cf);color:var(--cyan,#22b8cf)}.activity-area.opportunities{fill:url(#activity-opportunities-fill)}.activity-point{stroke:var(--surface);stroke-width:2;transition:r .15s ease}.activity-point:hover{r:6}.activity-point.opportunities{fill:#78a914}.activity-point.applications{fill:var(--primary)}.activity-point.connections{fill:var(--cyan,#22b8cf)}.activity-axis-label,.activity-y-axis-label{fill:var(--muted);font:500 9px 'DM Mono',monospace}.activity-y-axis-label.is-mobile-edge{display:none}.activity-latest-values text{font:750 10px 'DM Mono',monospace;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}.activity-latest-values .opportunities{fill:#78a914}.activity-latest-values .applications{fill:var(--primary)}.activity-latest-values .connections{fill:var(--cyan,#22b8cf)}@media(max-width:700px){.activity-y-axis-label.is-mobile-edge{display:block}}
.history-list{overflow:hidden;padding:0}.history-row{display:grid;grid-template-columns:minmax(0,1fr) 70px 150px auto;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}.history-row>div:first-child{display:grid;gap:.25rem}.history-row span{color:var(--muted);font-size:.68rem}.history-fit{font-weight:750;color:var(--primary)}.history-link{font-size:.68rem;color:var(--primary)}@media(max-width:700px){.history-row{grid-template-columns:1fr auto}.history-row>div:nth-child(3),.history-link{grid-column:2}}
.history-answers{margin-top:.35rem}.history-answers summary{width:fit-content;padding:.38rem .58rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--primary);font-size:.65rem;font-weight:700;cursor:pointer;list-style:none}.history-answers summary::-webkit-details-marker{display:none}.history-answers[open] summary{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.history-answers dl{display:grid;gap:.45rem;margin:.55rem 0 0;padding:.65rem;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.history-answers dl div{display:grid;gap:.15rem}.history-answers dt{font-size:.67rem;font-weight:700}.history-answers dd{margin:0;color:var(--muted);font-size:.68rem;white-space:pre-line}
.history-table-head{display:grid;grid-template-columns:minmax(0,1fr) 70px 150px auto;gap:1rem;padding:.58rem 1.2rem;border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font:700 .55rem 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase}.history-row{gap:.75rem;padding:.78rem 1rem}.history-row>div:first-child>strong{font-size:.74rem}.history-row span,.history-link{font-size:.6rem}.history-fit{font-size:.72rem}.history-row .status{padding:.26rem .4rem;font-size:.52rem}.history-feedback{display:flex;grid-column:1/-1;align-items:center;gap:.32rem;padding-top:.45rem;border-top:1px solid var(--border)}.history-feedback>span{margin-right:.12rem}.history-feedback .button{min-height:26px;padding:.2rem .48rem;font-size:.58rem}.history-documents a,.history-documents span,.history-job-description summary,.history-answers summary{font-size:.58rem}.history-answers dt{font-size:.61rem}.history-answers dd{font-size:.6rem}@media(max-width:700px){.history-table-head{display:none}.history-feedback{flex-wrap:wrap}.history-row{padding:.72rem}}
.activity-row-link{color:var(--ink);text-decoration:none;transition:background .16s,border-color .16s}.activity-row-link:hover,.activity-row-link:focus-visible{background:color-mix(in srgb,var(--primary) 4%,var(--surface));outline:0}.status-warning{color:#9b7011}.status-danger{color:#b83243}
.history-filters{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;align-items:end;gap:.7rem;margin-bottom:.8rem;padding:.8rem}.history-filters label{display:grid;gap:.3rem;color:var(--muted);font-size:.57rem;font-weight:750}.history-filters select{min-height:36px;padding:.42rem .6rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font-size:.64rem}.history-unified-head,.history-activity-row{grid-template-columns:minmax(220px,1fr) 90px 150px auto}.history-activity-row{cursor:pointer;color:var(--ink);transition:background .16s,border-color .16s}.history-activity-row:hover,.history-activity-row:focus-visible{background:color-mix(in srgb,var(--primary) 4%,var(--surface));outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:-2px}.history-kind{display:inline-flex;width:fit-content;padding:.26rem .42rem;border-radius:999px;background:var(--surface-soft);color:var(--muted)!important;font-size:.52rem!important;font-weight:750}.history-kind.is-application{background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)!important}.history-kind.is-connection{background:color-mix(in srgb,var(--cyan) 11%,var(--surface));color:color-mix(in srgb,var(--cyan) 80%,var(--ink))!important}.history-summary-button{min-height:30px;padding:.3rem .58rem;font-size:.58rem}.history-list>.service-pagination{padding:.8rem}.activity-detail-dialog{position:relative;width:min(700px,calc(100vw - 2rem));grid-template-rows:auto minmax(0,1fr) auto!important}.activity-detail-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.8rem;padding:1.1rem 3.5rem 1rem 1.2rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 6%,var(--surface)),var(--surface))}.activity-detail-heading>div{display:grid;gap:.18rem}.activity-detail-heading h2{margin:0;font-size:1.05rem}.activity-detail-heading p{margin:0;color:var(--muted);font-size:.6rem}.activity-detail-body{display:grid;gap:.7rem;overflow-y:auto;padding:1rem 1.2rem}.activity-detail-section{display:grid;gap:.4rem;padding:.75rem;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.activity-detail-section h3{margin:0;color:var(--muted);font:.7rem 'DM Mono',monospace}.activity-detail-section p{margin:0;font-size:.66rem;line-height:1.55}.activity-detail-long-text{max-height:220px;overflow:auto;white-space:pre-line}.activity-detail-answers{display:grid;gap:.5rem;margin:0}.activity-detail-answers>div{display:grid;gap:.15rem}.activity-detail-answers dt{font-size:.64rem;font-weight:750}.activity-detail-answers dd{margin:0;color:var(--muted);font-size:.63rem;white-space:pre-line}.activity-detail-documents{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem}.activity-detail-documents>span{color:var(--muted);font-size:.6rem}.activity-detail-message{padding:.65rem;border-left:3px solid var(--primary);background:var(--surface);white-space:pre-line}.activity-detail-actions{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.2rem;border-top:1px solid var(--border)}@media(max-width:760px){.history-filters{grid-template-columns:1fr 1fr}.history-filters button{width:100%}.history-unified-head{display:none}.history-activity-row{grid-template-columns:minmax(0,1fr) auto}.history-activity-row>div:first-child{grid-column:1/-1}.history-activity-row>div:nth-child(3){grid-column:auto}.history-summary-button{justify-self:end}.activity-detail-heading{grid-template-columns:1fr;padding-right:3rem}.activity-detail-heading>.status{justify-self:start}}@media(max-width:520px){.history-filters{grid-template-columns:1fr}.history-activity-row{grid-template-columns:1fr auto}.history-feedback{align-items:flex-start}.history-feedback>span{flex-basis:100%}.activity-detail-dialog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}.activity-detail-actions{align-items:stretch;flex-direction:column}.activity-detail-actions .button{width:100%;text-align:center}}
.profile-page .form-layout{grid-template-columns:1fr}.profile-page .form-intro{position:static;max-width:760px}.profile-page .form-card{max-width:860px}.fit-score-output{display:inline-block;margin-left:.65rem;color:var(--primary);font-weight:750}.profile-page input[type=range]{accent-color:var(--primary);padding:0}.app-page h1{font-size:clamp(1.65rem,3vw,2.35rem)}.app-page h2{font-size:1.05rem}.app-page p{font-size:.78rem}.search-page .dashboard-head h1{font-size:clamp(1.8rem,3.5vw,2.8rem)}.search-section{margin-top:1rem}.strategy-item{padding:.8rem}.strategy-summary{gap:.55rem}.strategy-url{margin:.55rem 0}.app-nav-link{font-size:.72rem}.app-topbar-title{font-size:.62rem}
.fit-score-warning{margin:.55rem 0 0;padding:.65rem .72rem;border:1px solid color-mix(in srgb,#b98212 35%,var(--border));border-radius:10px;background:color-mix(in srgb,#f2cb62 14%,var(--surface));color:#805b08;font-size:.63rem;line-height:1.5}.fit-score-warning[hidden]{display:none}[data-theme='dark'] .fit-score-warning{color:#f2cb62;background:color-mix(in srgb,#f2cb62 9%,var(--surface))}
.history-kind.is-scan{background:color-mix(in srgb,#8a63d2 12%,var(--surface));color:#6944ad!important}.activity-support-id{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.activity-support-id code{overflow-wrap:anywhere;font-size:.62rem}
.history-kind.is-strategy { background: color-mix(in srgb,#d98b27 13%,var(--surface)); color: #a45d00!important; }
.dashboard-page .panel { padding: 1.25rem; border-radius: 16px; box-shadow: none; }
.panel-kicker { display: block; margin-bottom: .22rem; color: var(--muted); font: 500 .52rem DM Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.chart-legend { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .55rem; }
.chart-legend span { display: flex; align-items: center; gap: .35rem; }
.chart-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.legend-opportunities { background: #78a914; }.legend-applications { background: var(--primary); }.legend-connections { background: var(--cyan); }
.chart-period { display: block; margin-top: .2rem; color: var(--muted); font-size: .54rem; }
.chart-wrap { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.activity-chart { width: 100%; height: 230px; overflow: visible; }
.chart-grid-lines { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 6; }
.chart-area { fill: url(#chartFill); }
.chart-line, .chart-line-secondary { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart-line { stroke: var(--primary); stroke-width: 3; }.chart-line-secondary { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 5; }
.chart-dots { fill: var(--surface); stroke: var(--primary); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; padding: 0 .5rem; color: var(--muted); font: 500 .5rem DM Mono, monospace; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.quota-card { display: flex; min-width: 0; flex-direction: column; }
.quota-ring { --quota-progress: 72; width: 132px; height: 132px; display: grid; place-items: center; margin: .2rem auto 1.2rem; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--quota-progress) * 1%), color-mix(in srgb, var(--border) 75%, transparent) 0); }
.quota-ring::before { content: ''; grid-area: 1/1; width: 105px; height: 105px; border-radius: 50%; background: var(--surface); }
.quota-ring div { z-index: 1; grid-area: 1/1; display: grid; text-align: center; }
.quota-ring strong { font: 650 1.6rem Manrope, sans-serif; }.quota-ring span { color: var(--muted); font-size: .55rem; }
.quota-ring.is-capacity { background: repeating-conic-gradient(var(--primary) 0 8deg,color-mix(in srgb,var(--primary) 18%,var(--surface)) 8deg 12deg); }
.quota-ring.is-unavailable { background: color-mix(in srgb,var(--border) 75%,transparent); }
.quota-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .65rem; }.quota-row strong { color: var(--ink); }
.plan-capacity-viewport { min-width: 0; overflow: hidden; }
.plan-capacity-track { display: flex; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
.plan-capacity-track::-webkit-scrollbar { display: none; }
.plan-capacity-track:focus-visible { outline: 2px solid color-mix(in srgb,var(--primary) 65%,transparent); outline-offset: -2px; border-radius: 12px; }
.plan-capacity-slide { min-width: 100%; flex: 0 0 100%; padding-inline: max(0px,calc((100% - 420px)/2)); box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
.plan-capacity-label { display: block; min-height: 1.1rem; margin: .15rem 0 .7rem; color: var(--ink); font-size: .74rem; text-align: center; }
.plan-capacity-slide.is-unavailable .plan-capacity-label { color: var(--muted); }
.plan-capacity-navigation { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; align-items: center; gap: .55rem; margin: .45rem 0 .25rem; }
.plan-capacity-arrow { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); color: var(--primary); cursor: pointer; }
.plan-capacity-arrow:hover:not(:disabled),.plan-capacity-arrow:focus-visible { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--surface)); outline: 0; }
.plan-capacity-arrow:disabled { color: var(--muted); cursor: default; opacity: .4; }
.plan-capacity-dots { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.plan-capacity-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb,var(--muted) 35%,transparent); cursor: pointer; transition: width .18s,background .18s; }
.plan-capacity-dots button[aria-current=true] { width: 19px; background: var(--primary); }
.plan-capacity-dots button:focus-visible { outline: 2px solid color-mix(in srgb,var(--primary) 50%,transparent); outline-offset: 3px; }
.plan-capacity-card > .button { width: 100%; margin-top: .65rem; }
.service-cycle-tag { display: inline-flex; width: fit-content; margin-top: .35rem; padding: .18rem .48rem; border-radius: 999px; background: color-mix(in srgb,var(--primary) 10%,var(--surface)); color: var(--primary); font-size: .69rem; font-weight: 700; }
.button-soft { background: var(--surface-soft); }.button-full { width: 100%; margin-top: auto; }
.runs-panel { margin-bottom: .8rem; }
.live-indicator { display: flex; align-items: center; gap: .4rem; color: var(--muted); font: 500 .52rem DM Mono, monospace; text-transform: uppercase; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 14%, transparent); }
.run-table { display: grid; }
.run-row { min-width: 0; display: grid; grid-template-columns: minmax(170px,.8fr) minmax(180px,1.2fr) 270px; align-items: center; gap: 1rem; padding: .8rem .2rem; border-top: 1px solid var(--border); }
.run-provider { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.provider-mark { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 9px; background: #0a66c2; color: white; font: 700 .72rem Arial, sans-serif; }
.run-provider .provider-mark { color: #fff; }
.run-provider div { min-width: 0; display: grid; gap: .12rem; }.run-provider strong { font-size: .68rem; }.run-provider span, .run-reference { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.run-outcome { display: grid; min-width: 0; grid-template-columns: 190px 72px; align-items: center; justify-content: end; justify-self: stretch; gap: .45rem; }
.run-outcome > .run-status, .run-outcome > .history-kind { box-sizing: border-box; width: 100%; justify-content: center; text-align: center; white-space: nowrap; }
.run-status { justify-self: stretch; padding: .34rem .52rem; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font: 600 .5rem DM Mono, monospace; text-transform: uppercase; }
.run-status.is-pending { color: #946b00; background: #fff6d8; }.run-status.is-running { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }.run-status.is-success { color: #4c7b0b; background: color-mix(in srgb, var(--lime) 20%, var(--surface)); }.run-status.is-error { color: #ba3544; background: color-mix(in srgb, var(--coral) 13%, var(--surface)); }.run-status.is-warning { color: #946b00; background: #fff6d8; }
[data-theme='dark'] .run-status.is-pending, [data-theme='dark'] .run-status.is-warning { background: #352d16; color: #f2cb62; }
.runs-updated { color: var(--muted); font: 500 .52rem DM Mono,monospace; text-transform: uppercase; }
.runs-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--muted); font: 600 .58rem DM Mono,monospace; }
.runs-pagination a { color: var(--primary); }
.runs-pagination a:last-child { justify-self: end; }
.empty-state { display: grid; place-items: center; padding: 2.8rem; text-align: center; border-top: 1px solid var(--border); }.empty-state > span { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: .8rem; border-radius: 13px; background: var(--surface-soft); color: var(--primary); }.empty-state strong { font-size: .76rem; }.empty-state p { margin: .35rem 0 0; color: var(--muted); font-size: .64rem; }
.dashboard-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.feature-preview { position: relative; min-width: 0; min-height: 122px; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: start; gap: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); scroll-margin-top: 5rem; }
.feature-preview-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb,var(--primary) 14%,var(--surface)), color-mix(in srgb,var(--cyan) 10%,var(--surface))); color: var(--primary); font-weight: 650; }
.feature-preview h2 { margin: .15rem 0 .3rem; font: 650 .82rem Manrope,sans-serif; }.feature-preview p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.5; }.feature-preview-link { display: inline-flex; margin-top: .65rem; color: var(--primary); font-size: .58rem; font-weight: 650; }.feature-preview-link:hover { text-decoration: underline; }.coming-chip { position: absolute; right: .8rem; top: .8rem; padding: .22rem .38rem; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font: 500 .46rem DM Mono,monospace; text-transform: uppercase; }

.app-content .page-main { min-height: 100%; padding: 2.4rem 0 5rem; background: transparent; }
.app-content .site-shell { width: min(1180px, calc(100% - clamp(2rem,5vw,5rem))); }
.app-content .form-intro { top: 2rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .dashboard-feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .hero-grid, .form-layout, .dashboard-grid, .dashboard-main-grid { grid-template-columns: 1fr; } .hero-grid { gap: 3rem; padding-block: 5rem; } .hero { min-height: auto; } .system-visual { max-width: 430px; } .form-intro { position: static; } .feature-grid { grid-template-columns: 1fr 1fr; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(290px,calc(100vw - 54px)); transform: translateX(-105%); box-shadow: 16px 0 44px rgba(15,12,35,.18); transition: transform .22s ease; } .app-shell.sidebar-open .app-sidebar { transform: translateX(0); } .app-sidebar-close, .app-menu-toggle { display: inline-grid; }.app-sidebar-toggle{display:none} .app-sidebar-overlay { position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(9,7,22,.42); backdrop-filter: blur(3px); cursor: pointer; } .app-shell.sidebar-open .app-sidebar-overlay { display: block; } .app-page-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 640px) { .site-shell { width: calc(100% - 2rem); } .nav-shell { min-height: 64px; } .brand { gap: .45rem; }.brand-wordmark{font-size:.82rem}.brand-mark { width: 28px; height: 28px; border-radius: 9px; } .nav-actions { gap: .2rem; } .nav-link { padding-inline: .35rem; font-size: .66rem; } .language-form select { width: 46px; padding-inline: .35rem; } .theme-toggle { width: 30px; } .nav-actions .nav-cta { min-height: 34px; padding-inline: .55rem; font-size: .65rem; } .hero-grid { padding-block: 3.8rem; } .hero h1 { font-size: 2.55rem; } .hero-actions { flex-direction: column; } .hero-actions .button { width: 100%; } .node-a, .node-b, .node-c, .node-d { width: 60px; height: 60px; } .metrics { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border); } .feature-grid { grid-template-columns: 1fr; } .section { padding-block: 5rem; } .cta { align-items: flex-start; flex-direction: column; padding-block: 4.5rem; } .dashboard-head { align-items: flex-start; flex-direction: column; } .app-topbar { min-height: 56px; flex-basis: 56px; padding-inline: .75rem; }.app-topbar-title { display: none; } .app-page, .app-content .site-shell { width: calc(100% - 1.25rem); }.app-page { padding-top: 1.4rem; }.app-page-heading { gap: 1.2rem; }.app-page-heading h1 { font-size: 1.8rem; }.app-page-heading form, .app-page-heading .button { width: 100%; }.dashboard-metrics { grid-template-columns: 1fr 1fr; gap: .55rem; }.metric-card { min-height: 116px; grid-template-columns: 34px minmax(0,1fr); gap: .55rem; padding: .8rem; }.metric-card-icon { width: 34px; height: 34px; border-radius: 10px; }.metric-card strong { font-size: 1.4rem; }.metric-card .metric-trend { display: none; }.activity-chart { height: 190px; }.chart-legend { display: none; }.run-row { grid-template-columns: minmax(140px,1fr) auto; gap: .5rem; }.run-reference { display: none; }.dashboard-page .panel { padding: 1rem; }.feature-preview { grid-template-columns: 36px minmax(0,1fr); }.coming-chip { position: static; grid-column: 2; justify-self: start; } }