:root {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: #111827;
  background: #f7f8fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#root {
  min-height: 100vh;
}
html, body, #root {
  overflow: auto !important;
  height: auto !important;
}

.legal-page {
  min-height: 100vh;
  background: #fff;
  color: #111;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.7;
}

.legal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 0;
}

.legal-header .legal-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  font-size: 17px;
}

.legal-header .legal-logo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

.legal-inner h1 {
  font-size: 36px;
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.legal-meta {
  color: #888;
  font-size: 13px;
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.legal-section {
  margin-bottom: 36px;
}

.legal-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
}

.legal-section p, .legal-section li {
  font-size: 15px;
  color: #444;
  line-height: 1.75;
}

.legal-section ul {
  padding-left: 20px;
  margin: 8px 0;
}

.legal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 28px 0;
  margin-top: 40px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.legal-footer a {
  font-size: 13px;
  color: #555;
  text-decoration: none;
}

.legal-footer a:hover {
  color: #111;
  text-decoration: underline;
}

.legal-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

.legal-content h1 {
  font-size: 36px;
  font-weight: 800;
  color: #0a0a0a;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.legal-updated {
  color: #888;
  font-size: 13px;
  margin-bottom: 40px;
}

.legal-content section {
  margin-bottom: 36px;
}

.legal-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  margin-top: 8px;
}

.legal-content h3 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  margin-top: 16px;
}

.legal-content p {
  color: #444;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.75;
}

.legal-content ul {
  margin: 12px 0;
  padding-left: 24px;
}

.legal-content li {
  color: #444;
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-content li strong {
  color: #111;
}

.legal-content a {
  color: #2563eb;
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-contact {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 8px;
}

.legal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 28px 32px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.legal-footer p {
  color: #888;
  font-size: 13px;
  margin-bottom: 12px;
}

.legal-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.legal-footer-links a {
  color: #555;
  text-decoration: none;
  font-size: 13px;
  transition: color 150ms;
}

.legal-footer-links a:hover {
  color: #111;
}
html, body, #root {
  overflow: auto !important;
  height: auto !important;
}

.pricing-page {
  min-height: 100vh;
  background: #fff;
  color: #111;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

/* Header */
.pricing-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pricing-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 17px;
}

.pricing-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
}

.pricing-nav {
  display: flex;
  gap: 24px;
}

.pricing-nav a {
  color: #555;
  text-decoration: none;
  font-size: 14px;
  transition: color 150ms;
}

.pricing-nav a:hover {
  color: #111;
}

/* Main */
.pricing-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Hero */
.pricing-hero {
  text-align: center;
  padding: 64px 0 48px;
}

.pricing-hero h1 {
  font-size: 42px;
  font-weight: 800;
  color: #0a0a0a;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}

.pricing-hero p {
  font-size: 17px;
  color: #666;
  margin: 0;
}

/* Grid */
.pricing-grid-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding-bottom: 64px;
}

/* Card */
.pricing-card-page {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 200ms, box-shadow 200ms;
}

.pricing-card-page:hover {
  border-color: #d0d0d0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.pricing-card-page.featured {
  border-color: #111;
  background: #0a0a0a;
  color: #fff;
}

.pricing-featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.pricing-card-top-page {
  margin-bottom: 16px;
}

.pricing-badge-page {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-card-page.featured .pricing-badge-page {
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.1);
}

.pricing-card-top-page h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0 0 6px;
}

.pricing-card-page.featured .pricing-card-top-page h3 {
  color: #fff;
}

.pricing-desc-page {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.pricing-card-page.featured .pricing-desc-page {
  color: #94a3b8;
}

/* Price */
.pricing-price-page {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.pricing-price-page strong {
  font-size: 34px;
  font-weight: 800;
  color: #0a0a0a;
}

.pricing-card-page.featured .pricing-price-page strong {
  color: #fff;
}

.pricing-price-page span {
  font-size: 14px;
  color: #888;
}

.pricing-credits-page {
  font-size: 13px;
  color: #888;
  margin: 0 0 20px;
}

/* Features */
.pricing-features-page {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.pricing-features-page li {
  font-size: 14px;
  color: #444;
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
}

.pricing-card-page.featured .pricing-features-page li {
  color: #cbd5e1;
}

.pricing-features-page li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
}

.pricing-card-page.featured .pricing-features-page li::before {
  color: #4ade80;
}

/* CTA */
.pricing-cta-page {
  display: block;
  text-align: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  transition: background 150ms, border-color 150ms;
  cursor: pointer;
}

.pricing-cta-page:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.pricing-cta-page.primary {
  background: #111;
  border-color: #111;
  color: #fff;
}

.pricing-cta-page.primary:hover {
  background: #333;
  border-color: #333;
}

/* Top-ups */
.pricing-topups-section {
  text-align: center;
  padding: 48px 0 64px;
  border-top: 1px solid #f0f0f0;
}

.pricing-topups-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: #0a0a0a;
  margin: 0 0 8px;
}

.pricing-topups-section > p {
  font-size: 15px;
  color: #666;
  margin: 0 0 32px;
}

.pricing-topups-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pricing-topup-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  transition: border-color 200ms, box-shadow 200ms;
}

.pricing-topup-card:hover {
  border-color: #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pricing-topup-card strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #0a0a0a;
  margin-bottom: 4px;
}

.pricing-topup-card span {
  font-size: 14px;
  color: #666;
}

/* FAQ */
.pricing-faq-section {
  padding: 48px 0 64px;
  border-top: 1px solid #f0f0f0;
}

.pricing-faq-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: #0a0a0a;
  margin: 0 0 32px;
  text-align: center;
}

.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.pricing-faq-item {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 24px;
}

.pricing-faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}

.pricing-faq-item p {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.65;
}

.pricing-faq-item a {
  color: #2563eb;
  text-decoration: none;
}

.pricing-faq-item a:hover {
  text-decoration: underline;
}

/* Footer */
.pricing-footer {
  border-top: 1px solid #f0f0f0;
  padding: 28px 32px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-footer p {
  color: #888;
  font-size: 13px;
  margin-bottom: 12px;
}

.pricing-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.pricing-footer-links a {
  color: #555;
  text-decoration: none;
  font-size: 13px;
  transition: color 150ms;
}

.pricing-footer-links a:hover {
  color: #111;
}

/* Responsive */
@media (max-width: 768px) {
  .pricing-header { padding: 14px 20px; }
  .pricing-nav { gap: 16px; }
  .pricing-nav a { font-size: 13px; }
  .pricing-main { padding: 0 20px; }
  .pricing-hero h1 { font-size: 30px; }
  .pricing-hero p { font-size: 15px; }
  .pricing-grid-page { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .pricing-faq-grid { grid-template-columns: 1fr; }
}
.ogw-root{display:flex;flex-direction:column;gap:16px;color:#172033;min-width:0}.ogw-root *{box-sizing:border-box}.ogw-header,.ogw-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.ogw-header h2{font-size:26px;letter-spacing:-.035em;margin:5px 0;color:#172033}.ogw-header p,.ogw-section-head p,.ogw-settings-form>div p{font-size:13px;line-height:1.6;color:#687589}.ogw-eyebrow,.ogw-kicker{font-size:10px;letter-spacing:.12em;font-weight:800;color:#718096}.ogw-card{background:#fff;border:1px solid #dfe5ed;border-radius:13px;padding:20px;min-width:0;box-shadow:0 2px 7px #17203305}.ogw-card h3,.ogw-section-head h3{font-size:17px;margin:5px 0;color:#172033}.ogw-card>p,.ogw-muted{font-size:12px;color:#748095;line-height:1.6}.ogw-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8e0ea;border-radius:8px;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}.ogw-btn.primary{background:#172b4d;border-color:#172b4d;color:#fff}.ogw-btn.secondary{background:#fff;color:#27364d}.ogw-btn.danger{background:#fff1f1;border-color:#fecaca;color:#b91c1c}.ogw-alert{padding:11px 14px;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:9px;color:#166534;font-size:12px}.ogw-alert.error{border-color:#fecaca;background:#fff1f2;color:#b91c1c}.ogw-settings-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;align-items:start}.ogw-settings-form{display:flex;flex-direction:column;gap:14px}.ogw-root label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344256;min-width:0}.ogw-root input:not([type=checkbox]),.ogw-root textarea,.ogw-root select{width:100%;min-width:0;border:1px solid #d7dfe8;border-radius:8px;background:#fff;color:#172033;padding:10px 11px;font-size:12px;font-weight:450;outline:none}.ogw-root input:focus,.ogw-root textarea:focus,.ogw-root select:focus{border-color:#7c9cc8;box-shadow:0 0 0 3px #dce9fb80}.ogw-root textarea{resize:vertical;line-height:1.55}.ogw-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ogw-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}.ogw-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4}.ogw-toggle strong,.ogw-toggle small{display:block}.ogw-toggle strong{font-size:13px}.ogw-toggle small{font-size:11px;color:#748095;margin-top:4px;line-height:1.5}.ogw-switch{position:relative;display:inline-flex!important;width:42px;height:24px;flex-shrink:0}.ogw-switch input{position:absolute;opacity:0;width:1px;height:1px}.ogw-switch span{position:absolute;inset:0;background:#cbd5e1;border-radius:30px;cursor:pointer}.ogw-switch span:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:.15s}.ogw-switch input:checked+span{background:#2563eb}.ogw-switch input:checked+span:before{transform:translateX(18px)}.ogw-preview-badge{display:inline-flex;gap:5px;margin:16px 0 10px;padding:7px 10px;border:1px solid #dfe5ed;border-radius:8px;color:#5e6a7c;font-size:11px;background:#f8fafc}.ogw-preview-badge strong{color:#26374d}.ogw-note{font-size:11px;line-height:1.65;color:#748095;padding:10px 12px;border-radius:8px;background:#f7f9fc;margin-top:12px}.ogw-summary{display:grid;gap:11px;margin-top:12px}.ogw-summary div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:12px;font-size:11px}.ogw-summary dt{color:#758197}.ogw-summary dd{color:#27364d;overflow-wrap:anywhere;font-weight:650}.ogw-root hr{border:0;border-top:1px solid #edf0f4;margin:18px 0}.ogw-pill{border-radius:30px;background:#eef5ff;color:#35568a;padding:5px 9px;font-size:10px;font-weight:750;white-space:nowrap}.ogw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.ogw-kpis article{padding:14px;border:1px solid #e2e7ef;border-radius:10px;min-width:0}.ogw-kpis article>span,.ogw-kpis small{display:block;color:#748095;font-size:11px}.ogw-kpis strong{display:block;font-size:23px;letter-spacing:-.035em;margin:6px 0;color:#172033;overflow-wrap:anywhere}.ogw-kpis small{font-size:10px;line-height:1.4}.ogw-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.ogw-channel-grid article{padding:13px;background:#f8fafc;border-radius:9px;min-width:0}.ogw-channel-grid span,.ogw-channel-grid strong,.ogw-channel-grid small{display:block}.ogw-channel-grid span{font-size:11px;color:#6d798c}.ogw-channel-grid strong{font-size:12px;margin:6px 0;overflow-wrap:anywhere}.ogw-channel-grid small{font-size:10px;color:#7b8799;line-height:1.5}.ogw-seo-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:13px}.ogw-seo-grid small{font-size:10px;font-weight:500;color:#7c8798}.ogw-full{grid-column:1/-1}.ogw-keyword-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.5fr) auto;align-items:end;gap:10px;margin:16px 0;padding:15px;background:#f7f9fc;border:1px solid #e3e9f1;border-radius:10px}.ogw-table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 10px;font-size:13px}.ogw-table-head input{max-width:230px}.ogw-table-wrap{width:100%;overflow:auto;border:1px solid #e2e7ef;border-radius:9px}.ogw-table{border-collapse:collapse;width:100%;font-size:11px;min-width:770px}.ogw-table th{background:#f7f9fc;color:#647187;text-align:left;font-size:10px;font-weight:800;padding:10px;border-bottom:1px solid #e1e7ef;white-space:nowrap}.ogw-table td{padding:10px;border-bottom:1px solid #edf0f4;vertical-align:top}.ogw-table td:first-child{min-width:170px}.ogw-table td:first-child strong,.ogw-table td:first-child small{display:block}.ogw-table td:first-child small{font-size:10px;color:#788599;margin-top:5px}.ogw-inline,.ogw-num{padding:6px!important;font-size:11px!important}.ogw-inline{margin-top:6px}.ogw-num{max-width:80px}.ogw-row-actions{display:flex;flex-direction:column;gap:7px}.ogw-row-actions button{font-size:10px;font-weight:800;color:#31588e}.ogw-row-actions .danger-link{color:#b91c1c}.ogw-empty{padding:22px;border:1px dashed #d7e0ea;border-radius:10px;text-align:center;font-size:12px;line-height:1.6;color:#758197;background:#fbfcfe}.ogw-social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:18px}.ogw-social{border:1px solid #e0e6ef;border-radius:10px;padding:14px;min-width:0}.ogw-social.chosen{border-color:#9cb6dc;background:#f8fbff}.ogw-social-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.ogw-social-top strong{font-size:13px}.ogw-status{font-size:9px;font-weight:800;border-radius:20px;padding:4px 7px}.ogw-status.connected{color:#166534;background:#dcfce7}.ogw-status.missing{color:#64748b;background:#f1f5f9}.ogw-social>small{display:block;color:#6c798d;font-size:10px;margin-top:9px;overflow-wrap:anywhere}.ogw-check{display:flex!important;flex-direction:row!important;align-items:center;gap:7px!important;margin-top:13px;font-size:10px!important}.ogw-check input,.ogw-preferences input[type=checkbox]{width:14px;height:14px;accent-color:#244e84}.ogw-social>a{display:inline-block;margin-top:11px;font-size:10px;font-weight:750}.ogw-preferences{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #edf0f4;margin-top:18px;padding-top:16px}.ogw-preferences label{display:flex;align-items:center;flex-direction:row;gap:7px}.ogw-preferences label span{font-size:11px}.ogw-preferences select{width:auto;padding:7px 9px}.ogw-campaign-list{display:flex;flex-direction:column;gap:8px}.ogw-campaign{border:1px solid #e0e6ef;border-radius:10px;overflow:hidden}.ogw-campaign-summary{width:100%;display:grid;grid-template-columns:105px minmax(0,1fr) 90px 20px;align-items:center;gap:12px;text-align:left;padding:13px;background:#fff}.ogw-campaign-platform{font-size:10px;font-weight:800;background:#eff4fa;border-radius:6px;padding:6px 8px;text-align:center}.ogw-campaign-name strong,.ogw-campaign-name small,.ogw-spend small{display:block}.ogw-campaign-name strong{font-size:12px;overflow-wrap:anywhere}.ogw-campaign-name small,.ogw-spend small{font-size:10px;color:#7b8798;margin-top:4px}.ogw-spend{font-size:12px;font-weight:800;text-align:right}.ogw-campaign-detail{border-top:1px solid #e7ecf2;padding:15px;background:#fafbfd}.ogw-campaign-editor{display:flex;flex-direction:column;gap:12px}.ogw-campaign-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:15px}.ogw-campaign-kpis>div{background:#fff;border:1px solid #e2e7ef;border-radius:8px;padding:10px}.ogw-campaign-kpis span,.ogw-campaign-kpis strong{display:block}.ogw-campaign-kpis span{font-size:10px;color:#7a8698}.ogw-campaign-kpis strong{font-size:14px;margin-top:5px}.ogw-advice{margin-top:14px;padding:13px;border-radius:9px;background:#fff7ed;border:1px solid #fed7aa}.ogw-advice h4{font-size:12px;margin-bottom:8px;color:#9a3412}.ogw-advice p{font-size:11px;color:#7c2d12;line-height:1.55;margin-top:7px}.ogw-root button:focus-visible,.ogw-root a:focus-visible{outline:2px solid #477ac0;outline-offset:2px}@media(max-width:1000px){.ogw-settings-layout{grid-template-columns:1fr}.ogw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ogw-channel-grid,.ogw-social-grid{grid-template-columns:1fr}.ogw-keyword-form{grid-template-columns:1fr 1fr}.ogw-keyword-form button{grid-column:1/-1;justify-self:start}}@media(max-width:650px){.ogw-header{flex-direction:column}.ogw-header h2{font-size:23px}.ogw-card{padding:15px}.ogw-section-head{flex-direction:column}.ogw-form-grid,.ogw-seo-grid{grid-template-columns:1fr}.ogw-kpis{grid-template-columns:1fr 1fr}.ogw-kpis strong{font-size:20px}.ogw-keyword-form{grid-template-columns:1fr}.ogw-keyword-form button{grid-column:auto}.ogw-table-head{align-items:flex-start;flex-direction:column}.ogw-table-head input{max-width:none}.ogw-campaign-summary{grid-template-columns:80px minmax(0,1fr) 58px 16px;gap:7px;padding:10px}.ogw-campaign-platform{font-size:9px;padding:5px}.ogw-spend{font-size:10px}.ogw-campaign-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ogw-summary div{grid-template-columns:1fr;gap:4px}}
.vx-portfolio,.vx-app-shell{--vx-ink:#172033;--vx-muted:#788397;--vx-line:#e8ecf2;--vx-bg:#f7f9fc;--vx-blue:#315efb;color:var(--vx-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;background:var(--vx-bg)}
.vx-portfolio *,.vx-app-shell *{box-sizing:border-box}
.vx-topbar{height:68px;display:flex;align-items:center;gap:14px;padding:0 30px;background:#fff;border-bottom:1px solid var(--vx-line);position:sticky;top:0;z-index:20}
.vx-wordmark{border:0;background:none;display:flex;align-items:center;gap:10px;color:#182238;font-size:18px;cursor:pointer;padding:0}
.vx-brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#182238;color:#fff;font-weight:800;font-size:20px}
.vx-topbar-spacer{flex:1}
.vx-global-search{display:flex;align-items:center;gap:9px;background:#f5f7fa;border:1px solid #edf0f4;border-radius:10px;padding:0 12px;height:38px;width:min(300px,30vw);color:#8b95a5}
.vx-global-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:13px;color:#263246}
.vx-icon-button,.vx-avatar{border:1px solid var(--vx-line);background:#fff;color:#526078;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;font-size:17px}
.vx-avatar{border-radius:50%;background:#eaf0ff;color:#315efb;font-weight:700}
.vx-portfolio-main{max-width:1440px;margin:0 auto;padding:42px 42px 64px}
.vx-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.vx-eyebrow{font-size:10px;letter-spacing:.13em;font-weight:800;color:#8290a4;display:block;margin-bottom:9px}
.vx-welcome h1{font-size:30px;letter-spacing:-.04em;margin:0 0 8px;font-weight:750;color:#19243a}
.vx-welcome p{margin:0;color:#7b8799;font-size:14px;line-height:1.6}
.vx-primary,.vx-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:11px 16px;font-weight:700;font-size:13px;text-decoration:none;cursor:pointer;border:1px solid transparent}
.vx-primary{background:#315efb;color:#fff;box-shadow:0 5px 12px #315efb20}
.vx-primary:hover{background:#244fe7}
.vx-secondary{background:#fff;color:#354258;border-color:#e2e7ef}
.vx-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 36px}
.vx-metric{padding:19px 20px;background:#fff;border:1px solid var(--vx-line);border-radius:14px;min-width:0;box-shadow:0 2px 8px #1d2c4305}
.vx-metric span,.vx-metric small{display:block;color:#7d899a;font-size:12px}
.vx-metric strong{display:block;font-size:25px;letter-spacing:-.04em;margin:11px 0 6px;color:#17243b;overflow-wrap:anywhere}
.vx-metric small{font-size:11px}
.vx-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}
.vx-section-head h2{font-size:21px;letter-spacing:-.03em;margin:0 0 5px}
.vx-section-head p{font-size:13px;color:#8792a2;margin:0}
.vx-muted{font-size:11px;color:#8792a2}
.vx-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vx-app-card{display:block;text-align:left;padding:20px;border:1px solid var(--vx-line);border-radius:15px;background:#fff;color:inherit;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s;min-width:0}
.vx-app-card:hover{transform:translateY(-2px);border-color:#cbd6ff;box-shadow:0 12px 28px #172b4d0c}
.vx-app-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
.vx-app-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf2ff;color:#315efb;font-weight:800;font-size:17px;flex:none}
.vx-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;background:#f1f3f6;color:#6f7b8d;font-size:10px;font-weight:700;text-transform:capitalize}
.vx-status.is-live{background:#eaf8f0;color:#17834d}
.vx-app-card h3{font-size:16px;margin:0 0 5px;letter-spacing:-.02em}
.vx-app-card>p{font-size:11px;color:#8a95a5;margin:0 0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-app-card-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:13px 0;border-top:1px solid #f0f2f6;border-bottom:1px solid #f0f2f6}
.vx-app-card-metrics small,.vx-app-card-metrics strong{display:block}
.vx-app-card-metrics small{font-size:10px;color:#9aa3b0;margin-bottom:5px}
.vx-app-card-metrics strong{font-size:12px;color:#334158;overflow:hidden;text-overflow:ellipsis}
.vx-app-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;font-size:10px;color:#96a0ae}
.vx-app-card-foot b{font-size:11px;color:#315efb}
.vx-portfolio-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:22px}
.vx-panel{background:#fff;border:1px solid var(--vx-line);border-radius:15px;padding:22px;min-width:0}
.vx-panel-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}
.vx-panel-head h2,.vx-panel-head h3{font-size:18px;letter-spacing:-.025em;margin:0 0 5px}
.vx-panel-head p{font-size:12px;color:#8a95a5;margin:0;line-height:1.55}
.vx-panel-head> b{background:#fff2e8;color:#b65a1c;padding:5px 9px;border-radius:8px}
.vx-queue-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;background:none;border:0;border-top:1px solid #f0f2f6;text-align:left;cursor:pointer;color:inherit}
.vx-queue-mark{width:26px;height:26px;border-radius:8px;background:#fff2e8;color:#d26b24;display:grid;place-items:center;font-weight:800}
.vx-queue-row span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}
.vx-queue-row strong{font-size:12px}.vx-queue-row small{font-size:10px;color:#8b96a6}.vx-queue-row>b{color:#315efb}
.vx-priority{display:flex;gap:13px;padding:12px 0;border-top:1px solid #f0f2f6}
.vx-priority>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#eef2ff;color:#315efb;font-size:12px;font-weight:800;flex:none}
.vx-priority strong{font-size:12px}.vx-priority p{font-size:11px;color:#8b96a6;line-height:1.5;margin:5px 0 0}
.vx-empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#788397;padding:40px}
.vx-empty h3{font-size:19px;color:#25324a;margin:14px 0 6px}.vx-empty p{font-size:13px;max-width:440px;line-height:1.6;margin:0 0 18px}
.vx-empty-icon{font-size:30px;color:#315efb}.vx-spinner{width:28px;height:28px;border:3px solid #e6ebf5;border-top-color:#315efb;border-radius:50%;animation:vxspin .8s linear infinite}
@keyframes vxspin{to{transform:rotate(360deg)}}
.vx-app-shell{display:flex;min-height:100vh;background:#f7f9fc}
.vx-sidebar{width:252px;flex:none;background:#fff;border-right:1px solid var(--vx-line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .18s;z-index:25}
.vx-app-shell.is-collapsed .vx-sidebar{width:76px}
.vx-sidebar-brand{height:68px;padding:0 17px;border-bottom:1px solid var(--vx-line);display:flex;align-items:center;justify-content:space-between}
.vx-collapse{border:0;background:#f5f7fa;color:#6f7c90;border-radius:8px;width:28px;height:28px;cursor:pointer}
.vx-current-app{margin:16px 12px 12px;padding:10px;border:1px solid #edf0f5;border-radius:11px;display:flex;align-items:center;gap:10px;min-width:0}
.vx-current-app-copy{display:grid;gap:4px;min-width:0}.vx-current-app-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vx-current-app-copy small{font-size:10px;color:#8792a2;text-transform:capitalize}
.vx-navigation{padding:2px 10px 14px;overflow:auto;flex:1}
.vx-nav-group{margin:10px 0 16px}.vx-nav-group-label{display:block;padding:0 10px 7px;font-size:9px;letter-spacing:.12em;color:#a0a9b6;font-weight:800}
.vx-nav-item{display:flex;align-items:center;gap:12px;width:100%;height:38px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#69768a;text-align:left;font-size:12px;font-weight:600;cursor:pointer;margin:2px 0;white-space:nowrap}
.vx-nav-item:hover{background:#f6f8fb;color:#26354d}.vx-nav-item.active{background:#edf2ff;color:#315efb}
.vx-nav-icon{width:20px;min-width:20px;text-align:center;font-size:16px}.vx-nav-aedit{margin-top:5px;background:#f6f3ff;color:#6b4ed0}.vx-nav-aedit.active{background:#eee8ff;color:#603fc2}
.vx-sidebar-bottom{padding:10px;border-top:1px solid var(--vx-line)}
.vx-app-content{flex:1;min-width:0}
.vx-breadcrumb{display:flex;align-items:center;gap:9px;color:#a0a9b6;font-size:11px;white-space:nowrap}.vx-breadcrumb button{border:0;background:none;color:#718098;cursor:pointer;padding:0;font:inherit}.vx-breadcrumb strong{color:#334158;font-weight:600}.vx-breadcrumb b{color:#315efb;font-weight:700}
.vx-app-main{max-width:1500px;margin:0 auto;padding:28px 34px 60px;min-width:0}
.vx-page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.vx-page-heading h1{font-size:24px;letter-spacing:-.035em;margin:0}.vx-page-heading-actions{display:flex;align-items:center;gap:10px}
.vx-page-stack{display:grid;gap:18px}.vx-app-welcome{margin-bottom:20px}.vx-app-welcome h1{font-size:28px}
.vx-header-actions{display:flex;align-items:center;gap:10px}
.vx-app-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px}
.vx-chart-panel .vx-panel-head select,.vx-filter-row select{border:1px solid var(--vx-line);background:#fff;border-radius:8px;padding:8px 10px;color:#526078;font:inherit;font-size:11px}
.vx-signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.vx-signal-grid>div{background:#f7f9fc;padding:12px;border-radius:9px}.vx-signal-grid span,.vx-signal-grid strong{display:block}.vx-signal-grid span{font-size:10px;color:#8792a2}.vx-signal-grid strong{font-size:18px;margin-top:5px}
.vx-chart-bars{height:155px;display:flex;align-items:end;gap:8px;padding:10px 0 0;border-bottom:1px solid var(--vx-line)}
.vx-bar-column{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px;min-width:0}
.vx-bar-column>span{width:min(24px,70%);min-height:3px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#6b8cff,#315efb)}
.vx-bar-column small{font-size:8px;color:#a0a9b6;white-space:nowrap}
.vx-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vx-alert-row{display:flex;gap:10px;padding:11px 0;border-top:1px solid #f0f2f6}.vx-alert-dot{width:8px;height:8px;border-radius:50%;background:#e28b42;margin-top:4px;flex:none}.vx-alert-row div{display:grid;gap:4px;min-width:0}.vx-alert-row strong{font-size:11px;overflow-wrap:anywhere}.vx-alert-row small{font-size:10px;color:#8c97a6}
.vx-empty-inline,.vx-inline-empty{padding:18px;border-radius:10px;background:#f7f9fc;color:#8994a4;font-size:11px;line-height:1.6}
.vx-data-note{font-size:10px;line-height:1.6;margin:12px 0 0}
.vx-data-table{border:1px solid #edf0f4;border-radius:10px;overflow:auto;margin-top:15px}.vx-table-title{padding:12px 14px;background:#f8f9fb;font-size:11px;font-weight:800;color:#66748a}
.vx-table-row{display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid #f0f2f6;min-width:600px;font-size:11px}
.vx-table-row strong{font-weight:650;overflow-wrap:anywhere}.vx-table-row small{font-size:10px;color:#8994a4}.vx-filter-row{display:flex;justify-content:flex-end}
.vx-search-inline{display:flex;align-items:center;gap:12px;font-size:11px;color:#657187;margin:12px 0}.vx-search-inline input{border:1px solid var(--vx-line);border-radius:8px;padding:9px 11px;min-width:220px;font:inherit}
.vx-seo-kpis{margin-top:14px;grid-template-columns:repeat(4,1fr)}
.vx-keyword-row{grid-template-columns:1.2fr .4fr .5fr .6fr 1.2fr}.vx-keyword-row a{color:#315efb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-recommendation{display:flex;gap:16px;padding:18px 0;border-top:1px solid #edf0f4}.vx-recommendation-index{font-size:11px;color:#315efb;font-weight:800}.vx-recommendation h3{font-size:14px;margin:0 0 6px}.vx-recommendation p{font-size:12px;line-height:1.6;color:#7e899a;margin:0 0 8px}
.vx-text-button{border:0;background:none;color:#315efb;font-size:11px;font-weight:700;cursor:pointer;padding:0}
.vx-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.vx-detail{padding:13px;background:#f7f9fc;border-radius:9px;min-width:0}.vx-detail span,.vx-detail strong,.vx-detail a{display:block}.vx-detail span{font-size:10px;color:#8792a2;margin-bottom:7px}.vx-detail strong,.vx-detail a{font-size:12px;color:#354258;overflow-wrap:anywhere}.vx-detail a{color:#315efb;text-decoration:none}
.vx-integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vx-integration-grid article{border:1px solid #edf0f4;border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px}.vx-integration-grid article>div{flex:1;min-width:0;display:grid;gap:4px}.vx-integration-grid strong{font-size:12px}.vx-integration-grid small{font-size:10px;color:#8994a4}
.vx-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.vx-aedit-main{padding:0;max-width:none;height:calc(100vh - 68px);overflow:auto}
.vx-aedit-main>*{min-height:100%}
.vx-app-shell.is-collapsed .vx-sidebar-brand{padding:0 12px;justify-content:center}.vx-app-shell.is-collapsed .vx-sidebar-brand .vx-wordmark{gap:0}.vx-app-shell.is-collapsed .vx-collapse{position:absolute;right:7px;top:74px;width:22px;height:22px}
.vx-app-shell.is-collapsed .vx-current-app{justify-content:center;padding:7px;margin:16px 10px}.vx-app-shell.is-collapsed .vx-current-app-copy,.vx-app-shell.is-collapsed .vx-nav-label,.vx-app-shell.is-collapsed .vx-nav-group-label{display:none}
.vx-app-shell.is-collapsed .vx-nav-item{justify-content:center;padding:0}.vx-app-shell.is-collapsed .vx-nav-group{margin:12px 0}.vx-app-shell.is-collapsed .vx-nav-icon{font-size:17px}
@media(max-width:1100px){.vx-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-app-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-sidebar{width:220px}}
@media(max-width:760px){.vx-portfolio-main{padding:26px 16px 45px}.vx-topbar{padding:0 15px}.vx-global-search{width:min(190px,42vw)}.vx-welcome{align-items:flex-start;flex-direction:column}.vx-kpi-grid,.vx-seo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-app-grid,.vx-portfolio-bottom,.vx-two-col{grid-template-columns:1fr}.vx-app-shell{display:block}.vx-sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:252px;transform:translateX(-100%);transition:transform .2s;box-shadow:12px 0 40px #15213a12}.vx-app-shell:not(.is-collapsed) .vx-sidebar{transform:translateX(0)}.vx-app-shell.is-collapsed .vx-sidebar{transform:translateX(-100%);width:252px}.vx-app-content{width:100%}.vx-app-main{padding:22px 14px 45px}.vx-topbar{padding:0 12px}.vx-breadcrumb{max-width:55%;overflow:hidden}.vx-breadcrumb strong,.vx-breadcrumb b{overflow:hidden;text-overflow:ellipsis}.vx-app-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-signal-grid{grid-template-columns:repeat(2,1fr)}.vx-page-heading{align-items:flex-start;flex-direction:column}.vx-detail-grid,.vx-integration-grid{grid-template-columns:1fr}.vx-aedit-main{height:auto;min-height:calc(100vh - 68px)}}

.vx-mobile-menu{display:none;border:1px solid var(--vx-line);background:#fff;color:#526078;border-radius:8px;width:34px;height:34px;cursor:pointer}
@media(max-width:760px){.vx-mobile-menu{display:grid;place-items:center;flex:none}.vx-app-shell:not(.is-collapsed) .vx-sidebar{transform:translateX(0)}}

.vx-aedit-state{min-height:calc(100vh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;background:#fff}
.vx-aedit-state h2{font-size:25px;letter-spacing:-.035em;color:#1c2940;margin:14px 0 8px}
.vx-aedit-state p{font-size:13px;line-height:1.7;color:#7d899a;max-width:520px;margin:0 0 18px}
.vx-aedit-state small{display:block;color:#929cab;font-size:10px;margin-top:15px;max-width:500px}
.vx-aedit-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:#f0ebff;color:#6848c9;font-size:27px;margin-bottom:18px}

.vx-portfolio .vx-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.vx-notification-wrap{position:relative;display:flex;align-items:center}
.vx-notification-popover{position:absolute;right:0;top:calc(100% + 10px);width:310px;max-width:calc(100vw - 28px);background:#fff;border:1px solid var(--vx-line);border-radius:13px;box-shadow:0 18px 48px #17243b20;padding:14px;z-index:60}
.vx-notification-popover>strong{display:block;font-size:12px;margin:2px 3px 9px}
.vx-notification-popover>button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 4px;border:0;border-top:1px solid #f0f2f6;background:#fff;text-align:left;cursor:pointer;color:#344258}
.vx-notification-popover>button>span:first-child{width:24px;height:24px;display:grid;place-items:center;background:#fff2e8;color:#bd6628;border-radius:7px;font-weight:800}
.vx-notification-popover>button>span:last-child{display:grid;gap:3px;min-width:0}
.vx-notification-popover b{font-size:11px}.vx-notification-popover small,.vx-notification-popover p{font-size:10px;color:#8994a4;line-height:1.5}
.vx-app-switcher{max-width:210px;min-width:120px;border:1px solid var(--vx-line);border-radius:8px;padding:8px 10px;background:#fff;color:#536178;font-size:11px;outline:0}
.vx-portfolio-activity{margin-top:18px}
@media(max-width:1100px){.vx-portfolio .vx-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.vx-portfolio .vx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-app-switcher{display:none}.vx-breadcrumb{max-width:48%}.vx-notification-popover{right:-46px}}

.vx-customer-list{display:grid;gap:9px;margin-top:16px}
.vx-customer-row{display:grid;grid-template-columns:minmax(180px,1.5fr) auto repeat(2,minmax(130px,1fr)) minmax(150px,auto);align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--vx-line);border-radius:10px;background:#fff}
.vx-customer-row>div{display:grid;gap:4px;min-width:0}
.vx-customer-row strong{font-size:12px;color:#26344a;overflow-wrap:anywhere}
.vx-customer-row small{font-size:10px;color:#8792a2;line-height:1.5}
.vx-customer-row>small{font-size:10px;color:#8792a2}
@media(max-width:1000px){.vx-customer-row{grid-template-columns:minmax(0,1fr) auto}.vx-customer-row>small{grid-column:1/-1}}
@media(max-width:560px){.vx-customer-row{grid-template-columns:1fr}.vx-customer-row>small{grid-column:auto}}


/* Workspace polish: clearer hierarchy, stronger action cues, and accessible motion. */
.vx-app-shell{--vx-ease:cubic-bezier(.2,.75,.25,1)}
.vx-topbar{box-shadow:0 3px 14px rgba(23,32,51,.025);backdrop-filter:saturate(1.2)}
.vx-app-main{padding-top:34px}
.vx-page-heading{padding-bottom:15px;border-bottom:1px solid rgba(226,232,240,.8)}
.vx-page-heading h1{font-size:clamp(24px,2vw,29px);font-weight:760}
.vx-sidebar{box-shadow:5px 0 22px rgba(23,32,51,.025)}
.vx-sidebar-brand{height:72px}
.vx-current-app{background:linear-gradient(135deg,#fff 0%,#f7f9ff 100%);border-color:#e7ecf7}
.vx-sidebar-cta-wrap{padding:0 12px 12px}
.vx-sidebar-cta{width:100%;display:flex;align-items:center;gap:10px;min-height:56px;padding:9px 10px;border:1px solid #dfe7ff;border-radius:12px;background:linear-gradient(120deg,#f3f6ff,#fff);color:#263b75;text-align:left;cursor:pointer;transition:transform .18s var(--vx-ease),box-shadow .18s var(--vx-ease),border-color .18s var(--vx-ease)}
.vx-sidebar-cta:hover{transform:translateY(-1px);border-color:#b9c9ff;box-shadow:0 8px 20px rgba(49,94,251,.09)}
.vx-sidebar-cta-icon{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:9px;background:#e7edff;color:#315efb;font-size:17px}
.vx-sidebar-cta .vx-nav-label{display:grid;gap:3px;min-width:0}
.vx-sidebar-cta .vx-nav-label strong{font-size:11px;font-weight:800;color:#263b75}
.vx-sidebar-cta .vx-nav-label small{font-size:9px;color:#7887a5}
.vx-sidebar-cta-arrow{margin-left:auto;color:#315efb;font-size:14px}
.vx-app-shell.is-collapsed .vx-sidebar-cta-wrap{padding:0 10px 10px}
.vx-app-shell.is-collapsed .vx-sidebar-cta{justify-content:center;padding:8px 0;min-height:44px}
.vx-app-shell.is-collapsed .vx-sidebar-cta-arrow{display:none}
.vx-app-shell.is-collapsed .vx-sidebar-cta-icon{width:30px;height:30px}
.vx-start-panel{display:grid;grid-template-columns:minmax(190px,.82fr) minmax(0,1.8fr);gap:24px;align-items:center;margin:0 0 22px;padding:22px 23px;border:1px solid #e2e9fa;border-radius:17px;background:radial-gradient(ellipse at 10% 0%,rgba(49,94,251,.075),transparent 48%),linear-gradient(135deg,#fff 0%,#f8faff 100%);box-shadow:0 8px 26px rgba(28,48,91,.035)}
.vx-start-panel-copy .vx-eyebrow{color:#6e83bb;margin-bottom:7px}
.vx-start-panel-copy h2{margin:0 0 7px;font-size:19px;line-height:1.2;letter-spacing:-.035em;color:#1d2b46}
.vx-start-panel-copy p{margin:0;max-width:330px;color:#7b8799;font-size:11px;line-height:1.6}
.vx-start-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.vx-start-action{display:flex;align-items:center;gap:10px;min-width:0;min-height:72px;padding:12px;border:1px solid #e7ebf2;border-radius:12px;background:#fff;color:#354258;text-align:left;cursor:pointer;transition:transform .18s var(--vx-ease),border-color .18s var(--vx-ease),box-shadow .18s var(--vx-ease)}
.vx-start-action:hover{transform:translateY(-2px);border-color:#c7d4ff;box-shadow:0 9px 20px rgba(34,57,108,.08)}
.vx-start-action.is-primary{border-color:#d8e1ff;background:linear-gradient(145deg,#f0f4ff,#fff)}
.vx-start-action-icon{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:9px;background:#eef2ff;color:#315efb;font-size:16px}
.vx-start-action>span:nth-child(2){display:grid;gap:4px;min-width:0}
.vx-start-action strong{font-size:11px;line-height:1.25;color:#26354d}
.vx-start-action small{font-size:9px;line-height:1.4;color:#8a95a5}
.vx-start-action>b{margin-left:auto;color:#315efb;font-size:15px;flex:none}
.vx-app-kpis{margin-top:0}
.vx-metric{transition:transform .18s var(--vx-ease),box-shadow .18s var(--vx-ease),border-color .18s var(--vx-ease)}
.vx-metric:hover{transform:translateY(-2px);border-color:#d9e2fa;box-shadow:0 10px 24px rgba(23,43,77,.07)}
.vx-panel{box-shadow:0 4px 18px rgba(23,43,77,.025);transition:border-color .18s ease,box-shadow .18s ease}
.vx-panel:hover{border-color:#dfe5f0;box-shadow:0 8px 24px rgba(23,43,77,.045)}
.vx-nav-item{transition:background .16s ease,color .16s ease,transform .16s ease}
.vx-nav-item:hover{transform:translateX(2px)}
.vx-nav-item.active{font-weight:750;box-shadow:inset 2px 0 0 #315efb}
.vx-app-shell.is-collapsed .vx-nav-item.active{box-shadow:none}
.vx-primary,.vx-secondary,.vx-icon-button,.vx-avatar,.vx-collapse{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.vx-primary:hover,.vx-secondary:hover,.vx-icon-button:hover{transform:translateY(-1px)}
.vx-app-card:focus-visible,.vx-nav-item:focus-visible,.vx-start-action:focus-visible,.vx-sidebar-cta:focus-visible,.vx-primary:focus-visible,.vx-secondary:focus-visible,.vx-icon-button:focus-visible{outline:3px solid rgba(49,94,251,.28);outline-offset:2px}
.vx-global-search:focus-within{border-color:#b8c8ff;box-shadow:0 0 0 3px rgba(49,94,251,.08);background:#fff}
.vx-app-card:focus-visible{transform:translateY(-2px)}
@media(max-width:1120px){.vx-start-panel{grid-template-columns:1fr}.vx-start-panel-copy p{max-width:560px}}
@media(max-width:760px){.vx-app-main{padding-top:23px}.vx-start-panel{padding:17px;gap:16px}.vx-start-actions{grid-template-columns:1fr}.vx-start-action{min-height:60px}.vx-sidebar-cta-wrap{padding-bottom:9px}.vx-sidebar-cta{min-height:52px}}
@media(max-width:420px){.vx-start-panel-copy h2{font-size:17px}.vx-start-action small{font-size:9px}.vx-app-kpis{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.vx-portfolio *, .vx-app-shell *{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* ── Jostavan Design System ─────────────────────────────────────────────── */
:root {
  --bg: #0f0f0f;
  --bg-elevated: #1a1a1a;
  --bg-card: #1e1e1e;
  --bg-hover: #252525;
  --bg-active: #2a2a2a;
  --bg-input: #141414;
  --surface: #ffffff;
  --surface-dim: #f5f5f5;
  --surface-hover: #eeeeee;
  --ink: #111111;
  --ink-secondary: #666666;
  --ink-muted: #999999;
  --ink-faint: #bbbbbb;
  --border: #e5e5e5;
  --border-light: #f0f0f0;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-soft: #eff6ff;
  --green: #10b981;
  --green-soft: #ecfdf5;
  --red: #ef4444;
  --red-soft: #fef2f2;
  --amber: #f59e0b;
  --amber-soft: #fffbeb;
  --purple: #8b5cf6;
  --purple-soft: #f5f3ff;
  --sidebar-bg: #111111;
  --sidebar-ink: #a0a0a0;
  --sidebar-ink-active: #ffffff;
  --sidebar-hover: #1e1e1e;
  --sidebar-active: #1e1e1e;
  --sidebar-width: 240px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --transition: 150ms ease;
  --preview-asset-revision: "2026-08-22-2";
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  overflow-wrap: anywhere;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ── Auth Pages ─────────────────────────────────────────────────────────── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-elevated);
  border: 1px solid #222;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.auth-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.auth-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.auth-subtitle {
  color: var(--ink-muted);
  margin-bottom: 24px;
  font-size: 13px;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid #333;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-submit {
  width: 100%;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  margin-top: 8px;
  transition: background var(--transition);
}

.auth-submit:hover:not(:disabled) {
  background: var(--accent-hover);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333;
}

.auth-google {
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  color: #111;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--transition);
}

.auth-google:hover {
  background: #f5f5f5;
}

.auth-link {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-muted);
}

.auth-link a {
  color: var(--accent);
  font-weight: 500;
}

.auth-error {
  background: var(--red-soft);
  color: var(--red);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── Main Layout ────────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid #1e1e1e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: contain;
}

.sidebar-new-task {
  width: 100%;
  padding: 8px 12px;
  margin: 0 16px 12px;
  width: calc(100% - 32px);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--transition);
  flex-shrink: 0;
}

.sidebar-new-task:hover {
  background: var(--accent-hover);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-ink);
  font-size: 13px;
  font-weight: 450;
  transition: all var(--transition);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sidebar-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink-active);
}

.sidebar-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-ink-active);
}

.sidebar-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-item.active .sidebar-item-icon {
  opacity: 1;
}

.sidebar-section-label {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-task-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.sidebar-task:hover {
  background: var(--sidebar-hover);
}

.sidebar-task.active {
  background: var(--sidebar-active);
}

.sidebar-task-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.sidebar-task-dot.running { background: var(--accent); animation: pulse 2s infinite; }
.sidebar-task-dot.complete { background: var(--green); }
.sidebar-task-dot.failed { background: var(--red); }
.sidebar-task-dot.pending { background: var(--amber); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sidebar-task-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-task-title {
  font-size: 12px;
  color: var(--sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.sidebar-task.active .sidebar-task-title {
  color: var(--sidebar-ink-active);
}

.sidebar-task-time {
  font-size: 10px;
  color: #555;
  margin-top: 2px;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #1e1e1e;
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 12px;
  color: var(--sidebar-ink-active);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-signout {
  font-size: 11px;
  color: #555;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--transition);
}

.sidebar-signout:hover {
  color: var(--red);
  background: rgba(239,68,68,0.1);
}

/* ── Content Area ───────────────────────────────────────────────────────── */
.content-area {
  flex: 1;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* ── Tasks Page (3-column) ──────────────────────────────────────────────── */
.tasks-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.tasks-history {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-dim);
}

.tasks-history-header {
  padding: 16px;
  flex-shrink: 0;
}

.tasks-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.tasks-search:focus {
  border-color: var(--accent);
}

.tasks-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.tasks-date-group-label {
  padding: 12px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.task-item:hover {
  background: var(--surface-hover);
}

.task-item.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.task-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.task-item-dot.running { background: var(--accent); animation: pulse 2s infinite; }
.task-item-dot.complete, .task-item-dot.built { background: var(--green); }
.task-item-dot.failed, .task-item-dot.error { background: var(--red); }
.task-item-dot.pending, .task-item-dot.planning, .task-item-dot.building { background: var(--amber); }

.task-item-info { flex: 1; min-width: 0; }

.task-item-prompt {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.task-item-time {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ── Event Stream (middle column) ───────────────────────────────────────── */
.event-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.event-stream-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.event-stream-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.event-stream-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}

.event-stream-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.event-stream-status-dot.running { background: var(--accent); animation: pulse 2s infinite; }
.event-stream-status-dot.complete { background: var(--green); }
.event-stream-status-dot.failed { background: var(--red); }

.event-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-bubble {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  max-width: 85%;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.event-bubble.user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.event-bubble.agent {
  background: var(--surface-dim);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.event-bubble.error {
  background: var(--red-soft);
  color: var(--red);
  align-self: flex-start;
  border: 1px solid rgba(239,68,68,0.15);
}

.event-bubble.system {
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  align-self: center;
  padding: 4px 0;
}

.event-tool-call {
  background: var(--surface-dim);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: flex-start;
  max-width: 90%;
  animation: fadeIn 0.2s ease;
}

.event-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: background var(--transition);
}

.event-tool-header:hover {
  background: var(--surface-hover);
}

.event-tool-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.event-tool-name {
  font-weight: 500;
}

.event-tool-expand {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-muted);
  transition: transform var(--transition);
}

.event-tool-expand.open {
  transform: rotate(180deg);
}

.event-tool-body {
  padding: 0 14px 12px;
  font-size: 12px;
  color: var(--ink-secondary);
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.event-thinking {
  background: var(--purple-soft);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--purple);
  align-self: flex-start;
  max-width: 85%;
  animation: fadeIn 0.2s ease;
}

.event-thinking-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  opacity: 0.7;
}

/* ── Event Input ────────────────────────────────────────────────────────── */
.event-input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.event-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.event-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  transition: border-color var(--transition);
  font-family: var(--font);
}

.event-input:focus {
  border-color: var(--accent);
}

.event-send-btn {
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
  flex-shrink: 0;
}

.event-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--ink-muted);
  font-size: 12px;
  align-self: flex-start;
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: typingBounce 1.4s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Preview Pane (right column) ────────────────────────────────────────── */
.preview-pane {
  width: 400px;
  min-width: 400px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.preview-pane.collapsed {
  width: 0;
  min-width: 0;
  border-left: none;
}

.preview-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--surface-dim);
}

.preview-url {
  flex: 1;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-secondary);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-btn {
  padding: 6px 8px;
  color: var(--ink-muted);
  border-radius: 4px;
  font-size: 14px;
  transition: all var(--transition);
}

.preview-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.preview-iframe {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
  background: #fff;
}

.preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-muted);
  padding: 40px;
  text-align: center;
}

.preview-empty-icon {
  font-size: 32px;
  opacity: 0.4;
}

.preview-empty-text {
  font-size: 13px;
  line-height: 1.5;
}

.preview-toggle {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 6px 10px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-muted);
  transition: all var(--transition);
  z-index: 10;
}

.preview-toggle:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* ── New Task Screen ────────────────────────────────────────────────────── */
.new-task-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.new-task-greeting {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.new-task-subtitle {
  color: var(--ink-muted);
  font-size: 15px;
  margin-bottom: 32px;
}

.new-task-input-wrapper {
  width: 100%;
  max-width: 640px;
  position: relative;
}

.new-task-input {
  width: 100%;
  padding: 16px 20px;
  padding-right: 52px;
  background: var(--surface-dim);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 15px;
  outline: none;
  resize: none;
  min-height: 56px;
  max-height: 200px;
  transition: border-color var(--transition);
  font-family: var(--font);
}

.new-task-input:focus {
  border-color: var(--accent);
}

.new-task-input::placeholder {
  color: var(--ink-faint);
}

.new-task-submit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background var(--transition);
}

.new-task-submit:hover:not(:disabled) {
  background: var(--accent-hover);
}

.new-task-templates {
  margin-top: 48px;
  width: 100%;
  max-width: 640px;
}

.new-task-templates-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  text-align: center;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.template-card {
  padding: 16px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
}

.template-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.template-card-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.template-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.template-card-desc {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.connected-services {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

.connected-service-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ── Connectors Page ────────────────────────────────────────────────────── */
.connectors-page {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
}

.connectors-header {
  margin-bottom: 32px;
}

.connectors-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.connectors-subtitle {
  color: var(--ink-muted);
  font-size: 14px;
}

.connectors-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.connectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.connector-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}

.connector-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.connector-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.connector-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.connector-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.connector-desc {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 12px;
}

.connector-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.connector-status.connected {
  background: var(--green-soft);
  color: var(--green);
}

.connector-status.available {
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}

.connector-status.coming-soon {
  background: var(--surface-dim);
  color: var(--ink-muted);
}

/* ── Settings Page ──────────────────────────────────────────────────────── */
.settings-page {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  max-width: 720px;
}

.settings-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.settings-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
}

.settings-tab:hover {
  color: var(--ink);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}

.settings-field {
  margin-bottom: 16px;
}

.settings-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}

.settings-field input,
.settings-field select {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.settings-field input:focus,
.settings-field select:focus {
  border-color: var(--accent);
}

.settings-field-hint {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.plan-card {
  padding: 20px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.plan-name {
  font-size: 16px;
  font-weight: 600;
}

.plan-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-badge.free {
  background: var(--surface-hover);
  color: var(--ink-muted);
}

.plan-badge.pro {
  background: var(--accent-soft);
  color: var(--accent);
}

.usage-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}

.usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.usage-text {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ── Docs Page ──────────────────────────────────────────────────────────── */
.profile-page {
  width: 100%;
  max-width: none;
  padding: 28px;
  background: #fbfbfa;
}

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto 20px;
  padding: 18px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.profile-avatar-large {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.profile-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  color: #777;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-header h1 {
  margin: 0;
  color: #171717;
  font-size: 22px;
}

.profile-header p {
  margin: 2px 0 0;
  color: #747474;
  font-size: 13px;
}

.profile-signout,
.profile-panel button,
.billing-panel button,
.pricing-card button {
  height: 36px;
  padding: 0 13px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 12px;
  font-weight: 800;
}

.profile-tabs {
  max-width: 1160px;
  margin: 0 auto 18px;
}

.profile-grid,
.billing-page {
  max-width: 1160px;
  margin: 0 auto;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.profile-panel,
.billing-panel,
.pricing-card,
.billing-current-card {
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.profile-panel {
  padding: 20px;
}

.profile-panel h2,
.billing-hero h2,
.billing-panel h3 {
  margin: 4px 0 10px;
  color: #171717;
}

.panel-label {
  color: #858585;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-field {
  margin-top: 14px;
}

.profile-field label {
  display: block;
  margin-bottom: 5px;
  color: #777;
  font-size: 12px;
  font-weight: 700;
}

.profile-field input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
  color: #222;
}

.profile-muted {
  margin: 14px 0 0;
  color: #777;
  font-size: 13px;
  line-height: 1.55;
}

.profile-panel-dark {
  background: #111;
  color: #d9d9d9;
}

.profile-panel-dark h2,
.profile-panel-dark .panel-label {
  color: #fff;
}

.profile-panel-dark p {
  color: #b6b6b6;
  line-height: 1.6;
}

.billing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.billing-hero > div:first-child {
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.billing-hero p {
  max-width: 640px;
  margin: 0;
  color: #707070;
  font-size: 14px;
  line-height: 1.55;
}

.billing-current-card {
  padding: 18px;
}

.billing-current-card span {
  color: #777;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-current-card strong {
  display: block;
  margin-top: 8px;
  color: #111;
  font-size: 24px;
}

.billing-current-card p {
  margin: 4px 0 14px;
  color: #777;
  font-size: 12px;
}

.usage-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #111;
}

.billing-notice {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 18px;
}

.pricing-card.featured {
  border-color: #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.pricing-card-top span {
  display: inline-flex;
  height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f3f3f3;
  color: #555;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pricing-card h3 {
  margin: 14px 0 6px;
  color: #111;
  font-size: 17px;
}

.pricing-card p {
  color: #707070;
  font-size: 13px;
  line-height: 1.5;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 16px 0 4px;
}

.pricing-price strong {
  color: #111;
  font-size: 31px;
  line-height: 1;
}

.pricing-price span,
.pricing-credits {
  color: #777;
  font-size: 12px;
  font-weight: 700;
}

.pricing-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 16px 0 18px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  color: #2a2a2a;
  font-size: 13px;
}

.pricing-card li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #16a34a;
  vertical-align: 1px;
}

.pricing-card button {
  width: 100%;
  margin-top: auto;
  background: #111;
  color: #fff;
}

.pricing-card.featured button {
  background: #006fff;
  border-color: #006fff;
}

.billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.billing-panel {
  padding: 18px;
}

.billing-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.billing-panel-head strong {
  color: #111;
  font-size: 13px;
}

.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.billing-table td {
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  color: #333;
}

.billing-table td:nth-child(2),
.billing-table td:nth-child(3) {
  text-align: right;
  color: #777;
}

.billing-empty-state {
  padding: 18px;
  border: 1px dashed #d8d8d8;
  border-radius: 10px;
  background: #fafafa;
}

.billing-empty-state strong {
  color: #222;
}

.billing-empty-state p {
  margin: 6px 0 0;
  color: #777;
  font-size: 13px;
  line-height: 1.5;
}

.sidebar-user {
  width: 100%;
  text-align: left;
  border-radius: 8px;
}

.sidebar-user:hover {
  background: #1e1e1e;
}

@media (max-width: 1120px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-page {
    padding: 18px;
  }

  .profile-header,
  .profile-grid,
  .billing-hero,
  .billing-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .profile-signout {
    justify-self: start;
  }
}

.docs-page {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  max-width: 720px;
}

.docs-page h1 { margin-bottom: 24px; }
.docs-page h2 { margin: 24px 0 12px; color: var(--ink); }
.docs-page h3 { margin: 20px 0 8px; color: var(--ink); }
.docs-page p { margin-bottom: 12px; color: var(--ink-secondary); line-height: 1.7; }
.docs-page ul, .docs-page ol { margin-bottom: 12px; padding-left: 24px; color: var(--ink-secondary); }
.docs-page li { margin-bottom: 6px; line-height: 1.6; }
.docs-page code {
  background: var(--surface-dim);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--mono);
}
.docs-page pre {
  background: var(--bg);
  color: #e5e5e5;
  padding: 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 16px;
}
.docs-page pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-secondary {
  padding: 8px 16px;
  background: var(--surface-dim);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
}

.btn-ghost {
  padding: 6px 10px;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all var(--transition);
}

.btn-ghost:hover {
  background: var(--surface-dim);
  color: var(--ink);
}

.btn-danger {
  padding: 8px 16px;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

/* ── Toast Notifications ────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.toast {
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid #333;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 380px;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}

.toast-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.toast-action {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

.toast-dismiss {
  font-size: 12px;
  color: #666;
}

/* ── Loading ────────────────────────────────────────────────────────────── */
.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--bg);
  color: #fff;
  font-size: 14px;
  gap: 12px;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ── Thinking Icon (top bar brand) ───────────────────────────────────── */
.thinking-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #d1d5db;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: none;
  vertical-align: middle;
  margin-right: 4px;
  transition: border-color 0.2s;
}

.thinking-icon--active {
  border-color: #fbbf24;
  border-top-color: #f59e0b;
  animation: spin 0.8s linear infinite;
}

/* ── Streaming Cursor ──────────────────────────────────────────────────── */
.streaming-cursor {
  display: inline;
  animation: blink 0.8s step-end infinite;
  color: #006fff;
  font-weight: 300;
  margin-left: 1px;
}

@keyframes blink {
  50% { opacity: 0; }
}

.streaming-bubble {
  border-left: 3px solid #006fff !important;
}
.streaming-thinking-text {
  color: #9ca3af;
  font-style: italic;
}

/* ── Topbar Icon Button Active ────────────────────────────────────────── */
.topbar-icon-btn--active {
  background: #f0f4ff;
  color: #006fff;
  border-color: #006fff;
}

/* ── Files Drawer ─────────────────────────────────────────────────────── */
.files-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 900;
  display: flex;
  justify-content: flex-end;
}
.files-drawer {
  width: 360px;
  max-width: 90vw;
  background: #fff;
  height: 100%;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.files-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.files-drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a1d20;
}
.files-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #999;
  padding: 0 4px;
  line-height: 1;
}
.files-drawer-close:hover { color: #333; }
.files-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* ── Admin Panel ──────────────────────────────────────────────────────── */
.utility-admin {
  padding: 8px 0;
}
.utility-admin-section {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.utility-admin-section:last-child {
  border-bottom: none;
}
.utility-admin-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
}
.admin-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #006fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}
.admin-link:hover {
  background: #f0f4ff;
}
.admin-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.admin-label {
  font-size: 12px;
  color: #999;
}
.admin-value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: right;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-value--green {
  color: #16a34a;
}

/* ── Agent model picker ──────────────────────────────────────────────── */
.agent-model-picker {
  position: relative;
  display: inline-flex;
}

.agent-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.agent-model-trigger:hover:not(:disabled) {
  border-color: #d1d5db;
  background: #f9fafb;
}

.agent-model-trigger:focus-visible {
  outline: none;
  border-color: #c7cdd8;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .06);
}

.agent-model-trigger:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.agent-model-spark {
  font-size: 13px;
  line-height: 1;
}

.agent-model-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 80;
  width: 218px;
  padding: 5px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
}

.agent-model-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  text-align: left;
  cursor: pointer;
}

.agent-model-option:hover,
.agent-model-option.active {
  background: #f5f6f8;
}

.agent-model-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-model-option-copy strong {
  font-size: 12px;
  font-weight: 650;
}

.agent-model-option-copy small {
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;
}

.agent-model-check {
  font-size: 13px;
  font-weight: 700;
}

/* ── Narration Dropdown ────────────────────────────────────────────────── */
.narration-dropdown {
  margin: 8px 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  overflow: hidden;
}

.narration-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-align: left;
}

.narration-toggle:hover {
  background: #f3f4f6;
  color: #374151;
}

.narration-toggle-icon {
  font-size: 10px;
  line-height: 1;
}

.narration-list {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.narration-entry {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  padding: 6px 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #f3f4f6;
  word-break: break-word;
  overflow-wrap: break-word;
}

.narration-role {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #9ca3af;
  margin-right: 6px;
  letter-spacing: 0.5px;
}

/* ── Thread Turn ──────────────────────────────────────────────────────── */
.thread-turn {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

.thread-turn:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Connectors Trigger & Session Bar ──────────────────────────────── */
.connectors-trigger {
  position: relative;
}

.connectors-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-connectors-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 4px;
}

.session-connector-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 11px;
 font-weight: 600;
  color: #3b82f6;
  line-height: 1;
}

.session-connector-chip button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 1px;
  font-size: 12px;
  color: #93c5fd;
  line-height: 1;
}

.session-connector-chip button:hover {
  color: #1d4ed8;
}

/* ── Connectors Dropdown ──────────────────────────────────────────────── */
.connectors-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 6px 0;
  animation: fadeInUp 0.15s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.connectors-dropdown-header {
  padding: 8px 14px 6px;
  font-size: 11px;
 font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.connectors-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  text-align: left;
  transition: background 0.1s;
}

.connectors-dropdown-item:hover {
  background: #f3f4f6;
}

.connectors-dropdown-item.active {
  background: #eff6ff;
}

.connectors-dropdown-icon {
  display: flex;
  align-items: center;
 justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f3f4f6;
  font-size: 10px;
 font-weight: 700;
  color: #6b7280;
}

.connectors-dropdown-check {
  margin-left: auto;
  color: #3b82f6;
  font-size: 14px;
 font-weight: 700;
}

.connectors-dropdown-footer {
  padding: 6px 14px 4px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
}

.connectors-dropdown-footer a {
  font-size: 11px;
  color: #3b82f6;
  text-decoration: none;
}

.connectors-dropdown-footer a:hover {
  text-decoration: underline;
}

.session-connector-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 10px;
 font-weight: 600;
  color: #3b82f6;
}

/* ── Empty State ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-muted);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .preview-pane { display: none; }
  .tasks-history { width: 220px; min-width: 220px; }
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .tasks-history { display: none; }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Jostavan Manus-inspired new task surface */
:root {
  --sidebar-bg: #f2f2f2;
  --sidebar-ink: #242424;
  --sidebar-ink-active: #111111;
  --sidebar-hover: #e9e9e9;
  --sidebar-active: #ffffff;
  --sidebar-width: 375px;
}

.sidebar {
  background: #f2f2f2;
  border-right: 1px solid #e6e6e6;
  color: #222;
}

.sidebar-header {
  min-height: 72px;
  padding: 20px 20px 12px;
  justify-content: space-between;
}

.sidebar-logo {
  color: #2b2b2b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  gap: 12px;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  background: #202020;
  color: #fff;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 16px;
}

.sidebar-header-actions {
  display: flex;
  gap: 14px;
}

.sidebar-mini-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #555;
  font-size: 14px;
}

.sidebar-mini-btn:hover {
  background: #e5e5e5;
  color: #111;
}

.sidebar-primary-nav {
  flex: none;
  padding: 8px 12px 18px;
}

.sidebar-item {
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #171717;
  font-size: 18px;
  gap: 12px;
}

.sidebar-item:hover,
.sidebar-item.active {
  background: #fff;
  color: #111;
}

.sidebar-item-icon {
  width: 22px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  opacity: 1;
}

.sidebar-projects {
  padding: 0 12px 18px;
}

.sidebar-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 8px;
  color: #777;
  font-size: 16px;
  font-weight: 600;
}

.sidebar-section-row button {
  color: #777;
  font-size: 22px;
  line-height: 1;
}

.sidebar-new-project {
  font-size: 18px;
}

.sidebar-tasks-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
}

.sidebar-task-list {
  overflow-y: auto;
  max-height: calc(100vh - 560px);
  gap: 4px;
}

.sidebar-task-group {
  margin: 8px 10px 6px;
  color: #808080;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.sidebar-task {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  align-items: center;
  gap: 11px;
  color: #171717;
  border-radius: 8px;
}

.sidebar-task:hover,
.sidebar-task.active {
  background: #fff;
}

.sidebar-task-symbol {
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 5px;
  flex: 0 0 auto;
}

.sidebar-task-title {
  color: #171717;
  font-size: 16px;
}

.sidebar-task-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ff5b61;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-share-card,
.sidebar-brand-card {
  margin: 10px;
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.sidebar-share-symbol {
  font-size: 13px;
  font-weight: 800;
}

.sidebar-share-card strong,
.sidebar-share-card span,
.sidebar-brand-card strong,
.sidebar-brand-card span {
  display: block;
}

.sidebar-share-card strong,
.sidebar-brand-card strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  line-height: 1.1;
}

.sidebar-share-card div span,
.sidebar-brand-card div span {
  color: #777;
  font-size: 14px;
}

.sidebar-share-arrow {
  color: #777;
  font-size: 22px;
}

.sidebar-footer {
  padding: 12px 14px;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  background: #6aaa42;
  color: #fff;
  font-size: 18px;
}

.sidebar-user-name {
  color: #191919;
  font-size: 16px;
}

.sidebar-user-email {
  color: #777;
  font-size: 11px;
}

.content-area {
  background: #fff;
}

.new-task-screen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0 28px 36px;
  overflow: hidden;
  background: #fff;
}

.new-task-topbar {
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-task-model {
  color: #111827;
  font-size: 22px;
  font-weight: 700;
}

.new-task-model span {
  color: #777;
  font-size: 14px;
  margin-left: 4px;
}

.credits-wrap {
  position: relative;
}

.credits-pill {
  height: 40px;
  padding: 0 13px;
  border: 1px solid #eeeeee;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  font-size: 17px;
  font-weight: 700;
}

.credits-popover {
  position: absolute;
  top: 46px;
  right: 0;
  z-index: 20;
  width: 336px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}

.credits-popover-head,
.credits-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.credits-popover-head {
  padding-bottom: 14px;
  border-bottom: 1px dashed #dcdcdc;
  margin-bottom: 16px;
}

.credits-popover-head strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
}

.credits-popover-head button {
  padding: 8px 10px;
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  font-weight: 700;
}

.credits-line {
  color: #3c3c3c;
  font-size: 17px;
  font-weight: 700;
}

.credits-popover p {
  display: flex;
  justify-content: space-between;
  margin: 3px 0 18px;
  color: #7c7c7c;
  font-size: 14px;
}

.credits-link {
  color: #555;
  font-size: 15px;
}

.credits-exhausted-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 24px;
  border-radius: 14px;
  background: #fff8f0;
  border: 1px solid #ffe0b2;
  text-align: center;
}

.credits-exhausted-banner p {
  margin: 0;
  color: #8a6d3b;
  font-size: 15px;
  line-height: 1.5;
}

.credits-exhausted-banner button {
  padding: 8px 20px;
  border-radius: 8px;
  background: #006fff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.credits-exhausted-banner button:hover {
  background: #0056d6;
}

.capabilities-section {
  width: min(960px, calc(100vw - var(--sidebar-width) - 120px));
  max-width: 960px;
  margin: 72px auto 56px;
  padding-bottom: 12px;
}
.capabilities-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.capabilities-eyebrow { margin:0 0 6px; color:#777; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.capabilities-heading h2 { margin:0 0 6px; color:#25201c; font-size:24px; font-weight:650; letter-spacing:-.02em; }
.capabilities-heading > div > p:last-child { margin:0; color:#888; font-size:13px; }
.capabilities-count { flex-shrink:0; padding:7px 11px; border:1px solid #e5e5e5; border-radius:999px; background:#fafafa; color:#777; font-size:11px; font-weight:600; }
.capabilities-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.capability-card {
  position:relative; min-height:108px; display:flex; align-items:flex-start; gap:13px; padding:16px;
  border:1px solid #e6e6e6; border-radius:15px; background:#fff; color:#222; text-align:left; cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.025); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.capability-card:hover { transform:translateY(-2px); border-color:#cfcfcf; box-shadow:0 10px 24px rgba(0,0,0,.07); }
.capability-icon { width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; border:1px solid #e7e7e7; border-radius:10px; background:#f7f7f7; color:#222; font-size:18px; font-weight:600; }
.capability-card-copy { min-width:0; display:flex; flex-direction:column; gap:5px; padding-right:18px; }
.capability-card-copy strong { font-size:14px; font-weight:650; }
.capability-card-copy span { color:#7d7d7d; font-size:12px; line-height:1.45; }
.capability-arrow { position:absolute; right:15px; top:15px; color:#aaa; font-size:15px; transition:transform .16s ease,color .16s ease; }
.capability-card:hover .capability-arrow { color:#222; transform:translateX(3px); }
.capability-modal-backdrop { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,18,16,.28); backdrop-filter:blur(4px); }
.capability-modal { position:relative; width:min(720px,calc(100vw - 48px)); max-height:min(760px,calc(100vh - 48px)); overflow-y:auto; padding:44px 48px 40px; border:1px solid #e4e4e4; border-radius:26px; background:#fff; box-shadow:0 32px 90px rgba(0,0,0,.22); }
.capability-modal-close { position:absolute; top:12px; right:14px; width:30px; height:30px; border:0; border-radius:50%; background:#f5f5f5; color:#666; font-size:20px; cursor:pointer; }
 .capability-modal-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid #e5e5e5; border-radius:16px; background:#f7f7f7; font-size:28px; }
 .capability-modal h3 { margin:4px 0 16px; color:#222; font-size:32px; line-height:1.15; letter-spacing:-.02em; }
 .capability-modal > p:not(.capabilities-eyebrow) { margin:0 0 30px; color:#666; font-size:16px; line-height:1.75; max-width:620px; }
.capability-use-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 15px; border:0; border-radius:10px; background:#111; color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.capability-use-btn:hover { background:#292929; }
@media (max-width: 760px) {
  .capabilities-section { width:calc(100vw - 32px); margin-top:52px; }
  .capabilities-heading { align-items:flex-start; flex-direction:column; }
  .capabilities-grid { grid-template-columns:1fr; }
}
.new-task-hero {
  width: min(960px, calc(100vw - var(--sidebar-width) - 120px));
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 86px;
}

.plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: #f6f6f6;
  color: #7a7a7a;
  font-size: 16px;
}

.plan-pill i {
  width: 1px;
  height: 18px;
  background: #e2e2e2;
}

.plan-pill button {
  color: #006fff;
}

.new-task-hero h1 {
  margin: 62px 0 44px;
  color: #25201c;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0;
}

.task-composer {
  position: relative;
  width: 100%;
  min-height: 150px;
  border: 1px solid #d4d4d4;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}

.composer-field {
  width: 100%;
  min-height: 92px;
  padding: 20px 20px 8px;
  border: 0;
  outline: none;
  resize: none;
  color: #222;
  background: transparent;
  font-size: 18px;
}

.composer-field::placeholder {
  color: #b5b5b5;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 15px;
}

.composer-tools-left,
.composer-tools-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

.composer-round,
.composer-send {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  background: #fff;
  color: #777;
  font-size: 22px;
}

.connector-active {
  color: #2bcf83;
  background: #f4fbf7;
}

.attached-files-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}

.attached-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f4ff;
  border: 1px solid #d0d8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #444;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attached-file-chip button {
  background: none;
  border: 0;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.attached-file-chip button:hover {
  color: #e44;
}

.composer-plain {
  width: 30px;
  height: 36px;
  color: #737373;
  font-size: 20px;
}

.composer-send {
  border: 0;
  background: #eeeeee;
  color: #b6b6b6;
  font-weight: 800;
}

.composer-send:not(:disabled) {
  background: #111;
  color: #fff;
}

.composer-popover {
  position: absolute;
  z-index: 15;
  top: 132px;
  left: 64px;
  width: 486px;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.attach-popover {
  left: 16px;
  width: 292px;
}

.connector-row,
.popover-action {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border-radius: 8px;
  color: #424242;
  font-size: 17px;
  text-align: left;
}

.connector-row button {
  margin-left: auto;
  color: #666;
  font-size: 16px;
}

.connector-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2f2f2;
  color: #222;
  font-size: 11px;
  font-weight: 800;
}

.connector-1 {
  background: #2ad680;
  color: #fff;
}

.popover-action:hover,
.connector-row:hover {
  background: #f6f6f6;
}

.popover-divider {
  height: 1px;
  margin: 8px 0;
  background: #eeeeee;
}

.quick-action-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.quick-action-row button {
  height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ececec;
  border-radius: 999px;
  background: #fff;
  color: #1e1e1e;
  font-size: 16px;
}

.quick-action-row button:hover {
  background: #f8f8f8;
}

.quick-action-row span {
  color: #777;
  font-size: 15px;
  font-weight: 800;
}

.new-task-notice {
  margin-top: 12px;
  color: #777;
  font-size: 13px;
}

.skills-card {
  width: min(676px, 60vw);
  min-height: 121px;
  margin-top: auto;
  margin-bottom: 44px;
  display: grid;
  grid-template-columns: 1fr 176px;
  overflow: hidden;
  border-radius: 14px;
  background: #f0f0f0;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.skills-card:hover {
  background: #eaeaea;
}

.skills-card > div:first-child {
  padding: 24px 26px;
}

.skills-card h2 {
  margin: 0 0 4px;
  color: #1f1f1f;
  font-size: 20px;
  font-weight: 700;
}

.skills-card p {
  margin: 0;
  color: #7c7c7c;
  font-size: 16px;
  line-height: 1.45;
}

.skills-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  transform: translateY(-6px);
}

.skills-card-stack span {
  width: 150px;
  height: 41px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
}

.skills-card-stack b {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #1db954;
  color: #fff;
  font-size: 11px;
}

.skills-card-stack span:nth-child(2) b {
  background: #228be6;
}

.skills-card-stack span:nth-child(3) b {
  background: #f5a000;
}

.skills-card-stack i {
  width: 80px;
  height: 5px;
  border-radius: 999px;
  background: #eeeeee;
}

.template-strip {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 10px;
  transform: translateY(28px);
}

.template-strip button {
  width: 10px;
  height: 10px;
  overflow: hidden;
  border-radius: 50%;
  background: #dddddd;
  color: transparent;
}

.template-strip button:nth-child(3) {
  background: #bcbcbc;
}

@media (max-width: 1100px) {
  :root { --sidebar-width: 300px; }
  .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); }
  .new-task-hero { width: min(92vw, 760px); padding-top: 46px; }
  .new-task-hero h1 { font-size: 42px; text-align: center; }
  .skills-card { width: min(620px, 82vw); }
}

/* Submitted task workspace */
.task-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}

.task-workspace-topbar {
  height: 56px;
  min-height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  gap: 12px;
}

.task-workspace-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.task-workspace-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-trial-btn,
.task-icon-btn {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f2f8ff;
  color: #006fff;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
}

.task-icon-btn {
  background: transparent;
  color: #555;
  border: 1px solid #e5e7eb;
  font-weight: 500;
}
.task-icon-btn:hover { background: #f9fafb; }

.topbar-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-icon-btn:hover { background: #f3f4f6; }

.task-chat-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.task-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 220px;
}

.task-chat-thread {
  width: min(780px, 90%);
  margin: 0 auto;
  padding: 8px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.task-thread-meta {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111;
  font-size: 14px;
}

.task-thread-meta i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.task-thread-meta strong {
  color: #778793;
  font-size: 13px;
  font-weight: 700;
}

.task-message {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

.task-message.agent {
  align-self: flex-start;
}

.task-message-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #222;
  font-size: 22px;
  font-weight: 700;
}

.task-message.agent .task-message-author {
  font-family: Georgia, 'Times New Roman', serif;
}

.task-message-author em {
  padding: 2px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #78838c;
  font-family: var(--font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.task-message-body {
  color: #161616;
  font-size: 20px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: break-word;
}

.task-message.user .task-message-body {
  max-width: 560px;
  padding: 16px 18px;
  border: 1px solid #ededed;
  border-radius: 12px 12px 0 12px;
  background: #fff;
  font-size: 19px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.task-message-body p {
  margin: 0 0 12px;
}

.task-message-body p:last-child {
  margin-bottom: 0;
}

.task-message-body ul,
.task-message-body ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.task-message-body li {
  margin-bottom: 4px;
  line-height: 1.55;
}

.task-message-body li:last-child {
  margin-bottom: 0;
}

.task-message-body .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.task-message-body .md-table th {
  background: #1a1a2e;
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #2d2d44;
}

.task-message-body .md-table td {
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.task-message-body .md-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.task-message-body .md-table tbody tr:hover {
  background: #f0f4ff;
}

.task-question-card {
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fafafa;
}

.task-question-card p {
  margin: 0 0 6px;
  color: #778793;
  font-size: 13px;
  font-weight: 700;
}

.task-question-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

.task-question-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-question-card button {
  padding: 8px 12px;
  border: 1px solid #dedede;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
}

.task-question-card > span {
  display: block;
  margin-top: 8px;
  color: #777;
  font-size: 13px;
}

/* Interactive multiple-choice questionnaire (agent ask_questions tool) */
.turn-questions-card {
  margin: 6px 0 14px;
  padding: 16px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background: #f7fafd;
}

.turn-questions-card.answered {
  border-color: #d7e8dc;
  background: #f6fbf7;
}

.turn-questions-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.turn-questions-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f0fb;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}

.turn-questions-card.answered .turn-questions-badge {
  background: #e3f4e8;
  color: #188a42;
}

.turn-questions-hint {
  color: #8a97a3;
  font-size: 12px;
}

.turn-questions-intro {
  margin: 0 0 12px;
  color: #1f2d3a;
  font-size: 15px;
  font-weight: 600;
}

.turn-questions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.turn-question h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #33414e;
}

.turn-question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.turn-question-option {
  padding: 7px 14px;
  border: 1px solid #d3dde6;
  border-radius: 999px;
  background: #fff;
  color: #2b3a47;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.turn-question-option:hover:not(:disabled) {
  border-color: #2563eb;
}

.turn-question-option.selected {
  border-color: #2563eb;
  background: #e8f0fb;
  color: #1d4ed8;
  font-weight: 600;
}

.turn-question-option:disabled {
  cursor: default;
  opacity: 0.75;
}

.turn-question-option.selected:disabled {
  opacity: 1;
}

.turn-question-other {
  width: 100%;
}

.turn-question-other-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.turn-question-other-row input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid #d3dde6;
  border-radius: 999px;
  font-size: 13px;
}

.turn-question-other-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f6;
  color: #33414e;
  font-size: 12px;
}

.task-workspace .event-bubble,
.task-workspace .event-tool-call,
.task-workspace .event-thinking {
  max-width: 76%;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #171717;
  box-shadow: none;
  padding: 0;
  font-size: 18px;
  line-height: 1.55;
}

.task-workspace .event-bubble.user {
  align-self: flex-end;
  padding: 14px 16px;
  border: 1px solid #ededed;
  border-radius: 12px 12px 0 12px;
  background: #fff;
}

.task-workspace .event-bubble.system {
  align-self: center;
  color: #7d7d7d;
  font-size: 14px;
}

.task-workspace .event-tool-header {
  padding: 10px 0;
}

.task-workspace .event-tool-body {
  padding: 0 0 10px;
  color: #666;
}

.task-empty-thread {
  margin: 120px auto;
  text-align: center;
  color: #777;
}

.task-empty-thread h2 {
  margin-bottom: 8px;
  color: #222;
  font-size: 24px;
}

.task-empty-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.task-composer-dock {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: min(720px, 90%);
  transform: translateX(-50%);
}

.task-progress-strip {
  min-height: 51px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border: 1px solid #ededed;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.05);
}

.task-progress-strip span {
  color: #16a34a;
  font-size: 14px;
  font-weight: 700;
}

.task-progress-strip span.running {
  color: #f59e0b;
}

.task-progress-strip p {
  margin: 0;
  color: #555;
  font-size: 15px;
}

.task-progress-strip strong {
  color: #7a7a7a;
  font-size: 15px;
}

.task-followup-composer {
  min-height: 110px;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.task-progress-strip + .task-followup-composer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.task-followup-composer textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: none;
  resize: none;
  color: #222;
  background: transparent;
  font-size: 18px;
  font-family: var(--font);
}

.task-followup-composer textarea::placeholder {
  color: #b6b6b6;
}

.task-followup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-followup-toolbar > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-path-chip {
  min-width: 0;
  max-width: 420px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #eeeeee;
  border-radius: 999px;
  color: #9a9a9a;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-composer-note {
  margin: 10px 0 0;
  text-align: center;
  color: #778793;
  font-size: 13px;
}

@media (max-width: 900px) {
  .task-chat-thread,
  .task-composer-dock {
    width: calc(100vw - 36px);
  }

  .task-message,
  .task-workspace .event-bubble,
  .task-workspace .event-tool-call,
  .task-workspace .event-thinking {
    max-width: 100%;
  }
}

/* Refinement pass: smaller app scale, auth landing, connectors, message copy */
:root {
  --sidebar-width: 282px;
}

body {
  font-size: 13px;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
}

.sidebar-header {
  min-height: 58px;
  padding: 14px 15px 8px;
}

.sidebar-logo {
  font-size: 18px;
}

.sidebar-logo-icon {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: #fff8e7;
  color: #8a5a00;
  font-family: var(--font);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.beta-badge-light {
  background: #f3f7ff;
  color: #2458b8;
  border-color: #d8e4ff;
}

.beta-badge-dark {
  height: 20px;
  padding: 0 7px;
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.24);
  font-size: 10px;
}

.sidebar-item {
  min-height: 34px;
  font-size: 13.5px;
  gap: 9px;
}

.sidebar-section-row {
  padding: 9px 8px 6px;
  font-size: 12px;
}

.sidebar-task {
  min-height: 34px;
}

.sidebar-task-title {
  font-size: 12.5px;
}

.sidebar-brand-card {
  padding: 9px;
  border-radius: 10px;
}

.sidebar-brand-card strong {
  font-size: 15px;
}

.sidebar-footer {
  padding: 9px 11px;
}

.sidebar-avatar {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.sidebar-user-name {
  font-size: 13px;
}

.new-task-topbar,
.task-workspace-topbar {
  height: 58px;
  min-height: 58px;
  padding: 0 21px;
}

.new-task-model {
  font-size: 16px;
}

.new-task-hero {
  width: min(720px, calc(100vw - var(--sidebar-width) - 90px));
  padding-top: 56px;
}

.plan-pill {
  height: 35px;
  padding: 0 15px;
  font-size: 12px;
}

.new-task-hero h1 {
  margin: 46px 0 32px;
  font-size: 38px;
}

.task-composer {
  min-height: 116px;
  border-radius: 20px;
}

.composer-field {
  min-height: 68px;
  font-size: 14px;
}

.composer-round,
.composer-send {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.quick-action-row button {
  height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
}

.skills-card {
  width: min(510px, 60vw);
  min-height: 92px;
}

.skills-card h2 {
  font-size: 15px;
}

.skills-card p {
  font-size: 12.5px;
}

/* ─── Landing page (new full layout) ──────────────────────────────────────── */

.auth-root {
  min-height: 100vh;
  background: #fafafa;
  overflow-y: auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Navbar */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f0f0f0;
}
.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  color: #111;
}
.landing-nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.landing-nav-links {
  display: flex;
  gap: 28px;
}
.landing-nav-links a {
  font-size: 14px;
  color: #555;
  text-decoration: none;
  transition: color 0.15s;
}
.landing-nav-links a:hover { color: #111; }
.landing-nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.landing-nav-signin {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s;
}
.landing-nav-signin:hover { background: #f3f4f6; color: #111; }
.landing-nav-signup {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #111;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.15s;
}
.landing-nav-signup:hover { background: #333; }

/* Hero */
.landing-hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 60px;
}
.landing-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 20px;
}
.landing-hero-h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.08;
  color: #0a0a0a;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.landing-hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #555;
  max-width: 520px;
  margin: 0 0 28px;
}
.landing-hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}
.landing-btn-primary {
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.landing-btn-primary:hover { background: #333; transform: translateY(-1px); }
.landing-btn-ghost {
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid #e0e0e0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.landing-btn-ghost:hover { border-color: #aaa; }
.landing-hero-proof {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.landing-hero-proof span {
  font-size: 13px;
  color: #888;
  font-weight: 500;
  padding-left: 14px;
  position: relative;
}
.landing-hero-proof span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
}

/* Hero prompt box */
.hero-prompt-box {
  display: flex;
  gap: 0;
  margin: 24px 0 0;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.hero-prompt-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.hero-prompt-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 18px;
  font-size: 15px;
  color: #111;
  background: transparent;
  font-family: inherit;
}
.hero-prompt-input::placeholder {
  color: #9ca3af;
}
.hero-prompt-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.hero-prompt-btn:hover {
  background: #2563eb;
}
.hero-prompt-btn:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

/* Preview card */
.preview-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  animation: previewSlideUp 0.3s ease-out;
}
@keyframes previewSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}
.preview-app-name {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin: 0 0 4px;
}
.preview-tagline {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
.preview-badge {
  background: #ecfdf5;
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.preview-section {
  margin-bottom: 20px;
}
.preview-section h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin: 0 0 10px;
}
.preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview-list li {
  font-size: 14px;
  color: #374151;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.preview-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
}
.preview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.preview-pill {
  background: #f3f4f6;
  color: #374151;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 500;
}
.preview-tech {
  font-size: 14px;
  color: #374151;
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: #f9fafb;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-block;
}
.preview-cta {
  margin-top: 28px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
}

/* Auth card in hero */
.landing-hero .auth-card {
  position: sticky;
  top: 80px;
  align-self: start;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}

/* Sections */
.landing-section {
  padding: 80px 40px;
}
.landing-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.landing-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3b82f6;
  margin-bottom: 10px;
}
.landing-section-h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  margin: 0 0 40px;
  line-height: 1.15;
}

/* Steps */
.landing-steps-section {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.landing-step {
  padding: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  background: #fafafa;
}
.landing-step-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #bbb;
  margin-bottom: 12px;
}
.landing-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}
.landing-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* Features */
.landing-features-section { background: #fafafa; }
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.landing-feature-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.landing-feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.landing-feature-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #bbb;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.landing-feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}
.landing-feature-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* Free / beta callout */
.landing-free-section { background: #fafafa; }
.landing-free-card {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  border-radius: 24px;
  padding: 56px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.landing-free-pills {
  display: flex;
  gap: 16px;
}
.landing-free-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px 28px;
  min-width: 100px;
}
.landing-free-pill span {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.landing-free-pill small {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
  text-align: center;
}

/* Footer */
.landing-footer {
  background: #0a0a0a;
  padding: 40px 40px;
}
.landing-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.landing-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.landing-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.landing-footer-links a {
  font-size: 13px;
  color: #888;
  text-decoration: none;
  transition: color 0.15s;
}
.landing-footer-links a:hover { color: #fff; }
.landing-footer-copy {
  font-size: 12px;
  color: #555;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .landing-hero { grid-template-columns: 1fr; padding: 60px 24px 40px; }
  .landing-hero .auth-card { max-width: 100%; position: static; }
  .landing-hero-h1 { font-size: 40px; }
  .landing-steps { grid-template-columns: repeat(2, 1fr); }
  .landing-features-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-free-card { flex-direction: column; padding: 40px 28px; }
  .landing-free-pills { justify-content: center; }
}
@media (max-width: 640px) {
  .landing-nav { padding: 0 16px; }
  .landing-nav-links { display: none; }
  .landing-section { padding: 48px 20px; }
  .landing-hero-h1 { font-size: 32px; }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-features-grid { grid-template-columns: 1fr; }
  .landing-footer-inner { flex-direction: column; align-items: flex-start; }
  .landing-footer-links { gap: 16px; }
  .hero-prompt-box { flex-direction: column; }
  .hero-prompt-btn { padding: 14px 28px; }
  .preview-card { padding: 24px 20px; }
  .preview-card-header { flex-direction: column; }
}

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
  padding: 36px;
  background: #f6f6f4;
}

.auth-landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 780px;
  padding: 40px;
}

.auth-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  color: #222;
}

.auth-landing-brand span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-weight: 800;
}

.auth-landing-brand strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
}

.auth-landing h1 {
  max-width: 720px;
  margin: 0 0 18px;
  color: #1f1f1f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.05;
}

.auth-landing > p {
  max-width: 600px;
  margin: 0 0 28px;
  color: #686868;
  font-size: 16px;
  line-height: 1.6;
}

.auth-landing-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 38px;
}

.auth-landing-actions button {
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
}

.auth-landing-actions button + button {
  background: #fff;
  color: #222;
  border: 1px solid #dedede;
}

.auth-landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 680px;
}

.auth-landing-grid div {
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.auth-landing-grid span {
  display: block;
  margin-bottom: 14px;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 800;
}

.auth-landing-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #222;
  font-size: 15px;
}

.auth-landing-grid p {
  margin: 0;
  color: #777;
  font-size: 12px;
  line-height: 1.45;
}

.auth-card {
  align-self: center;
  max-width: 390px;
  background: #fff;
  border-color: #e4e4e4;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
}

.auth-card .auth-logo {
  color: #222;
}

.auth-card h2 {
  color: #222;
}

.auth-card .auth-field label {
  color: #666;
}

.auth-card .auth-field input {
  background: #fafafa;
  border-color: #e4e4e4;
  color: #222;
}

.auth-card .auth-field input:focus {
  border-color: #111;
}

.auth-card .auth-link {
  color: #006fff;
}

.connectors-page {
  width: 100%;
  max-width: 1040px;
  padding: 28px;
  margin: 0 auto;
}

.connectors-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid #ececec;
}

.connectors-kicker {
  color: #7c7c7c;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.connectors-hero h1 {
  margin: 4px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 400;
}

.connectors-hero p {
  max-width: 560px;
  margin: 0;
  color: #707070;
  font-size: 13px;
}

.connectors-hero button,
.connector-card button,
.connector-row-card button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 700;
}

.connectors-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.connectors-page .connector-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.connectors-page .connector-card button {
  grid-column: 2;
  justify-self: start;
}

.connectors-page .connector-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f1f1f1;
  color: #222;
  font-size: 12px;
  font-weight: 800;
}

.connectors-page .connector-icon.small {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.connectors-page h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.connectors-page .connector-card p,
.connector-row-card p {
  margin: 0;
  color: #737373;
  font-size: 12px;
  line-height: 1.45;
}

.connectors-table {
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.connectors-table-head,
.connector-row-card {
  display: grid;
  grid-template-columns: 220px 1fr 130px;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
}

.connectors-table-head {
  background: #f8f8f8;
  color: #777;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.connector-row-card {
  border-top: 1px solid #f0f0f0;
}

.connector-row-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.connector-row-card strong {
  font-size: 13px;
}

.task-chat-thread,
.task-composer-dock {
  width: min(720px, 82%);
}

.task-message-author {
  font-size: 16px;
}

.task-message-author em {
  font-size: 11px;
}

.task-message-body {
  font-size: 17px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.task-message.user .task-message-body {
  font-size: 16px;
}

.task-workspace .event-bubble,
.task-workspace .event-tool-call,
.task-workspace .event-thinking {
  font-size: 15px;
}

.message-copy-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fafafa;
  color: #999;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.message-copy-btn:hover {
  color: #444;
  background: #f0f0f0;
  border-color: #d0d0d0;
}

.message-copy-btn.copied {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.message-action-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 0;
  margin-top: 2px;
}

.event-tool-header .message-copy-btn {
  margin-left: auto;
}

@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .auth-landing {
    padding: 18px;
  }

  .auth-landing h1 {
    font-size: 36px;
  }

  .auth-landing-grid,
  .connectors-featured {
    grid-template-columns: 1fr;
  }

  .connectors-table-head,
  .connector-row-card {
    grid-template-columns: 1fr;
  }
}

/* ── Task Utility Panel (Preview / Artifacts) ─────────────────────────── */
.task-workspace-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.task-workspace-body > .task-chat-shell {
  flex: 1;
  min-width: 0;
}

.task-utility-panel {
  width: 380px;
  min-width: 380px;
  border-left: 1px solid #ededed;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

.utility-resize-handle {
  width: 5px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.utility-resize-handle:hover,
.utility-resize-handle:active {
  background: #d0d0d0;
}

.task-icon-btn.active {
  background: #f0f0f0;
  color: #333;
  font-weight: 700;
}

.topbar-icon-btn {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
  color: #888;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-icon-btn:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #d0d0d0;
}

.task-workspace-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ededed;
  background: #fff;
}

.utility-tabs button {
  flex: none;
  height: 44px;
  padding: 0 24px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.15s;
}

.utility-tabs button:hover {
  color: #555;
}

.utility-tabs button.active {
  color: #111;
  box-shadow: inset 0 -2px 0 #111;
}

.utility-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.utility-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

.utility-empty {
  padding: 40px 24px;
  text-align: center;
  color: #999;
}

.utility-empty p {
  margin: 0 0 6px;
  font-size: 14px;
}

.utility-empty-hint {
  font-size: 12px !important;
  color: #bbb !important;
}

.artifacts-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.artifact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}

.artifact-item:hover {
  background: #f0f0f0;
}

.artifact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.artifact-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.artifact-badge.pdf { background: #fee2e2; color: #dc2626; }
.artifact-badge.docx { background: #dbeafe; color: #2563eb; }
.artifact-badge.md { background: #e0e7ff; color: #4f46e5; }
.artifact-badge.txt { background: #f3f4f6; color: #6b7280; }
.artifact-badge.pptx { background: #fff7ed; color: #ea580c; }
.artifact-badge.canvas { background: #ecfdf5; color: #059669; }

.artifact-name {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artifact-size {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}

.artifact-download {
  padding: 4px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.artifact-download:hover {
  background: #f2f8ff;
  color: #006fff;
  border-color: #b3d7ff;
}

/* ===== All Tasks List ===== */
.tl-page { padding: 32px 40px; max-width: 1100px; margin: 0 auto; }
.tl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.tl-title { font-size: 24px; font-weight: 700; color: #111; margin: 0; }
.tl-credits { font-size: 13px; color: #888; }
.tl-table { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.tl-table-header { display: flex; align-items: center; padding: 10px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 12px; font-weight: 600; color: #888; }
.tl-col-name { flex: 1; display: flex; align-items: center; gap: 8px; }
.tl-col-status { width: 100px; text-align: center; }
.tl-col-date { width: 130px; text-align: right; }
.tl-col-deploy { width: 200px; text-align: right; }
.tl-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; background: #fff; border: none; width: 100%; text-align: left; font: inherit; transition: background 0.1s; }
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: #f9fafb; }
.tl-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tl-task-name { font-size: 14px; color: #111; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-status-complete { color: #16a34a; font-weight: 600; font-size: 12px; }
.tl-status-building { color: #f59e0b; font-weight: 600; font-size: 12px; }
.tl-status-error { color: #ef4444; font-weight: 600; font-size: 12px; }
.tl-status-waiting { color: #8b5cf6; font-weight: 600; font-size: 12px; }
.tl-status-pending { color: #888; font-size: 12px; }
.tl-deploy-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #006fff; text-decoration: none; }
.tl-deploy-link:hover { text-decoration: underline; }
.tl-no-deploy { color: #d1d5db; font-size: 12px; }
.tl-empty { padding: 48px 24px; text-align: center; color: #888; }
.tl-empty p { margin: 0; font-size: 14px; }
.tl-empty-sub { font-size: 12px; color: #aaa; margin-top: 4px; }

/* ===== Manus-style Panel ===== */
.mp-toolbar { display: flex; align-items: center; height: 44px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.mp-toolbar-left { display: flex; gap: 4px; }
.mp-toolbar-center { flex: 1; display: flex; justify-content: center; }
.mp-toolbar-label { color: #111; font-size: 13px; font-weight: 500; }
.mp-toolbar-right { display: flex; gap: 4px; }
.mp-tool-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; color: #666; cursor: pointer; transition: all 0.15s; }
.mp-tool-btn:hover { background: #f3f4f6; color: #333; }
.mp-tool-btn.active { background: #f3f4f6; color: #111; }
.mp-icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: #666; cursor: pointer; transition: all 0.15s; }
.mp-icon-btn:hover { background: #f3f4f6; color: #333; }

/* Preview */
.mp-preview { display: flex; flex-direction: column; flex: 1; background: #f5f5f5; }
.mp-preview-subbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.mp-device-toggle { display: flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
.mp-device-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 4px; background: transparent; color: #888; cursor: pointer; transition: all 0.15s; }
.mp-device-btn.active { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.mp-url-bar { display: flex; align-items: center; gap: 6px; flex: 1; padding: 6px 12px; background: #f3f4f6; border-radius: 6px; font-size: 12px; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-preview-frame { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 16px; overflow: hidden; }
.mp-preview-iframe { width: 100%; height: 100%; border: none; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: width 0.3s; }
.mp-preview-iframe.mobile { width: 390px; max-width: 100%; height: 100%; border-radius: 20px; border: 3px solid #333; }
.mp-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; text-align: center; }
.mp-preview-empty-icon { margin-bottom: 16px; opacity: 0.5; }
.mp-preview-empty p { margin: 0 0 4px; font-size: 14px; }
.mp-preview-hint { font-size: 12px; color: #aaa; }

/* Files */
.mp-files { display: flex; flex-direction: column; flex: 1; background: #fff; }
.mp-files-table { display: flex; flex-direction: column; }
.mp-files-header { display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid #e5e7eb; font-size: 12px; font-weight: 600; color: #888; }
.mp-files-h-name { flex: 1; }
.mp-files-h-size { width: 80px; text-align: right; }
.mp-files-h-date { width: 120px; text-align: right; }
.mp-files-h-action { width: 32px; }
.mp-files-row { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.1s; }
.mp-files-row:hover { background: #f9fafb; }
.mp-files-cell-icon { margin-right: 10px; flex-shrink: 0; }
.mp-files-cell-name { flex: 1; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-files-cell-size { width: 80px; text-align: right; font-size: 12px; color: #888; }
.mp-files-cell-date { width: 120px; text-align: right; font-size: 12px; color: #888; }
.mp-files-cell-action { width: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #888; cursor: pointer; border-radius: 4px; padding: 4px; }
.mp-files-cell-action:hover { background: #f3f4f6; color: #333; }

/* Settings */
.mp-settings { display: flex; flex: 1; background: #fff; }
.mp-settings-sidebar { width: 180px; border-right: 1px solid #e5e7eb; padding: 12px 0; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.mp-settings-nav { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; background: transparent; font-size: 13px; color: #666; cursor: pointer; transition: all 0.15s; text-align: left; width: 100%; }
.mp-settings-nav:hover { background: #f9fafb; color: #333; }
.mp-settings-nav.active { background: #f3f4f6; color: #111; font-weight: 600; }
.mp-settings-content { flex: 1; overflow-y: auto; padding: 24px; }
.mp-settings-section h3 { font-size: 18px; font-weight: 600; color: #111; margin: 0 0 4px; }
.mp-settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mp-settings-header h3 { margin: 0; }
.mp-section-desc { font-size: 13px; color: #888; margin: 0 0 16px; }
.mp-section-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 8px; }
.mp-features-row { display: flex; gap: 6px; margin-bottom: 16px; }
.mp-feature-tag { padding: 3px 10px; border-radius: 9999px; background: #f3f4f6; color: #555; font-size: 11px; font-weight: 500; }
.mp-status-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
.mp-status-row strong { font-size: 14px; color: #111; }
.mp-status-row p { margin: 2px 0 0; font-size: 12px; color: #888; }
.mp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; margin-top: 6px; flex-shrink: 0; }
.mp-status-dot.live { background: #22c55e; }
.mp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-info-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f9fafb; border-radius: 8px; }
.mp-info-label { font-size: 11px; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.mp-info-value { font-size: 13px; color: #333; word-break: break-all; }
.mp-btn-external { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #333; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.mp-btn-external:hover { background: #f9fafb; border-color: #d1d5db; }
.mp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; color: #888; text-align: center; }
.mp-empty-state p { margin: 0 0 4px; font-size: 14px; }
.mp-empty-hint { font-size: 12px; color: #aaa; }

/* Dashboard */
.mp-dashboard { padding: 24px; }
.mp-dash-project { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mp-dash-icon { width: 36px; height: 36px; border-radius: 8px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
.mp-dash-name { font-size: 16px; font-weight: 600; color: #111; }
.mp-dash-analytics { padding: 24px; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; }
.mp-dash-chart-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #aaa; text-align: center; }
.mp-dash-chart-placeholder p { margin: 8px 0 0; font-size: 13px; }

/* Publish button */
.mp-publish-btn { padding: 6px 16px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #333; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.mp-publish-btn:hover { background: #f9fafb; border-color: #d1d5db; }

/* Preview spinner */
.mp-preview-spinner { width: 24px; height: 24px; border: 3px solid #e5e7eb; border-top-color: #333; border-radius: 50%; animation: mp-spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Files banner */
.mp-files-banner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 12px; color: #666; }
.mp-files-learn { color: #006fff; text-decoration: none; margin-left: auto; font-size: 12px; }
.mp-files-learn:hover { text-decoration: underline; }
.mp-files-h-check, .mp-files-cell-check { width: 32px; display: flex; align-items: center; justify-content: center; }
.mp-files-h-check input, .mp-files-cell-check input { width: 14px; height: 14px; accent-color: #333; }
.mp-files-thumb { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; flex-shrink: 0; }

/* Settings extras */
.mp-settings-title-row { display: flex; align-items: center; gap: 6px; }
.mp-settings-nav-external { color: #006fff !important; }
.mp-hosting-row, .mp-action-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
.mp-hosting-row strong, .mp-action-row strong { font-size: 14px; color: #111; }
.mp-hosting-row p, .mp-action-row p { margin: 2px 0 0; font-size: 12px; color: #888; }
.mp-btn-primary { padding: 8px 20px; border: none; border-radius: 8px; background: #111; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.mp-btn-primary:hover { background: #333; }
.mp-btn-secondary { padding: 6px 14px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #333; font-size: 12px; font-weight: 600; cursor: pointer; }
.mp-btn-secondary:hover { background: #f9fafb; }
.mp-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f9fafb; border-radius: 8px; }
.mp-toggle-row strong { font-size: 14px; color: #111; }
.mp-toggle-row p { margin: 2px 0 0; font-size: 12px; color: #888; }
.mp-badge-pro { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #dbeafe; color: #2563eb; font-size: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.mp-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.mp-toggle input { opacity: 0; width: 0; height: 0; }
.mp-toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 20px; transition: background 0.2s; }
.mp-toggle-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.mp-toggle input:checked + .mp-toggle-slider { background: #111; }
.mp-toggle input:checked + .mp-toggle-slider:before { transform: translateX(16px); }

@media (max-width: 900px) {
  .task-utility-panel { display: none; }
  .mp-settings-sidebar { width: 120px; }
  .mp-settings-nav { font-size: 12px; padding: 6px 12px; }
}

/* ── Artifact Preview Overlay ─────────────────────────────────────────── */
.artifact-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.15s ease;
}

.artifact-preview-modal {
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 900px;
  height: 85vh;
  min-width: 300px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.2s ease;
  resize: both;
  position: relative;
}

.artifact-preview-close-float {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
  padding: 0;
}

.artifact-preview-close-float:hover {
  background: rgba(0, 0, 0, 0.8);
}

.artifact-preview-body {
  flex: 1;
  overflow: auto;
  background: #fff;
}

.artifact-preview-loading {
  padding: 60px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.artifact-preview-text {
  margin: 0;
  padding: 24px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.artifact-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.artifact-preview-html {
  padding: 24px 32px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  max-width: 100%;
  overflow: auto;
}

.artifact-preview-html h1 { font-size: 24px; margin: 0 0 12px; color: #111; }
.artifact-preview-html h2 { font-size: 20px; margin: 20px 0 8px; color: #111; }
.artifact-preview-html h3 { font-size: 17px; margin: 16px 0 6px; color: #222; }
.artifact-preview-html h4 { font-size: 15px; margin: 14px 0 4px; color: #333; }
.artifact-preview-html p { margin: 0 0 10px; }
.artifact-preview-html ul, .artifact-preview-html ol { margin: 0 0 10px; padding-left: 24px; }
.artifact-preview-html li { margin-bottom: 4px; }
.artifact-preview-html table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.artifact-preview-html th, .artifact-preview-html td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.artifact-preview-html th { background: #f5f5f5; font-weight: 600; }

.pptx-preview-host {
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: auto;
  background: #f0f1f3;
}

.pptx-slides {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

.pptx-slide {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px 24px;
  min-height: 120px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.pptx-slide-num {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.pptx-slide-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
  line-height: 1.3;
}

.pptx-slide-body {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

.pptx-table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 13px;
}
.pptx-table th, .pptx-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}
.pptx-table th {
  background: #f0f0f0;
  font-weight: 600;
  color: #333;
}
.pptx-table tr:nth-child(even) td {
  background: #fafafa;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Sidebar Profile Dropdown ──────────────────────────────────────────── */
.sidebar-profile-wrap {
  position: relative;
}

.sidebar-profile-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 250px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  padding: 6px;
  animation: fadeIn 0.12s ease-out;
  z-index: 200;
}

.sidebar-profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 8px;
}

.profile-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  flex-shrink: 0;
  user-select: none;
}

.profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.profile-email {
  font-size: 12px;
  color: #888;
  font-family: var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.profile-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
}

.profile-plan-badge {
  font-size: 11px;
  font-weight: 600;
  color: #ccc;
  background: #2a2a2a;
  padding: 2px 10px;
  border-radius: 10px;
  font-family: var(--font);
}

.profile-upgrade-btn {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}

.profile-upgrade-btn:hover {
  background: var(--accent-hover);
}

.profile-credits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: #aaa;
  font-family: var(--font);
}

.profile-credits-row strong {
  color: #fff;
  font-weight: 700;
}

.profile-dropdown-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 4px 8px;
}

.profile-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #ccc;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s;
}

.profile-dropdown-item:hover {
  background: #2a2a2a;
  color: #fff;
}

.profile-dropdown-signout {
  color: var(--red);
}

.profile-dropdown-signout:hover {
  background: rgba(239,68,68,0.1);
  color: var(--red);
}

/* ── Profile Overlay ─────────────────────────────────────────────────────── */
.po-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}

.po-modal {
  position: relative;
  width: min(960px, 92vw);
  height: min(640px, 85vh);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  display: flex;
  overflow: hidden;
  animation: slideUp 0.2s ease-out;
}

.po-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.po-close:hover {
  background: #f0f0f0;
  color: #333;
}

/* ── Overlay Sidebar ─────────────────────────────────────────────────────── */
.po-sidebar {
  width: 220px;
  min-width: 220px;
  background: #fafafa;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}

.po-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

.po-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  flex-shrink: 0;
}

.po-sidebar-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  font-family: var(--font);
}

.po-sidebar-label {
  font-size: 12px;
  color: #999;
  font-family: var(--font);
}

.po-sidebar-section {
  padding: 4px 8px;
}

.po-sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px 4px;
  margin: 0;
  font-family: var(--font);
}

.po-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  color: #555;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
}

.po-sidebar-item:hover {
  background: #f0f0f0;
  color: #111;
}

.po-sidebar-item.active {
  background: #e8e8e8;
  color: #111;
  font-weight: 500;
}

.po-sidebar-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.po-sidebar-footer {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid #eee;
}

.po-signout-item {
  width: 100%;
  margin-top: 6px;
  border: 0;
  color: var(--red);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.po-signout-item:hover {
  background: var(--red-soft);
  color: var(--red);
}

/* ── Overlay Content ─────────────────────────────────────────────────────── */
.po-content {
  flex: 1;
  overflow-y: auto;
  background: #fff;
}

.po-content-inner {
  padding: 28px 32px 40px;
  max-width: 640px;
}

.po-title {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin: 0 0 20px;
  font-family: var(--font);
}

.po-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.po-card:last-child {
  margin-bottom: 0;
}

.po-field-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.po-field-grow {
  flex: 1;
  min-width: 0;
}

.po-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 2px;
  font-family: var(--font);
}

.po-field-value {
  font-size: 13px;
  color: #666;
  margin: 0;
  font-family: var(--font);
}

.po-field-desc {
  font-size: 12px;
  color: #999;
  margin: 2px 0 0;
  font-family: var(--font);
}

.po-field-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #111;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: var(--font);
  outline: none;
}

.po-field-input:focus {
  border-color: var(--accent);
}

.po-mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #888;
}

.po-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font);
  flex-shrink: 0;
}

.po-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.po-plan-name {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  font-family: var(--font);
}

.po-credits-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.po-credit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
}

.po-credit-row:first-child {
  border-top: none;
  padding-top: 0;
}

.po-credit-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  font-family: var(--font);
}

.po-credit-sub {
  display: block;
  font-size: 12px;
  color: #999;
  font-family: var(--font);
}

.po-credit-row strong {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  font-family: var(--font);
}

.po-btn-primary {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #111;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s;
}

.po-btn-primary:hover {
  background: #333;
}

.po-btn-outline {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.po-btn-outline:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.po-btn-danger {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s;
  flex-shrink: 0;
}

.po-btn-danger:hover {
  background: var(--red-soft);
}

.po-danger-card {
  border-color: #fecaca;
}

.po-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #111;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: var(--font);
  outline: none;
  margin-top: 8px;
}

.po-select:focus {
  border-color: var(--accent);
}

.po-usage-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 12px;
}

.po-usage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ── Canvas Card (inline in chat) ──────────────────────────────────────── */
.canvas-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-dim, #f8f9fa);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 8px 0;
}

.canvas-card:hover {
  background: var(--accent-soft, #eef2ff);
}

.canvas-card-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  color: var(--ink-secondary, #6b7280);
}

.canvas-card-text {
  font-size: 14px;
  color: var(--ink-secondary, #6b7280);
}

/* ── Turn Canvas Preview (inline interactive tool) ─────────────── */
.turn-canvas-preview {
  margin: 12px 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.turn-canvas-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
}

.turn-canvas-badge {
  font-size: 11px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.turn-canvas-title {
  font-size: 13px;
  color: #374151;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-canvas-expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.turn-canvas-expand:hover {
  background: #e5e7eb;
  color: #111;
}

.turn-canvas-iframe {
  width: 100%;
  height: 320px;
  border: none;
  display: block;
}

/* ── Turn File Card (generated document/download) ──────────────── */
.turn-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 8px 0;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.turn-file-card:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.turn-file-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.turn-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.turn-file-name {
  font-size: 14px;
  font-weight: 500;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-file-format {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.5px;
}

.turn-file-action {
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.turn-file-action:hover {
  background: #dde6ff;
}

.turn-artifacts-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
}

.turn-artifacts-bar .canvas-card {
  margin: 0;
  padding: 10px 14px;
  background: #f0f4ff;
  border-radius: 8px;
  flex: 0 0 auto;
}

.turn-artifacts-bar .canvas-card:hover {
  background: #dde6ff;
}

/* ── Preview Mode (Builder Layout) ─────────────────────────────────── */
.task-workspace--preview .task-workspace-body {
  flex-direction: row;
}

.task-workspace--preview .task-chat-shell {
  flex: 0 0 40%;
  min-width: 0;
  border-right: 1px solid #ededed;
  position: relative;
}

.task-workspace-body--split {
  display: flex;
  flex-direction: row;
}

.task-workspace-body--split .task-chat-shell {
  flex: 0 0 40%;
  min-width: 0;
  border-right: 1px solid #ededed;
  position: relative;
}

.task-workspace-body--split .task-chat-scroll {
  padding-bottom: 180px;
}

.task-workspace-body--split .task-chat-thread {
  width: 100%;
}

.task-workspace-body--split .task-composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  width: auto;
  transform: none;
  padding: 0 16px;
}

/* ── Preview Right Tabs (Preview/Admin toggle) ─────────────────────── */
.preview-right-tabs {
  display: flex;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}
.preview-right-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.preview-right-tab:hover { color: #333; }
.preview-right-tab.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.preview-admin-sub-tabs {
  display: flex;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  margin-left: 16px;
}
.preview-admin-sub-tabs button {
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.preview-admin-sub-tabs button:hover { color: #333; }
.preview-admin-sub-tabs button.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Preview Admin Full (replaces iframe when Admin tab active) ────── */
.preview-admin-full {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #fafafa;
}

/* ── Preview Topbar ────────────────────────────────────────────────── */
.preview-topbar {
  height: 58px;
  min-height: 58px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ededed;
  background: #fff;
}

.preview-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.preview-topbar-back {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.preview-topbar-back:hover {
  background: #f5f5f5;
  color: #111;
  border-color: #d0d0d0;
}

.preview-topbar-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-topbar-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.preview-viewport-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}

.preview-viewport-btn {
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
}

.preview-viewport-btn:hover {
  color: #555;
}

.preview-viewport-btn.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.preview-topbar-url {
  flex: 1;
  min-width: 0;
  max-width: 400px;
  padding: 5px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 12px;
  color: #888;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.preview-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-edit-btn {
  font-weight: 600;
  gap: 6px;
}

.preview-published-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 600;
}

/* ── Preview Right Panel ───────────────────────────────────────────── */
.preview-right-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.preview-right-iframe {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.preview-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #999;
  padding: 40px;
  text-align: center;
}

.preview-empty-icon {
  font-size: 48px;
  opacity: 0.3;
}

/* ── Preview Admin Panel ───────────────────────────────────────────── */
.preview-admin-panel {
  border-top: 1px solid #ededed;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-admin-tabs {
  display: flex;
  border-bottom: 1px solid #ededed;
  background: #fafafa;
  flex-shrink: 0;
}

.preview-admin-tabs button {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.15s;
}

.preview-admin-tabs button:hover {
  color: #555;
}

.preview-admin-tabs button.active {
  color: #111;
  box-shadow: inset 0 -2px 0 #111;
}

.preview-admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.admin-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.admin-panel-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  flex-shrink: 0;
}

.admin-panel-value-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-panel-value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: right;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-panel-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.admin-panel-badge--green {
  background: #ecfdf5;
  color: #059669;
}

.admin-panel-link {
  font-size: 12px;
  font-weight: 600;
  color: #006fff;
  text-decoration: none;
}

.admin-panel-link:hover {
  text-decoration: underline;
}

.admin-panel-empty {
  text-align: center;
  padding: 16px 0;
  color: #999;
  font-size: 13px;
}

.admin-panel-hint {
  font-size: 12px;
  color: #999;
  margin: 0 0 8px;
}

.admin-copy-btn {
  padding: 3px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.admin-copy-btn:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #d0d0d0;
}

/* ── Secrets Panel ─────────────────────────────────────────────────── */
.admin-secrets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.admin-secret-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f9f9f9;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.admin-secret-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-secret-key {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.admin-secret-value {
  font-size: 11px;
  color: #999;
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-add-secret {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-secret-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  outline: none;
  min-width: 0;
}

.admin-secret-input:focus {
  border-color: #006fff;
}

.admin-add-secret-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.admin-add-secret-btn:hover:not(:disabled) {
  background: #333;
}

.admin-add-secret-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Admin Dashboard Layout ──────────────────────────────────────── */
.preview-admin-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #fafafa;
}

/* ── Admin Sidebar ──────────────────────────────────────────────── */
.preview-admin-sidebar {
  width: 200px;
  min-width: 200px;
  background: #fff;
  border-right: 1px solid #ededed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-admin-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

.preview-admin-sidebar-header svg {
  color: #666;
}

.preview-admin-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-admin-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.preview-admin-nav-item:hover {
  background: #f5f5f5;
  color: #333;
}

.preview-admin-nav-item.active {
  background: #f0f4ff;
  color: #006fff;
}

.preview-admin-nav-item svg {
  flex-shrink: 0;
}

/* ── Admin Content ──────────────────────────────────────────────── */
.preview-admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
}

/* ── Admin Label (topbar) ───────────────────────────────────────── */
.preview-admin-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.preview-admin-label svg {
  color: #888;
}

/* ── Admin Section ──────────────────────────────────────────────── */
.admin-section {
  max-width: 640px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
}

.admin-detail-text {
  font-size: 11px;
  color: #888;
  font-style: italic;
}

/* ── Admin Status Badge ─────────────────────────────────────────── */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f4f6;
  color: #666;
}

.admin-status-badge--live {
  background: #ecfdf5;
  color: #059669;
}

/* ── Admin Overview Grid ────────────────────────────────────────── */
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.admin-overview-card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
}

.admin-overview-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.admin-overview-card-value {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

/* ── Admin Actions Row ──────────────────────────────────────────── */
.admin-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ── Admin Card ─────────────────────────────────────────────────── */
.admin-card {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
  padding: 4px 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.admin-card--danger {
  border-color: #fecaca;
}

.admin-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}

.admin-card-row + .admin-card-row {
  border-top: 1px solid #f5f5f5;
}

.admin-card--danger .admin-card-row + .admin-card-row {
  border-top-color: #fef2f2;
}

.admin-card-label {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-card-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  font-weight: 400;
}

.admin-card-value {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  text-align: right;
}

/* ── Admin Toggle ───────────────────────────────────────────────── */
.admin-toggle {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f4f6;
  color: #999;
}

.admin-toggle--on {
  background: #ecfdf5;
  color: #059669;
}

/* ── Admin Connection Fields ────────────────────────────────────── */
.admin-conn-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
  overflow: hidden;
}

.admin-conn-field {
  padding: 10px 16px;
}

.admin-conn-field + .admin-conn-field {
  border-top: 1px solid #f5f5f5;
}

.admin-conn-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.admin-conn-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-conn-field-row span {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Admin Connection String ────────────────────────────────────── */
.admin-conn-string {
  padding: 10px 14px;
  background: #1a1a1a;
  color: #a0a0a0;
  border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  overflow-x: auto;
  word-break: break-all;
  white-space: pre-wrap;
}

.admin-mono-text {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
}

/* ── Admin Status Indicator ─────────────────────────────────────── */
.admin-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.admin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}

.admin-status-dot--active {
  background: #10b981;
}

/* ── Admin Empty State ──────────────────────────────────────────── */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.admin-empty-state p {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin: 0 0 4px;
}

.admin-empty-icon {
  margin-bottom: 12px;
}

/* ── Admin Placeholder ──────────────────────────────────────────── */
.admin-placeholder {
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* ── Admin Log List ─────────────────────────────────────────────── */
.admin-log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.admin-log-entry--error {
  background: #fef2f2;
  border-color: #fecaca;
}

.admin-log-role {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f3f4f6;
  color: #666;
}

.admin-log-entry--error .admin-log-role {
  background: #fee2e2;
  color: #dc2626;
}

.admin-log-text {
  flex: 1;
  min-width: 0;
  color: #555;
  word-break: break-word;
}

.admin-log-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #bbb;
}

/* ── Admin Chart Placeholder ────────────────────────────────────── */
.admin-chart-placeholder {
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
}

.admin-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 8px 0;
}

.admin-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
}

.admin-bar-fill {
  width: 100%;
  height: 100%;
  background: #e0e7ff;
  border-radius: 3px 3px 0 0;
  transition: background 0.15s;
}

.admin-overview-card:hover .admin-bar-fill,
.admin-bar:hover .admin-bar-fill {
  background: #006fff;
}

/* ── DNS Setup Guide ─────────────────────────────────────────────── */
.dns-guide {
  margin-top: 16px;
}

.dns-step {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}

.dns-step::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -20px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.dns-step:last-child::before {
  display: none;
}

.dns-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  z-index: 1;
}

.dns-step-content {
  flex: 1;
  padding-top: 4px;
}

.dns-step-title {
  font-weight: 600;
  font-size: 14px;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.dns-step-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 10px;
}

.dns-records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dns-records-table th {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dns-records-table td {
  padding: 8px 12px;
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.dns-records-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.dns-domain-input {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.dns-domain-input input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #e2e8f0;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  transition: border-color 0.2s;
}

.dns-domain-input input:focus {
  border-color: #8b5cf6;
}

.dns-domain-input input::placeholder {
  color: #475569;
}

.dns-tip {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: #c4b5fd;
  line-height: 1.5;
}

.dns-tip strong {
  color: #a78bfa;
}

/* ── Secret Value Mask ──────────────────────────────────────────── */
.admin-secret-mask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-secret-mask .dots {
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  letter-spacing: 2px;
}

.admin-secret-toggle {
  background: none;
  border: none;
  color: #8b5cf6;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  text-decoration: underline;
}

.admin-secret-toggle:hover {
  color: #a78bfa;
}

/* ── Interactive Auth Toggle ────────────────────────────────────── */
.admin-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 12px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 48px;
  text-align: center;
}

.admin-toggle-btn:hover {
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
}

.admin-toggle-btn--on {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK LANDING PAGE — Waitlist / Closed Beta Redesign
   ══════════════════════════════════════════════════════════════════════════ */

.landing-dark {
  background: #0a0a14;
  color: #e2e8f0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Dark Navbar ────────────────────────────────────────────────────────── */
.landing-nav-dark {
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.landing-nav-dark .landing-nav-brand {
  color: #e2e8f0;
}
.landing-nav-dark .landing-nav-logo {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
}
.landing-nav-dark .landing-nav-links a {
  color: #94a3b8;
}
.landing-nav-dark .landing-nav-links a:hover {
  color: #e2e8f0;
}
.landing-nav-dark .landing-nav-signin {
  color: #94a3b8;
}
.landing-nav-dark .landing-nav-signin:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
.landing-nav-dark .landing-nav-signup {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.3);
}
.landing-nav-dark .landing-nav-signup:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

/* ── Dark Hero — Centered ──────────────────────────────────────────────── */
.landing-hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px 60px;
  position: relative;
}

.landing-hero-centered::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.landing-hero-centered > * {
  position: relative;
  z-index: 1;
}

.landing-hero-centered .landing-hero-eyebrow {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.2);
  font-size: 13px;
  padding: 6px 16px;
  margin-bottom: 24px;
}

.landing-hero-h1-gradient {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  max-width: 780px;
}

.landing-hero-sub-center {
  font-size: 18px;
  line-height: 1.7;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 0 36px;
}

.landing-hero-proof-center {
  justify-content: center;
  margin-top: 16px;
}
.landing-hero-proof-center span {
  color: #64748b;
  font-size: 14px;
}
.landing-hero-proof-center span::before {
  background: rgba(139, 92, 246, 0.4);
}

/* ── Waitlist Form ─────────────────────────────────────────────────────── */
.waitlist-anchor {
  width: 100%;
  max-width: 520px;
}

.waitlist-form {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.waitlist-form:focus-within {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1), 0 8px 32px rgba(0, 0, 0, 0.2);
}

.waitlist-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 18px 20px;
  font-size: 15px;
  color: #e2e8f0;
  background: transparent;
  font-family: inherit;
}
.waitlist-input::placeholder {
  color: #4a5568;
}

.waitlist-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  padding: 18px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}
.waitlist-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}
.waitlist-btn:disabled {
  background: #4c1d95;
  cursor: not-allowed;
  box-shadow: none;
}

.waitlist-form-center {
  margin: 0 auto;
  max-width: 480px;
}

/* ── Waitlist Success ──────────────────────────────────────────────────── */
.waitlist-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 28px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 16px;
  color: #6ee7b7;
  font-size: 15px;
  font-weight: 500;
  animation: waitlistSuccessIn 0.4s ease-out;
}
.waitlist-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-size: 16px;
  font-weight: 700;
}

@keyframes waitlistSuccessIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Hero Mock — Builder Interface Preview ─────────────────────────────── */
.hero-mock {
  width: 100%;
  max-width: 700px;
  margin-top: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
  animation: heroMockFloat 6s ease-in-out infinite;
}
@keyframes heroMockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-mock-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-mock-dots {
  display: flex;
  gap: 6px;
}
.hero-mock-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.hero-mock-dots span:first-child { background: #ef4444; opacity: 0.7; }
.hero-mock-dots span:nth-child(2) { background: #f59e0b; opacity: 0.7; }
.hero-mock-dots span:nth-child(3) { background: #10b981; opacity: 0.7; }
.hero-mock-url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 12px;
  border-radius: 8px;
  font-family: var(--mono);
}

.hero-mock-body {
  padding: 24px 20px;
  min-height: 200px;
}

.hero-mock-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-mock-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hero-mock-msg-user {
  flex-direction: row-reverse;
}

.hero-mock-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-mock-avatar-user {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.hero-mock-avatar-ai {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.2) 100%);
  color: #a78bfa;
}

.hero-mock-bubble {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 85%;
}
.hero-mock-bubble-user {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}
.hero-mock-bubble-ai {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.hero-mock-typing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #94a3b8;
  font-size: 13px;
}
.hero-mock-highlight {
  color: #6ee7b7;
  font-weight: 600;
}

/* ── Dark Section Overrides ────────────────────────────────────────────── */
.landing-section-dark {
  background: #0a0a14;
}

.landing-section-h2-dark {
  color: #f1f5f9;
}

/* ── Dark Steps ────────────────────────────────────────────────────────── */
.landing-steps-section-dark {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.landing-steps-3 {
  grid-template-columns: repeat(3, 1fr);
}

.landing-step-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.landing-step-dark:hover {
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.08);
  transform: translateY(-2px);
}
.landing-step-dark h3 {
  color: #f1f5f9;
}
.landing-step-dark p {
  color: #94a3b8;
}

.landing-step-num-purple {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: inline-block;
  background: rgba(139, 92, 246, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
}

/* ── Dark Features Grid ────────────────────────────────────────────────── */
.landing-features-section-dark {
  background: #0d0d1a;
}

.landing-feature-card-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.landing-feature-card-dark:hover {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.06);
  transform: translateY(-3px);
}
.landing-feature-card-dark h3 {
  color: #f1f5f9;
}
.landing-feature-card-dark p {
  color: #94a3b8;
}

.landing-feature-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}

/* ── Who Section ───────────────────────────────────────────────────────── */
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.who-card {
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  text-align: center;
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
}
.who-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.06);
}
.who-icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: block;
}
.who-card h3 {
  color: #f1f5f9;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.who-card p {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ── Beta Section ──────────────────────────────────────────────────────── */
.beta-section {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, #0a0a14 100%);
  border-top: 1px solid rgba(139, 92, 246, 0.1);
}
.beta-form-wrapper {
  margin-bottom: 40px;
}

/* ── Stat Pills ────────────────────────────────────────────────────────── */
.stat-pills {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 32px;
  min-width: 130px;
  transition: border-color 0.3s;
}
.stat-pill:hover {
  border-color: rgba(139, 92, 246, 0.2);
}
.stat-pill-num {
  font-size: 32px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-pill-label {
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
  font-weight: 500;
}

/* ── Dark Auth Card ────────────────────────────────────────────────────── */
.auth-card-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}
.auth-card-dark .auth-google {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.auth-card-dark .auth-google:hover {
  background: rgba(255, 255, 255, 0.08);
}
.auth-card-dark .auth-field input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.auth-card-dark .auth-field input:focus {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.auth-card-dark .auth-field input::placeholder {
  color: #4a5568;
}
.auth-card-dark .auth-submit {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
}
.auth-card-dark .auth-submit:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* ── Dark Footer ───────────────────────────────────────────────────────── */
.landing-footer-dark {
  background: #050510;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.landing-footer-links-dark a {
  color: #64748b;
}
.landing-footer-links-dark a:hover {
  color: #c4b5fd;
}

/* ── Dark Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .landing-hero-centered { padding: 60px 24px 40px; }
  .landing-hero-h1-gradient { font-size: 42px; }
  .landing-steps-3 { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-mock { max-width: 100%; }
  .stat-pills { gap: 16px; }
}
@media (max-width: 640px) {
  .landing-hero-h1-gradient { font-size: 32px; }
  .landing-steps-3 { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr; }
  .landing-features-grid { grid-template-columns: 1fr; }
  .waitlist-form { flex-direction: column; border-radius: 14px; }
  .waitlist-btn { padding: 16px 28px; border-radius: 0 0 12px 12px; }
  .stat-pills { flex-direction: column; align-items: center; }
  .stat-pill { width: 100%; max-width: 260px; }
  .hero-mock-body { padding: 16px 12px; }
  .hero-mock-bubble { max-width: 95%; font-size: 12.5px; padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING PAGE — manus.im style (dark, clean, minimal)
   ════════════════════════════════════════════════════════════════════════════ */

.lp-root {
  min-height: 100vh;
  background: #0a0a0a;
  color: #e4e4e7;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Nav */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 56px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-nav-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 7px;
}
.lp-nav-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.lp-nav-links {
  display: flex;
  gap: 28px;
}
.lp-nav-links a {
  font-size: 13px;
  color: #71717a;
  text-decoration: none;
  transition: color 0.15s;
}
.lp-nav-links a:hover { color: #e4e4e7; text-decoration: none; }
.lp-nav-cta {
  display: flex;
  align-items: center;
}
.lp-btn-waitlist {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #fff;
  color: #0a0a0a;
  border: none;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 8px;
  transition: opacity 0.15s;
}
.lp-btn-waitlist:hover { opacity: 0.85; }

/* Hero */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 24px 80px;
  max-width: 720px;
  margin: 0 auto;
}
.lp-hero-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #a1a1aa;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 28px;
}
.lp-hero-h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.lp-hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #71717a;
  max-width: 520px;
  margin: 0 0 36px;
}

/* Waitlist form */
.lp-waitlist-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.lp-waitlist-form {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.lp-waitlist-form:focus-within {
  border-color: rgba(255,255,255,0.2);
}
.lp-waitlist-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-size: 15px;
  color: #fff;
  background: transparent;
  font-family: inherit;
}
.lp-waitlist-input::placeholder {
  color: #52525b;
}
.lp-waitlist-btn {
  background: #fff;
  color: #0a0a0a;
  border: none;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.lp-waitlist-btn:hover { opacity: 0.85; }
.lp-waitlist-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lp-waitlist-form-center {
  max-width: 420px;
  margin: 0 auto;
}
.lp-waitlist-done {
  font-size: 15px;
  color: #22c55e;
  padding: 14px 0;
  font-weight: 500;
}

/* Prompt example tags */
.lp-hero-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.lp-hero-prompt-tag {
  font-size: 13px;
  color: #71717a;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: default;
  transition: border-color 0.15s, color 0.15s;
}
.lp-hero-prompt-tag:hover {
  border-color: rgba(255,255,255,0.15);
  color: #a1a1aa;
}

/* Sections */
.lp-section {
  padding: 80px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lp-section-alt {
  background: rgba(255,255,255,0.02);
}
.lp-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.lp-section-h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.15;
}
.lp-section-sub {
  font-size: 16px;
  line-height: 1.65;
  color: #71717a;
  margin: 0 0 48px;
}

/* Steps */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-step {
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.lp-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #52525b;
  margin-bottom: 14px;
}
.lp-step h3 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.lp-step p {
  font-size: 14px;
  line-height: 1.6;
  color: #71717a;
  margin: 0;
}

/* Features */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-feature {
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s;
}
.lp-feature:hover {
  border-color: rgba(255,255,255,0.12);
}
.lp-feature-icon {
  font-size: 24px;
  margin-bottom: 14px;
}
.lp-feature h3 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}
.lp-feature p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #71717a;
  margin: 0;
}

/* CTA */
.lp-cta-section {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Stats */
.lp-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 40px;
}
.lp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lp-stat strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.lp-stat span {
  font-size: 13px;
  color: #52525b;
}

/* Footer */
.lp-footer {
  padding: 40px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lp-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #a1a1aa;
}
.lp-footer-links {
  display: flex;
  gap: 24px;
}
.lp-footer-links a {
  font-size: 13px;
  color: #52525b;
  text-decoration: none;
  transition: color 0.15s;
}
.lp-footer-links a:hover { color: #a1a1aa; text-decoration: none; }
.lp-footer-copy {
  font-size: 12px;
  color: #3f3f46;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .lp-nav { padding: 0 16px; }
  .lp-nav-links { display: none; }
  .lp-hero { padding: 60px 16px 48px; }
  .lp-hero-h1 { font-size: 36px; }
  .lp-hero-sub { font-size: 15px; }
  .lp-section { padding: 48px 16px; }
  .lp-section-h2 { font-size: 28px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-stats { flex-direction: column; gap: 16px; }
  .lp-footer-inner { flex-direction: column; align-items: flex-start; }
  .lp-footer-links { gap: 16px; }
  .lp-waitlist-form { flex-direction: column; border-radius: 12px; }
  .lp-waitlist-btn { border-radius: 0 0 10px 10px; }
}

/* ── Chat Header Redesign ── */
.topbar-title { font-size: 14px; font-weight: 600; color: #111; }
.topbar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; display: inline-block; margin-left: 8px; }
.topbar-status-dot.complete { background: #22c55e; }
.topbar-status-dot.active { background: #f59e0b; animation: pulse 1.5s infinite; }
.topbar-status-text { font-size: 12px; color: #6b7280; margin-left: 4px; }
.topbar-tab-group { display: flex; gap: 2px; margin-left: 12px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
.topbar-tab { padding: 4px 12px; border-radius: 4px; border: none; background: transparent; font-size: 12px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.15s; }
.topbar-tab.active { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.topbar-device-toggle { display: flex; gap: 2px; margin-left: 12px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
.topbar-device-btn { padding: 4px 8px; border-radius: 4px; border: none; background: transparent; color: #9ca3af; cursor: pointer; display: flex; align-items: center; }
.topbar-device-btn.active { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.topbar-url { font-size: 12px; color: #9ca3af; margin-left: 8px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-published-badge { font-size: 11px; font-weight: 600; color: #fff; background: #22c55e; padding: 3px 10px; border-radius: 10px; margin-left: 8px; }

.topbar-brand-name { font-size: 15px; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.topbar-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #111;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 3px 10px;
  margin-left: 6px;
  white-space: nowrap;
}
.topbar-text-btn {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.topbar-text-btn:hover { background: #f9fafb; }

/* ── Narration Redesign ── */
.narration-entry { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.narration-role { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.narration-content { font-size: 13px; color: #555; line-height: 1.5; }

/* ── Admin Panel ── */
.admin-panel { display: flex; height: 100%; overflow: hidden; }
.admin-sidebar { width: 160px; border-right: 1px solid #e5e7eb; background: #fafafa; display: flex; flex-direction: column; flex-shrink: 0; }
.admin-sidebar-header { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
.admin-sidebar-icon { font-size: 16px; }
.admin-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; background: transparent; font-size: 13px; color: #555; cursor: pointer; text-align: left; width: 100%; transition: background 0.15s; }
.admin-sidebar-item:hover { background: #f0f0f0; }
.admin-sidebar-item.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
.admin-sidebar-item-icon { font-size: 14px; width: 20px; text-align: center; }
.admin-content { flex: 1; overflow-y: auto; padding: 24px; }
.admin-overview-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.admin-overview-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
.admin-status-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; background: #f3f4f6; color: #6b7280; }
.admin-status-badge.live { background: #dcfce7; color: #16a34a; }
.admin-created-at { font-size: 12px; color: #9ca3af; margin-left: auto; }
.admin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.admin-stat-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; }
.admin-stat-label { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.admin-stat-value { font-size: 24px; font-weight: 700; color: #111; }
.admin-section { margin-bottom: 24px; }
.admin-section h4 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.admin-actions-row { display: flex; gap: 10px; }
.admin-action-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 13px; font-weight: 500; color: #111; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.15s; }
.admin-action-btn:hover { background: #f9fafb; }
.admin-action-btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.admin-action-btn.primary:hover { background: #1d4ed8; }
.admin-activity-list { display: flex; flex-direction: column; gap: 0; }
.admin-activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.admin-activity-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: #eff6ff; color: #2563eb; flex-shrink: 0; }
.admin-activity-text { flex: 1; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.admin-empty-text { font-size: 13px; color: #9ca3af; padding: 12px 0; }
.admin-section-page h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.admin-section-desc { font-size: 13px; color: #6b7280; margin: 0 0 20px; }
.admin-info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.admin-info-row span { color: #6b7280; }
.admin-info-row strong { color: #111; font-weight: 600; }

/* ── Files Page ── */
.files-page { padding: 32px; max-width: 900px; height: 100%; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; min-height: 0; }
.files-grid { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.files-header { margin-bottom: 24px; }
.files-header h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #111; }
.files-subtitle { font-size: 13px; color: #6b7280; margin: 0; }
.files-filters { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.files-filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid #e5e7eb; background: #fff; font-size: 12px; font-weight: 500; color: #555; cursor: pointer; transition: all 0.15s; }
.files-filter-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.files-filter-btn.active { background: #111; color: #fff; border-color: #111; }
.files-loading { padding: 40px; text-align: center; color: #9ca3af; font-size: 14px; }
.files-empty { padding: 60px 20px; text-align: center; color: #9ca3af; }
.files-empty p { font-size: 16px; font-weight: 600; color: #555; margin: 16px 0 4px; }
.files-empty span { font-size: 13px; }
.files-grid { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 2px; }
.file-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.file-card:hover { background: #f9fafb; }
.file-card-icon { font-size: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 10px; flex-shrink: 0; }
.file-card-info { flex: 1; min-width: 0; }
.file-card-name { font-size: 14px; font-weight: 600; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-meta { display: flex; gap: 10px; margin-top: 3px; font-size: 12px; color: #9ca3af; }
.file-card-format { font-weight: 600; color: #6b7280; }
.file-card-download { border: none; background: transparent; color: #9ca3af; cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; }
.file-card-download:hover { background: #f3f4f6; color: #555; }
.files-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.files-preview-modal { background: #fff; border-radius: 12px; width: 80vw; height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.files-preview-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.files-preview-title { font-size: 14px; font-weight: 600; flex: 1; }
.files-preview-actions { display: flex; gap: 8px; }
.files-preview-actions button { padding: 4px 12px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 12px; cursor: pointer; }
.files-preview-body { flex: 1; overflow: auto; }
.files-preview-text { padding: 20px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; margin: 0; }

/* ── Utility Panel Fix ── */
.utility-tabs { display: flex; justify-content: center; border-bottom: 1px solid #e5e7eb; }
.utility-tabs button { flex: none; padding: 10px 24px; border: none; background: transparent; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.utility-tabs button.active { color: #111; border-bottom-color: #111; font-weight: 600; }
.utility-tabs button:hover { color: #333; background: #fafafa; }

/* ── Profile Overlay Settings ── */
.po-theme-toggle { display: flex; gap: 0; margin-top: 8px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; width: fit-content; }
.po-theme-btn { padding: 8px 20px; border: none; background: #fff; font-size: 13px; color: #6b7280; cursor: pointer; transition: all 0.15s; }
.po-theme-btn.active { background: #111; color: #fff; font-weight: 600; }
.po-theme-btn:not(.active):hover { background: #f9fafb; }
.po-checkbox-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.po-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; cursor: pointer; }
.po-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #111; cursor: pointer; }

/* ── Profile Overlay Plans ── */
.po-plans-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.po-plans-credits { font-size: 13px; color: #6b7280; }
.po-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.po-plan-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; }
.po-plan-card.featured { border: 2px solid #111; }
.po-plan-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; }
.po-plan-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.po-plan-desc { font-size: 13px; color: #6b7280; margin: 0 0 12px; }
.po-plan-price { margin-bottom: 4px; }
.po-plan-price strong { font-size: 22px; font-weight: 700; }
.po-plan-price span { font-size: 14px; color: #6b7280; }
.po-plan-credits { font-size: 13px; color: #6b7280; margin: 0 0 16px; }
.po-plan-features { list-style: none; padding: 0; margin: 0 0 20px; }
.po-plan-features li { position: relative; padding-left: 20px; font-size: 13px; color: #333; margin-bottom: 8px; }
.po-plan-features li::before { content: '●'; position: absolute; left: 0; color: #22c55e; font-size: 10px; top: 2px; }
.po-plan-action { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 14px; font-weight: 500; color: #111; cursor: pointer; transition: all 0.15s; }
.po-plan-action:hover { background: #f9fafb; }
.po-plan-action.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.po-plan-action:disabled { opacity: 0.6; cursor: not-allowed; background: #f3f4f6; }

/* ── Waitlist Landing Page Styles (wl- prefix) ── */
.wl-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111; background: #fff; min-height: 100vh; display: flex; flex-direction: column; }

/* Navbar */
.wl-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 60px; border-bottom: 1px solid #f0f0f0; background: #fff; position: sticky; top: 0; z-index: 100; }
.wl-nav-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -0.02em; }
.wl-nav-links { display: flex; gap: 28px; }
.wl-nav-links a { color: #666; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.15s; }
.wl-nav-links a:hover { color: #111; }
.wl-nav-cta { display: flex; gap: 8px; }

/* Hero */
.wl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 24px 60px; }
.wl-hero-inner { max-width: 680px; width: 100%; }
.wl-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #666; background: #f3f4f6; padding: 6px 14px; border-radius: 20px; margin-bottom: 24px; border: 1px solid #e5e7eb; }
.wl-hero-h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: #111; margin: 0 0 16px; }
.wl-hero-sub { font-size: 17px; color: #666; line-height: 1.6; margin: 0 0 36px; max-width: 540px; margin-left: auto; margin-right: auto; }
.wl-hero-form { max-width: 480px; margin: 0 auto; }
.wl-hero-input-wrap { display: flex; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 5px 5px 5px 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.wl-hero-input { flex: 1; border: none; outline: none; font-size: 15px; padding: 12px 10px; background: transparent; color: #111; min-width: 0; }
.wl-hero-input::placeholder { color: #aaa; }
.wl-hero-submit { background: #111; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.wl-hero-submit:hover { background: #333; }
.wl-hero-submit:disabled { background: #999; cursor: default; }
.wl-hero-error { color: #dc2626; font-size: 13px; margin: 8px 0 0; text-align: left; }
.wl-hero-proof { margin-top: 24px; font-size: 14px; color: #888; }
.wl-hero-proof span { font-weight: 600; color: #555; }

/* Success */
.wl-success-box { display: flex; flex-direction: column; align-items: center; padding: 24px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; }
.wl-success-icon { margin-bottom: 4px; }

/* Sections */
.wl-section { padding: 80px 40px; }
.wl-section-white { background: #fff; }
.wl-section-dark { background: #111; }
.wl-section-light { background: #fafafa; }
.wl-section-inner { max-width: 1100px; margin: 0 auto; }
.wl-section-center { text-align: center; }
.wl-section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin-bottom: 8px; }
.wl-section-label-light { color: #666; }
.wl-section-h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0; color: #111; }
.wl-section-h2-light { color: #fff; }
.wl-section-sub { font-size: 16px; color: #666; line-height: 1.6; margin: 8px 0 48px; }
.wl-section-sub-light { color: #999; }

/* Stats Bar */
.wl-stats-bar { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; background: #fafafa; padding: 0; }
.wl-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.wl-stat { padding: 32px 24px; text-align: center; border-right: 1px solid #f0f0f0; }
.wl-stat:last-child { border-right: none; }
.wl-stat-num { font-size: 20px; font-weight: 700; color: #111; letter-spacing: -0.02em; margin-bottom: 4px; }
.wl-stat-label { font-size: 13px; color: #666; line-height: 1.5; }

/* Capabilities */
.wl-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wl-cap-card { background: #fafafa; border-radius: 16px; padding: 32px 28px; border: 1px solid #f0f0f0; transition: box-shadow 0.2s; }
.wl-cap-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.wl-cap-icon { width: 48px; height: 48px; border-radius: 12px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #555; margin-bottom: 20px; }
.wl-cap-title { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: #111; line-height: 1.3; }
.wl-cap-desc { font-size: 14px; color: #666; line-height: 1.65; margin: 0; }

/* Use Cases */
.wl-usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wl-usecase-card { background: #fff; border-radius: 16px; padding: 36px 32px; border: 1px solid #e5e7eb; transition: box-shadow 0.2s; }
.wl-usecase-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.wl-usecase-icon { font-size: 36px; margin-bottom: 16px; }
.wl-usecase-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: #111; }
.wl-usecase-bullets { list-style: none; padding: 0; margin: 0 0 16px; }
.wl-usecase-bullets li { font-size: 14px; color: #555; padding: 6px 0 6px 20px; position: relative; line-height: 1.5; }
.wl-usecase-bullets li::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; }
.wl-usecase-desc { font-size: 14px; color: #888; line-height: 1.6; margin: 0; font-style: italic; }

/* Showcase */
.wl-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wl-showcase-card { background: #1a1a1a; border-radius: 16px; overflow: hidden; border: 1px solid #333; }
.wl-showcase-preview { padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.wl-showcase-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #555; font-size: 13px; }
.wl-showcase-info { padding: 20px 24px 24px; }
.wl-showcase-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; background: #2a2a2a; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
.wl-showcase-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.wl-showcase-desc { font-size: 14px; color: #888; line-height: 1.6; margin: 0 0 12px; }
.wl-showcase-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-showcase-tech-pill { display: inline-block; font-size: 11px; font-weight: 500; color: #aaa; background: #2a2a2a; padding: 3px 8px; border-radius: 4px; border: 1px solid #333; }
.wl-showcase-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: #60a5fa; text-decoration: none; transition: color 0.15s; }
.wl-showcase-link:hover { color: #93c5fd; }
.wl-showcase-note { text-align: center; font-size: 14px; color: #666; margin: 32px 0 0; }

/* Steps */
.wl-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.wl-step { flex: 1; text-align: center; max-width: 260px; }
.wl-step-num { width: 48px; height: 48px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin: 0 auto 20px; }
.wl-step-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: #111; }
.wl-step-desc { font-size: 14px; color: #666; line-height: 1.65; margin: 0; }
.wl-step-arrow { display: flex; align-items: center; padding-top: 28px; padding-right: 24px; padding-left: 24px; color: #ccc; font-size: 20px; }

/* Integrations */
.wl-integrations-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 800px; margin: 0 auto; }
.wl-integration-pill { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; font-size: 14px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; transition: box-shadow 0.2s; }
.wl-integration-pill:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.wl-integration-name { color: #111; }
.wl-integration-status { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.wl-integration-available { border-color: #bbf7d0; background: #f0fdf4; }
.wl-integration-available .wl-integration-status { color: #16a34a; }
.wl-integration-soon { border-color: #e5e7eb; background: #f9fafb; }
.wl-integration-soon .wl-integration-name { color: #888; }
.wl-integration-soon .wl-integration-status { color: #aaa; }

/* Testimonials */
.wl-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wl-testimonial-card { background: #fafafa; border-radius: 16px; padding: 32px 28px; border: 1px solid #f0f0f0; text-align: left; }
.wl-testimonial-quote { font-size: 15px; color: #333; line-height: 1.7; margin: 0 0 20px; font-style: italic; }
.wl-testimonial-author { display: flex; flex-direction: column; gap: 2px; }
.wl-testimonial-author strong { font-size: 14px; color: #111; }
.wl-testimonial-author span { font-size: 13px; color: #888; }

/* FAQ */
.wl-faq-grid { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.wl-faq-item { background: #fff; border-radius: 12px; padding: 24px 28px; border: 1px solid #e5e7eb; }
.wl-faq-q { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 8px; line-height: 1.5; }
.wl-faq-a { font-size: 14px; color: #666; line-height: 1.7; margin: 0; }

/* CTA */
.wl-cta-section { padding: 80px 40px; background: #f7f7f8; }
.wl-cta-h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 12px; color: #111; }
.wl-cta-sub { font-size: 16px; color: #666; margin: 0 0 32px; }
.wl-cta-confirmed { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 16px; font-weight: 600; color: #16a34a; }

/* Footer */
.wl-footer { border-top: 1px solid #f0f0f0; padding: 32px 40px; margin-top: auto; }
.wl-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.wl-footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -0.02em; }
.wl-footer-tagline { color: #999; font-size: 12px; margin-left: 4px; }
.wl-footer-links { display: flex; gap: 24px; }
.wl-footer-links a { color: #666; text-decoration: none; font-size: 13px; transition: color 0.15s; }
.wl-footer-links a:hover { color: #111; }
.wl-footer-copy { font-size: 12px; color: #999; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .wl-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .wl-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .wl-usecase-grid { grid-template-columns: 1fr; }
  .wl-testimonial-grid { grid-template-columns: 1fr; }
  .wl-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .wl-stat { border-right: none; border-bottom: 1px solid #f0f0f0; }
  .wl-stat:nth-child(2) { border-right: none; }
  .wl-steps { flex-direction: column; align-items: center; gap: 32px; }
  .wl-step-arrow { display: none; }
}
@media (max-width: 600px) {
  .wl-nav { padding: 0 16px; }
  .wl-nav-links { display: none; }
  .wl-hero { padding: 60px 20px 40px; }
  .wl-hero-h1 { font-size: 32px; }
  .wl-section { padding: 48px 20px; }
  .wl-section-h2 { font-size: 26px; }
  .wl-cap-grid { grid-template-columns: 1fr; }
  .wl-showcase-grid { grid-template-columns: 1fr; }
  .wl-stats-grid { grid-template-columns: 1fr; }
  .wl-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wl-footer-links { flex-wrap: wrap; gap: 16px; }
}

/* ── App Factory (af-) ───────────────────────────────────────────────────── */
.af-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
  color: #e5e5e5;
}

.af-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 32px 40px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.af-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.af-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.af-subtitle {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
}

.af-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
}
.af-back-btn:hover { background: #1e1e1e; color: #fff; }

/* ── List ── */
.af-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.af-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
.af-list-item:hover { background: #1a1a1a; border-color: #2a2a2a; }

.af-list-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.af-list-item-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.af-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.af-list-apps {
  font-size: 13px;
  color: #888;
}

.af-list-date {
  font-size: 12px;
  color: #666;
}

.af-loading {
  text-align: center;
  padding: 48px 20px;
  color: #666;
  font-size: 14px;
}

.af-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 12px;
}
.af-empty p { font-size: 16px; color: #aaa; font-weight: 500; }
.af-empty span { font-size: 13px; color: #666; max-width: 320px; }

/* ── Start Button ── */
.af-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background: #3b82f6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}
.af-start-btn:hover { background: #2563eb; }
.af-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.af-start-btn-full { width: 100%; justify-content: center; margin-top: 8px; }

/* ── Config ── */
.af-config {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.af-config-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.af-config-label {
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
}

.af-config-slider-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.af-config-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #1e1e1e;
  outline: none;
}
.af-config-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
}
.af-config-slider-val {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  min-width: 24px;
  text-align: center;
}

.af-config-radio-group {
  display: flex;
  gap: 10px;
}

.af-config-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: #aaa;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.af-config-radio input { display: none; }
.af-config-radio.active {
  border-color: #3b82f6;
  background: #0f1d3a;
  color: #3b82f6;
}

.af-config-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.af-config-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: #2a2a2a;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
  padding: 0;
}
.af-config-toggle.on { background: #3b82f6; }

.af-config-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms ease;
}
.af-config-toggle.on .af-config-toggle-knob { transform: translateX(20px); }

.af-config-toggle-label {
  font-size: 13px;
  color: #888;
}

.af-config-connectors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.af-config-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
}
.af-config-connector input { display: none; }
.af-config-connector.active {
  border-color: #3b82f6;
  background: #0f1d3a;
  color: #e5e5e5;
}

.af-connector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* ── Cost Preview ── */
.af-cost-preview {
  padding: 16px 20px;
  border-radius: 10px;
  background: #141414;
  border: 1px solid #1e1e1e;
}

.af-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #aaa;
}
.af-cost-row + .af-cost-row { margin-top: 8px; }

.af-cost-amount {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.af-cost-balance {
  padding-top: 8px;
  border-top: 1px solid #1e1e1e;
  margin-top: 8px;
}

/* ── Dashboard ── */
.af-dashboard {
  flex: 1;
  overflow-y: auto;
}

.af-phase-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.af-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.af-phase-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.af-phase-hint {
  font-size: 13px;
  color: #666;
  margin-left: auto;
}

/* ── Plan Cards ── */
.af-plans {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.af-plans-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.af-plans-header h2 { font-size: 18px; color: #fff; font-weight: 600; }
.af-plans-count { font-size: 13px; color: #888; }

.af-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.af-plan-card {
  padding: 18px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  transition: all 150ms ease;
}
.af-plan-card.selected { border-color: #3b82f6; }
.af-plan-card.approved { border-color: #10b981; background: #0a1a14; }

.af-plan-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.af-plan-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

.af-plan-rank {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  background: #1e1e1e;
  padding: 2px 8px;
  border-radius: 4px;
}

.af-plan-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.af-plan-score-bar {
  width: 60px;
  height: 4px;
  background: #1e1e1e;
  border-radius: 2px;
  overflow: hidden;
}
.af-plan-score-bar span {
  display: block;
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 300ms ease;
}

.af-plan-score-num {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

.af-plan-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.af-plan-concept {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 12px;
}

.af-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.af-plan-tag {
  font-size: 12px;
  color: #aaa;
  background: #1e1e1e;
  padding: 3px 10px;
  border-radius: 6px;
}

.af-plan-actions {
  display: flex;
  gap: 8px;
}

/* ── Buttons ── */
.af-btn {
  padding: 8px 16px;
  border-radius: 7px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.af-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.af-btn-approve {
  background: #10b981;
  color: #fff;
}
.af-btn-approve:hover:not(:disabled) { background: #059669; }

.af-btn-reject {
  background: transparent;
  color: #ef4444;
  border: 1px solid #3a1a1a;
}
.af-btn-reject:hover:not(:disabled) { background: #2a1010; }

.af-btn-secondary {
  background: #1e1e1e;
  color: #ccc;
  border: 1px solid #2a2a2a;
}
.af-btn-secondary:hover:not(:disabled) { background: #2a2a2a; }

.af-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  margin-top: 16px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.af-bulk-bar span { font-size: 13px; color: #aaa; }

.af-hint {
  font-size: 14px;
  color: #666;
  text-align: center;
  padding: 40px 20px;
}

/* ── Browser Preview ── */
.af-browser-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.af-browser {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e1e1e;
  background: #141414;
}

.af-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1a1a1a;
  border-bottom: 1px solid #1e1e1e;
}

.af-browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.af-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.af-browser-dots span:nth-child(1) { background: #ef4444; }
.af-browser-dots span:nth-child(2) { background: #f59e0b; }
.af-browser-dots span:nth-child(3) { background: #10b981; }

.af-browser-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
}

.af-browser-tab {
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  border: none;
  background: transparent;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
.af-browser-tab.active {
  background: #141414;
  color: #fff;
}
.af-browser-tab:hover:not(.active) { color: #aaa; }

.af-browser-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0f0f0f;
  border-bottom: 1px solid #1e1e1e;
}
.af-browser-url span {
  font-size: 12px;
  color: #666;
  font-family: var(--mono);
}

.af-browser-content {
  height: 400px;
  position: relative;
  background: #0a0a0a;
}

.af-browser-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.af-browser-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: #666;
  font-size: 14px;
}

.af-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #1e1e1e;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: af-spin 0.8s linear infinite;
}
@keyframes af-spin { to { transform: rotate(360deg); } }

/* ── Build Approval ── */
.af-build-approval {
  padding: 18px 20px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
}

.af-build-info {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.af-build-features,
.af-build-checklist {
  flex: 1;
}
.af-build-features h4,
.af-build-checklist h4 {
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 8px;
}
.af-build-features ul,
.af-build-checklist ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.af-build-features li,
.af-build-checklist li {
  font-size: 13px;
  color: #888;
  padding: 4px 0;
}

.af-build-actions {
  display: flex;
  gap: 10px;
}

/* ── Media Grid ── */
.af-media {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.af-media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.af-media-header h2 { font-size: 18px; color: #fff; font-weight: 600; }

.af-media-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.af-media-app-name {
  font-size: 15px;
  font-weight: 600;
  color: #ccc;
}

.af-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.af-media-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  transition: all 150ms ease;
}
.af-media-card.approved { border-color: #10b981; background: #0a1a14; }

.af-media-platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.af-media-content {
  flex: 1;
}

.af-media-text {
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 6px;
}

.af-media-tags {
  font-size: 11px;
  color: #3b82f6;
}

.af-media-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.af-media-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-media-toggle.approved {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.af-media-toggle:hover { border-color: #3b82f6; }

/* ── Timeline ── */
.af-marketing {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.af-marketing h2 { font-size: 18px; color: #fff; font-weight: 600; }

.af-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.af-timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.af-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
}

.af-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.af-timeline-dot-pending {
  background: #2a2a2a;
  border: 2px solid #3b82f6;
}

.af-timeline-content {
  flex: 1;
}

.af-timeline-platform {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 4px;
  display: block;
}
.af-timeline-content p {
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
}

.af-timeline-date {
  font-size: 11px;
  color: #666;
  display: block;
  margin-top: 4px;
}

.af-timeline-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.af-timeline-status-posted { background: #0a1a14; color: #10b981; }
.af-timeline-status-scheduled { background: #0f1d3a; color: #3b82f6; }

/* ── Completed ── */
.af-completed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 14px;
}
.af-completed h2 { font-size: 20px; color: #fff; font-weight: 600; }
.af-completed p { font-size: 14px; color: #888; }


/* ── App Factory premium refresh ─────────────────────────────────────────── */
.af-root {
  --af-ink: #101318;
  --af-ink-soft: #2d3440;
  --af-muted: #747d8b;
  --af-muted-strong: #5d6673;
  --af-accent: #315efb;
  --af-accent-dark: #2447d8;
  --af-accent-soft: #edf2ff;
  --af-green: #0f9f6e;
  --af-green-soft: #eafaf3;
  --af-red: #c83b46;
  --af-red-soft: #fff1f2;
  --af-canvas: #f4f6f9;
  --af-surface: rgba(255, 255, 255, 0.94);
  --af-border: rgba(16, 19, 24, 0.09);
  --af-border-strong: rgba(16, 19, 24, 0.14);
  --af-shadow: 0 18px 45px rgba(21, 31, 52, 0.08), 0 2px 8px rgba(21, 31, 52, 0.04);
  --af-shadow-hover: 0 24px 55px rgba(21, 31, 52, 0.13), 0 3px 10px rgba(21, 31, 52, 0.06);
  background:
    radial-gradient(circle at 92% -10%, rgba(49, 94, 251, 0.11), transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, var(--af-canvas) 60%, #eef2f6 100%);
  color: var(--af-ink);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.af-root button,
.af-root input {
  font: inherit;
}

.af-page {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 42px clamp(22px, 4vw, 64px) 72px;
  gap: 0;
  overflow-y: auto;
  scrollbar-color: rgba(16, 19, 24, 0.2) transparent;
}

.af-header {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.af-header > div:first-child {
  position: relative;
}

.af-title {
  color: var(--af-ink);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 780;
}

.af-subtitle {
  max-width: 610px;
  margin-top: 12px;
  color: var(--af-muted-strong);
  font-size: 15px;
  line-height: 1.65;
}

.af-title::before {
  content: "WORKSPACE / APP FACTORY";
  display: block;
  margin-bottom: 13px;
  color: var(--af-accent);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.af-start-btn,
.af-btn-approve {
  background: var(--af-accent);
  box-shadow: 0 10px 20px rgba(49, 94, 251, 0.18);
}

.af-start-btn {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(49, 94, 251, 0.35);
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.af-start-btn:hover {
  background: var(--af-accent-dark);
  box-shadow: 0 14px 28px rgba(49, 94, 251, 0.25);
  transform: translateY(-1px);
}

.af-start-btn:active,
.af-btn:active,
.af-back-btn:active,
.af-config-toggle:active {
  transform: scale(0.97);
}

.af-back-btn {
  align-self: flex-start;
  min-height: 38px;
  padding: 0 13px 0 10px;
  border: 1px solid var(--af-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--af-muted-strong);
  box-shadow: 0 4px 12px rgba(21, 31, 52, 0.04);
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.af-back-btn:hover {
  background: #fff;
  color: var(--af-ink);
  border-color: var(--af-border-strong);
}

.af-list {
  gap: 12px;
}

.af-list::before {
  content: "YOUR FACTORY RUNS";
  display: block;
  margin: 4px 0 2px;
  color: var(--af-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.af-list-item {
  min-height: 86px;
  padding: 18px 20px;
  border: 1px solid var(--af-border);
  border-radius: 16px;
  background: var(--af-surface);
  box-shadow: 0 4px 14px rgba(21, 31, 52, 0.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.af-list-item:hover {
  background: #fff;
  border-color: rgba(49, 94, 251, 0.26);
  box-shadow: var(--af-shadow);
  transform: translateY(-2px);
}

.af-list-item-left,
.af-list-item-right {
  gap: 13px;
}

.af-status-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.af-list-apps {
  color: var(--af-ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.af-list-date {
  color: var(--af-muted);
  font-size: 12px;
}

.af-empty {
  min-height: 360px;
  padding: 64px 24px;
  border: 1px dashed rgba(49, 94, 251, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.af-empty svg {
  width: 62px;
  height: 62px;
  padding: 15px;
  border-radius: 18px;
  background: var(--af-accent-soft);
  color: var(--af-accent);
  stroke: currentColor;
}

.af-empty p {
  margin: 4px 0 0;
  color: var(--af-ink);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.af-empty span {
  max-width: 390px;
  color: var(--af-muted-strong);
  line-height: 1.6;
}

.af-loading {
  padding: 72px 20px;
  color: var(--af-muted-strong);
}

.af-config {
  max-width: 780px;
  gap: 16px;
}

.af-config-section,
.af-cost-preview {
  padding: 22px 24px;
  border: 1px solid var(--af-border);
  border-radius: 16px;
  background: var(--af-surface);
  box-shadow: 0 4px 14px rgba(21, 31, 52, 0.035);
}

.af-config-section {
  gap: 14px;
}

.af-config-label {
  color: var(--af-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.af-config-slider-wrap {
  gap: 18px;
}

.af-config-slider {
  height: 7px;
  background: #e4e8ef;
}

.af-config-slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  background: var(--af-accent);
  box-shadow: 0 4px 12px rgba(49, 94, 251, 0.3);
}

.af-config-slider-val {
  min-width: 46px;
  padding: 8px 10px;
  border: 1px solid var(--af-border);
  border-radius: 10px;
  background: #fff;
  color: var(--af-ink);
  font-size: 16px;
}

.af-config-radio-group,
.af-config-connectors {
  gap: 9px;
}

.af-config-radio,
.af-config-connector {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--af-border);
  border-radius: 11px;
  background: #f9fafb;
  color: var(--af-muted-strong);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.af-config-radio:hover,
.af-config-connector:hover {
  border-color: rgba(49, 94, 251, 0.3);
  background: #fff;
  transform: translateY(-1px);
}

.af-config-radio.active,
.af-config-connector.active {
  border-color: rgba(49, 94, 251, 0.38);
  background: var(--af-accent-soft);
  color: var(--af-accent-dark);
  box-shadow: inset 0 0 0 1px rgba(49, 94, 251, 0.06);
}

.af-config-toggle {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #d8dee7;
  transition: background 180ms ease, transform 180ms ease;
}

.af-config-toggle.on {
  background: var(--af-accent);
}

.af-config-toggle-knob {
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 5px rgba(16, 19, 24, 0.18);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.af-config-toggle.on .af-config-toggle-knob {
  transform: translateX(20px);
}

.af-config-toggle-label {
  color: var(--af-muted-strong);
  font-weight: 600;
}

.af-connector-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.af-cost-preview {
  padding: 19px 24px;
  background: linear-gradient(135deg, #101318, #1d2635);
  border: 0;
  color: #fff;
  box-shadow: 0 16px 30px rgba(16, 19, 24, 0.14);
}

.af-cost-row {
  color: rgba(255, 255, 255, 0.68);
}

.af-cost-amount {
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.af-cost-balance {
  border-color: rgba(255, 255, 255, 0.12);
}

.af-start-btn-full {
  min-height: 50px;
  margin-top: 4px;
  border-radius: 13px;
  font-size: 14px;
}

.af-dashboard {
  overflow: visible;
}

.af-phase-banner {
  min-height: 70px;
  padding: 16px 20px;
  border: 1px solid var(--af-border);
  border-left: 4px solid var(--af-accent);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(21, 31, 52, 0.055);
}

.af-phase-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 5px rgba(49, 94, 251, 0.1);
}

.af-phase-label {
  color: var(--af-ink);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.af-phase-hint {
  color: var(--af-muted-strong);
  font-size: 13px;
}

.af-plans,
.af-media,
.af-marketing {
  gap: 18px;
}

.af-plans-header,
.af-media-header {
  min-height: 42px;
}

.af-plans-header h2,
.af-media-header h2,
.af-marketing h2 {
  color: var(--af-ink);
  font-size: 20px;
  letter-spacing: -0.03em;
}

.af-plans-count {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--af-accent-soft);
  color: var(--af-accent-dark);
  font-size: 11px;
  font-weight: 750;
}

.af-plans-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.af-plan-card,
.af-media-card,
.af-timeline-item,
.af-build-approval {
  border: 1px solid var(--af-border);
  border-radius: 16px;
  background: var(--af-surface);
  box-shadow: 0 5px 16px rgba(21, 31, 52, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.af-plan-card {
  min-height: 250px;
  padding: 20px;
}

.af-plan-card:hover,
.af-media-card:hover,
.af-timeline-item:hover {
  border-color: rgba(49, 94, 251, 0.22);
  box-shadow: var(--af-shadow-hover);
  transform: translateY(-2px);
}

.af-plan-card.selected {
  border-color: rgba(49, 94, 251, 0.5);
  box-shadow: 0 0 0 3px rgba(49, 94, 251, 0.1), var(--af-shadow);
}

.af-plan-card.approved,
.af-media-card.approved {
  border-color: rgba(15, 159, 110, 0.34);
  background: linear-gradient(180deg, #fff, var(--af-green-soft));
}

.af-plan-rank {
  background: #edf0f4;
  color: var(--af-muted-strong);
  font-weight: 800;
}

.af-plan-score-bar {
  width: 72px;
  height: 6px;
  background: #e7ebf0;
}

.af-plan-score-bar span {
  background: linear-gradient(90deg, #6b8cff, var(--af-accent));
}

.af-plan-score-num {
  color: var(--af-muted-strong);
  font-weight: 750;
}

.af-plan-name {
  margin: 2px 0 8px;
  color: var(--af-ink);
  font-size: 18px;
  letter-spacing: -0.025em;
}

.af-plan-concept {
  min-height: 60px;
  color: var(--af-muted-strong);
  line-height: 1.6;
}

.af-plan-tag {
  border: 1px solid var(--af-border);
  background: #f5f7fa;
  color: var(--af-muted-strong);
  font-size: 11px;
}

.af-plan-actions {
  margin-top: auto;
}

.af-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 12px;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.af-btn-approve {
  color: #fff;
}

.af-btn-approve:hover:not(:disabled) {
  background: #0c8c62;
  box-shadow: 0 8px 18px rgba(15, 159, 110, 0.18);
}

.af-btn-reject {
  border-color: rgba(200, 59, 70, 0.18);
  background: var(--af-red-soft);
  color: var(--af-red);
}

.af-btn-reject:hover:not(:disabled) {
  background: #ffe4e7;
}

.af-btn-secondary {
  border-color: var(--af-border);
  background: #fff;
  color: var(--af-muted-strong);
}

.af-btn-secondary:hover:not(:disabled) {
  border-color: var(--af-border-strong);
  background: #f6f8fb;
  color: var(--af-ink);
}

.af-bulk-bar {
  padding: 14px 18px;
  border: 1px solid rgba(49, 94, 251, 0.16);
  border-radius: 14px;
  background: rgba(237, 242, 255, 0.94);
  box-shadow: 0 12px 24px rgba(49, 94, 251, 0.08);
}

.af-bulk-bar span {
  color: var(--af-accent-dark);
  font-size: 12px;
  font-weight: 750;
}

.af-hint {
  padding: 56px 24px;
  color: var(--af-muted-strong);
}

.af-browser {
  border: 1px solid var(--af-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--af-shadow);
}

.af-browser-bar {
  min-height: 48px;
  padding: 9px 14px;
  background: #eef1f5;
  border-bottom: 1px solid var(--af-border);
}

.af-browser-dots span {
  width: 9px;
  height: 9px;
  opacity: 0.85;
}

.af-browser-tabs {
  gap: 5px;
}

.af-browser-tab {
  padding: 7px 13px;
  border-radius: 9px;
  color: var(--af-muted);
  font-size: 11px;
}

.af-browser-tab.active {
  background: #fff;
  color: var(--af-ink);
  box-shadow: 0 2px 8px rgba(21, 31, 52, 0.08);
}

.af-browser-tab:hover:not(.active) {
  color: var(--af-ink-soft);
}

.af-browser-url {
  padding: 9px 16px;
  background: #fff;
  border-bottom: 1px solid var(--af-border);
}

.af-browser-url svg {
  stroke: var(--af-green);
}

.af-browser-url span {
  color: var(--af-muted);
}

.af-browser-content {
  min-height: 430px;
  background: #f7f9fb;
}

.af-browser-placeholder {
  color: var(--af-muted-strong);
}

.af-spinner {
  border-color: #e5eaf1;
  border-top-color: var(--af-accent);
}

.af-build-approval {
  padding: 20px 22px;
}

.af-build-features h4,
.af-build-checklist h4 {
  color: var(--af-ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.af-build-features li,
.af-build-checklist li {
  color: var(--af-muted-strong);
  line-height: 1.5;
}

.af-media-app {
  gap: 14px;
}

.af-media-app-name {
  color: var(--af-ink);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.af-media-card {
  min-height: 178px;
  padding: 16px;
}

.af-media-platform {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.af-media-text {
  color: var(--af-ink-soft);
  line-height: 1.6;
}

.af-media-tags {
  color: var(--af-accent-dark);
}

.af-media-toggle {
  width: 34px;
  height: 34px;
  border-color: var(--af-border);
  background: #f8fafc;
  color: var(--af-muted);
}

.af-media-toggle.approved {
  background: var(--af-green);
  border-color: var(--af-green);
}

.af-marketing h2 {
  margin-bottom: 4px;
}

.af-timeline {
  gap: 8px;
}

.af-timeline-title {
  color: var(--af-muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.af-timeline-item {
  padding: 16px 18px;
}

.af-timeline-content p {
  color: var(--af-ink-soft);
  line-height: 1.55;
}

.af-timeline-platform,
.af-timeline-date {
  color: var(--af-muted-strong);
}

.af-timeline-status-posted {
  background: var(--af-green-soft);
  color: var(--af-green);
}

.af-timeline-status-scheduled {
  background: var(--af-accent-soft);
  color: var(--af-accent-dark);
}

.af-completed {
  min-height: 340px;
  border: 1px solid rgba(15, 159, 110, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, var(--af-green-soft));
  box-shadow: var(--af-shadow);
}

.af-completed h2 {
  color: var(--af-ink);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.af-completed p {
  color: var(--af-muted-strong);
}

@media (max-width: 760px) {
  .af-page {
    padding: 28px 16px 48px;
  }

  .af-header {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .af-title {
    font-size: 31px;
  }

  .af-start-btn {
    justify-content: center;
    width: 100%;
  }

  .af-list-item {
    align-items: flex-start;
    gap: 16px;
    flex-direction: column;
  }

  .af-list-item-right {
    width: 100%;
    justify-content: space-between;
  }

  .af-config-section,
  .af-cost-preview {
    padding: 18px;
  }

  .af-config-radio-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .af-config-radio {
    justify-content: center;
    padding: 0 8px;
    text-align: center;
  }

  .af-phase-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .af-phase-hint {
    width: 100%;
    margin-left: 22px;
  }

  .af-build-info {
    flex-direction: column;
    gap: 16px;
  }

  .af-build-actions {
    flex-direction: column;
  }

  .af-build-actions .af-btn {
    width: 100%;
  }

  .af-browser-content {
    min-height: 310px;
  }
}

@media (max-width: 460px) {
  .af-title::before {
    font-size: 9px;
  }

  .af-config-radio-group {
    grid-template-columns: 1fr;
  }

  .af-config-radio {
    justify-content: flex-start;
  }

  .af-plan-actions {
    flex-direction: column;
  }

  .af-plan-actions .af-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .af-root *,
  .af-root *::before,
  .af-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── App Factory dark product workspace ─────────────────────────────────────
   Additive layer: the existing af-* rules remain available for legacy states.
   These overrides keep the factory visually aligned with a serious internal
   product team rather than a decorative AI dashboard. */
.af-root {
  --af-ink: #f4f7fb;
  --af-ink-soft: #d8e0eb;
  --af-muted: #8491a3;
  --af-muted-strong: #aeb8c7;
  --af-accent: #7aa2ff;
  --af-accent-dark: #9ab8ff;
  --af-accent-soft: rgba(122, 162, 255, 0.12);
  --af-green: #42d39a;
  --af-green-soft: rgba(66, 211, 154, 0.09);
  --af-red: #ff7c89;
  --af-red-soft: rgba(255, 124, 137, 0.1);
  --af-canvas: #0b0f14;
  --af-surface: rgba(17, 23, 32, 0.94);
  --af-border: rgba(206, 220, 239, 0.1);
  --af-border-strong: rgba(206, 220, 239, 0.18);
  --af-shadow: 0 18px 55px rgba(0, 0, 0, 0.24), 0 2px 9px rgba(0, 0, 0, 0.18);
  --af-shadow-hover: 0 24px 65px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 82% -12%, rgba(68, 111, 202, 0.15), transparent 32rem),
    radial-gradient(circle at 0% 35%, rgba(34, 197, 149, 0.035), transparent 28rem),
    linear-gradient(180deg, #0d1219 0%, #0b0f14 60%, #090c11 100%);
  color: var(--af-ink);
}

.af-page { max-width: 1480px; padding: 34px clamp(22px, 4vw, 68px) 72px; }
.af-root button, .af-root input { color-scheme: dark; }
.af-header { margin-bottom: 22px; }
.af-workspace-header, .af-header-compact { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.af-header-compact { align-items: flex-start; }
.af-kicker { margin-bottom: 11px; color: #7891b9; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1; text-transform: uppercase; }
.af-title { color: #f6f8fb; font-size: clamp(30px, 3vw, 42px); font-weight: 760; letter-spacing: -.05em; }
.af-title::before { display: none; }
.af-subtitle { max-width: 650px; margin-top: 10px; color: #98a5b7; font-size: 14px; line-height: 1.65; }
.af-section-title { color: #eef3f9; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.af-section-note { margin-top: 5px; color: #768397; font-size: 12px; line-height: 1.5; }
.af-header-legacy { display: block; margin: 30px 0 14px; }
.af-start-btn, .af-btn-approve { background: #5b84ee; box-shadow: 0 10px 25px rgba(91, 132, 238, .2); }
.af-start-btn { border-color: rgba(144, 174, 255, .32); border-radius: 10px; font-weight: 680; }
.af-start-btn:hover { background: #6f96ff; box-shadow: 0 14px 32px rgba(91, 132, 238, .3); }
.af-back-btn { background: rgba(17, 23, 32, .76); border-color: var(--af-border); color: #aeb8c7; box-shadow: none; }
.af-back-btn:hover { background: #151d28; border-color: var(--af-border-strong); color: #f4f7fb; }

.af-stage-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; padding: 5px; border: 1px solid var(--af-border); border-radius: 14px; background: rgba(7, 10, 15, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.af-stage { position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 12px; border-radius: 9px; color: #667386; }
.af-stage + .af-stage::before { content: ''; position: absolute; left: -1px; top: 17px; width: 1px; height: 20px; background: rgba(206, 220, 239, .08); }
.af-stage-index { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid rgba(206, 220, 239, .13); border-radius: 7px; color: #788598; font-size: 10px; font-weight: 800; }
.af-stage-copy { display: grid; min-width: 0; gap: 3px; }
.af-stage-copy strong { color: #8996a8; font-size: 11px; font-weight: 720; }
.af-stage-copy small { overflow: hidden; color: #5e6b7c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.af-stage.current { background: rgba(122, 162, 255, .1); box-shadow: inset 0 0 0 1px rgba(122, 162, 255, .18); }
.af-stage.current .af-stage-index { border-color: rgba(122, 162, 255, .48); background: rgba(122, 162, 255, .17); color: #b5caff; }
.af-stage.current .af-stage-copy strong { color: #e7edff; }
.af-stage.current .af-stage-copy small { color: #8ca7dc; }
.af-stage.complete .af-stage-index { border-color: rgba(66, 211, 154, .36); background: rgba(66, 211, 154, .11); color: #74e4b4; }
.af-stage.complete .af-stage-copy strong { color: #accdbf; }

.af-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.af-health-card { min-height: 114px; padding: 16px 17px; border: 1px solid var(--af-border); border-radius: 12px; background: rgba(16, 22, 31, .82); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.af-health-card span { display: block; margin-bottom: 12px; color: #748195; font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.af-health-card strong { display: block; color: #e9eef5; font-size: 18px; font-weight: 720; letter-spacing: -.03em; }
.af-health-card small { display: block; margin-top: 7px; color: #738095; font-size: 11px; line-height: 1.4; }
.af-health-accent { border-color: rgba(66, 211, 154, .2); background: linear-gradient(135deg, rgba(66, 211, 154, .08), rgba(16, 22, 31, .9)); }
.af-health-accent strong { color: #7fe3b6; }

.af-list::before { color: #607087; }
.af-list-item, .af-config-section, .af-cost-preview, .af-phase-banner, .af-plan-card, .af-media-card, .af-timeline-item, .af-build-approval { border-color: var(--af-border); background: var(--af-surface); box-shadow: 0 7px 22px rgba(0, 0, 0, .13); }
.af-list-item:hover, .af-plan-card:hover, .af-media-card:hover, .af-timeline-item:hover { border-color: rgba(122, 162, 255, .3); background: #151d28; box-shadow: var(--af-shadow-hover); }
.af-list-apps, .af-plan-name, .af-media-app-name, .af-plans-header h2, .af-media-header h2, .af-marketing h2, .af-build-features h4, .af-build-checklist h4 { color: #e9eef5; }
.af-list-date, .af-plan-concept, .af-media-text, .af-timeline-content p, .af-hint { color: #8794a6; }
.af-empty { border-color: rgba(122, 162, 255, .22); background: rgba(17, 23, 32, .6); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.af-empty svg { background: rgba(122, 162, 255, .12); color: #9ab8ff; stroke: currentColor; }
.af-empty p { color: #e9eef5; }
.af-empty span { color: #8190a3; }
.af-config-label { color: #dce4ee; }
.af-config-slider { background: #283443; }
.af-config-slider::-webkit-slider-thumb { border-color: #10161f; background: #7aa2ff; box-shadow: 0 4px 14px rgba(122, 162, 255, .3); }
.af-config-slider-val, .af-config-radio, .af-config-connector { border-color: var(--af-border); background: #121a24; color: #9ca9ba; }
.af-config-radio:hover, .af-config-connector:hover { border-color: rgba(122, 162, 255, .34); background: #17212d; }
.af-config-radio.active, .af-config-connector.active { border-color: rgba(122, 162, 255, .42); background: rgba(122, 162, 255, .12); color: #b5caff; }
.af-cost-preview { background: linear-gradient(135deg, #101820, #192433); border-color: rgba(144, 174, 255, .15); }
.af-phase-banner { background: rgba(17, 23, 32, .8); }
.af-phase-label { color: #edf2f8; }
.af-phase-hint { color: #8c99ab; }
.af-plans-count { background: rgba(122, 162, 255, .12); color: #abc1ff; }
.af-plan-card.selected { border-color: rgba(122, 162, 255, .65); box-shadow: 0 0 0 3px rgba(122, 162, 255, .1), var(--af-shadow); }
.af-plan-card.approved, .af-media-card.approved { border-color: rgba(66, 211, 154, .3); background: linear-gradient(180deg, rgba(17, 29, 34, .95), rgba(21, 49, 42, .82)); }
.af-plan-rank, .af-plan-tag { border-color: var(--af-border); background: #18212d; color: #91a0b3; }
.af-plan-score-num { color: #aeb8c7; }
.af-btn-reject { border-color: rgba(255, 124, 137, .22); background: var(--af-red-soft); color: #ff9ca7; }
.af-btn-secondary { border-color: var(--af-border); background: #151d28; color: #aeb8c7; }
.af-btn-secondary:hover:not(:disabled) { border-color: var(--af-border-strong); background: #1b2633; color: #f4f7fb; }
.af-bulk-bar { border-color: rgba(122, 162, 255, .18); background: rgba(33, 51, 89, .58); box-shadow: 0 12px 25px rgba(0, 0, 0, .16); }
.af-bulk-bar span { color: #b5caff; }
.af-browser { border-color: var(--af-border); background: #0d131b; box-shadow: var(--af-shadow); }
.af-browser-bar { background: #131c27; border-bottom-color: var(--af-border); }
.af-browser-url, .af-browser-tab.active { background: #111923; }
.af-browser-url { border-bottom-color: var(--af-border); }
.af-browser-url span { color: #79879a; }
.af-browser-content { background: #0a0f15; }
.af-build-approval { background: rgba(17, 23, 32, .92); }
.af-build-features li, .af-build-checklist li { color: #8e9bad; }
.af-timeline-status-posted { background: rgba(66, 211, 154, .12); color: #70dfae; }
.af-timeline-status-scheduled { background: rgba(122, 162, 255, .12); color: #a4bcff; }
.af-completed { border-color: var(--af-border); background: rgba(17, 23, 32, .85); }
.af-completed h2 { color: #eef3f9; }
.af-completed p { color: #8794a6; }

@media (max-width: 900px) {
  .af-stage-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .af-workspace-header, .af-header-compact { flex-direction: column; gap: 18px; }
  .af-workspace-header .af-start-btn { width: 100%; }
  .af-stage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-stage + .af-stage::before { display: none; }
  .af-health-grid { grid-template-columns: 1fr; }
}

/* App Factory launch-control refinement */
.af-marketing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.af-marketing-heading h2 { margin: 0 0 6px; }
@media (max-width: 640px) { .af-marketing-heading { flex-direction: column; } }


/* Login modal — Jostavan's light blue, white and slate palette */
.wl-login-prompt { display:flex; justify-content:center; align-items:center; gap:5px; margin:16px 0 0; color:#536171; font-size:13px; flex-wrap:wrap; }
.wl-login-prompt button { border:0; padding:2px 0; background:transparent; color:#1e67a2; font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.wl-login-prompt button:hover { color:#174f7d; }
.wl-login-prompt button:focus-visible { outline:2px solid #4385bc; outline-offset:3px; border-radius:3px; }
.auth-modal-backdrop { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,35,52,.48); backdrop-filter:blur(7px); }
.auth-modal { position:relative; width:min(100%,420px); max-height:calc(100vh - 32px); overflow:auto; padding:34px; border:1px solid #d4dfe8; border-radius:18px; background:#fff; color:#17202a; box-shadow:0 28px 80px rgba(24,48,68,.22); }
.auth-modal-close { position:absolute; top:14px; right:16px; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:#657384; font-size:24px; line-height:1; cursor:pointer; }
.auth-modal-close:hover:not(:disabled) { background:#edf4f9; color:#17202a; }
.auth-modal-brand { display:flex; align-items:center; gap:9px; margin-bottom:26px; color:#17202a; font-size:16px; font-weight:700; letter-spacing:-.02em; }
.auth-modal h2 { margin:0 0 8px; color:#111827; font-size:25px; letter-spacing:-.03em; }
.auth-modal-subtitle { margin:0 0 24px; color:#536171; font-size:14px; line-height:1.5; }
.auth-google-btn, .auth-login-submit { width:100%; min-height:46px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.auth-google-btn { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #cbd5df; background:#fff; color:#17202a; }
.auth-google-btn:hover:not(:disabled) { background:#f4f8fb; border-color:#9eb5c7; }
.auth-google-mark { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; color:#4285f4; font-size:14px; font-weight:800; border:1px solid #e1e7ed; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#6b7785; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after { content:''; height:1px; flex:1; background:#dce4eb; }
.auth-login-form { display:grid; gap:9px; }
.auth-login-form label { color:#243344; font-size:12px; font-weight:600; }
.auth-login-form input { width:100%; min-height:44px; padding:0 12px; border:1px solid #cbd5df; border-radius:8px; outline:none; background:#f7fafc; color:#17202a; font-size:14px; }
.auth-login-form input:focus { border-color:#4385bc; box-shadow:0 0 0 3px rgba(67,133,188,.15); }
.auth-login-form input + label { margin-top:7px; }
.auth-login-submit { margin-top:8px; border:1px solid #1e67a2; background:#1e67a2; color:#fff; }
.auth-login-submit:hover:not(:disabled) { background:#174f7d; border-color:#174f7d; }
.auth-login-submit:disabled, .auth-google-btn:disabled { opacity:.65; cursor:wait; }
.auth-login-error { margin:8px 0 0; color:#a32626; font-size:13px; line-height:1.45; }
.auth-modal-note { margin:20px 0 0; color:#637181; font-size:12px; line-height:1.55; text-align:center; }
@media (max-width:640px) { .auth-modal { padding:28px 22px; } }



/* ── Unified light workspace + responsive pass ──────────────────────────── */
:root {
  --workspace-bg: #f5f7fb;
  --workspace-surface: #ffffff;
  --workspace-surface-raised: #f8fafc;
  --workspace-border: rgba(15, 23, 42, .11);
  --workspace-border-strong: rgba(49, 94, 232, .28);
  --workspace-text: #172033;
  --workspace-muted: #667085;
  --workspace-accent: #315ee8;
}
/* App Factory uses a light product-operations workspace: cool paper surfaces, ink-led hierarchy, and one precise blue action color. */
.af-page {
  color: var(--workspace-text);
  background: var(--workspace-bg);
}
.af-page .af-workspace-header,
.af-page .af-header,
.af-page .af-header-compact,
.af-page .af-section,
.af-page .af-config-section,
.af-page .af-phase-banner,
.af-page .af-marketing,
.af-page .af-build-approval,
.af-page .af-completed {
  color: var(--workspace-text);
}
.af-page input,
.af-page textarea,
.af-page select {
  color: var(--workspace-text);
  border-color: var(--workspace-border);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.af-page input::placeholder,
.af-page textarea::placeholder { color: #98a2b3; }
.af-page .af-start-btn,
.af-page .af-btn-primary { background: var(--workspace-accent); color: #ffffff; border-color: transparent; box-shadow: 0 5px 14px rgba(49, 94, 232, .18); }
.af-page .af-start-btn:hover,
.af-page .af-btn-primary:hover { background: #244bcc; }
.af-page .af-btn-secondary { color: #475467; background: var(--workspace-surface-raised); border-color: var(--workspace-border); }
.af-page .af-btn-secondary:hover { background: #eef2f7; color: #172033; }
.af-page .af-list-item,
.af-page .af-config-section,
.af-page .af-cost-preview,
.af-page .af-phase-banner,
.af-page .af-plan-card,
.af-page .af-media-card,
.af-page .af-timeline-item,
.af-page .af-build-approval,
.af-page .af-completed { border-color: var(--workspace-border); }

.mobile-nav-toggle {
  display: none;
  position: fixed;
  z-index: 1200;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--workspace-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: var(--workspace-text);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

@media (max-width: 1024px) {
  .content-area { min-width: 0; }
  .af-page { padding-inline: clamp(18px, 3vw, 34px); }
  .af-dashboard-grid,
  .af-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-table-wrap { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 768px) {
  body { min-width: 0; overflow-x: hidden; }
  .app-layout { min-width: 0; width: 100%; }
  .sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1100;
    width: min(86vw, 320px);
    min-width: 0;
    max-width: 320px;
    box-shadow: 18px 0 42px rgba(0, 0, 0, .34);
  }
  .mobile-nav-toggle { display: inline-flex; }
  .content-area { width: 100%; min-width: 0; margin: 0; }
  .new-task-topbar,
  .task-workspace-topbar {
    min-height: 56px;
    height: auto;
    padding: 10px 14px 10px 62px;
    gap: 8px;
  }
  .new-task-topbar { flex-wrap: wrap; }
  .task-workspace-topbar-left { min-width: 0; flex: 1; overflow: hidden; }
  .task-workspace-topbar-left > * { max-width: 100%; }
  .new-task-hero {
    width: auto;
    max-width: none;
    padding: 34px 16px 56px;
  }
  .new-task-hero h1 { margin: 28px 0 22px; font-size: clamp(28px, 8vw, 38px); line-height: 1.08; }
  .task-composer { min-height: 112px; border-radius: 16px; }
  .composer-field { min-height: 64px; padding: 14px; }
  .task-workspace-body { overflow: visible; }
  .task-chat-shell { min-width: 0; width: 100%; }
  .task-utility-panel {
    position: fixed;
    inset: 56px 0 0;
    z-index: 1050;
    width: 100%;
    min-width: 0;
    border-left: 0;
  }
  .utility-tabs { overflow-x: auto; justify-content: flex-start; }
  .utility-tabs button { min-width: 96px; padding: 0 14px; }
  .task-chat-input,
  .task-composer { max-width: calc(100vw - 24px); }
  .mp-page,
  .settings-page,
  .support-page,
  .docs-page { width: 100%; min-width: 0; padding: 18px 14px; }
  .mp-header,
  .settings-header,
  .profile-header,
  .support-header { flex-wrap: wrap; gap: 12px; }
  .mp-table,
  .connectors-table { overflow-x: auto; display: block; }
  .mp-table > *, .connectors-table > * { min-width: 620px; }
  .af-page { width: 100%; min-width: 0; padding: 22px 14px 48px; }
  .af-page .af-workspace-header,
  .af-page .af-header,
  .af-page .af-header-compact { align-items: stretch; }
  .af-page .af-start-btn,
  .af-page .af-header-actions { width: 100%; }
  .af-page .af-start-btn { justify-content: center; }
  .af-page .af-workspace-header,
  .af-page .af-header,
  .af-page .af-header-compact { margin-bottom: 18px; }
  .af-page .af-title { font-size: clamp(24px, 7vw, 34px); }
  .af-page .af-subtitle { max-width: 100%; }
  .af-stage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 5px; }
  .af-stage { min-height: 66px; padding: 9px 8px; gap: 7px; }
  .af-stage-copy small { white-space: normal; line-height: 1.25; }
  .af-health-grid { grid-template-columns: 1fr; }
  .af-plan-grid,
  .af-media-grid,
  .af-dashboard-grid,
  .af-config-grid { grid-template-columns: 1fr; }
  .af-plan-card,
  .af-media-card,
  .af-list-item { min-width: 0; width: 100%; }
  .af-page .af-config-section,
  .af-page .af-phase-banner,
  .af-page .af-marketing,
  .af-page .af-build-approval,
  .af-page .af-completed { padding: 16px; }
  .af-page .af-header-actions { flex-wrap: wrap; gap: 8px; }
  .af-page button { max-width: 100%; }
  .af-table-wrap { overflow-x: auto; }
  .af-table { min-width: 620px; }
  .af-marketing-heading { align-items: stretch; }
  .af-marketing-heading > * { max-width: 100%; }
}

@media (max-width: 480px) {
  .sidebar { width: min(92vw, 300px); }
  .new-task-topbar,
  .task-workspace-topbar { padding-left: 58px; }
  .topbar-icon-btn,
  .topbar-text-btn { min-height: 34px; padding: 0 8px; font-size: 11px; }
  .task-workspace-topbar-left { gap: 5px; }
  .task-workspace-topbar-left .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .new-task-hero { padding-inline: 12px; }
  .composer-actions { flex-wrap: wrap; }
  .af-page { padding-inline: 11px; }
  .af-stage-rail { grid-template-columns: 1fr 1fr; }
  .af-stage-copy strong { font-size: 10px; }
  .af-stage-copy small { font-size: 9px; }
  .af-config-radio,
  .af-config-connector { padding: 10px; }
  .auth-modal { width: calc(100vw - 24px); padding: 24px 18px; }
}


/* App Factory contrast correction: keep secondary text dark enough to remain readable on light surfaces. */
.af-page {
  color-scheme: light;
  --af-ink: #172033;
  --af-ink-soft: #344054;
  --af-muted: #475467;
  --af-muted-strong: #344054;
  --af-canvas: #f5f7fb;
  --af-surface: #ffffff;
  --af-border: rgba(15, 23, 42, .12);
  --af-border-strong: rgba(15, 23, 42, .2);
}
.af-page .af-section-title,
.af-page .af-list-apps,
.af-page .af-plan-name,
.af-page .af-media-app-name,
.af-page .af-plans-header h2,
.af-page .af-media-header h2,
.af-page .af-marketing h2,
.af-page .af-build-features h4,
.af-page .af-build-checklist h4,
.af-page .af-completed h2 { color: #172033; }
.af-page .af-section-note,
.af-page .af-list-date,
.af-page .af-plan-concept,
.af-page .af-media-text,
.af-page .af-timeline-content p,
.af-page .af-hint,
.af-page .af-completed p,
.af-page .af-empty span { color: #475467; }
.af-page .af-config-label,
.af-page .af-cost-label,
.af-page .af-stage,
.af-page .af-stage-copy strong,
.af-page .af-stage-copy small,
.af-page .af-health-card span,
.af-page .af-health-card small,
.af-page .af-marketing-label,
.af-page .af-table th { color: #344054; }
.af-page .af-stage-copy small,
.af-page .af-health-card small,
.af-page .af-section-note,
.af-page .af-hint { color: #475467; }
.af-page .af-stage-rail,
.af-page .af-health-card,
.af-page .af-config-radio,
.af-page .af-config-connector,
.af-page .af-empty,
.af-page .af-table-wrap,
.af-page .af-marketing,
.af-page .af-build-approval,
.af-page .af-completed { background: #ffffff; }
.af-page .af-health-card strong,
.af-page .af-config-slider-val,
.af-page .af-table td,
.af-page .af-table tbody td,
.af-page .af-timeline-content strong { color: #172033; }
.af-page .af-config-radio,
.af-page .af-config-connector { color: #344054; }
.af-page .af-config-radio.active,
.af-page .af-config-connector.active { color: #2447d8; background: #edf2ff; border-color: rgba(49, 94, 232, .38); }
.af-page .af-stage.current { background: #edf2ff; box-shadow: inset 0 0 0 1px rgba(49, 94, 232, .18); }
.af-page .af-stage.current .af-stage-copy strong { color: #172033; }
.af-page .af-stage.current .af-stage-copy small { color: #315ee8; }
.af-page .af-stage.complete .af-stage-copy strong { color: #176b4d; }
.af-page .af-health-card { box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }
.af-page .af-list-item,
.af-page .af-config-section,
.af-page .af-cost-preview,
.af-page .af-phase-banner,
.af-page .af-plan-card,
.af-page .af-media-card,
.af-page .af-timeline-item,
.af-page .af-build-approval { box-shadow: 0 7px 22px rgba(15, 23, 42, .06); }
.af-page .af-list-item:hover,
.af-page .af-plan-card:hover,
.af-page .af-media-card:hover,
.af-page .af-timeline-item:hover { background: #f8fafc; }
.af-page .af-back-btn { background: #ffffff; color: #344054; border-color: var(--workspace-border); }
.af-page .af-back-btn:hover { background: #f1f4f8; color: #172033; }
.af-page .af-page-subtitle,
.af-page .af-header p,
.af-page .af-workspace-header p { color: #475467; }
.af-page .af-table th { background: #f8fafc; }
.af-page .af-table tr { border-color: var(--workspace-border); }

/* User Apps registry — light workspace surfaces, dark readable type, responsive cards. */
.user-apps-page { min-height: 100%; padding: clamp(24px, 4vw, 56px); background: #f6f8fb; color: #172033; }
.user-apps-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto 34px; }
.user-apps-header .eyebrow { margin: 0 0 8px; color: #315fd4; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.user-apps-header h1 { margin: 0; color: #101827; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; }
.user-apps-header p:not(.eyebrow) { max-width: 560px; margin: 10px 0 0; color: #526078; font-size: 15px; line-height: 1.6; }
.user-apps-create, .user-apps-empty button { border: 0; border-radius: 10px; padding: 11px 16px; background: #315fd4; color: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: 0 8px 18px rgba(49,95,212,.18); }
.user-apps-create:hover, .user-apps-empty button:hover { background: #244db8; }
.user-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.user-app-card { display: flex; min-width: 0; flex-direction: column; padding: 21px; border: 1px solid #dce3ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(31,48,78,.06); }
.user-app-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.user-app-status { border-radius: 999px; padding: 5px 9px; background: #e9f8ef; color: #167044; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.user-app-id { overflow: hidden; color: #66748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-app-card h2 { overflow: hidden; margin: 0; color: #162033; font-size: 20px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.user-app-card-meta { margin: 7px 0 22px; color: #5e6d83; font-size: 12px; }
.user-app-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 15px; padding: 14px 0; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }
.user-app-card-details span { color: #66748b; font-size: 11px; }
.user-app-card-details strong { overflow: hidden; color: #26344a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-app-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; color: #315fd4; font-size: 13px; font-weight: 750; text-decoration: none; }
.user-app-open:hover { color: #183d9e; text-decoration: underline; }
.user-apps-empty { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 300px; max-width: 760px; margin: 0 auto; padding: 40px 24px; border: 1px dashed #cbd5e1; border-radius: 16px; background: rgba(255,255,255,.7); text-align: center; }
.user-apps-empty-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 15px; border-radius: 12px; background: #eaf0ff; color: #315fd4; font-size: 24px; }
.user-apps-empty strong { color: #1b273b; font-size: 17px; }
.user-apps-empty span { max-width: 420px; margin: 8px 0 20px; color: #58677d; font-size: 13px; line-height: 1.55; }
@media (max-width: 680px) {
  .user-apps-page { padding: 22px 16px 32px; }
  .user-apps-header { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .user-apps-header h1 { font-size: 34px; }
  .user-apps-create { width: 100%; }
  .user-app-card { padding: 17px; }
}

/* App operating dashboard — light command center with responsive module navigation. */
.ops-page { min-height: 100%; overflow: auto; background: #f6f8fb; color: #172033; padding: clamp(20px, 4vw, 48px); }
.ops-header { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 24px; max-width: 1240px; margin: 0 auto 28px; }
.ops-back { color: #315fd4; font-size: 13px; font-weight: 750; padding: 8px 0; }
.ops-title { min-width: 0; }
.ops-title h1 { margin: 8px 0 3px; color: #101827; font-size: clamp(26px, 3.5vw, 42px); letter-spacing: -.045em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-title p { color: #5b6880; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-status { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #e9f8ef; color: #167044; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-live-link { align-self: center; color: #315fd4; font-size: 13px; font-weight: 750; white-space: nowrap; }
.ops-layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; }
.ops-nav { display: flex; align-self: start; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid #e0e6ef; border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(31,48,78,.05); }
.ops-nav button { padding: 10px 11px; border-radius: 8px; color: #647188; text-align: left; font-size: 12px; font-weight: 650; }
.ops-nav button:hover { background: #f1f5fb; color: #1d2b42; }
.ops-nav button.active { background: #eaf0ff; color: #244db8; }
.ops-main { min-width: 0; }
.ops-intro, .ops-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ops-intro h2, .ops-section-head h2 { margin: 5px 0 5px; color: #121c2d; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.ops-intro p:not(.eyebrow), .ops-section-head > p:last-child { max-width: 650px; color: #59677d; font-size: 14px; line-height: 1.6; }
.ops-intro .eyebrow, .ops-section-head .eyebrow, .ops-panel .eyebrow { margin: 0; color: #315fd4; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.ops-primary { flex-shrink: 0; border-radius: 9px; padding: 11px 15px; background: #315fd4; color: #fff; font-size: 12px; font-weight: 750; }
.ops-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ops-metric, .ops-panel { border: 1px solid #dfe5ee; border-radius: 13px; background: #fff; box-shadow: 0 7px 22px rgba(31,48,78,.045); }
.ops-metric { padding: 17px; }
.ops-metric span, .ops-metric small { display: block; color: #68758a; font-size: 11px; }
.ops-metric strong { display: block; margin: 9px 0 3px; color: #152139; font-size: 26px; letter-spacing: -.04em; }
.ops-panels, .ops-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ops-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops-panel { padding: 20px; }
.ops-panel h3 { margin: 5px 0 17px; color: #172238; font-size: 17px; }
.ops-row, .ops-monitor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; border-top: 1px solid #edf0f5; }
.ops-row strong, .ops-monitor strong { color: #26344a; font-size: 13px; }
.ops-row p, .ops-monitor p, .ops-placeholder { margin-top: 4px; color: #66748b; font-size: 12px; line-height: 1.55; }
.ops-row button, .ops-monitor button, .ops-text-action { flex-shrink: 0; color: #315fd4; font-size: 12px; font-weight: 750; }
.ops-monitor { align-items: flex-start; justify-content: flex-start; }
.ops-monitor > div { flex: 1; }
.ops-monitor-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px #fff6df; }
.ops-section-head { display: block; }
.ops-section-head > p:last-child { margin-top: 8px; }
.ops-module-grid .ops-panel { min-height: 164px; }
.ops-placeholder { margin: 18px 0 16px; }
@media (max-width: 900px) { .ops-header { grid-template-columns: auto 1fr; } .ops-live-link { grid-column: 2; grid-row: 1; justify-self: end; } .ops-layout { grid-template-columns: 1fr; } .ops-nav { display: flex; flex-direction: row; overflow-x: auto; } .ops-nav button { min-width: max-content; } .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ops-page { padding: 18px 14px 30px; } .ops-header { gap: 12px; } .ops-title h1 { font-size: 27px; } .ops-live-link { grid-column: 1 / -1; grid-row: auto; justify-self: start; } .ops-intro { align-items: stretch; flex-direction: column; } .ops-primary { width: 100%; } .ops-panels, .ops-module-grid { grid-template-columns: 1fr; } .ops-metrics { gap: 8px; } .ops-metric { padding: 13px; } .ops-metric strong { font-size: 21px; } }
/* App Factory live run activity: readable light surfaces, compact milestones, and mobile-safe event rows. */
.af-run-activity {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid #dfe5ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 45, 61, 0.06);
}

.af-run-activity .af-plans-header {
  margin-bottom: 0.9rem;
}

.af-run-activity .af-plans-header h2 {
  color: #172235;
}

.af-run-activity .af-section-note,
.af-run-step p {
  color: #4a5a70;
}

.af-live-pulse {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: #168a63;
  box-shadow: 0 0 0 4px rgba(22, 138, 99, 0.12);
  vertical-align: 0.05em;
}

.af-run-steps {
  display: grid;
  gap: 0.65rem;
}

.af-run-step {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.75rem 0.8rem;
  border: 1px solid #e7ebf2;
  border-radius: 12px;
  background: #f8fafc;
}

.af-run-step-marker {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: #e4f4ed;
  color: #167653;
  font-weight: 800;
}

.af-run-step-copy {
  min-width: 0;
}

.af-run-step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.af-run-step-top strong {
  color: #1e2b3e;
  font-size: 0.83rem;
}

.af-run-step-top time {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.af-run-step p {
  margin: 0.28rem 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.5;
}

.af-run-step-empty {
  background: #f7fbff;
  border-color: #dbeaf6;
}

@media (max-width: 640px) {
  .af-run-activity {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 14px;
  }

  .af-run-activity .af-plans-header {
    align-items: flex-start;
    gap: 0.6rem;
  }

  .af-run-step-top {
    display: grid;
    gap: 0.15rem;
  }
}

/* App Factory workspace shell: restrained light surfaces, stronger hierarchy, and a deliberate collapsed-navigation posture. */
.app-layout {
  min-width: 0;
  background: #f6f7f9;
}
.sidebar {
  box-shadow: 10px 0 28px rgba(15, 23, 42, .06);
  transition: width 180ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.sidebar-logo span {
  letter-spacing: -.03em;
  font-weight: 800;
}
.sidebar-primary-nav {
  border-top: 1px solid rgba(15, 23, 42, .06);
}
.sidebar-item {
  font-weight: 700;
  letter-spacing: -.01em;
}
.sidebar-item.active {
  box-shadow: inset 3px 0 0 #111, 0 1px 0 rgba(15, 23, 42, .04);
}
.sidebar-section-row span,
.sidebar-task-group,
.sidebar-user-email {
  letter-spacing: .08em;
}
.sidebar-task-title {
  font-weight: 600;
}
.mobile-nav-toggle {
  display: inline-flex;
  gap: 8px;
  width: auto;
  min-width: 42px;
  padding: 0 12px;
  border-color: #d5d9e0;
  background: rgba(255, 255, 255, .98);
  color: #17191d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.mobile-nav-toggle:hover {
  border-color: #9aa3af;
  background: #f8fafc;
  transform: translateY(-1px);
}
.mobile-nav-toggle:active {
  transform: scale(.97);
}
.af-page {
  background: #f6f7f9;
}
.af-kicker,
.af-health-card > span,
.af-section-label {
  font-weight: 800;
  letter-spacing: .13em;
}
.af-title {
  letter-spacing: -.045em;
  font-weight: 800;
}
.af-health-card,
.af-run-card,
.af-stage-rail {
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}
@media (min-width: 769px) {
  .mobile-nav-toggle { top: 16px; left: 16px; }
  .sidebar-is-collapsed .content-area { width: 100%; }
}
@media (max-width: 768px) {
  .mobile-nav-toggle { top: 10px; left: 10px; }
  .sidebar-is-open .mobile-nav-toggle { display: none; }
}

/* Apps product surface: a detached same-site marketplace shell with its own navigation, hierarchy, and app-entry rhythm. */
.apps-surface-layout { background: #f5f6f8; }
.apps-content-area { background: #f5f6f8; }
.apps-hub { min-height: 100%; overflow: auto; background: #f5f6f8; color: #111827; }
.apps-hub-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 34px; min-height: 68px; padding: 0 clamp(18px, 4vw, 56px); background: #111318; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.apps-wordmark { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 18px; font-weight: 850; letter-spacing: -.05em; }
.apps-wordmark:first-letter { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: #fff; color: #111318; font-size: 12px; letter-spacing: 0; }
.apps-wordmark span { display: inline; }
.apps-global-nav { display: flex; align-items: stretch; align-self: stretch; gap: 22px; }
.apps-global-nav button { position: relative; color: #9da4b2; font-size: 12px; font-weight: 750; }
.apps-global-nav button:hover, .apps-global-nav button.active { color: #fff; }
.apps-global-nav button.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #fff; content: ''; }
.apps-global-nav button span { display: inline-grid; min-width: 17px; height: 17px; margin-left: 4px; place-items: center; border-radius: 99px; background: #303540; color: #dbe0e9; font-size: 10px; }
.apps-top-actions { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.apps-session-chip { color: #a8afbc; font-size: 11px; }
.apps-top-actions button { padding: 8px 11px; border: 1px solid #3a404b; border-radius: 7px; color: #f7f8fa; font-size: 11px; font-weight: 750; }
.apps-top-actions button:hover { background: #262b34; }
.apps-hub-main { width: min(1280px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px) 56px; }
.apps-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; min-height: 270px; padding: clamp(46px, 8vw, 90px) 0 42px; border-bottom: 1px solid #dfe3e8; }
.apps-hero > div { max-width: 690px; }
.apps-eyebrow { margin: 0 0 10px; color: #5c6677; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.apps-hero h1 { max-width: 730px; margin: 0; color: #111827; font-size: clamp(34px, 5vw, 66px); font-weight: 850; letter-spacing: -.065em; line-height: .98; }
.apps-hero p:not(.apps-eyebrow) { max-width: 560px; margin: 20px 0 0; color: #667085; font-size: 15px; line-height: 1.6; }
.apps-hero-cta { flex-shrink: 0; padding: 13px 16px; border-radius: 8px; background: #17191e; color: #fff; font-size: 12px; font-weight: 800; }
.apps-hero-cta:hover { background: #2a2e36; transform: translateY(-1px); }
.apps-hero-cta span { margin-left: 10px; color: #b6becb; }
.apps-category-row { display: flex; gap: 7px; padding: 24px 0 28px; overflow-x: auto; }
.apps-category-row button { flex-shrink: 0; padding: 9px 13px; border: 1px solid #dfe3e8; border-radius: 7px; background: #fff; color: #687386; font-size: 12px; font-weight: 750; }
.apps-category-row button:hover, .apps-category-row button.active { border-color: #17191e; background: #17191e; color: #fff; }
.apps-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.apps-section-head h2 { margin: 0; color: #141821; font-size: clamp(22px, 3vw, 32px); font-weight: 850; letter-spacing: -.045em; }
.apps-section-head > span { color: #788396; font-size: 12px; }
.apps-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.apps-market-card { overflow: hidden; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; cursor: pointer; box-shadow: 0 7px 24px rgba(29, 39, 55, .045); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.apps-market-card:hover { border-color: #b6beca; box-shadow: 0 14px 30px rgba(29, 39, 55, .10); transform: translateY(-3px); }
.apps-market-card-art { display: flex; align-items: flex-start; justify-content: space-between; min-height: 145px; padding: 18px; background: linear-gradient(140deg, #22262d, #596473); color: #fff; }
.apps-market-card-art > span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 12px; background: rgba(255,255,255,.12); font-size: 21px; font-weight: 850; }
.apps-market-card-art small { padding: 5px 7px; border-radius: 5px; background: rgba(0,0,0,.25); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.apps-market-card-body { padding: 16px; }
.apps-market-meta { display: flex; justify-content: space-between; gap: 10px; color: #7b8697; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.apps-market-card-body h3 { margin: 12px 0 6px; color: #161c27; font-size: 18px; font-weight: 850; letter-spacing: -.03em; }
.apps-market-card-body p { min-height: 38px; margin: 0; color: #6d788a; font-size: 12px; line-height: 1.55; }
.apps-market-footer { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 13px; border-top: 1px solid #edf0f3; color: #2e3949; font-size: 11px; font-weight: 800; }
.apps-market-footer b { font-size: 15px; }
.apps-empty-state { display: grid; min-height: 220px; place-items: center; padding: 32px; border: 1px dashed #cdd4df; border-radius: 12px; background: rgba(255,255,255,.6); text-align: center; }
.apps-empty-state p { max-width: 450px; margin: 8px 0 18px; color: #687386; font-size: 13px; line-height: 1.55; }
.apps-empty-state button { padding: 10px 14px; border-radius: 7px; background: #17191e; color: #fff; font-size: 12px; font-weight: 800; }
.apps-empty-mark { display: grid; width: 44px; height: 44px; margin-bottom: 9px; place-items: center; border-radius: 11px; background: #e6e9ee; color: #343b46; font-size: 24px; }
.apps-bottom-rail { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 54px; padding: 27px 0 0; border-top: 1px solid #dfe3e8; }
.apps-bottom-rail h2 { margin: 0; color: #151a23; font-size: 24px; font-weight: 850; letter-spacing: -.045em; }
.apps-bottom-rail p:not(.apps-eyebrow) { max-width: 620px; margin: 8px 0 0; color: #687386; font-size: 13px; line-height: 1.55; }
.apps-bottom-rail button { flex-shrink: 0; color: #17191e; font-size: 12px; font-weight: 850; }
.apps-bottom-rail button span { margin-left: 8px; }
.apps-hub > .ops-page { min-height: calc(100vh - 68px); }
.apps-hub > .ops-page .ops-header { padding-top: 8px; }
@media (max-width: 900px) { .apps-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apps-hero { align-items: flex-start; flex-direction: column; } }
@media (max-width: 640px) { .apps-hub-topbar { gap: 15px; min-height: 60px; padding: 0 15px; } .apps-wordmark span, .apps-session-chip { display: none; } .apps-global-nav { gap: 13px; } .apps-global-nav button { font-size: 11px; } .apps-top-actions button { padding: 7px 8px; } .apps-hub-main { padding-right: 15px; padding-left: 15px; } .apps-hero { min-height: 0; padding: 52px 0 32px; } .apps-hero h1 { font-size: 42px; } .apps-hero-cta { width: 100%; } .apps-card-grid { grid-template-columns: 1fr; } .apps-section-head { align-items: flex-start; flex-direction: column; gap: 6px; } .apps-bottom-rail { align-items: flex-start; flex-direction: column; } }

.apps-detail-topbar { display: flex; align-items: center; gap: 14px; min-height: 60px; margin: -clamp(20px, 4vw, 48px) calc(-1 * clamp(20px, 4vw, 48px)) 28px; padding: 0 clamp(18px, 4vw, 56px); background: #111318; color: #fff; }
.apps-detail-topbar span { color: #969fad; font-size: 11px; }
.apps-detail-topbar > button:last-child { margin-left: auto; color: #d8dde6; font-size: 11px; font-weight: 750; }
.apps-detail-wordmark { color: #fff; font-size: 14px; font-weight: 850; letter-spacing: -.02em; }
.apps-detail-wordmark:hover, .apps-detail-topbar > button:last-child:hover { color: #fff; }
@media (max-width: 640px) { .apps-detail-topbar { margin-right: -20px; margin-left: -20px; padding-right: 15px; padding-left: 15px; } }

/* Reference-inspired app operations surface and frontend-only vibe builder. */
.ops-reference-header { display: flex; align-items: center; gap: 24px; min-height: 56px; margin: -8px 0 24px; padding: 0 0 12px; border-bottom: 1px solid #e1e5eb; }
.ops-reference-brand { display: flex; align-items: center; gap: 9px; min-width: 200px; color: #172033; font-size: 14px; }
.ops-reference-mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #17191e; color: #fff; font-size: 12px; font-weight: 850; }
.ops-reference-search { display: flex; align-items: center; gap: 8px; width: min(320px, 42vw); margin: 0 auto; padding: 9px 13px; border-radius: 9px; background: #eceef1; color: #8a93a0; font-size: 13px; }
.ops-reference-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ops-reference-actions button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #4d5868; font-size: 16px; }
.ops-reference-actions button:hover { background: #eceef1; }
.ops-reference-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #465364; color: #fff; font-size: 10px; font-weight: 800; }
.ops-layout-reference { grid-template-columns: 188px minmax(0, 1fr) 308px; gap: 24px; }
.ops-layout-reference .ops-nav { box-shadow: none; }
.ops-layout-reference .ops-nav button { display: flex; align-items: center; gap: 9px; }
.ops-nav-icon { display: inline-grid; width: 19px; place-items: center; color: #7a8594; font-size: 15px; }
.ops-nav button.active .ops-nav-icon { color: #1f2937; }
.ops-reference-intro { align-items: flex-start; }
.ops-reference-intro h2 { font-size: clamp(28px, 3vw, 42px); }
.ops-reference-chart { margin: 16px 0; padding: 20px; border: 1px solid #dfe5ee; border-radius: 13px; background: #fff; box-shadow: 0 7px 22px rgba(31,48,78,.045); }
.ops-reference-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ops-reference-chart-head h3 { margin: 4px 0 0; color: #172238; font-size: 18px; }
.ops-reference-chart-head > span { padding: 5px 8px; border-radius: 6px; background: #f1f3f5; color: #727d8d; font-size: 10px; }
.ops-chart-placeholder { display: flex; align-items: end; gap: 2.5%; height: 150px; margin-top: 20px; padding: 0 8px; border-bottom: 1px solid #e7ebef; background: repeating-linear-gradient(to top, transparent 0, transparent 49px, #f0f2f5 50px); }
.ops-chart-placeholder i { flex: 1; min-height: 20px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, #e1e5ea, #f1f3f5); }
.ops-chart-placeholder i:nth-child(1) { height: 26%; } .ops-chart-placeholder i:nth-child(2) { height: 34%; } .ops-chart-placeholder i:nth-child(3) { height: 29%; } .ops-chart-placeholder i:nth-child(4) { height: 46%; } .ops-chart-placeholder i:nth-child(5) { height: 38%; } .ops-chart-placeholder i:nth-child(6) { height: 53%; } .ops-chart-placeholder i:nth-child(7) { height: 49%; } .ops-chart-placeholder i:nth-child(8) { height: 62%; }
.ops-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #8993a1; font-size: 10px; }
.ops-chat-panel { display: flex; min-height: 610px; flex-direction: column; overflow: hidden; border-left: 1px solid #dde2e8; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgba(31,48,78,.045); }
.ops-chat-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 15px; border-bottom: 1px solid #e8ebef; color: #172033; font-size: 15px; }
.ops-chat-head button { color: #798494; font-size: 22px; }
.ops-chat-body { flex: 1; padding: 18px 14px 10px; }
.ops-chat-empty { display: flex; min-height: 165px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #bbc2cb; font-size: 23px; }
.ops-chat-empty span { color: #8b95a3; font-size: 12px; }
.ops-chat-suggestion { display: block; width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid #e2e6eb; border-radius: 9px; background: #fff; color: #293446; text-align: left; font-size: 12px; }
.ops-chat-suggestion:hover { border-color: #b8c1cc; background: #f8f9fa; }
.ops-setup-guide { margin: 0 12px 12px; padding: 13px; border: 1px solid #e1e5ea; border-radius: 11px; background: #fff; }
.ops-setup-guide > div:first-child { display: flex; justify-content: space-between; color: #273246; font-size: 12px; }
.ops-setup-guide > div:first-child span { color: #798494; }
.ops-setup-progress { height: 6px; margin: 10px 0 9px; border-radius: 99px; background: #e9ecf0; }
.ops-setup-guide p { display: flex; justify-content: space-between; margin: 10px 0 0; color: #4b586a; font-size: 11px; }
.ops-setup-guide small { color: #8b95a3; }
.ops-chat-input { display: flex; gap: 7px; padding: 11px; border-top: 1px solid #e8ebef; }
.ops-chat-input input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #dfe4ea; border-radius: 8px; outline: none; font-size: 11px; }
.ops-chat-input button { width: 31px; border-radius: 8px; background: #17191e; color: #fff; font-weight: 800; }
.vibe-builder { min-height: 650px; border: 1px solid #dfe5ee; border-radius: 13px; background: #fff; box-shadow: 0 7px 22px rgba(31,48,78,.045); }
.vibe-builder-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 22px; border-bottom: 1px solid #e5e9ee; }
.vibe-builder-header h2 { margin: 3px 0 0; color: #151c29; font-size: clamp(22px, 3vw, 31px); font-weight: 850; letter-spacing: -.045em; }
.vibe-builder-actions { display: flex; align-items: center; gap: 8px; }
.vibe-builder-actions span { color: #8993a1; font-size: 10px; }
.vibe-builder-actions button { padding: 9px 11px; border-radius: 7px; background: #e9ecf0; color: #8d96a1; font-size: 11px; font-weight: 750; }
.vibe-builder-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr) 260px; min-height: 560px; }
.vibe-builder-left { padding: 16px 12px; border-right: 1px solid #e5e9ee; background: #fbfcfd; }
.vibe-builder-back { margin-bottom: 25px; color: #536071; font-size: 11px; font-weight: 750; }
.vibe-builder-label { margin: 0 9px 8px; color: #9aa3af; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.vibe-builder-tab { display: block; width: 100%; padding: 10px 9px; border-radius: 7px; color: #748092; text-align: left; font-size: 11px; font-weight: 650; }
.vibe-builder-tab:hover, .vibe-builder-tab.active { background: #e9edf2; color: #202a38; }
.vibe-builder-note { margin: 30px 5px 0; padding: 11px; border: 1px solid #dde3e9; border-radius: 8px; background: #fff; }
.vibe-builder-note strong { color: #334154; font-size: 10px; }
.vibe-builder-note p { margin: 6px 0 0; color: #8993a1; font-size: 10px; line-height: 1.45; }
.vibe-builder-canvas { padding: 20px; background: #f1f3f5; }
.vibe-browser-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #8a94a1; font-size: 11px; }
.vibe-browser-bar div { flex: 1; padding: 8px 11px; border-radius: 6px; background: #fff; color: #798494; }
.vibe-preview-card { min-height: 460px; overflow: hidden; border: 1px solid #dfe4e9; border-radius: 9px; background: #fff; box-shadow: 0 8px 20px rgba(34,46,60,.08); }
.vibe-preview-nav { display: flex; align-items: center; gap: 20px; padding: 14px 18px; border-bottom: 1px solid #eef0f3; color: #7d8795; font-size: 10px; }
.vibe-preview-nav strong { margin-right: auto; color: #212a38; font-size: 13px; }
.vibe-preview-hero { display: grid; min-height: 260px; place-items: center; align-content: center; padding: 30px; background: linear-gradient(145deg, #f8fafb, #e8edf1); text-align: center; }
.vibe-preview-hero p { margin: 0 0 12px; color: #8993a1; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.vibe-preview-hero h3 { margin: 0; color: #273243; font-size: 25px; letter-spacing: -.04em; }
.vibe-preview-hero span { margin-top: 9px; color: #788496; font-size: 11px; }
.vibe-preview-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; }
.vibe-preview-blocks i { height: 70px; border-radius: 7px; background: #eef1f4; }
.vibe-builder-chat { display: flex; flex-direction: column; padding: 15px; border-left: 1px solid #e5e9ee; }
.vibe-chat-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #e8ebef; }
.vibe-chat-head div { display: grid; gap: 3px; }
.vibe-chat-head strong { color: #222c3a; font-size: 14px; }
.vibe-chat-head span { color: #8a94a1; font-size: 10px; }
.vibe-chat-head > span { color: #4d9c71; font-size: 10px; }
.vibe-chat-message { display: flex; gap: 9px; padding: 20px 0; color: #5f6d7d; font-size: 11px; line-height: 1.5; }
.vibe-chat-message > span { display: grid; width: 22px; height: 22px; flex-shrink: 0; place-items: center; border-radius: 6px; background: #17191e; color: #fff; font-size: 10px; font-weight: 850; }
.vibe-chat-message p { margin: 0; }
.vibe-chat-suggestions { display: grid; gap: 7px; margin-bottom: auto; }
.vibe-chat-suggestions button { padding: 9px 10px; border: 1px solid #e1e5ea; border-radius: 7px; color: #536071; text-align: left; font-size: 10px; }
.vibe-chat-suggestions button:hover { background: #f7f8f9; }
.vibe-builder-chat textarea { min-height: 85px; margin-top: 18px; padding: 10px; border: 1px solid #dfe4e9; border-radius: 8px; outline: none; resize: vertical; font-size: 11px; }
.vibe-chat-send { margin-top: 8px; padding: 10px; border-radius: 7px; background: #17191e; color: #fff; font-size: 11px; font-weight: 800; }
.vibe-chat-send:disabled { opacity: .45; }
@media (max-width: 1100px) { .ops-layout-reference { grid-template-columns: 170px minmax(0, 1fr); } .ops-chat-panel { grid-column: 2; min-height: 370px; } .vibe-builder-layout { grid-template-columns: 150px minmax(0, 1fr); } .vibe-builder-chat { grid-column: 1 / -1; min-height: 340px; border-top: 1px solid #e5e9ee; border-left: 0; } }
@media (max-width: 700px) { .ops-reference-header { gap: 10px; } .ops-reference-brand { min-width: 0; } .ops-reference-brand strong { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ops-reference-search { width: 150px; } .ops-reference-search span { display: none; } .ops-layout-reference { grid-template-columns: 1fr; } .ops-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-chat-panel { grid-column: auto; } .vibe-builder-header { align-items: flex-start; flex-direction: column; } .vibe-builder-actions { width: 100%; } .vibe-builder-layout { grid-template-columns: 1fr; } .vibe-builder-left { border-right: 0; border-bottom: 1px solid #e5e9ee; } .vibe-builder-note { display: none; } .vibe-builder-canvas { padding: 10px; } }

/* Pixel-alignment pass for the supplied 1920×984 operations reference. The app workspace becomes a full-bleed frame: 68px header, 280px nav rail, fluid center, and 390px AI rail. */
.apps-hub > .ops-page { min-height: 100%; padding: 0; background: #fff; }
.apps-hub > .ops-page > .apps-detail-topbar { display: none; }
.apps-hub > .ops-page .ops-reference-header { min-height: 68px; height: 68px; margin: 0; padding: 0 18px; border-bottom: 1px solid #e1e5eb; background: #fff; }
.apps-hub > .ops-page .ops-reference-brand { min-width: 280px; }
.apps-hub > .ops-page .ops-reference-search { width: 310px; }
.apps-hub > .ops-page .ops-header { display: none; }
.apps-hub > .ops-page .ops-layout-reference { grid-template-columns: 280px minmax(0, 1fr) 390px; gap: 0; width: 100%; max-width: none; min-height: calc(100vh - 68px); margin: 0; }
.apps-hub > .ops-page .ops-layout-reference .ops-nav { min-height: calc(100vh - 68px); padding: 16px 10px; border: 0; border-right: 1px solid #e1e5eb; border-radius: 0; background: #fff; box-shadow: none; }
.apps-hub > .ops-page .ops-layout-reference .ops-nav button { min-height: 39px; padding: 9px 12px; border-radius: 7px; color: #27303d; font-size: 14px; font-weight: 550; }
.apps-hub > .ops-page .ops-layout-reference .ops-nav button.active { background: #eef0f2; color: #151a22; font-weight: 750; }
.apps-hub > .ops-page .ops-main { min-height: calc(100vh - 68px); padding: 42px 28px 56px; background: #fff; }
.apps-hub > .ops-page .ops-reference-intro { margin-bottom: 30px; }
.apps-hub > .ops-page .ops-reference-intro h2 { font-size: 34px; font-weight: 750; letter-spacing: -.05em; }
.apps-hub > .ops-page .ops-reference-intro p:not(.eyebrow) { font-size: 13px; }
.apps-hub > .ops-page .ops-metrics { gap: 0; margin-bottom: 22px; border: 1px solid #e0e4e8; border-radius: 9px; box-shadow: none; }
.apps-hub > .ops-page .ops-metric { min-height: 112px; padding: 18px 16px; border: 0; border-right: 1px solid #e0e4e8; border-radius: 0; box-shadow: none; }
.apps-hub > .ops-page .ops-metric:last-child { border-right: 0; }
.apps-hub > .ops-page .ops-metric span { color: #66717f; font-size: 12px; }
.apps-hub > .ops-page .ops-metric strong { margin-top: 12px; color: #151a22; font-size: 27px; font-weight: 650; }
.apps-hub > .ops-page .ops-metric small { margin-top: 5px; color: #8d96a2; font-size: 10px; }
.apps-hub > .ops-page .ops-reference-chart { min-height: 274px; margin: 0 0 22px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.apps-hub > .ops-page .ops-reference-chart-head { padding-bottom: 12px; border-bottom: 1px solid #e6e9ed; }
.apps-hub > .ops-page .ops-reference-chart-head h3 { font-size: 19px; font-weight: 650; }
.apps-hub > .ops-page .ops-chart-placeholder { height: 186px; margin-top: 0; padding: 0 8px; background: repeating-linear-gradient(to top, transparent 0, transparent 61px, #f3f4f6 62px); }
.apps-hub > .ops-page .ops-panels { gap: 12px; }
.apps-hub > .ops-page .ops-panel { border-color: #e0e4e8; border-radius: 9px; box-shadow: none; }
.apps-hub > .ops-page .ops-chat-panel { min-height: calc(100vh - 68px); height: calc(100vh - 68px); border: 0; border-left: 1px solid #e1e5eb; border-radius: 0; box-shadow: none; }
.apps-hub > .ops-page .ops-chat-head { min-height: 57px; padding: 0 16px; font-size: 16px; }
.apps-hub > .ops-page .ops-chat-body { padding: 18px 15px 10px; }
.apps-hub > .ops-page .ops-chat-empty { min-height: 168px; }
.apps-hub > .ops-page .ops-setup-guide { margin: 0 14px 14px; }
@media (max-width: 1200px) { .apps-hub > .ops-page .ops-layout-reference { grid-template-columns: 232px minmax(0, 1fr) 330px; } .apps-hub > .ops-page .ops-reference-brand { min-width: 232px; } }
@media (max-width: 980px) { .apps-hub > .ops-page .ops-layout-reference { grid-template-columns: 210px minmax(0, 1fr); } .apps-hub > .ops-page .ops-chat-panel { grid-column: 2; height: auto; min-height: 390px; border-top: 1px solid #e1e5eb; border-left: 0; } }
@media (max-width: 700px) { .apps-hub > .ops-page .ops-reference-header { padding: 0 12px; } .apps-hub > .ops-page .ops-reference-brand { min-width: 0; } .apps-hub > .ops-page .ops-reference-brand strong { max-width: 115px; } .apps-hub > .ops-page .ops-reference-search { width: 145px; } .apps-hub > .ops-page .ops-layout-reference { grid-template-columns: 1fr; } .apps-hub > .ops-page .ops-layout-reference .ops-nav { min-height: auto; border-right: 0; border-bottom: 1px solid #e1e5eb; } .apps-hub > .ops-page .ops-main { min-height: auto; padding: 28px 16px 40px; } .apps-hub > .ops-page .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apps-hub > .ops-page .ops-metric:nth-child(2) { border-right: 0; } .apps-hub > .ops-page .ops-metric:nth-child(-n+2) { border-bottom: 1px solid #e0e4e8; } .apps-hub > .ops-page .ops-chat-panel { grid-column: auto; height: auto; min-height: 390px; } }

/* Research-backed category workspaces: dense operator surfaces, explicit empty states, and table-first workflows. */
.ops-section-head-enhanced { align-items: flex-start; margin-bottom: 18px; }
.ops-section-head-enhanced > div:first-child { min-width: 0; }
.ops-section-head-enhanced > div:first-child > p:last-child { margin: 8px 0 0; }
.ops-section-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ops-secondary-action, .ops-table-toolbar button { border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; color: #243147; padding: 9px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ops-secondary-action:hover, .ops-table-toolbar button:hover { border-color: #b8c6db; background: #f7f9fc; }
.ops-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ops-kpi-card { min-height: 104px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; padding: 15px; box-shadow: 0 7px 22px rgba(31,48,78,.035); }
.ops-kpi-card span, .ops-kpi-card small { display: block; color: #68758a; font-size: 11px; }
.ops-kpi-card strong { display: block; margin: 11px 0 4px; color: #152139; font-size: 25px; letter-spacing: -.04em; }
.ops-category-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 14px; border-bottom: 1px solid #e2e7ef; }
.ops-category-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #718097; padding: 10px 12px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ops-category-tabs button:hover { color: #20304b; }
.ops-category-tabs button.active { border-bottom-color: #315fd4; color: #1e4fb8; }
.ops-category-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; }
.ops-category-grid .ops-panel { min-height: 240px; }
.ops-empty-module { display: grid; justify-items: start; align-content: center; min-height: 150px; }
.ops-empty-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 9px; background: #eef3ff; color: #315fd4; font-size: 20px; }
.ops-empty-module strong { color: #172238; font-size: 15px; }
.ops-empty-module p { max-width: 450px; margin: 8px 0 14px; color: #68758a; font-size: 13px; line-height: 1.55; }
.ops-action-list { display: grid; gap: 0; }
.ops-action-list .ops-row { padding: 13px 0; border-top: 1px solid #edf0f5; }
.ops-action-list .ops-row:first-child { padding-top: 0; border-top: 0; }
.ops-data-table-wrap { overflow: hidden; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; box-shadow: 0 7px 22px rgba(31,48,78,.035); }
.ops-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e6eaf0; }
.ops-filter-chips { display: flex; gap: 6px; overflow-x: auto; }
.ops-filter-chips button { padding: 7px 9px; border-radius: 7px; font-size: 11px; }
.ops-filter-chips button.active { border-color: #c8d5f5; background: #eef3ff; color: #244fae; }
.ops-data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.ops-data-table th { padding: 12px 14px; background: #fafbfd; color: #778398; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.ops-data-table td { border-top: 1px solid #edf0f5; }
.ops-table-empty { display: grid; justify-items: center; gap: 6px; padding: 55px 20px; text-align: center; }
.ops-table-empty strong { color: #243147; font-size: 14px; }
.ops-table-empty span { max-width: 480px; color: #778398; font-size: 12px; line-height: 1.5; }
@media (max-width: 980px) { .ops-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-category-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ops-section-head-enhanced { display: block; } .ops-section-actions { margin-top: 14px; } .ops-section-actions button { flex: 1; } .ops-kpi-grid { gap: 8px; } .ops-kpi-card { min-height: 92px; padding: 12px; } .ops-kpi-card strong { font-size: 21px; } .ops-table-toolbar { align-items: flex-start; flex-direction: column; } .ops-data-table-wrap { overflow-x: auto; } }

/* Helpfull AI panel: live Jostavan operator assistant states. */
.ops-chat-head > div { display: grid; gap: 3px; }
.ops-chat-head small { color: #8a929c; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.ops-chat-empty { display: grid; justify-items: center; gap: 10px; padding: 42px 18px 20px; color: #aab1b9; text-align: center; }
.ops-chat-empty > span { color: #a0a7af; font-size: 14px; }
.ops-chat-empty > small { max-width: 220px; color: #a7adb5; font-size: 12px; line-height: 1.45; }
.ops-chat-suggestions { display: grid; gap: 8px; }
.ops-chat-suggestion:disabled { cursor: wait; opacity: .55; }
.ops-chat-messages { display: grid; gap: 12px; padding: 18px 0; }
.ops-chat-message { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.ops-chat-message > span { display: grid; min-height: 24px; place-items: center; border-radius: 8px; background: #f0f1f2; color: #5c6570; font-size: 10px; font-weight: 700; }
.ops-chat-message p { margin: 0; color: #303841; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-chat-message-user > span { background: #1f2328; color: #fff; }
.ops-chat-message-user p { padding: 9px 11px; border-radius: 10px 10px 3px 10px; background: #f0f1f2; }
.ops-chat-message-assistant p { padding-top: 4px; }
.ops-chat-thinking { color: #8a929c !important; font-style: italic; }
.ops-chat-error { margin: 4px 0 10px; padding: 9px 10px; border: 1px solid #f2c9c9; border-radius: 8px; background: #fff6f6; color: #a63b3b; font-size: 11px; line-height: 1.4; }
.ops-chat-input button:disabled { cursor: not-allowed; opacity: .45; }

/* Observability: interruptive runtime alerts and compact telemetry summaries. */
.ops-runtime-alert{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;padding:14px 16px;border:1px solid #f2b8b5;border-left:4px solid #d84a43;border-radius:10px;background:#fff7f6;box-shadow:0 8px 22px rgba(94,24,20,.08)}
.ops-runtime-alert-copy{display:flex;align-items:flex-start;gap:12px;min-width:0}.ops-runtime-alert-icon{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#d84a43;color:#fff;font-weight:800}.ops-runtime-alert-copy strong{display:block;color:#5f211e}.ops-runtime-alert-copy p{margin:3px 0 4px;color:#7d3b37;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}.ops-runtime-alert-copy small{color:#9b6a66}.ops-runtime-alert-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.ops-observability-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 22px}.ops-observability-card{min-height:78px;padding:13px 15px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.ops-observability-card span,.ops-observability-card small{display:block;color:#6b7280;font-size:12px}.ops-observability-card strong{display:block;margin:5px 0 2px;color:#111827;font-size:23px;line-height:1}.ops-observability-card.has-issues{border-color:#f2b8b5;background:#fff9f8}.ops-observability-card.has-issues strong{color:#b53b35}
@media (max-width:760px){.ops-runtime-alert{align-items:flex-start;flex-direction:column}.ops-runtime-alert-copy{width:100%}.ops-runtime-alert-copy p{max-width:100%;white-space:normal}.ops-runtime-alert-actions{width:100%;justify-content:flex-end}.ops-observability-strip{grid-template-columns:1fr}}

/* App Factory setup polish: restrained light workspace surfaces, deep ink, cobalt signal, and physically smooth curved transitions. */
.af-setup-page { min-height: 100%; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% -10%, rgba(49, 94, 232, .08), transparent 44%), var(--af-canvas, #f5f7fb); }
.af-setup-page::before, .af-setup-page::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 999px; filter: blur(2px); opacity: .7; }
.af-setup-page::before { width: 420px; height: 420px; top: -230px; right: -150px; background: rgba(49, 94, 232, .08); }
.af-setup-page::after { width: 330px; height: 330px; bottom: -210px; left: -140px; background: rgba(18, 184, 134, .06); }
.af-setup-card, .af-question-card { position: relative; width: min(100%, 720px); margin: clamp(24px, 7vh, 76px) auto 0; padding: clamp(26px, 5vw, 54px); border: 1px solid rgba(15, 23, 42, .11); border-radius: 34px; background: rgba(255, 255, 255, .92); box-shadow: 0 24px 70px rgba(15, 23, 42, .10), 0 2px 0 rgba(255, 255, 255, .9) inset; animation: af-setup-rise .55s cubic-bezier(.23, 1, .32, 1) both; }
.af-setup-card::before, .af-question-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(49, 94, 232, .08); border-radius: 26px; pointer-events: none; }
.af-setup-card h2, .af-question-card h2 { position: relative; margin: 12px 0 10px; color: #172033; letter-spacing: -.04em; line-height: 1.08; }
.af-setup-card p, .af-question-card p { position: relative; max-width: 560px; color: #475467; line-height: 1.65; }
.af-setup-orbit { position: relative; display: flex; align-items: center; gap: 8px; width: fit-content; height: 28px; margin-bottom: 22px; }
.af-setup-orbit::before { content: ''; position: absolute; inset: -12px -18px; border: 1px solid rgba(49, 94, 232, .16); border-radius: 999px; transform: rotate(-8deg); }
.af-setup-orbit span { display: block; width: 9px; height: 9px; border-radius: 50%; background: #315ee8; box-shadow: 0 0 0 5px rgba(49, 94, 232, .10); animation: af-orbit-pulse 1.5s cubic-bezier(.23, 1, .32, 1) infinite; }
.af-setup-orbit span:nth-child(2) { animation-delay: .14s; background: #12b886; } .af-setup-orbit span:nth-child(3) { animation-delay: .28s; background: #172033; }
.af-setup-progress, .af-question-progress > div { overflow: hidden; height: 10px; border-radius: 999px; background: #e9edf4; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); }
.af-setup-progress { position: relative; margin-top: 30px; }
.af-setup-progress span, .af-question-progress > div > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #172033, #315ee8 70%, #12b886); box-shadow: 0 4px 16px rgba(49, 94, 232, .24); transition: width .7s cubic-bezier(.23, 1, .32, 1); }
.af-setup-progress-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 11px; color: #667085; font-size: 11px; font-weight: 700; }
.af-question-stage { width: min(100%, 820px); margin: clamp(24px, 6vh, 64px) auto 0; animation: af-question-arrive .48s cubic-bezier(.23, 1, .32, 1) both; }
.af-question-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 4px 16px; color: #667085; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.af-question-progress > div { height: 7px; } .af-question-card { margin-top: 0; }
.af-question-options { position: relative; display: grid; gap: 10px; margin-top: 28px; }
.af-question-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 56px; padding: 14px 17px; border: 1px solid rgba(15, 23, 42, .12); border-radius: 18px; background: #fff; color: #172033; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .18s cubic-bezier(.23, 1, .32, 1), border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.af-question-option span:last-child { color: #315ee8; font-size: 20px; line-height: 1; transition: transform .18s cubic-bezier(.23, 1, .32, 1); }
.af-question-option:hover { transform: translateX(4px); border-color: rgba(49, 94, 232, .45); background: #f8faff; box-shadow: 0 10px 22px rgba(49, 94, 232, .08); } .af-question-option:hover span:last-child { transform: translateX(4px); }
.af-question-option:active { transform: translateX(4px) scale(.985); }
.af-other-answer { display: flex; gap: 10px; margin-top: 12px; animation: af-setup-rise .28s cubic-bezier(.23, 1, .32, 1) both; }
.af-other-answer input { min-width: 0; flex: 1; border: 1px solid rgba(15, 23, 42, .15); border-radius: 16px; padding: 13px 15px; background: #fbfcfe; color: #172033; font: inherit; outline: none; }
.af-other-answer input:focus { border-color: #315ee8; box-shadow: 0 0 0 4px rgba(49, 94, 232, .10); }
.af-other-answer button { border: 0; border-radius: 16px; padding: 0 18px; background: #172033; color: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: transform .18s cubic-bezier(.23, 1, .32, 1), background-color .18s ease; }
.af-other-answer button:hover { background: #315ee8; transform: translateY(-1px); }
@keyframes af-setup-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes af-question-arrive { from { opacity: 0; transform: translateX(22px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes af-orbit-pulse { 0%, 100% { transform: translateY(0) scale(1); opacity: .78; } 50% { transform: translateY(-5px) scale(1.18); opacity: 1; } }
@media (max-width: 640px) { .af-setup-card, .af-question-card { margin-top: 24px; padding: 25px 18px; border-radius: 26px; } .af-setup-card::before, .af-question-card::before { inset: 7px; border-radius: 20px; } .af-setup-progress-meta { align-items: flex-start; flex-direction: column; gap: 4px; } .af-question-progress { gap: 9px; } .af-question-option { min-height: 52px; padding-inline: 14px; border-radius: 15px; } .af-other-answer { flex-direction: column; } .af-other-answer button { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .af-setup-card, .af-question-stage, .af-other-answer, .af-setup-orbit span { animation: none; } .af-setup-progress span, .af-question-progress > div > span, .af-question-option, .af-question-option span:last-child { transition: none; } }

/* Landing product engine: preserve Jostavan's restrained monochrome identity while giving App Factory and Apps Dashboard the strongest visual hierarchy. */
.wl-product-engine { position: relative; overflow: hidden; padding: 104px 24px 34px; color: #f7f7f5; background: #101010; }
.wl-product-engine::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.1), transparent 34%), radial-gradient(circle at 86% 72%, rgba(255,255,255,.06), transparent 30%); }
.wl-product-engine .wl-section-inner { position: relative; z-index: 1; }
.wl-product-engine-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 72px; align-items: end; margin-bottom: 48px; }
.wl-product-engine-title { max-width: 760px; margin: 16px 0 0; font-size: clamp(38px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; font-weight: 640; }
.wl-product-engine-intro { max-width: 460px; margin: 0 0 4px; color: rgba(247,247,245,.68); font-size: 16px; line-height: 1.7; }
.wl-product-engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wl-product-card { position: relative; min-height: 640px; overflow: hidden; padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: #171717; box-shadow: 0 24px 80px rgba(0,0,0,.22); transition: transform .28s cubic-bezier(.23,1,.32,1), border-color .28s ease, background .28s ease; }
.wl-product-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.32); background: #1c1c1c; }
.wl-product-card-dashboard { background: linear-gradient(145deg, #1b1b1b, #131313); }
.wl-product-card-top { display: flex; align-items: center; justify-content: space-between; }
.wl-product-kicker { color: rgba(255,255,255,.58); font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.wl-product-arrow { color: rgba(255,255,255,.45); font-size: 22px; }
.wl-product-visual { position: relative; height: 222px; margin: 26px -26px 28px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.wl-product-visual-factory { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), transparent 25%), linear-gradient(135deg, #242424, #111); }
.wl-factory-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.wl-factory-orbit-one { width: 310px; height: 126px; }
.wl-factory-orbit-two { width: 190px; height: 190px; transform: translate(-50%, -50%) rotate(27deg); border-color: rgba(255,255,255,.11); }
.wl-factory-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: #202020; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.35); }
.wl-factory-core span { font-size: 42px; font-weight: 740; letter-spacing: -.08em; }
.wl-factory-core small { position: absolute; bottom: -32px; width: 180px; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .12em; text-align: center; }
.wl-product-visual-dashboard { display: grid; place-items: center; background: linear-gradient(145deg, #202020, #111); }
.wl-dashboard-window { width: 78%; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: #0f0f0f; box-shadow: 0 20px 42px rgba(0,0,0,.4); transform: perspective(700px) rotateX(8deg) rotateY(-8deg); }
.wl-dashboard-window-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.wl-dashboard-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.28); }
.wl-dashboard-window-bar b { margin-left: auto; color: rgba(255,255,255,.38); font-size: 7px; letter-spacing: .12em; }
.wl-dashboard-window-body { display: grid; grid-template-columns: 28% 1fr; gap: 14px; min-height: 146px; padding: 14px; }
.wl-dashboard-sidebar-line { border-radius: 5px; background: linear-gradient(to bottom, rgba(255,255,255,.2) 0 7px, transparent 7px 18px, rgba(255,255,255,.09) 18px 22px, transparent 22px 35px, rgba(255,255,255,.09) 35px 40px, transparent 40px); }
.wl-dashboard-main-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; align-content: start; }
.wl-dashboard-main-lines > span { height: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: rgba(255,255,255,.035); }
.wl-dashboard-chart { display: flex; align-items: end; gap: 5px; height: 74px; grid-column: 1 / -1; padding: 12px 9px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; }
.wl-dashboard-chart i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.32); }
.wl-dashboard-chart i:nth-child(1) { height: 35%; }.wl-dashboard-chart i:nth-child(2) { height: 54%; }.wl-dashboard-chart i:nth-child(3) { height: 43%; }.wl-dashboard-chart i:nth-child(4) { height: 76%; }.wl-dashboard-chart i:nth-child(5) { height: 92%; background: #f1f1ed; }
.wl-product-card h3 { max-width: 530px; margin: 0 0 14px; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.06; letter-spacing: -.04em; }
.wl-product-card p { max-width: 520px; margin: 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.65; }
.wl-product-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.wl-product-points span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 650; }
.wl-product-link { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
.wl-product-link span { color: rgba(255,255,255,.5); font-size: 18px; transition: transform .2s ease; }
.wl-product-link:hover span { transform: translateX(4px); }
.wl-product-engine-foot { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 2px 0; border-top: 1px solid rgba(255,255,255,.12); }
.wl-product-foot-mark { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; font-weight: 760; }
.wl-product-engine-foot p { flex: 1; margin: 0; color: rgba(255,255,255,.52); font-size: 13px; }
.wl-product-engine-foot button { flex: 0 0 auto; border: 0; color: #fff; background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
.wl-product-engine-foot button span { margin-left: 8px; color: rgba(255,255,255,.5); }
@media (max-width: 820px) {
  .wl-product-engine { padding: 76px 20px 28px; }
  .wl-product-engine-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .wl-product-engine-grid { grid-template-columns: 1fr; }
  .wl-product-card { min-height: auto; padding: 22px; }
  .wl-product-visual { margin-left: -22px; margin-right: -22px; }
  .wl-product-engine-foot { align-items: flex-start; flex-wrap: wrap; }
  .wl-product-engine-foot p { flex-basis: calc(100% - 48px); }
  .wl-product-engine-foot button { margin-left: 47px; }
}
@media (max-width: 480px) {
  .wl-product-engine-title { font-size: 42px; }
  .wl-product-card h3 { font-size: 28px; }
  .wl-product-visual { height: 188px; }
  .wl-dashboard-window { width: 88%; }
  .wl-product-engine-foot button { margin-left: 0; }
}

/* App Factory guide: dark operational atlas — structured, high-contrast, and evidence-led. */
.af-guide-page{max-width:1440px;margin:0 auto;padding-bottom:72px}.af-header-actions{display:flex;align-items:center;gap:10px}.af-guide-btn{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);color:#e7ebf2;border-radius:12px;padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.af-guide-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);transform:translateY(-1px)}.af-guide-btn span{color:#8da8ff;margin-left:5px}.af-guide-nav{display:flex;gap:8px;margin:4px 0 24px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}.af-guide-nav button{border:0;background:transparent;color:#778294;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer}.af-guide-nav button.active,.af-guide-nav button:hover{background:rgba(121,147,255,.12);color:#e9edff}.af-guide-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:32px;padding:42px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:radial-gradient(circle at 12% 0%,rgba(106,127,255,.16),transparent 42%),linear-gradient(135deg,rgba(19,25,39,.98),rgba(11,15,24,.98));box-shadow:0 24px 70px rgba(0,0,0,.28)}.af-kicker{display:block;color:#91a6ff;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.af-guide-hero h2{max-width:760px;margin:14px 0 16px;color:#f5f7fb;font-size:clamp(30px,4vw,56px);line-height:1.02;letter-spacing:-.045em}.af-guide-hero p,.af-guide-section-head p,.af-guide-business-copy p,.af-guide-aftercare-top p,.af-guide-cta p{max-width:680px;color:#9ca7b8;font-size:15px;line-height:1.75}.af-guide-hero-actions{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}.af-guide-hero-actions>span{color:#6f7b8d;font-size:12px}.af-guide-command-card{align-self:stretch;min-height:310px;padding:25px;border:1px solid rgba(146,164,255,.18);border-radius:19px;background:rgba(5,9,17,.56);display:flex;flex-direction:column;justify-content:center}.af-guide-command-label{color:#7386c9;font-size:10px;font-weight:800;letter-spacing:.16em}.af-guide-command-card strong{margin:22px 0 20px;color:#f1f4fb;font-size:28px;letter-spacing:-.04em}.af-guide-command-line{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.07);color:#b8c1cf;font-size:13px}.af-guide-command-line i{width:7px;height:7px;border-radius:50%;background:#88a0ff;box-shadow:0 0 0 4px rgba(136,160,255,.11)}.af-guide-command-card small{margin-top:20px;color:#657287;font-size:11px}.af-guide-section{padding:76px 4px 24px}.af-guide-section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:26px}.af-guide-section-head h2,.af-guide-business h2,.af-guide-aftercare h2,.af-guide-cta h2{margin:10px 0 0;color:#f2f5fa;font-size:clamp(26px,3vw,42px);letter-spacing:-.04em;line-height:1.05}.af-guide-section-head p{max-width:390px;margin:0}.af-guide-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.af-guide-flow-card{position:relative;min-height:228px;padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#121a29;transition:transform .22s ease,border-color .22s ease,background .22s ease}.af-guide-flow-card:hover{transform:translateY(-4px);border-color:rgba(132,155,255,.38);background:#172239}.af-guide-flow-card>span{color:#839aff;font-size:11px;font-weight:800;letter-spacing:.12em}.af-guide-flow-card h3{margin:36px 0 10px;color:#f3f5f9;font-size:22px}.af-guide-flow-card p{color:#909bad;font-size:13px;line-height:1.65}.af-guide-flow-card b{position:absolute;right:22px;bottom:20px;color:#8198ff;font-size:18px}.af-guide-business{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;margin-top:70px;padding:42px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(120deg,#171e2c,#101722)}.af-guide-business-copy h2{max-width:430px}.af-guide-business-copy p{max-width:450px}.af-guide-text-link{margin-top:18px;border:0;background:none;padding:0;color:#9aabff;font-size:13px;font-weight:800;cursor:pointer}.af-guide-text-link span{margin-left:7px}.af-guide-capabilities{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.af-guide-capabilities article{display:flex;gap:13px;padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(3,7,14,.33)}.af-guide-cap-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:rgba(133,155,255,.13);color:#98aaff;font-size:16px}.af-guide-capabilities h3{margin:0;color:#e6eaf2;font-size:14px}.af-guide-capabilities p{margin:7px 0 0;color:#8792a3;font-size:12px;line-height:1.6}.af-guide-aftercare{padding:78px 4px 0}.af-guide-aftercare-top{display:grid;grid-template-columns:1fr .62fr;gap:42px;align-items:end}.af-guide-aftercare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.af-guide-aftercare-grid article{padding:22px;border-top:1px solid rgba(139,160,255,.5);background:rgba(255,255,255,.025)}.af-guide-aftercare-grid h3{margin:0 0 10px;color:#e8ecf4;font-size:16px}.af-guide-aftercare-grid p{min-height:58px;margin:0 0 20px;color:#8d98a9;font-size:13px;line-height:1.65}.af-guide-aftercare-grid span{color:#637083;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.af-guide-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:78px;padding:34px 38px;border-radius:20px;background:linear-gradient(100deg,#25335c,#1a2545);border:1px solid rgba(163,180,255,.23)}.af-guide-cta p{margin-bottom:0;max-width:600px;color:#aeb8d0}.af-guide-cta h2{max-width:650px}.af-guide-cta .af-start-btn{flex:0 0 auto}@media(max-width:900px){.af-guide-hero,.af-guide-business,.af-guide-aftercare-top{grid-template-columns:1fr}.af-guide-flow{grid-template-columns:repeat(2,1fr)}.af-guide-aftercare-grid{grid-template-columns:repeat(2,1fr)}.af-guide-cta{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.af-guide-page{padding-bottom:36px}.af-header-actions{width:100%;flex-wrap:wrap}.af-guide-btn{flex:1}.af-guide-hero{padding:24px 20px;border-radius:18px}.af-guide-hero h2{font-size:34px}.af-guide-section{padding-top:52px}.af-guide-section-head{display:block}.af-guide-section-head p{margin-top:14px}.af-guide-flow,.af-guide-capabilities,.af-guide-aftercare-grid{grid-template-columns:1fr}.af-guide-business{padding:24px 20px;margin-top:50px}.af-guide-aftercare{padding-top:54px}.af-guide-cta{padding:26px 22px;margin-top:54px}.af-guide-cta h2{font-size:28px}}@media(prefers-reduced-motion:reduce){.af-guide-flow-card,.af-guide-btn{transition:none}}

/* Public App Factory feature page: a conversion-led product surface using Jostavan's dark operator palette and acid-lime accent. */
.af-public-page{min-height:100vh;background:#0b0d0f;color:#f2f0e9;font-family:inherit;overflow:hidden}.af-public-nav{max-width:1240px;margin:0 auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.1)}.af-public-brand{display:flex;align-items:center;gap:10px;color:#f2f0e9;text-decoration:none;font-weight:800;letter-spacing:-.04em;font-size:20px}.af-public-brand svg{color:#d7f26a}.af-public-nav>div{display:flex;gap:24px}.af-public-nav a{color:#a9aca7;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}.af-public-nav a:hover{color:#d7f26a}.af-public-nav-cta{border:1px solid rgba(215,242,106,.5);padding:11px 15px;color:#d7f26a!important}.af-public-hero{max-width:1240px;margin:0 auto;padding:110px 32px 90px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);gap:80px;align-items:center}.af-kicker{display:block;color:#d7f26a;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.af-public-hero h1{max-width:760px;margin:20px 0;font-size:clamp(52px,7vw,96px);line-height:.96;letter-spacing:-.075em}.af-public-hero h1 em,.af-public-final h2 em{color:#d7f26a;font-style:normal}.af-public-hero-copy>p{max-width:650px;color:#b2b6b0;font-size:18px;line-height:1.65}.af-public-hero-actions{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}.af-public-primary,.af-public-secondary{display:inline-flex;align-items:center;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.af-public-primary{background:#d7f26a;color:#0b0d0f;padding:16px 19px}.af-public-secondary{color:#f2f0e9;padding:16px 4px}.af-public-hero-panel{background:#141719;border:1px solid #2c3330;padding:22px;box-shadow:18px 18px 0 rgba(215,242,106,.08);transform:rotate(1.5deg)}.af-public-panel-top{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #303633;color:#788079;font-size:10px;font-weight:800;letter-spacing:.14em}.af-public-panel-top b{color:#d7f26a}.af-public-loop{position:relative;padding:26px 42px 26px 0;border-bottom:1px solid #303633}.af-public-loop strong{display:block;font-size:23px;letter-spacing:-.04em}.af-public-loop span{display:block;color:#9da39d;font-size:13px;margin-top:6px}.af-public-loop i{position:absolute;right:0;top:28px;color:#d7f26a;font-style:normal;font-size:11px;font-weight:800}.af-public-hero-panel small{display:block;color:#7c847d;padding-top:18px;font-size:11px}.af-public-proof{max-width:1240px;margin:0 auto;padding:22px 32px;border-top:1px solid #252b29;border-bottom:1px solid #252b29;display:flex;gap:26px;align-items:center;flex-wrap:wrap;color:#848b84;font-size:10px;font-weight:800;letter-spacing:.14em}.af-public-proof strong{color:#e2e4dd;font-size:12px;letter-spacing:0}.af-public-section,.af-public-after{max-width:1240px;margin:0 auto;padding:120px 32px}.af-public-section-heading{max-width:720px}.af-public-section-heading h2,.af-public-box h2,.af-public-final h2{font-size:clamp(38px,5vw,66px);line-height:1;letter-spacing:-.065em;margin:18px 0}.af-public-section-heading p,.af-public-box-copy>p{color:#9fa59e;font-size:17px;line-height:1.65}.af-public-phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#303633;margin-top:55px}.af-public-phase-grid article{position:relative;min-height:270px;background:#0b0d0f;padding:26px}.af-public-phase-grid article>span{color:#d7f26a;font-weight:800;font-size:11px}.af-public-phase-grid h3{font-size:27px;letter-spacing:-.05em;margin:78px 0 13px}.af-public-phase-grid p,.af-public-capabilities p,.af-public-after-grid p{color:#9ca29b;line-height:1.55;font-size:14px}.af-public-phase-grid b{position:absolute;right:25px;bottom:23px;color:#d7f26a;font-size:20px}.af-public-box{background:#d7f26a;color:#0b0d0f;padding:100px max(32px,calc((100vw - 1176px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.af-public-box .af-kicker{color:#4c5f25}.af-public-box h2{max-width:520px}.af-public-box-copy>p{color:#34411f}.af-public-box-copy>a{display:inline-block;color:#0b0d0f;border-bottom:1px solid #0b0d0f;padding-bottom:8px;margin-top:18px;font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}.af-public-capabilities{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(11,13,15,.25)}.af-public-capabilities article{background:#d7f26a;padding:24px;border:1px solid rgba(11,13,15,.25)}.af-public-capabilities strong{font-size:11px}.af-public-capabilities h3{font-size:22px;margin:34px 0 10px;letter-spacing:-.04em}.af-public-capabilities p{color:#34411f}.af-public-after{padding-bottom:90px}.af-public-after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#303633;margin-top:55px}.af-public-after-grid article{background:#0b0d0f;padding:27px;min-height:205px}.af-public-after-grid article>span{color:#d7f26a;font-size:10px;font-weight:800;letter-spacing:.15em}.af-public-after-grid h3{font-size:23px;letter-spacing:-.04em;margin:28px 0 10px}.af-public-final{padding:125px 32px 145px;text-align:center;background:linear-gradient(180deg,#111514 0%,#0b0d0f 100%);border-top:1px solid #252b29}.af-public-final h2{max-width:800px;margin:18px auto}.af-public-final p{max-width:600px;margin:0 auto 30px;color:#9fa59e;font-size:16px;line-height:1.65}.af-public-final .af-public-primary{display:inline-flex}@media(max-width:800px){.af-public-nav{padding:18px 20px}.af-public-nav>div{display:none}.af-public-nav-cta{font-size:10px!important}.af-public-hero{padding:72px 20px 65px;grid-template-columns:1fr;gap:48px}.af-public-hero h1{font-size:clamp(48px,14vw,76px)}.af-public-hero-copy>p{font-size:16px}.af-public-proof,.af-public-section,.af-public-after{padding-left:20px;padding-right:20px}.af-public-phase-grid,.af-public-after-grid{grid-template-columns:1fr 1fr}.af-public-box{padding:70px 20px;grid-template-columns:1fr;gap:45px}}@media(max-width:520px){.af-public-hero-panel{transform:none}.af-public-phase-grid,.af-public-after-grid,.af-public-capabilities{grid-template-columns:1fr}.af-public-phase-grid article{min-height:210px}.af-public-phase-grid h3{margin-top:50px}.af-public-section,.af-public-after{padding-top:80px}.af-public-final{padding:90px 20px 110px}}

/* Public App Factory feature page: light editorial conversion surface aligned with the landing page. */
.af-public-page{background:#f4f7f3;color:#14201c}
.af-public-nav{background:rgba(244,247,243,.96);border-bottom-color:#dce5df;color:#14201c}
.af-public-brand{color:#14201c!important}.af-public-nav>div a{color:#50615a!important}.af-public-nav-cta{background:#14201c!important;color:#f4f7f3!important}
.af-public-hero{background:linear-gradient(135deg,#eef5ef 0%,#f8faf7 62%,#e4efe8 100%);border-bottom-color:#dce5df}
.af-kicker{color:#3b6a54!important}.af-public-hero h1,.af-public-section-heading h2,.af-public-box h2,.af-public-final h2{color:#14201c}
.af-public-hero-copy>p,.af-public-section-heading p,.af-public-box-copy>p,.af-public-final p{color:#52635b}
.af-public-primary{background:#b9e86b!important;color:#14201c!important;box-shadow:0 8px 22px rgba(82,125,68,.16)}.af-public-secondary{color:#23483a!important}
.af-public-hero-panel{background:#fff;border-color:#d7e4dc;box-shadow:18px 18px 0 rgba(185,232,107,.28)}
.af-public-panel-top{border-bottom-color:#e0e9e3;color:#789087}.af-public-panel-top b,.af-public-loop i,.af-public-proof strong,.af-public-phase-grid article>span,.af-public-phase-grid b,.af-public-after-grid article>span{color:#3b7658}
.af-public-loop{border-bottom-color:#e0e9e3}.af-public-loop strong{color:#14201c}.af-public-loop span,.af-public-hero-panel small{color:#6b7c73}
.af-public-proof{border-top-color:#dce5df;border-bottom-color:#dce5df;color:#71827a}.af-public-section,.af-public-after{background:#f4f7f3}
.af-public-phase-grid,.af-public-after-grid{background:#d5e1da}.af-public-phase-grid article,.af-public-after-grid article{background:#fff}.af-public-phase-grid h3,.af-public-after-grid h3{color:#14201c}
.af-public-phase-grid p,.af-public-capabilities p,.af-public-after-grid p{color:#607169}.af-public-box{background:#b9e86b;color:#14201c}.af-public-box .af-kicker{color:#3b5f42!important}
.af-public-capabilities{background:rgba(20,32,28,.18)}.af-public-capabilities article{background:#b9e86b;border-color:rgba(20,32,28,.18)}.af-public-capabilities h3,.af-public-capabilities strong{color:#14201c}
.af-public-final{background:linear-gradient(180deg,#e9f3ec 0%,#f4f7f3 100%);border-top-color:#dce5df}
@media(max-width:800px){.af-public-nav{background:#f4f7f3}}

/* DESIGN REMINDER — Apps dashboard: operational cockpit, not marketing page. Use graphite rail, calm light workspace, compact modules, KPI-first hierarchy, restrained borders, and responsive task priority. */
.apps-dashboard-shell { min-height: 100vh; display: flex; background: #f5f6f7; color: #17202b; }
.apps-dashboard-rail { width: 232px; flex: 0 0 232px; min-height: 100vh; display: flex; flex-direction: column; padding: 22px 14px 16px; background: #111417; color: #d7dde2; }
.apps-dashboard-brand { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #fff; padding: 2px 8px 26px; text-align: left; cursor: pointer; }
.apps-dashboard-brand span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #d9ff57; color: #111417; font-size: 19px; font-weight: 850; }
.apps-dashboard-brand strong { font-size: 15px; letter-spacing: -.03em; }
.apps-dashboard-rail-label { padding: 0 11px 9px; color: #77818a; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.apps-dashboard-nav { display: grid; gap: 3px; }
.apps-dashboard-nav button, .apps-dashboard-rail-bottom button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 41px; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: #aeb7bf; font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; transition: background .16s ease, color .16s ease; }
.apps-dashboard-nav button:hover, .apps-dashboard-rail-bottom button:hover { background: #20252a; color: #fff; }
.apps-dashboard-nav button.active { background: #d9ff57; color: #111417; }
.apps-dashboard-nav-icon { width: 20px; color: currentColor; font-size: 17px; text-align: center; }
.apps-dashboard-rail-bottom { display: grid; gap: 5px; margin-top: auto; padding-top: 18px; border-top: 1px solid #292f34; }
.apps-dashboard-rail-bottom button:first-child { background: #20252a; color: #f0f3f5; }
.apps-dashboard-workspace { min-width: 0; flex: 1; }
.apps-dashboard-topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid #e0e4e8; background: #fff; }
.apps-dashboard-breadcrumb { display: flex; align-items: center; gap: 10px; color: #87919b; font-size: 12px; }
.apps-dashboard-breadcrumb b { color: #c1c7cc; font-weight: 500; }.apps-dashboard-breadcrumb strong { color: #202a34; font-weight: 750; }
.apps-dashboard-top-actions { display: flex; align-items: center; gap: 15px; }.apps-dashboard-top-actions button { border: 0; background: transparent; color: #65717c; font-size: 20px; cursor: pointer; }.apps-dashboard-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #17202b; color: #d9ff57; font-size: 10px; font-weight: 800; }
.apps-dashboard-main { max-width: 1440px; margin: 0 auto; padding: 35px 40px 55px; }
.apps-dashboard-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }.apps-dashboard-kicker, .panel-kicker { margin: 0 0 7px; color: #7a8791; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }.apps-dashboard-page-head h1 { margin: 0; color: #141b22; font-size: clamp(29px, 3vw, 42px); font-weight: 780; letter-spacing: -.055em; }.apps-dashboard-description { max-width: 570px; margin: 10px 0 0; color: #6f7b86; font-size: 13px; line-height: 1.6; }.apps-dashboard-head-actions { display: flex; align-items: center; gap: 15px; }.apps-dashboard-sync { color: #71808a; font-size: 11px; }.apps-dashboard-primary { display: inline-flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 15px; border: 0; border-radius: 7px; background: #17202b; color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }.apps-dashboard-primary:hover { background: #2b3642; }.apps-dashboard-primary span { color: #d9ff57; font-size: 17px; }
.apps-dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid #dfe4e7; border-radius: 9px; overflow: hidden; background: #fff; }.apps-dashboard-kpis > div { min-height: 116px; padding: 18px 20px; border-right: 1px solid #e3e7e9; }.apps-dashboard-kpis > div:last-child { border-right: 0; }.apps-dashboard-kpis span { display: block; color: #78848e; font-size: 11px; font-weight: 700; }.apps-dashboard-kpis strong { display: block; margin-top: 12px; color: #17202b; font-size: 28px; font-weight: 770; letter-spacing: -.04em; }.apps-dashboard-kpis small { display: block; margin-top: 5px; color: #9aa3aa; font-size: 10px; }.apps-dashboard-kpis .status-good { color: #548300; }
.apps-dashboard-grid-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); gap: 20px; margin-bottom: 20px; }.apps-dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 20px; }.apps-dashboard-panel { min-width: 0; border: 1px solid #dfe4e7; border-radius: 9px; background: #fff; }.apps-dashboard-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid #e8ebed; }.apps-dashboard-panel-head h2 { margin: 0; color: #202a34; font-size: 16px; font-weight: 760; letter-spacing: -.025em; }.apps-dashboard-panel-head button { border: 0; background: transparent; color: #668000; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }.panel-count { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 7px; border-radius: 12px; background: #f0f2f3; color: #53606a; font-size: 11px; font-weight: 800; }.apps-dashboard-performance { overflow: hidden; }.apps-dashboard-chart { display: flex; height: 235px; padding: 19px 21px 0 15px; }.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 0 11px 28px 0; color: #a6afb6; font-size: 9px; }.chart-field { position: relative; min-width: 0; flex: 1; }.chart-grid-lines { position: absolute; inset: 0 0 28px; display: flex; flex-direction: column; justify-content: space-between; }.chart-grid-lines i { display: block; border-top: 1px dashed #e7ebed; }.chart-field svg { position: absolute; inset: 0 0 28px; width: 100%; height: calc(100% - 28px); overflow: visible; color: #8aa800; }.chart-empty-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 7px 10px; border-radius: 5px; background: rgba(255,255,255,.92); color: #9ca6ad; font-size: 10px; white-space: nowrap; }.chart-axis { display: flex; justify-content: space-between; padding: 0 21px 16px 54px; color: #a6afb6; font-size: 9px; }
.apps-dashboard-attention { min-height: 0; }.apps-dashboard-queue { padding: 8px 10px 12px; }.apps-dashboard-queue button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 10px; border: 0; border-bottom: 1px solid #eef0f1; background: transparent; color: #202a34; text-align: left; cursor: pointer; }.apps-dashboard-queue button:last-child { border-bottom: 0; }.queue-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff0df; color: #b56419; font-size: 11px; font-weight: 900; }.apps-dashboard-queue button span:nth-child(2) { min-width: 0; flex: 1; }.apps-dashboard-queue strong, .apps-dashboard-queue small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.apps-dashboard-queue strong { font-size: 12px; }.apps-dashboard-queue small { margin-top: 4px; color: #89949c; font-size: 10px; }.apps-dashboard-queue b { color: #98a2aa; font-size: 19px; font-weight: 400; }.apps-dashboard-empty { display: flex; min-height: 145px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 22px; color: #87929a; text-align: center; }.apps-dashboard-empty strong { color: #49545e; font-size: 13px; }.apps-dashboard-empty span { font-size: 11px; }.apps-dashboard-empty button { margin-top: 8px; border: 0; background: transparent; color: #6b8500; font-size: 11px; font-weight: 800; cursor: pointer; }
.apps-dashboard-table-wrap { overflow-x: auto; }.apps-dashboard-table { width: 100%; border-collapse: collapse; min-width: 560px; }.apps-dashboard-table th { padding: 12px 18px; color: #9aa4ab; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-align: left; text-transform: uppercase; }.apps-dashboard-table td { padding: 13px 18px; border-top: 1px solid #edf0f1; color: #63707a; font-size: 11px; white-space: nowrap; }.apps-dashboard-table tbody tr { cursor: pointer; transition: background .14s ease; }.apps-dashboard-table tbody tr:hover { background: #fafbfb; }.apps-dashboard-table td:first-child { display: flex; align-items: center; gap: 9px; color: #202a34; }.table-app-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: #17202b; color: #d9ff57; font-size: 11px; font-weight: 850; }.table-status { display: inline-flex; align-items: center; gap: 6px; color: #9a6b35; text-transform: capitalize; }.table-status i, .panel-live i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #c99149; }.table-status.live { color: #598200; }.table-status.live i, .panel-live i { background: #8db400; }.apps-dashboard-activity-list { padding: 10px 20px 17px; }.apps-dashboard-activity-list > div { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f1; }.apps-dashboard-activity-list > div:last-child { border-bottom: 0; }.activity-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #c9d0d4; }.activity-dot.green { background: #92b700; }.apps-dashboard-activity-list p { margin: 0; }.apps-dashboard-activity-list strong, .apps-dashboard-activity-list small { display: block; }.apps-dashboard-activity-list strong { color: #3d4851; font-size: 11px; }.apps-dashboard-activity-list small { margin-top: 4px; color: #9aa4ab; font-size: 10px; }.panel-live { display: inline-flex; align-items: center; gap: 6px; color: #6c8500; font-size: 10px; font-weight: 800; }.apps-dashboard-module-placeholder { min-height: 290px; padding: 45px; }.apps-dashboard-module-placeholder h2 { margin: 0; color: #17202b; font-size: 24px; }.apps-dashboard-module-placeholder p { max-width: 530px; color: #71808a; font-size: 13px; line-height: 1.7; }
@media (max-width: 980px) { .apps-dashboard-rail { width: 190px; flex-basis: 190px; }.apps-dashboard-main { padding: 29px 24px 45px; }.apps-dashboard-grid-main, .apps-dashboard-lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .apps-dashboard-shell { display: block; }.apps-dashboard-rail { width: auto; min-height: auto; padding: 12px 12px 10px; }.apps-dashboard-brand { padding: 0 4px 11px; }.apps-dashboard-rail-label, .apps-dashboard-rail-bottom { display: none; }.apps-dashboard-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }.apps-dashboard-nav button { width: auto; min-width: max-content; min-height: 35px; padding: 7px 10px; font-size: 11px; }.apps-dashboard-nav-icon { display: none; }.apps-dashboard-topbar { height: 53px; padding: 0 15px; }.apps-dashboard-main { padding: 24px 14px 35px; }.apps-dashboard-page-head { display: block; margin-bottom: 20px; }.apps-dashboard-page-head h1 { font-size: 30px; }.apps-dashboard-head-actions { justify-content: space-between; margin-top: 16px; }.apps-dashboard-kpis { display: flex; overflow-x: auto; }.apps-dashboard-kpis > div { min-width: 145px; border-right: 1px solid #e3e7e9; }.apps-dashboard-chart { height: 200px; padding-right: 12px; }.chart-empty-label { max-width: 160px; font-size: 9px; text-align: center; white-space: normal; }.apps-dashboard-panel-head { padding: 15px; }.apps-dashboard-table th, .apps-dashboard-table td { padding-left: 13px; padding-right: 13px; } }

/* Individual app command center: dense graphite surfaces, lime action states, and data-first hierarchy. */
.ops-category-workspace-pro { color: #e8edf4; }
.ops-category-workspace-pro .ops-section-head-enhanced { align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid rgba(159,176,198,.16); }
.ops-category-workspace-pro .ops-section-head-enhanced h2 { color: #f5f7fa; letter-spacing: -.045em; }
.ops-category-workspace-pro .ops-section-head-enhanced > div:first-child > p:last-child { color: #8f9daf; }
.ops-category-workspace-pro .ops-section-head-enhanced .eyebrow, .ops-category-workspace-pro .eyebrow { color: #b8ed4f; }
.ops-category-workspace-pro .ops-secondary-action { border-color: #344254; background: #1b2532; color: #dce5ef; }
.ops-category-workspace-pro .ops-secondary-action:hover { border-color: #b8ed4f; background: #202d3a; color: #fff; }
.ops-category-workspace-pro .ops-data-freshness { color: #8492a4; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-category-workspace-pro .ops-kpi-grid-pro { gap: 9px; }
.ops-category-workspace-pro .ops-kpi-card { min-height: 112px; border: 1px solid #303d4d; border-radius: 6px; background: linear-gradient(145deg, #202b38, #18212c); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.ops-category-workspace-pro .ops-kpi-card span { color: #8e9bad; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-category-workspace-pro .ops-kpi-card strong { color: #f6f8fb; font-size: 27px; }
.ops-category-workspace-pro .ops-kpi-card small { color: #9aa7b6; }
.ops-category-workspace-pro .ops-category-tabs { border-bottom-color: #2f3c4b; }
.ops-category-workspace-pro .ops-category-tabs button { color: #7d8c9f; }
.ops-category-workspace-pro .ops-category-tabs button:hover, .ops-category-workspace-pro .ops-category-tabs button.active { color: #c8f766; }
.ops-category-workspace-pro .ops-category-tabs button.active { border-bottom-color: #b8ed4f; }
.ops-category-workspace-pro .ops-category-grid-pro .ops-panel { min-height: 250px; border: 1px solid #303d4d; border-radius: 6px; background: #1a2430; box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.ops-category-workspace-pro .ops-category-grid-pro .ops-panel h3 { color: #f1f4f8; }
.ops-category-workspace-pro .ops-category-grid-pro .ops-panel > .eyebrow { color: #7e8ea0; }
.ops-live-module { display: flex; align-items: flex-start; gap: 14px; min-height: 142px; padding: 18px 0 12px; }
.ops-live-module-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(184,237,79,.4); border-radius: 6px; background: rgba(184,237,79,.08); color: #c8f766; font-size: 21px; }
.ops-live-module strong { display: block; color: #f4f7fa; font-size: 15px; }
.ops-live-module p { max-width: 460px; margin: 7px 0 0; color: #98a6b5; font-size: 13px; line-height: 1.6; }
.ops-category-workspace-pro .ops-text-action { border: 0; background: transparent; color: #c8f766; padding: 0; font-size: 12px; font-weight: 800; cursor: pointer; }
.ops-category-workspace-pro .ops-action-list .ops-row { border-top-color: #2d3947; }
.ops-category-workspace-pro .ops-action-list .ops-row strong { color: #eef2f6; }
.ops-category-workspace-pro .ops-action-list .ops-row p { color: #8d9bac; }
.ops-category-workspace-pro .ops-action-list .ops-row button { border-color: #3b4a5c; background: #202c39; color: #d7e2ed; }
.ops-category-workspace-pro .ops-data-table-wrap { border-color: #303d4d; border-radius: 6px; background: #19232f; box-shadow: 0 14px 30px rgba(0,0,0,.15); }
.ops-category-workspace-pro .ops-table-toolbar { border-bottom-color: #2d3947; }
.ops-category-workspace-pro .ops-filter-chips button { border-color: #374658; background: #202c39; color: #aeb9c6; }
.ops-category-workspace-pro .ops-filter-chips button.active { border-color: rgba(184,237,79,.4); background: rgba(184,237,79,.1); color: #c8f766; }
.ops-category-workspace-pro .ops-data-table th { background: #202b38; color: #8291a2; }
.ops-category-workspace-pro .ops-data-table td { border-top-color: #2b3745; color: #dce4ed; padding: 13px 14px; font-size: 12px; }
.ops-category-workspace-pro .ops-table-empty strong { color: #edf2f7; }
.ops-category-workspace-pro .ops-table-empty span { color: #8d9bac; }
@media (max-width: 760px) { .ops-category-workspace-pro .ops-section-actions { display: grid; grid-template-columns: 1fr 1fr; } .ops-category-workspace-pro .ops-data-freshness { grid-column: 1 / -1; } .ops-live-module { min-height: 120px; } }

/* Contrast correction: all Apps surfaces stay light; typography is dark and every operational item has a defined boundary. */
.apps-hub > .ops-page,
.apps-hub > .ops-page .ops-main,
.apps-hub > .ops-page .ops-nav { background: #ffffff; color: #172033; }
.apps-hub h1, .apps-hub h2, .apps-hub h3, .apps-hub h4,
.apps-hub > .ops-page h1, .apps-hub > .ops-page h2, .apps-hub > .ops-page h3, .apps-hub > .ops-page h4,
.apps-hub .ops-category-workspace-pro h1, .apps-hub .ops-category-workspace-pro h2, .apps-hub .ops-category-workspace-pro h3, .apps-hub .ops-category-workspace-pro h4 { color: #172033 !important; }
.apps-hub > .ops-page p:not(.eyebrow), .apps-hub > .ops-page span, .apps-hub > .ops-page small,
.apps-hub .ops-category-workspace-pro p:not(.eyebrow), .apps-hub .ops-category-workspace-pro span, .apps-hub .ops-category-workspace-pro small { color: #46556b; }
.apps-hub > .ops-page .eyebrow, .apps-hub .ops-category-workspace-pro .eyebrow { color: #547d12; }
.apps-hub > .ops-page .ops-nav { border-right-color: #d7dee8; }
.apps-hub > .ops-page .ops-nav button { border: 1px solid transparent; color: #26344a; }
.apps-hub > .ops-page .ops-nav button:hover { border-color: #cfd8e4; background: #f7f9fc; color: #142238; }
.apps-hub > .ops-page .ops-nav button.active { border-color: #cbd7e5; background: #edf2f7; color: #142238; }
.apps-hub > .ops-page .ops-metrics { background: #ffffff; border-color: #cfd8e4; }
.apps-hub > .ops-page .ops-metric { background: #ffffff; border-right-color: #dce3ec; }
.apps-hub > .ops-page .ops-metric span { color: #526177; }
.apps-hub > .ops-page .ops-metric strong { color: #172033; }
.apps-hub > .ops-page .ops-metric small { color: #617087; }
.apps-hub > .ops-page .ops-reference-chart,
.apps-hub > .ops-page .ops-observability-strip,
.apps-hub > .ops-page .ops-panels { border-color: #d7dee8; }
.apps-hub > .ops-page .ops-reference-chart { padding: 18px; border: 1px solid #d7dee8; border-radius: 9px; background: #ffffff; }
.apps-hub > .ops-page .ops-reference-chart-head { border-bottom-color: #d7dee8; }
.apps-hub > .ops-page .ops-reference-chart-head span { color: #66758a; }
.apps-hub > .ops-page .ops-chart-placeholder { background: repeating-linear-gradient(to top, transparent 0, transparent 61px, #e6ebf1 62px); }
.apps-hub > .ops-page .ops-panel,
.apps-hub > .ops-page .ops-observability-card,
.apps-hub > .ops-page .ops-data-table-wrap,
.apps-hub .ops-category-workspace-pro .ops-panel,
.apps-hub .ops-category-workspace-pro .ops-data-table-wrap,
.apps-hub .ops-category-workspace-pro .ops-kpi-card { border: 1px solid #cfd8e4; border-radius: 9px; background: #ffffff; box-shadow: 0 5px 16px rgba(32, 52, 80, .06); }
.apps-hub > .ops-page .ops-panel { padding: 18px; }
.apps-hub > .ops-page .ops-panel h3 { color: #172033; }
.apps-hub > .ops-page .ops-panel .eyebrow { color: #547d12; }
.apps-hub .ops-category-workspace-pro { color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-section-head-enhanced { border-bottom-color: #d7dee8; }
.apps-hub .ops-category-workspace-pro .ops-section-head-enhanced h2 { color: #172033 !important; }
.apps-hub .ops-category-workspace-pro .ops-section-head-enhanced > div:first-child > p:last-child { color: #526177; }
.apps-hub .ops-category-workspace-pro .ops-secondary-action { border-color: #c4d0df; background: #ffffff; color: #23334a; }
.apps-hub .ops-category-workspace-pro .ops-secondary-action:hover { border-color: #8aaa55; background: #f4f8ee; color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-data-freshness { color: #65758a; }
.apps-hub .ops-category-workspace-pro .ops-kpi-card { min-height: 112px; background: #f8fafc; box-shadow: 0 5px 16px rgba(32, 52, 80, .06); }
.apps-hub .ops-category-workspace-pro .ops-kpi-card span { color: #526177; }
.apps-hub .ops-category-workspace-pro .ops-kpi-card strong { color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-kpi-card small { color: #66768a; }
.apps-hub .ops-category-workspace-pro .ops-category-tabs { border-bottom-color: #d7dee8; }
.apps-hub .ops-category-workspace-pro .ops-category-tabs button { color: #607087; }
.apps-hub .ops-category-workspace-pro .ops-category-tabs button:hover { color: #2e4e12; }
.apps-hub .ops-category-workspace-pro .ops-category-tabs button.active { border-bottom-color: #6f9f22; color: #355e0d; }
.apps-hub .ops-category-workspace-pro .ops-category-grid-pro .ops-panel { background: #ffffff; box-shadow: 0 5px 16px rgba(32, 52, 80, .06); }
.apps-hub .ops-category-workspace-pro .ops-category-grid-pro .ops-panel h3 { color: #172033 !important; }
.apps-hub .ops-category-workspace-pro .ops-category-grid-pro .ops-panel > .eyebrow { color: #547d12; }
.apps-hub .ops-category-workspace-pro .ops-live-module-icon { border-color: #b9d58c; background: #f1f8e8; color: #4f7616; }
.apps-hub .ops-category-workspace-pro .ops-live-module strong { color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-live-module p { color: #526177; }
.apps-hub .ops-category-workspace-pro .ops-text-action { color: #4e7713; }
.apps-hub .ops-category-workspace-pro .ops-action-list .ops-row { border-top-color: #e0e6ee; }
.apps-hub .ops-category-workspace-pro .ops-action-list .ops-row strong { color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-action-list .ops-row p { color: #526177; }
.apps-hub .ops-category-workspace-pro .ops-action-list .ops-row button { border: 1px solid #c4d0df; background: #ffffff; color: #23334a; }
.apps-hub .ops-category-workspace-pro .ops-data-table-wrap { background: #ffffff; }
.apps-hub .ops-category-workspace-pro .ops-table-toolbar { border-bottom-color: #d7dee8; }
.apps-hub .ops-category-workspace-pro .ops-filter-chips button { border-color: #cbd6e3; background: #ffffff; color: #53647a; }
.apps-hub .ops-category-workspace-pro .ops-filter-chips button.active { border-color: #b9d58c; background: #f1f8e8; color: #436d10; }
.apps-hub .ops-category-workspace-pro .ops-data-table th { background: #f4f7fa; color: #5c6c82; }
.apps-hub .ops-category-workspace-pro .ops-data-table td { border-top-color: #e0e6ee; color: #26364b; }
.apps-hub .ops-category-workspace-pro .ops-table-empty strong { color: #172033; }
.apps-hub .ops-category-workspace-pro .ops-table-empty span { color: #526177; }

/* Personalized individual-app modules: distinct compositions for each operating area. */
.personal-module { color:#152033; display:grid; gap:18px; }
.personal-module h2,.personal-module h3,.personal-module strong { color:#102033; }
.personal-module p { color:#4b5a6d; }
.personal-module-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:2px 0 8px; }
.personal-module-head h2 { margin:4px 0 6px; font-size:clamp(1.45rem,2vw,2rem); letter-spacing:-.04em; }
.personal-module-head>div:first-child>p:last-child { max-width:650px; margin:0; }
.personal-module-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.personal-module-actions>span { color:#68778a; font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.personal-metric-row,.personal-integration-summary,.personal-collab-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.personal-metric,.personal-integration-summary>div,.personal-collab-strip>div { min-height:118px; padding:17px 18px; border:1px solid #cbd5df; border-top:3px solid #9fce37; background:#f8fafb; box-shadow:0 8px 20px rgba(16,32,51,.05); }
.personal-metric span,.personal-integration-summary span,.personal-collab-strip span { display:block; color:#56677b; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.personal-metric strong,.personal-integration-summary strong,.personal-collab-strip strong { display:block; margin:10px 0 4px; color:#102033; font-size:1.8rem; line-height:1; }
.personal-metric small,.personal-integration-summary small { color:#69788a; }
.personal-analytics-grid,.personal-finance-grid,.personal-users-grid,.personal-collab-grid,.personal-connection-grid,.personal-monitor-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:16px; }
.personal-chart-card,.personal-insight-card,.personal-ledger,.personal-plan-card,.personal-funnel,.personal-directory,.personal-workboard,.personal-decision-log,.personal-connection-list,.personal-permission-card,.personal-incident-list,.personal-policy-card,.personal-campaign-board { border:1px solid #cbd5df; background:#fff; box-shadow:0 10px 24px rgba(16,32,51,.045); }
.personal-chart-card,.personal-insight-card,.personal-ledger,.personal-plan-card,.personal-funnel,.personal-directory,.personal-workboard,.personal-decision-log,.personal-connection-list,.personal-permission-card,.personal-incident-list,.personal-policy-card { padding:20px; }
.personal-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
.personal-card-head span,.personal-card-label { color:#647489; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.personal-card-head h3,.personal-insight-card h3,.personal-plan-card h3,.personal-directory h3,.personal-decision-log h3,.personal-permission-card h3,.personal-policy-card h3 { margin:5px 0 0; font-size:1.12rem; letter-spacing:-.025em; }
.personal-card-head button,.personal-module button { border:1px solid #b9c5d1; background:#f8fafb; color:#1b2a3c; padding:8px 11px; font:inherit; font-size:.78rem; font-weight:750; cursor:pointer; }
.personal-card-head button:hover,.personal-module button:hover { border-color:#9fce37; background:#f3f8e8; }
.personal-sparkline { height:218px; display:flex; align-items:center; border:1px solid #e0e6eb; background:linear-gradient(180deg,#fbfcfd,#f3f6f8); color:#799d2d; }
.personal-sparkline svg { width:100%; height:100%; padding:20px; }
.personal-axis { display:flex; justify-content:space-between; padding-top:10px; color:#718096; font-size:.72rem; }
.personal-empty { min-height:130px; display:grid; align-content:center; justify-items:center; gap:7px; padding:24px; border:1px dashed #c6d1db; background:#f8fafb; text-align:center; }
.personal-empty strong { font-size:.9rem; }.personal-empty span { max-width:420px; color:#68778a; font-size:.82rem; line-height:1.5; }
.personal-event-list { display:grid; gap:0; }.personal-event-list>div,.personal-connection-row,.personal-incident,.personal-control-row,.personal-policy-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #e1e7ec; }.personal-event-list>div:last-child,.personal-connection-row:last-child,.personal-incident:last-child { border-bottom:0; }
.personal-event-list i,.personal-connection-row i,.personal-incident i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#9fce37; }.personal-event-list span,.personal-connection-row span,.personal-incident span { min-width:0; display:grid; gap:3px; }.personal-event-list small,.personal-connection-row small,.personal-incident small { color:#718096; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.personal-finance-band { display:grid; grid-template-columns:auto minmax(0,2fr) repeat(2,minmax(150px,1fr)); align-items:center; gap:18px; padding:24px; border:1px solid #bac7d2; background:#eef3f5; }.personal-money-mark { display:grid; place-items:center; width:54px; height:54px; background:#18283a; color:#d1ed67; font-size:1.45rem; }.personal-finance-band span,.personal-finance-side span { color:#617287; font-size:.73rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.personal-finance-band strong { display:block; margin:6px 0; color:#102033; font-size:2.2rem; }.personal-finance-band small { color:#6d7b8b; }.personal-finance-side { border-left:1px solid #c5d0d8; padding-left:18px; }.personal-finance-side strong { font-size:1.45rem; }
.personal-control-row,.personal-policy-row { justify-content:space-between; }.personal-control-row span,.personal-policy-row span { color:#536478; }.personal-control-row strong,.personal-policy-row b { color:#102033; }.personal-plan-card .ops-primary,.personal-policy-card .ops-primary { margin-top:18px; }
.personal-user-hero { display:grid; grid-template-columns:minmax(180px,1.2fr) 150px minmax(260px,1fr); align-items:center; gap:26px; padding:24px; border:1px solid #bdcbd5; background:#f1f5f5; }.personal-user-hero>div:first-child span { color:#617287; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.personal-user-hero>div:first-child strong { display:block; margin:8px 0 5px; font-size:2.8rem; }.personal-user-hero small { color:#6b7a8b; }.personal-user-ring { width:116px; height:116px; display:grid; place-content:center; justify-items:center; border:10px solid #d9e2e1; border-right-color:#9fce37; border-radius:50%; }.personal-user-ring b { color:#102033; font-size:1.25rem; }.personal-user-ring span { color:#647489; font-size:.7rem; }.personal-user-facts { display:grid; gap:10px; }.personal-user-facts span { display:flex; justify-content:space-between; padding-bottom:9px; border-bottom:1px solid #ced8df; color:#536478; }.personal-user-facts b { color:#102033; }
.personal-funnel-step { position:relative; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; min-height:55px; border-bottom:1px solid #e1e7ec; }.personal-funnel-step>span { display:grid; place-items:center; width:24px; height:24px; background:#e7f0d0; color:#48611d; font-size:.72rem; font-weight:850; }.personal-funnel-step strong,.personal-funnel-step b { position:relative; z-index:1; }.personal-funnel-step b { color:#102033; }.personal-funnel-step i { position:absolute; left:38px; bottom:7px; height:3px; background:#c9df86; }
.personal-campaign-board,.personal-campaign-board>.personal-card-head { padding:20px; }.personal-campaign-board>.personal-card-head { margin-bottom:0; border-bottom:1px solid #dbe3e8; }.personal-view-switch { display:flex; gap:0; }.personal-view-switch button { border-radius:0; }.personal-view-switch button.active { background:#18283a; color:#fff; border-color:#18283a; }
.personal-kanban { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; padding:16px; background:#f4f7f8; }.personal-kanban-column { min-height:190px; padding:12px; border:1px solid #d3dde4; background:#fff; }.personal-kanban-column>span { display:flex; justify-content:space-between; color:#314255; font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }.personal-kanban-column>span b { color:#7a8b9b; }.personal-kanban-column .personal-empty { min-height:145px; margin-top:12px; padding:12px; }
.personal-collab-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }.personal-collab-grid { grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr); }.personal-integration-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }.personal-connection-row b { margin-left:auto; color:#536c24; font-size:.75rem; }.personal-connection-row span { flex:1; }
.personal-monitor-hero { padding:26px; border:1px solid #bdcbd5; background:#18283a; color:#fff; }.personal-monitor-hero h3 { margin:22px 0 5px; color:#fff; font-size:1.45rem; }.personal-monitor-hero p { margin:0; color:#c5d1dc; }.personal-health-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #526574; color:#d5ed7a; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.personal-health-badge i { width:8px; height:8px; border-radius:50%; background:#b8e353; }.personal-incident b { margin-left:auto; color:#9c3d36; font-size:.74rem; text-transform:uppercase; }
@media (max-width:900px) { .personal-metric-row,.personal-integration-summary,.personal-collab-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.personal-analytics-grid,.personal-finance-grid,.personal-users-grid,.personal-collab-grid,.personal-connection-grid,.personal-monitor-grid { grid-template-columns:1fr; }.personal-finance-band,.personal-user-hero { grid-template-columns:1fr 1fr; }.personal-money-mark { display:none; }.personal-finance-band>div:nth-child(2) { grid-column:1/-1; }.personal-kanban { overflow-x:auto; grid-template-columns:repeat(4,minmax(190px,1fr)); }.personal-module-head { flex-direction:column; }.personal-module-actions { width:100%; justify-content:space-between; } }
@media (max-width:560px) { .personal-metric-row,.personal-integration-summary,.personal-collab-strip,.personal-finance-band,.personal-user-hero { grid-template-columns:1fr; }.personal-finance-side { border-left:0; border-top:1px solid #c5d0d8; padding:14px 0 0; }.personal-user-ring { margin:auto; }.personal-user-facts { width:100%; }.personal-module-head h2 { font-size:1.35rem; } }

/* Product dashboard differentiation: each operational surface gets its own visual grammar. */
.ops-chat-collapsed{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid #cbd5e1;border-radius:16px;background:#ffffff;color:#102033;box-shadow:0 16px 42px rgba(15,23,42,.14);cursor:pointer}.ops-chat-collapsed span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#b8ef3c;color:#14210b;font-weight:900}.ops-chat-collapsed strong{font-size:13px}.ops-chat-collapsed small{color:#64748b;font-size:11px}.ops-chat-panel-open{animation:ops-chat-in .22s ease-out both;box-shadow:-18px 0 48px rgba(15,23,42,.1)}
@keyframes ops-chat-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.personal-module{min-width:0}.personal-module-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}.personal-module-head h2{margin:5px 0 8px;color:#102033;letter-spacing:-.04em}.personal-module-head>div:first-child{max-width:720px}.personal-module-head p:last-child{color:#526174}.personal-module-actions{display:flex;align-items:center;gap:10px}.personal-module-actions>span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.personal-module-actions button{white-space:nowrap}
/* Finance is a money center: balance-led, ledger-first, and intentionally unlike the other modules. */
.personal-finance{background:#f4f7fb;border:1px solid #cbd5e1;border-radius:18px;padding:26px;box-shadow:0 12px 30px rgba(15,23,42,.06)}.personal-finance .personal-module-head{padding-bottom:20px;border-bottom:1px solid #d8e0ea}.personal-finance-band{display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(120px,1fr));gap:1px;margin:0 0 24px;background:#d5dee8;border:1px solid #d5dee8;border-radius:14px;overflow:hidden}.personal-finance-band>div{min-height:124px;padding:20px;background:#fff}.personal-finance-band>div:first-child{background:#102033;color:#fff}.personal-finance-band span,.personal-finance-band small{display:block;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.personal-finance-band>div:first-child span,.personal-finance-band>div:first-child small{color:#b8c5d4}.personal-finance-band strong{display:block;margin:10px 0 5px;color:#102033;font-size:28px;letter-spacing:-.06em}.personal-finance-band>div:first-child strong{color:#fff}.personal-finance-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);gap:18px}.personal-ledger{background:#fff;border:1px solid #d5dee8;border-radius:14px;overflow:hidden}.personal-ledger .personal-card-head,.personal-finance-side{padding:18px}.personal-ledger table{width:100%;border-collapse:collapse}.personal-ledger th,.personal-ledger td{padding:13px 16px;border-top:1px solid #e5eaf0;text-align:left;font-size:12px}.personal-ledger th{color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.personal-ledger td{color:#233247}.personal-money-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf7c9;color:#365400;font-weight:900}.personal-finance-side{display:grid;align-content:start;gap:14px;background:#fff;border:1px solid #d5dee8;border-radius:14px}.personal-plan-card{padding:16px;border:1px solid #e5eaf0;border-radius:12px;background:#f8fafc}.personal-plan-card strong{display:block;color:#102033;font-size:15px}.personal-plan-card p{margin:5px 0 0;color:#64748b;font-size:12px;line-height:1.5}
/* Analytics is an investigation surface: signal rail, event stream, and analysis canvas. */
.personal-analytics{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.personal-analytics>.personal-module-head{grid-column:1/-1}.personal-analytics .personal-metric-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.personal-analytics-grid{display:contents}.personal-chart-card{min-height:360px;padding:22px;background:#102033;border-radius:18px;color:#fff;position:relative;overflow:hidden}.personal-chart-card h3{color:#fff}.personal-chart-card .personal-card-head{display:flex;justify-content:space-between}.personal-chart-card button{border:1px solid #40516a;background:transparent;color:#dce7f3;border-radius:8px;padding:8px 12px}.personal-chart-card .personal-empty{border-color:#40516a;color:#dce7f3}.personal-chart-card .personal-empty strong{color:#fff}.personal-sparkline{display:flex;align-items:center;min-height:190px;color:#b8ef3c}.personal-insight-card{padding:22px;background:#f8fafc;border-left:4px solid #b8ef3c;border-top:1px solid #d5dee8;border-right:1px solid #d5dee8;border-bottom:1px solid #d5dee8;border-radius:0 16px 16px 0}.personal-insight-card h3{margin:7px 0 18px;color:#102033}.personal-event-list{display:grid;gap:14px}.personal-event-list>div{display:flex;gap:10px;align-items:flex-start}.personal-event-list i{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#b8ef3c}.personal-event-list strong,.personal-event-list small{display:block}.personal-event-list strong{color:#233247;font-size:12px}.personal-event-list small{margin-top:4px;color:#718096;font-size:11px}
/* Users uses a customer-ops split: identity health on the left, lifecycle work on the right. */
.personal-users{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px}.personal-users>.personal-module-head{grid-column:1/-1}.personal-user-hero{padding:24px;background:#eaf7c9;border:1px solid #c8e486;border-radius:24px;display:grid;place-items:center;text-align:center}.personal-user-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;border:16px solid #c8e486;border-right-color:#102033;background:#fff}.personal-user-ring strong{display:block;color:#102033;font-size:32px}.personal-user-ring span{display:block;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.personal-users-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.personal-directory,.personal-user-facts{padding:20px;background:#fff;border:1px solid #d5dee8;border-radius:14px}.personal-directory{grid-row:span 2}.personal-directory h3,.personal-user-facts h3{margin:6px 0 16px;color:#102033}.personal-funnel{display:grid;gap:10px}.personal-funnel-step{display:flex;justify-content:space-between;padding:13px 14px;border-left:3px solid #b8ef3c;background:#f8fafc;color:#334155}
/* Marketing is a campaign workbench with columns rather than KPI cards. */
.personal-marketing{padding:24px;background:#fff;border:1px solid #d5dee8;border-radius:18px}.personal-campaign-board{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;overflow:auto}.personal-campaign-board>div{min-height:300px;padding:14px;background:#f4f7fb;border:1px solid #d5dee8;border-radius:12px}.personal-campaign-board>div>span{display:flex;justify-content:space-between;color:#64748b;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.personal-campaign-board>div>span b{color:#102033}.personal-campaign-board .personal-empty{margin-top:24px}.personal-control-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.personal-control-row button{padding:9px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:12px}.personal-control-row button:first-child{background:#102033;color:#fff;border-color:#102033}
/* Collaboration is a workboard; Integrations is a registry; Monitoring is an incident console. */
.personal-collaboration{padding:24px;background:#f8fafc;border:1px solid #d5dee8;border-radius:18px}.personal-collab-strip{display:flex;gap:1px;margin:20px 0;background:#d5dee8;border:1px solid #d5dee8}.personal-collab-strip>div{flex:1;padding:18px;background:#fff}.personal-collab-strip strong{display:block;margin-top:8px;color:#102033;font-size:24px}.personal-kanban{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.personal-kanban-column{min-height:240px;padding:14px;background:#fff;border:1px solid #d5dee8;border-radius:10px}.personal-kanban-column>span{display:flex;justify-content:space-between;color:#64748b;font-size:11px;font-weight:800}.personal-kanban-column b{color:#102033}.personal-decision-log{padding:20px;background:#102033;color:#fff;border-radius:14px}.personal-decision-log h3{color:#fff}.personal-decision-log .personal-empty{border-color:#40516a;color:#dce7f3}.personal-integrations{padding:24px;background:#fff;border:1px solid #d5dee8;border-radius:18px}.personal-connection-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:18px}.personal-connection-list,.personal-permission-card{padding:20px;border:1px solid #d5dee8;border-radius:14px;background:#f8fafc}.personal-connection-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid #e5eaf0}.personal-connection-row i{width:10px;height:10px;border-radius:50%;background:#cbd5e1}.personal-connection-row strong,.personal-connection-row small{display:block}.personal-connection-row strong{color:#102033;font-size:13px}.personal-connection-row small{color:#718096;font-size:11px}.personal-connection-row b{margin-left:auto;color:#496700;font-size:11px}.personal-permission-card{background:#102033;color:#fff}.personal-permission-card h3{color:#fff}.personal-permission-card .personal-empty{border-color:#40516a;color:#dce7f3}.personal-monitoring{padding:24px;background:#102033;color:#fff;border-radius:18px}.personal-monitoring .personal-module-head h2,.personal-monitoring .personal-module-head p:last-child{color:#fff}.personal-monitoring .personal-module-head .eyebrow,.personal-monitoring .personal-module-actions>span{color:#b8c5d4}.personal-monitor-hero{padding:26px 0 28px;border-top:1px solid #40516a;border-bottom:1px solid #40516a}.personal-monitor-hero h3{margin:16px 0 8px;color:#fff;font-size:30px}.personal-monitor-hero p{max-width:620px;color:#c6d2df}.personal-monitor-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:18px;margin-top:20px}.personal-incident-list,.personal-policy-card{padding:20px;border:1px solid #40516a;border-radius:12px;background:#17283c}.personal-incident{display:flex;gap:12px;padding:14px 0;border-top:1px solid #40516a}.personal-incident i{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#b8ef3c}.personal-incident strong,.personal-incident small{display:block}.personal-incident strong{color:#fff;font-size:12px}.personal-incident small{margin-top:4px;color:#b8c5d4;font-size:11px}.personal-incident b{margin-left:auto;color:#ffca7a;font-size:11px;text-transform:uppercase}
@media (max-width:900px){.personal-analytics,.personal-users,.personal-analytics-grid,.personal-finance-grid,.personal-connection-grid,.personal-monitor-grid{display:block}.personal-analytics .personal-metric-row{grid-template-columns:repeat(2,1fr);display:grid;margin-bottom:16px}.personal-chart-card,.personal-insight-card,.personal-user-hero,.personal-users-grid,.personal-ledger,.personal-finance-side,.personal-connection-list,.personal-permission-card,.personal-incident-list,.personal-policy-card{margin-bottom:16px}.personal-finance-band{grid-template-columns:repeat(2,1fr)}.personal-finance-band>div:first-child{grid-column:1/-1}.personal-campaign-board,.personal-kanban{grid-template-columns:repeat(4,220px)}.personal-module-head{display:block}.personal-module-actions{margin-top:14px}.ops-chat-collapsed{right:14px;bottom:14px}.personal-collab-strip{overflow:auto}.personal-collab-strip>div{min-width:130px}}
@media (max-width:560px){.personal-finance,.personal-marketing,.personal-collaboration,.personal-integrations,.personal-monitoring{padding:16px}.personal-finance-band{display:block}.personal-finance-band>div{border-bottom:1px solid #d5dee8}.personal-analytics .personal-metric-row{grid-template-columns:1fr 1fr}.personal-users-grid{display:block}.personal-campaign-board,.personal-kanban{grid-template-columns:repeat(4,190px)}.ops-chat-collapsed small{display:none}}

/* Helpfull AI reflow: the dashboard owns the freed width when the assistant is collapsed. */
.apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-collapsed) {
  grid-template-columns: 280px minmax(0, 1fr);
}
.apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-collapsed) > .ops-chat-collapsed {
  position: fixed;
  right: 24px;
  bottom: 24px;
  grid-column: auto;
}
.apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-panel-open) {
  grid-template-columns: 280px minmax(0, 1fr) 390px;
}
.apps-hub > .ops-page .ops-chat-panel-open {
  min-width: 0;
  background: #ffffff;
  color: #172033;
  border-left: 1px solid #cfd8e4;
}
.apps-hub > .ops-page .ops-chat-head,
.apps-hub > .ops-page .ops-chat-body,
.apps-hub > .ops-page .ops-chat-input,
.apps-hub > .ops-page .ops-setup-guide {
  background: #ffffff;
  color: #172033;
  border-color: #d7dee8;
}
.apps-hub > .ops-page .ops-chat-head strong,
.apps-hub > .ops-page .ops-chat-empty span,
.apps-hub > .ops-page .ops-chat-message p,
.apps-hub > .ops-page .ops-setup-guide strong { color: #172033; }
.apps-hub > .ops-page .ops-chat-head small,
.apps-hub > .ops-page .ops-chat-empty small,
.apps-hub > .ops-page .ops-setup-guide p,
.apps-hub > .ops-page .ops-setup-guide small { color: #526177; }
.apps-hub > .ops-page .ops-chat-message { border: 1px solid #d7dee8; background: #f8fafc; color: #172033; }
.apps-hub > .ops-page .ops-chat-message-user { background: #eef7d9; border-color: #c9df9b; }
.apps-hub > .ops-page .ops-chat-input input { border: 1px solid #cfd8e4; background: #ffffff; color: #172033; }
.apps-hub > .ops-page .ops-chat-input input::placeholder { color: #718096; }
.apps-hub > .ops-page .ops-chat-input button { background: #172033; color: #ffffff; }

/* No dark boxes or pale typography in the individual app workspace. */
.apps-hub .personal-decision-log,
.apps-hub .personal-permission-card,
.apps-hub .personal-monitoring,
.apps-hub .personal-incident-list,
.apps-hub .personal-policy-card,
.apps-hub .personal-monitoring .personal-incident-list,
.apps-hub .personal-monitoring .personal-policy-card {
  background: #ffffff;
  color: #172033;
  border: 1px solid #cfd8e4;
  box-shadow: 0 5px 16px rgba(32, 52, 80, .06);
}
.apps-hub .personal-decision-log h3,
.apps-hub .personal-permission-card h3,
.apps-hub .personal-monitoring h2,
.apps-hub .personal-monitoring h3,
.apps-hub .personal-monitoring p,
.apps-hub .personal-monitoring strong,
.apps-hub .personal-monitoring span,
.apps-hub .personal-monitoring small,
.apps-hub .personal-incident-list strong,
.apps-hub .personal-policy-card strong,
.apps-hub .personal-policy-card span { color: #172033 !important; }
.apps-hub .personal-monitoring .personal-module-head .eyebrow,
.apps-hub .personal-monitoring .personal-module-actions > span,
.apps-hub .personal-incident-list small,
.apps-hub .personal-policy-card small { color: #526177 !important; }
.apps-hub .personal-monitor-hero,
.apps-hub .personal-incident { border-color: #d7dee8; }
.apps-hub .personal-incident b { color: #547d12; }

@media (max-width: 980px) {
  .apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-collapsed),
  .apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-panel-open) { grid-template-columns: 210px minmax(0, 1fr); }
  .apps-hub > .ops-page .ops-chat-panel-open { grid-column: 2; }
}
@media (max-width: 700px) {
  .apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-collapsed),
  .apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-panel-open) { grid-template-columns: 1fr; }
  .apps-hub > .ops-page .ops-chat-panel-open { grid-column: auto; }
  .apps-hub > .ops-page .ops-layout-reference:has(> .ops-chat-collapsed) > .ops-chat-collapsed { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .apps-hub > .ops-page .ops-main { transition: padding .2s ease, max-width .2s ease; }
}

/* Portfolio control center: compact two-tab business surface with dark rail and light operational panels. */
.portfolio-control-center{min-height:100vh;background:#f5f7fa;color:#172033}.portfolio-control-center .apps-dashboard-rail{background:#10151b}.portfolio-control-center .apps-dashboard-rail-label{margin-top:30px}.portfolio-control-center .apps-dashboard-nav-item{display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:8px;background:transparent;color:#b8c0ca;padding:12px 14px;font-size:13px;font-weight:700;text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}.portfolio-control-center .apps-dashboard-nav-item:hover{background:#202932;color:#fff;transform:translateX(2px)}.portfolio-control-center .apps-dashboard-nav-item.active{background:#caff32;color:#10151b}.portfolio-control-center .apps-dashboard-nav-item.secondary{color:#8f9aa6;font-weight:650}.portfolio-control-center .apps-dashboard-nav-icon{display:grid;place-items:center;width:20px;color:inherit;font-size:16px}.apps-dashboard-nav-divider{height:1px;margin:13px 10px;background:#2a333d}.portfolio-control-center .apps-dashboard-page-head{align-items:flex-end}.portfolio-control-center .apps-dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.portfolio-control-center .apps-dashboard-kpis>div{min-height:126px}.portfolio-control-center .apps-dashboard-kpis strong{font-size:29px}.portfolio-fact-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}.portfolio-fact-strip>div{border:1px solid #dfe5ee;border-radius:10px;background:#fff;padding:14px 15px}.portfolio-fact-strip span,.portfolio-fact-strip small{display:block;color:#68758a;font-size:11px}.portfolio-fact-strip strong{display:block;margin:8px 0 3px;color:#172238;font-size:19px}.portfolio-overview-grid,.portfolio-secondary-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}.portfolio-activity-panel,.portfolio-attention-panel,.portfolio-apps-panel,.portfolio-todo-panel{min-height:310px}.portfolio-signal-list{display:grid}.portfolio-signal-list>div{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;border-top:1px solid #edf0f5;padding:16px 0}.portfolio-signal-list>div:first-child{border-top:0;padding-top:4px}.signal-index{color:#8ba91c;font:800 11px ui-monospace,SFMono-Regular,monospace}.portfolio-signal-list p{margin:0}.portfolio-signal-list strong,.portfolio-signal-list small{display:block}.portfolio-signal-list strong{color:#172033;font-size:13px}.portfolio-signal-list small{margin-top:4px;color:#68758a;font-size:12px;line-height:1.45}.portfolio-signal-list b{color:#172033;font-size:14px}.portfolio-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portfolio-app-card{display:flex;flex-direction:column;align-items:stretch;min-height:172px;border:1px solid #d8e0eb;border-radius:10px;background:#fff;padding:16px;text-align:left;cursor:pointer;box-shadow:0 6px 18px rgba(31,48,78,.035);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.portfolio-app-card:hover,.portfolio-app-card:focus-visible{border-color:#9fbe2d;box-shadow:0 12px 26px rgba(31,48,78,.1);outline:0;transform:translateY(-2px)}.portfolio-app-card-top,.portfolio-app-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.portfolio-app-card>strong{margin:16px 0 5px;color:#172033;font-size:16px}.portfolio-app-card>small{min-height:32px;color:#68758a;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.portfolio-app-card-foot{margin-top:auto;border-top:1px solid #edf0f5;padding-top:12px;color:#68758a;font-size:11px}.portfolio-app-card-foot b{color:#547d12}.portfolio-strategy-list{display:grid}.portfolio-strategy-list article{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;border-top:1px solid #edf0f5;padding:17px 0}.portfolio-strategy-list article:first-child{border-top:0;padding-top:4px}.portfolio-strategy-list article>span{color:#8ba91c;font:800 11px ui-monospace,SFMono-Regular,monospace}.portfolio-strategy-list strong{display:block;color:#172033;font-size:14px}.portfolio-strategy-list p{margin:6px 0 0;color:#68758a;font-size:12px;line-height:1.5}.portfolio-strategy-list article>b{border:1px solid #d9e3ba;border-radius:99px;background:#f4f9e8;color:#547d12;padding:5px 8px;font-size:10px;white-space:nowrap}.portfolio-strategy-note{align-self:start;background:#172033;color:#fff}.portfolio-strategy-note h2,.portfolio-strategy-note p,.portfolio-strategy-note .panel-kicker{color:#fff}.portfolio-strategy-note p{color:#d7dee8;line-height:1.6}.portfolio-todo-list{display:grid;gap:0}.portfolio-todo-list label{display:flex;align-items:flex-start;gap:12px;border-top:1px solid #edf0f5;color:#243147;padding:16px 0;font-size:13px;line-height:1.4;cursor:pointer}.portfolio-todo-list label:first-child{border-top:0;padding-top:5px}.portfolio-todo-list input{width:16px;height:16px;margin:0;accent-color:#9abf22}.portfolio-todo-empty{display:flex;gap:12px;align-items:flex-start;border-top:1px solid #edf0f5;margin-top:5px;padding-top:16px}.portfolio-todo-empty>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eff7d8;color:#547d12;font-weight:800}.portfolio-todo-empty p{margin:0}.portfolio-todo-empty strong,.portfolio-todo-empty small{display:block}.portfolio-todo-empty strong{color:#172033;font-size:13px}.portfolio-todo-empty small{margin-top:4px;color:#68758a;font-size:12px}.apps-transition-screen{display:grid;justify-items:center;align-content:center;min-height:calc(100vh - 2px);background:#f5f7fa;color:#172033;text-align:center}.apps-transition-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:13px;background:#caff32;color:#10151b;font-size:28px;font-weight:900;box-shadow:0 12px 26px rgba(151,189,29,.22)}.apps-transition-kicker{margin:26px 0 8px;color:#6b7d1c;font-size:10px;font-weight:850;letter-spacing:.16em}.apps-transition-screen h1{margin:0;color:#172033;font-size:26px;letter-spacing:-.04em}.apps-transition-screen>p:not(.apps-transition-kicker){margin:8px 0 24px;color:#68758a;font-size:13px}.apps-transition-screen small{margin-top:16px;color:#8995a4;font-size:11px}.apps-wave-loader{display:flex;align-items:center;justify-content:center;gap:4px;width:220px;height:34px;overflow:hidden}.apps-wave-loader span{display:block;width:22px;height:8px;border-radius:99px;background:#9fbe2d;transform:translateY(0);animation:apps-wave 1.2s ease-in-out infinite}.apps-wave-loader span:nth-child(2){animation-delay:-.1s}.apps-wave-loader span:nth-child(3){animation-delay:-.2s}.apps-wave-loader span:nth-child(4){animation-delay:-.3s}.apps-wave-loader span:nth-child(5){animation-delay:-.4s}.apps-wave-loader span:nth-child(6){animation-delay:-.3s}.apps-wave-loader span:nth-child(7){animation-delay:-.2s}.apps-wave-loader span:nth-child(8){animation-delay:-.1s}@keyframes apps-wave{0%,100%{transform:translateY(7px) scaleX(.8);opacity:.55}50%{transform:translateY(-7px) scaleX(1);opacity:1}}
@media(max-width:980px){.portfolio-control-center .apps-dashboard-kpis,.portfolio-fact-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-overview-grid,.portfolio-secondary-grid{grid-template-columns:1fr}}
@media(max-width:620px){.portfolio-control-center .apps-dashboard-rail{width:100%;height:auto;min-height:0;position:relative}.portfolio-control-center .apps-dashboard-brand{margin-bottom:8px}.portfolio-control-center .apps-dashboard-rail-label{margin:16px 0 7px}.portfolio-control-center .apps-dashboard-nav{display:flex;gap:6px;overflow:auto}.portfolio-control-center .apps-dashboard-nav-item{flex:0 0 auto;width:auto;padding:10px 12px}.portfolio-control-center .apps-dashboard-nav-divider{width:1px;height:34px;margin:0 3px}.portfolio-control-center .apps-dashboard-rail-bottom{display:none}.portfolio-control-center .apps-dashboard-topbar{padding:13px 16px}.portfolio-control-center .apps-dashboard-main{padding:20px 16px 36px}.portfolio-control-center .apps-dashboard-page-head{display:block}.portfolio-control-center .apps-dashboard-head-actions{margin-top:16px}.portfolio-control-center .apps-dashboard-kpis,.portfolio-fact-strip,.portfolio-app-grid{grid-template-columns:1fr}.portfolio-control-center .apps-dashboard-kpis>div{min-height:98px}.portfolio-strategy-list article{grid-template-columns:26px minmax(0,1fr)}.portfolio-strategy-list article>b{grid-column:2;justify-self:start}.portfolio-app-card{min-height:155px}}
@media(prefers-reduced-motion:reduce){.apps-wave-loader span{animation:none}.portfolio-control-center .apps-dashboard-nav-item,.portfolio-app-card{transition:none}}

/* Apps palette correction: monochrome control center; blue is reserved for utility links and focus indication. */
.portfolio-control-center{background:#f7f7f7;color:#111}.portfolio-control-center .apps-dashboard-rail{background:#0b0b0b}.portfolio-control-center .apps-dashboard-nav-item{color:#a7a7a7}.portfolio-control-center .apps-dashboard-nav-item:hover{background:#202020;color:#fff}.portfolio-control-center .apps-dashboard-nav-item.active{background:#fff;color:#0b0b0b}.portfolio-control-center .apps-dashboard-nav-item.secondary{color:#8d8d8d}.portfolio-control-center .apps-dashboard-nav-item.secondary:hover{color:#fff}.portfolio-control-center .apps-dashboard-nav-divider{background:#292929}.portfolio-control-center .apps-dashboard-workspace,.portfolio-control-center .apps-dashboard-topbar{background:#fff}.portfolio-control-center .apps-dashboard-main{background:#f7f7f7}.portfolio-control-center .apps-dashboard-page-head h1,.portfolio-control-center .apps-dashboard-panel h2,.portfolio-control-center .apps-dashboard-panel strong,.portfolio-control-center .apps-dashboard-kpis strong,.portfolio-fact-strip strong,.portfolio-signal-list b,.portfolio-app-card>strong,.portfolio-todo-empty strong{color:#111}.portfolio-control-center .apps-dashboard-description,.portfolio-control-center .apps-dashboard-sync,.portfolio-fact-strip span,.portfolio-fact-strip small,.portfolio-signal-list small,.portfolio-app-card>small,.portfolio-app-card-foot,.portfolio-strategy-list p,.portfolio-todo-empty small{color:#555}.portfolio-control-center .apps-dashboard-panel,.portfolio-fact-strip>div,.portfolio-app-card{border-color:#d4d4d4;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.035)}.portfolio-control-center .apps-dashboard-kpis>div{border-color:#d4d4d4;background:#fff}.portfolio-control-center .apps-dashboard-kpis>div+div{border-left-color:#d4d4d4}.portfolio-control-center .apps-dashboard-panel-head{border-bottom-color:#e6e6e6}.portfolio-control-center .panel-kicker,.portfolio-control-center .signal-index,.portfolio-control-center .portfolio-strategy-list article>span{color:#111}.portfolio-control-center .apps-dashboard-primary{background:#111;color:#fff;border-color:#111}.portfolio-control-center .apps-dashboard-primary:hover{background:#333}.portfolio-control-center .apps-dashboard-secondary,.portfolio-control-center .apps-dashboard-panel-head button{color:#111}.portfolio-control-center .apps-dashboard-panel-head button:hover,.portfolio-control-center .apps-dashboard-secondary:hover{color:#2454a6}.portfolio-control-center .portfolio-app-card:hover,.portfolio-control-center .portfolio-app-card:focus-visible{border-color:#111;box-shadow:0 12px 25px rgba(0,0,0,.11)}.portfolio-control-center .table-status.live i,.portfolio-control-center .panel-live i{background:#111}.portfolio-control-center .table-status.live,.portfolio-control-center .panel-live{color:#111}.portfolio-control-center .portfolio-strategy-list article,.portfolio-control-center .portfolio-todo-list label,.portfolio-control-center .portfolio-todo-empty,.portfolio-control-center .portfolio-app-card-foot{border-color:#e6e6e6}.portfolio-control-center .portfolio-strategy-list article>b{border-color:#d1d1d1;background:#f4f4f4;color:#111}.portfolio-control-center .portfolio-strategy-note{background:#111;color:#fff;border-color:#111}.portfolio-control-center .portfolio-strategy-note h2,.portfolio-control-center .portfolio-strategy-note p,.portfolio-control-center .portfolio-strategy-note .panel-kicker{color:#fff}.portfolio-control-center .portfolio-todo-list input{accent-color:#111}.portfolio-control-center .portfolio-todo-empty>span{background:#111;color:#fff}.portfolio-control-center .apps-dashboard-avatar{background:#111;color:#fff}.apps-transition-screen{background:#fff;color:#111}.apps-transition-mark{background:#111;color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.16)}.apps-transition-kicker,.apps-transition-screen h1{color:#111}.apps-transition-screen>p:not(.apps-transition-kicker),.apps-transition-screen small{color:#555}.apps-wave-loader span{background:#111}.portfolio-control-center a:focus-visible,.portfolio-control-center button:focus-visible{outline:2px solid #2454a6;outline-offset:2px}

/* Apps screenshot presentation: reversible privacy blur for capture preparation. */
.portfolio-control-center .screenshot-blur-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #d1d1d1;background:#f4f4f4;color:#111;font-weight:700;letter-spacing:.01em}
.portfolio-control-center .screenshot-blur-toggle:hover,.portfolio-control-center .screenshot-blur-toggle.active{border-color:#111;background:#111;color:#fff}
.portfolio-control-center .screenshot-blur-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio-control-center .portfolio-kpis strong,.portfolio-control-center .portfolio-fact-strip strong,.portfolio-control-center .portfolio-signal-list b,.portfolio-control-center .portfolio-app-card>strong,.portfolio-control-center .portfolio-app-card>small,.portfolio-control-center .portfolio-app-card-foot,.portfolio-control-center .portfolio-todo-list,.portfolio-control-center .portfolio-strategy-list,.portfolio-control-center .portfolio-attention-panel .apps-dashboard-queue{transition:filter 180ms ease}
.portfolio-control-center.screenshot-blur-enabled .portfolio-kpis strong,.portfolio-control-center.screenshot-blur-enabled .portfolio-fact-strip strong,.portfolio-control-center.screenshot-blur-enabled .portfolio-signal-list b,.portfolio-control-center.screenshot-blur-enabled .portfolio-app-card>strong,.portfolio-control-center.screenshot-blur-enabled .portfolio-app-card>small,.portfolio-control-center.screenshot-blur-enabled .portfolio-app-card-foot,.portfolio-control-center.screenshot-blur-enabled .portfolio-todo-list,.portfolio-control-center.screenshot-blur-enabled .portfolio-strategy-list,.portfolio-control-center.screenshot-blur-enabled .portfolio-attention-panel .apps-dashboard-queue{filter:blur(8px);user-select:none}
@media(max-width:760px){.portfolio-control-center .screenshot-blur-toggle{width:40px;justify-content:center;align-self:flex-end}.portfolio-control-center .apps-dashboard-head-actions{align-items:stretch}}
@media(prefers-reduced-motion:reduce){.portfolio-control-center .portfolio-kpis strong,.portfolio-control-center .portfolio-fact-strip strong,.portfolio-control-center .portfolio-signal-list b,.portfolio-control-center .portfolio-app-card>strong,.portfolio-control-center .portfolio-app-card>small,.portfolio-control-center .portfolio-app-card-foot,.portfolio-control-center .portfolio-todo-list,.portfolio-control-center .portfolio-strategy-list,.portfolio-control-center .portfolio-attention-panel .apps-dashboard-queue{transition:none}}

/* Apps metric presentation: larger hierarchy with currency-aware screenshot blur. */
.portfolio-control-center .portfolio-kpis>div>span{font-size:12px;letter-spacing:.11em;font-weight:800;text-transform:uppercase}
.portfolio-control-center .portfolio-kpis>div>strong{display:block;font-size:clamp(1.75rem,2.45vw,2.55rem);line-height:1;letter-spacing:-.045em;font-weight:850;margin-top:10px}
.portfolio-control-center .portfolio-kpis>div>small{display:block;font-size:13px;line-height:1.4;margin-top:12px}
.portfolio-control-center .portfolio-fact-strip>div>strong{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1;letter-spacing:-.04em;font-weight:850}
.portfolio-control-center .portfolio-signal-list b{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.04em;font-weight:850}
.portfolio-control-center .metric-currency-value{display:inline-flex;align-items:baseline;white-space:nowrap}
.portfolio-control-center .metric-currency-symbol,.portfolio-control-center .metric-currency-digits{display:inline-block;font:inherit;font-size:1em;line-height:1;letter-spacing:inherit;font-weight:inherit}
.portfolio-control-center .metric-currency-symbol{margin-right:2px}
.portfolio-control-center .metric-currency-digits{display:inline-block;min-width:3ch}
.portfolio-control-center.screenshot-blur-enabled .portfolio-kpis strong.metric-money,.portfolio-control-center.screenshot-blur-enabled .portfolio-signal-list b.metric-money{filter:none}
.portfolio-control-center.screenshot-blur-enabled .metric-currency-symbol{filter:none}
.portfolio-control-center.screenshot-blur-enabled .metric-currency-digits{filter:blur(3.8px);opacity:.84;transform:scaleX(1.02);transform-origin:center}
@media(max-width:760px){.portfolio-control-center .portfolio-kpis>div>strong{font-size:clamp(1.65rem,8vw,2.25rem)}.portfolio-control-center .portfolio-fact-strip>div>strong{font-size:1.7rem}.portfolio-control-center .portfolio-signal-list b{font-size:1.55rem}}

/* Final metric balance: restrained general values, full-size money amount. */
.portfolio-control-center .portfolio-kpis>div>strong{font-size:clamp(1.45rem,2vw,2.1rem);letter-spacing:-.035em}
.portfolio-control-center .portfolio-fact-strip>div>strong{font-size:clamp(1.35rem,1.8vw,1.8rem)}
.portfolio-control-center .portfolio-signal-list b{font-size:clamp(1.2rem,1.75vw,1.6rem)}
.portfolio-control-center .portfolio-kpis>div>strong.metric-money{font-size:clamp(1.55rem,2.2vw,2.25rem);letter-spacing:-.04em}
.portfolio-control-center .metric-currency-value{font-size:1em;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.portfolio-control-center .metric-currency-symbol,.portfolio-control-center .metric-currency-digits{font-family:inherit;font-size:1em !important;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
@media(max-width:760px){.portfolio-control-center .portfolio-kpis>div>strong{font-size:clamp(1.35rem,7vw,1.9rem)}.portfolio-control-center .portfolio-kpis>div>strong.metric-money{font-size:clamp(1.45rem,7.5vw,2rem)}.portfolio-control-center .portfolio-fact-strip>div>strong{font-size:1.5rem}.portfolio-control-center .portfolio-signal-list b{font-size:1.4rem}}

/* Supplied Jostavan mark: keep branded surfaces consistent and legible. */
.sidebar-logo-icon { width: 32px; height: 32px; display: block; object-fit: contain; border-radius: 8px; flex: 0 0 auto; }
.apps-dashboard-brand img { width: 31px; height: 31px; display: block; object-fit: contain; border-radius: 8px; flex: 0 0 auto; background: #111; }
.table-app-mark { overflow: hidden; background: #111; }
.table-app-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.portfolio-app-card .table-app-mark { width: 30px; height: 30px; border-radius: 7px; }

/* Let Apps pages grow and scroll naturally; only wide tables scroll horizontally. */
html:has(.apps-dashboard-shell),
body:has(.apps-dashboard-shell),
#root:has(.apps-dashboard-shell) { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
.apps-dashboard-shell { min-height: 100vh; height: auto; overflow: visible; }
.apps-dashboard-workspace { min-height: 100vh; overflow: visible; }
.apps-dashboard-main { overflow: visible; }
@media (max-width: 700px) {
  .apps-dashboard-shell, .apps-dashboard-workspace, .apps-dashboard-main { min-height: 0; overflow: visible; }
  .apps-dashboard-brand img { width: 29px; height: 29px; }
}


/* Waitlist access lanes: light preview surface, dark type, restrained blue accent. */
.wl-signup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-signup-fields .wl-hero-submit { grid-column: 1 / -1; }
.wl-preview-gate { min-height: 100vh; background: #f4f6f8; color: #111827; }
.wl-preview-status { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 999px; color: #334155; background: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wl-preview-main { max-width: 1180px; margin: 0 auto; padding: 92px 32px 56px; }
.wl-preview-kicker { margin-bottom: 18px; color: #2563eb; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.wl-preview-main h1 { max-width: 780px; margin: 0; color: #0b1220; font-size: clamp(42px, 7vw, 88px); line-height: .98; letter-spacing: -.065em; }
.wl-preview-lead { max-width: 680px; margin: 28px 0 52px; color: #334155; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; }
.wl-preview-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.wl-preview-card { min-height: 270px; padding: 26px; border: 1px solid #d8dee7; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .06); }
.wl-preview-card-primary { border-color: #9bbcff; background: linear-gradient(145deg, #fff, #eef5ff); }
.wl-preview-card-index { display: block; margin-bottom: 46px; color: #64748b; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.wl-preview-card h2 { margin: 0 0 12px; color: #0b1220; font-size: 23px; letter-spacing: -.03em; }
.wl-preview-card p { margin: 0; color: #475569; font-size: 15px; line-height: 1.55; }
.wl-preview-lock { display: inline-block; margin-top: 28px; color: #1d4ed8; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wl-preview-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #d8dee7; color: #64748b; font-size: 12px; }
@media (max-width: 760px) {
  .wl-signup-fields { grid-template-columns: 1fr; }
  .wl-signup-fields .wl-hero-submit { grid-column: auto; }
  .wl-preview-main { padding: 56px 20px 36px; }
  .wl-preview-grid { grid-template-columns: 1fr; }
  .wl-preview-card { min-height: 0; }
  .wl-preview-card-index { margin-bottom: 28px; }
  .wl-preview-footer { flex-direction: column; }
}


/* Waitlist preview dashboard: light operational shell, hard-edged typography, restrained blue signal accents. */
.wl-dashboard-root{min-height:100vh;background:#f5f6f8;color:#111827;display:flex;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wl-dashboard-sidebar{width:264px;min-height:100vh;background:#e8ebef;border-right:1px solid #cdd2d8;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;align-self:flex-start}.wl-dashboard-brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px;border-bottom:1px solid #cbd1d8}.wl-dashboard-brand strong{display:block;font-size:17px;letter-spacing:-.04em}.wl-dashboard-brand span{display:block;color:#5e6976;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-top:2px}.wl-sidebar-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:#6b7480;margin:28px 10px 10px}.wl-dashboard-sidebar nav{display:grid;gap:4px}.wl-dashboard-sidebar nav button{border:0;background:transparent;color:#3f4853;display:flex;align-items:center;gap:12px;border-radius:8px;padding:12px 10px;font:600 13px inherit;text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}.wl-dashboard-sidebar nav button span{width:20px;color:#697582;font-size:17px;text-align:center}.wl-dashboard-sidebar nav button:hover{background:#f7f8fa;color:#111827}.wl-dashboard-sidebar nav button.is-active{background:#111827;color:#fff}.wl-dashboard-sidebar nav button.is-active span{color:#9fc0e8}.wl-sidebar-bottom{margin-top:auto;border-top:1px solid #cbd1d8;padding:18px 10px 0}.wl-sidebar-bottom small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#56616e;font-size:11px;margin:10px 0 14px}.wl-sidebar-bottom button{border:0;background:transparent;padding:0;color:#111827;font-weight:700;font-size:12px;cursor:pointer}.wl-preview-status{display:inline-flex;border:1px solid #b9c1ca;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:800;letter-spacing:.11em;color:#515d69}
.wl-dashboard-content{min-width:0;flex:1;padding:0 52px 80px}.wl-dashboard-topbar{height:76px;border-bottom:1px solid #d8dce1;display:flex;align-items:center;justify-content:space-between}.wl-dashboard-topbar strong{font-size:13px;letter-spacing:.02em}.wl-topbar-email{color:#68727e;font-size:11px}.wl-mobile-kicker{display:none}.wl-dashboard-hero{max-width:1120px;margin:58px auto 0;display:flex;justify-content:space-between;gap:28px;align-items:flex-end}.wl-dashboard-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:900;color:#67727e;text-transform:uppercase}.wl-dashboard-hero h1,.wl-feature-detail h1,.wl-news-layout h1,.wl-launch-layout h1,.wl-account-layout h1{font-size:clamp(38px,5vw,70px);line-height:.98;letter-spacing:-.065em;margin:15px 0 20px;color:#101419}.wl-dashboard-hero p,.wl-feature-intro{max-width:680px;color:#4e5965;font-size:17px;line-height:1.65;margin:0}.wl-dashboard-status{border:1px solid #c6ccd3;background:#fff;padding:15px 18px;min-width:185px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.wl-dashboard-status span:last-child{display:block;color:#68727e;font-size:10px;letter-spacing:.04em;margin-top:8px}.wl-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3786c8;margin-right:8px}.wl-preview-metrics{max-width:1120px;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cdd3da;border-bottom:1px solid #cdd3da}.wl-preview-metrics>div{padding:24px 22px;border-right:1px solid #cdd3da}.wl-preview-metrics>div:last-child{border-right:0}.wl-preview-metrics strong{display:block;font-size:38px;letter-spacing:-.07em}.wl-preview-metrics span{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-top:8px}.wl-preview-metrics small{display:block;color:#6a7480;font-size:12px;margin-top:8px}.wl-dashboard-section,.wl-dashboard-callout,.wl-feature-detail,.wl-news-layout,.wl-launch-layout,.wl-account-layout{max-width:1120px;margin:68px auto 0}.wl-section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.wl-section-heading h2,.wl-dashboard-callout h2,.wl-account-actions h2{font-size:28px;letter-spacing:-.05em;margin:12px 0 0}.wl-text-link{border:0;background:transparent;color:#1e67a2;font-weight:800;cursor:pointer}.wl-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.wl-feature-grid button{background:#fff;border:1px solid #d7dce2;text-align:left;padding:26px;min-height:230px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.wl-feature-grid button:hover{transform:translateY(-3px);border-color:#8ca6be;box-shadow:0 12px 28px rgba(36,46,58,.08)}.wl-feature-grid span{color:#4385bc;font-size:12px;font-weight:900}.wl-feature-grid h3{font-size:22px;letter-spacing:-.04em;margin:28px 0 8px}.wl-feature-grid p{color:#5b6672;line-height:1.55;font-size:14px;min-height:66px}.wl-feature-grid b{font-size:11px;color:#1e67a2}.wl-dashboard-callout{background:#111827;color:#fff;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:24px}.wl-dashboard-callout .wl-dashboard-eyebrow{color:#a9b7c6}.wl-dashboard-callout h2{margin-top:8px}.wl-dashboard-callout p{color:#c2ccd6;max-width:550px;line-height:1.5}.wl-primary-btn,.wl-secondary-btn,.wl-danger-btn{border:0;border-radius:6px;padding:12px 15px;font-weight:800;font-size:12px;cursor:pointer;transition:transform .16s ease,background .16s ease}.wl-primary-btn{background:#dbeeff;color:#0f3553;white-space:nowrap}.wl-primary-btn:hover{background:#fff;transform:translateY(-1px)}.wl-feature-detail,.wl-news-layout,.wl-launch-layout,.wl-account-layout{padding-top:28px}.wl-capability-list{margin-top:46px;border-top:1px solid #cdd3da}.wl-capability-list article{display:grid;grid-template-columns:84px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid #d7dce2}.wl-capability-list span{color:#4385bc;font-weight:900;font-size:12px}.wl-capability-list p{margin:0;max-width:760px;font-size:20px;line-height:1.45;letter-spacing:-.02em}.wl-locked-note{margin-top:30px;padding:18px 20px;background:#fff;border-left:3px solid #4385bc;display:flex;gap:18px;align-items:center;color:#66717c;font-size:13px}.wl-locked-note strong{color:#111827;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.wl-news-card{max-width:780px;background:#fff;border:1px solid #d4d9df;padding:32px;margin-top:44px}.wl-news-date{color:#4385bc;font-size:10px;font-weight:900;letter-spacing:.12em}.wl-news-card h2{font-size:31px;letter-spacing:-.05em;line-height:1.05;margin:22px 0 14px}.wl-news-card p{color:#5c6772;line-height:1.6}.wl-locked-note-inline{display:block;color:#727d88;border-top:1px solid #e0e3e7;padding-top:18px;margin-top:26px;font-size:12px}.wl-launch-panel{background:#fff;border:1px solid #d4d9df;padding:40px;display:flex;gap:35px;align-items:center;margin-top:45px}.wl-launch-number{font-size:100px;line-height:1;letter-spacing:-.1em;color:#4385bc}.wl-launch-panel h2{font-size:30px;letter-spacing:-.05em;margin:0 0 10px}.wl-launch-panel p{max-width:600px;color:#5e6873;line-height:1.6}.wl-launch-chip{display:inline-block;background:#edf5fc;color:#2c6d9f;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.wl-launch-steps{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}.wl-launch-steps span{background:#e9edf1;padding:12px 14px;font-size:12px;color:#54606b}.wl-launch-steps b{color:#4385bc;margin-right:8px}.wl-account-notice{background:#eaf4fb;border:1px solid #b9d2e6;color:#285879;padding:14px 16px;margin:25px 0;font-size:13px}.wl-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:42px}.wl-plan-card{background:#fff;border:1px solid #d4d9df;padding:20px;display:flex;flex-direction:column;min-height:270px}.wl-plan-card.is-selected{border:2px solid #4385bc;padding:19px}.wl-plan-top{display:flex;justify-content:space-between;align-items:center}.wl-plan-top span{font-weight:900;font-size:13px;letter-spacing:.05em}.wl-plan-top small{font-size:9px;color:#697582;letter-spacing:.1em}.wl-plan-card>strong{font-size:25px;letter-spacing:-.06em;margin:28px 0 7px}.wl-plan-card p{color:#68737e;font-size:12px;line-height:1.45;min-height:48px}.wl-plan-card code{color:#7a8490;font-size:9px;word-break:break-all;margin:14px 0}.wl-secondary-btn{background:#edf0f3;color:#17202a;margin-top:auto}.wl-secondary-btn:hover{background:#dce3e9}.wl-account-actions{margin-top:54px;border-top:1px solid #ccd3da;padding-top:28px;display:flex;justify-content:space-between;gap:30px}.wl-account-actions p{max-width:640px;color:#69747f;line-height:1.5;font-size:13px}.wl-account-action-buttons{display:flex;gap:10px;align-items:flex-start}.wl-danger-btn{background:#f9e7e7;color:#9a3333}.wl-danger-btn:hover{background:#f3d4d4}
@media(max-width:900px){.wl-dashboard-sidebar{width:226px}.wl-dashboard-content{padding:0 28px 60px}.wl-plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.wl-dashboard-root{display:block}.wl-dashboard-sidebar{width:auto;min-height:0;position:relative;padding:16px 14px}.wl-dashboard-brand{padding-bottom:15px}.wl-sidebar-label{margin:17px 6px 7px}.wl-dashboard-sidebar nav{display:flex;overflow-x:auto;padding-bottom:5px}.wl-dashboard-sidebar nav button{min-width:max-content;padding:9px 10px;font-size:11px}.wl-sidebar-bottom{display:none}.wl-dashboard-content{padding:0 18px 50px}.wl-dashboard-topbar{height:58px}.wl-topbar-email{display:none}.wl-mobile-kicker{display:block;color:#7a858f;font-size:9px;letter-spacing:.12em;margin-bottom:4px}.wl-dashboard-hero{margin-top:37px;display:block}.wl-dashboard-hero h1,.wl-feature-detail h1,.wl-news-layout h1,.wl-launch-layout h1,.wl-account-layout h1{font-size:45px}.wl-dashboard-status{margin-top:25px}.wl-preview-metrics{margin-top:32px;grid-template-columns:1fr}.wl-preview-metrics>div{border-right:0;border-bottom:1px solid #cdd3da}.wl-preview-metrics>div:last-child{border-bottom:0}.wl-section-heading{display:block}.wl-text-link{padding:14px 0 0}.wl-feature-grid{grid-template-columns:1fr}.wl-dashboard-callout{display:block;margin-top:45px;padding:25px}.wl-primary-btn{margin-top:14px;width:100%}.wl-capability-list article{grid-template-columns:44px 1fr;gap:10px}.wl-capability-list p{font-size:16px}.wl-locked-note{display:block}.wl-locked-note strong{display:block;margin-bottom:9px}.wl-launch-panel{display:block;padding:25px}.wl-launch-number{font-size:70px;margin-bottom:20px}.wl-plan-grid{grid-template-columns:1fr}.wl-account-actions{display:block}.wl-account-action-buttons{margin-top:18px;flex-wrap:wrap}.wl-account-action-buttons button{flex:1;min-width:145px}}


/* Waitlist dashboard: pre-launch plans banner + news feed (Instagram/X-style posts). */
.wl-prelaunch-banner{background:#fff;border:1px solid #c6ccd3;border-left:3px solid #4385bc;padding:18px 20px;margin:25px 0 0}
.wl-prelaunch-banner strong{display:block;font-size:14px;letter-spacing:-.02em}
.wl-prelaunch-banner span{display:block;color:#5c6772;font-size:12.5px;line-height:1.55;margin-top:6px}
.wl-plan-card.is-soon{opacity:.55;filter:grayscale(1)}
.wl-plan-soon-tag{margin-top:auto;display:inline-block;border:1px solid #c6ccd3;border-radius:999px;padding:6px 10px;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#5c6772}
.wl-news-status{max-width:780px;background:#fff;border:1px solid #d4d9df;padding:20px 24px;margin-top:44px;color:#5c6772;font-size:13px}
.wl-news-status.is-error{border-left:3px solid #b3413f;color:#8c3a38}
.wl-news-feed{max-width:640px;margin-top:44px;display:grid;gap:20px}
.wl-news-post{background:#fff;border:1px solid #d4d9df;overflow:hidden}
.wl-news-post-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e6e9ec}
.wl-news-post-head strong{display:block;font-size:14px;letter-spacing:-.02em}
.wl-news-post-head span{display:block;color:#68727e;font-size:11px;margin-top:2px}
.wl-news-media{background:#0f1419}
.wl-news-media img,.wl-news-media video{display:block;width:100%;max-height:520px;object-fit:cover}
.wl-news-media audio{display:block;width:100%;padding:18px}
.wl-news-media.is-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.wl-news-media.is-grid img,.wl-news-media.is-grid video{height:100%;max-height:340px}
.wl-news-file-link{display:block;padding:22px 18px;color:#1e67a2;font-size:13px;font-weight:700;text-decoration:none}
.wl-news-caption{padding:16px 18px;margin:0;color:#26313c;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
@media(max-width:680px){.wl-news-media.is-grid{grid-template-columns:1fr}}

/* Detached waitlist preview shell: the preview navigation is a dedicated left rail, separate from the tester site's shell. */
.wl-dashboard-root {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  background: #f5f7f9;
}
.wl-dashboard-root .wl-dashboard-sidebar {
  order: 0;
  flex: 0 0 270px;
  border-right: 1px solid #d4d9df;
  border-left: 0;
}
.wl-dashboard-root .wl-dashboard-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 680px) {
  .wl-dashboard-root {
    display: block;
  }
  .wl-dashboard-root .wl-dashboard-sidebar {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #d4d9df;
  }
}


/* Preview asset repair revision: 2026-08-22. */

/* App Factory output review: persisted chat2 transcript and explicit idea approval controls. */
.af-output-panel { margin: 0 0 28px; padding: 20px; border: 1px solid #d8dee8; border-radius: 22px; background: #f8fafc; }
.af-output-stack { display: grid; gap: 12px; max-height: 360px; overflow: auto; }
.af-output-message { padding: 16px 18px; border: 1px solid #e1e7ef; border-radius: 16px; background: #fff; }
.af-output-label { margin-bottom: 8px; color: #1f2937; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.af-output-message p { margin: 0; color: #111827; white-space: pre-wrap; line-height: 1.65; }
.af-idea-select { display: inline-flex; align-items: center; gap: 7px; color: #111827; font-size: 11px; font-weight: 700; }
.af-idea-select input { width: 16px; height: 16px; accent-color: #111827; }


/* Landing revision: Jostavan leads; find.build.automate is the restrained secondary operating theme. */
.wl-hero { background: #f7f8fa; border-bottom: 1px solid #e7e9ed; }
.wl-hero-inner { width: min(1180px, calc(100% - 48px)); min-height: 640px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: clamp(48px, 8vw, 112px); align-items: center; padding: 82px 0 88px; margin: 0 auto; }
.wl-hero-copy { max-width: 680px; }
.wl-secondary-theme { display: block; margin: 20px 0 18px; color: #6c7785; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wl-hero-h1 { max-width: 700px; margin: 0 0 22px; font-size: clamp(46px, 6vw, 78px); line-height: .99; letter-spacing: -.06em; color: #101216; }
.wl-hero-h1 em { color: #2858c7; font-style: normal; }
.wl-hero-sub { max-width: 610px; margin: 0; color: #46505d; font-size: 18px; line-height: 1.65; }
.wl-hero-promise { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 36px; color: #6b7480; font-size: 13px; }
.wl-hero-promise span { display: inline-flex; align-items: center; gap: 6px; }
.wl-hero-promise span::before { content: '—'; color: #2858c7; font-weight: 800; }
.wl-hero-promise strong { color: #17191d; font-weight: 750; }
.wl-signup-panel { align-self: center; padding: 26px; background: rgba(255,255,255,.72); border: 1px solid #e1e5eb; border-radius: 22px; box-shadow: 0 18px 48px rgba(21,31,48,.07); }
.wl-signup-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.wl-signup-panel-label, .wl-signup-panel-status { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wl-signup-panel-label { color: #20242b; }
.wl-signup-panel-status { color: #718096; }
.wl-signup-panel h2 { margin: 0 0 10px; color: #14161a; font-size: 25px; line-height: 1.12; letter-spacing: -.035em; }
.wl-signup-panel > p { margin: 0 0 22px; color: #697380; font-size: 13px; line-height: 1.55; }
.wl-signup-panel .wl-hero-form { max-width: none; margin: 0; }
.wl-signup-panel .wl-hero-input-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.wl-signup-panel .wl-hero-input { width: 100%; box-sizing: border-box; padding: 12px 13px; background: #fbfcfd; border: 1px solid #e1e5eb; border-radius: 10px; font-size: 14px; }
.wl-signup-panel .wl-hero-input:focus { border-color: #7898df; box-shadow: 0 0 0 3px rgba(40,88,199,.1); }
.wl-signup-panel .wl-hero-submit { width: 100%; margin-top: 4px; padding: 13px 16px; border-radius: 10px; background: #16181c; }
.wl-signup-panel .wl-hero-submit:hover { background: #2858c7; }
.wl-signup-panel .wl-hero-error { margin: 10px 0 0; }
.wl-signup-panel .wl-success-box { margin-top: 4px; }
.wl-signup-panel-note { display: block; margin-top: 18px; color: #8a929d; font-size: 11px; line-height: 1.45; }
.wl-theme-divider { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid rgba(17,24,39,.09); }
.wl-theme-divider span, .wl-footer-secondary-theme { color: #2858c7; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wl-theme-divider i { color: #8a929d; font-size: 12px; font-style: normal; }
.wl-footer-secondary-theme { display: block; margin-top: 7px; color: #7a8795; font-size: 10px; }
@media (max-width: 820px) {
  .wl-hero-inner { width: min(100% - 40px, 620px); min-height: 0; grid-template-columns: 1fr; gap: 42px; padding: 64px 0 68px; }
  .wl-hero-copy { max-width: none; }
  .wl-signup-panel { width: min(100%, 390px); box-sizing: border-box; }
}
@media (max-width: 520px) {
  .wl-hero-inner { width: calc(100% - 32px); padding: 48px 0 56px; gap: 32px; }
  .wl-hero-h1 { font-size: 44px; }
  .wl-hero-sub { font-size: 16px; }
  .wl-hero-promise { flex-direction: column; gap: 9px; margin-top: 28px; }
  .wl-signup-panel { padding: 21px; border-radius: 17px; }
  .wl-theme-divider { flex-direction: column; gap: 5px; }
}

/* Landing scale correction: give the hero a full editorial canvas instead of inheriting the old narrow centered composition. */
.wl-hero { align-items: stretch; text-align: left; padding: 0; }
.wl-hero-inner { max-width: 1440px; width: calc(100% - 96px); min-height: 720px; grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr); gap: clamp(64px, 9vw, 148px); padding: 96px 0 104px; }
.wl-hero-copy { max-width: 780px; }
.wl-hero-h1 { max-width: 780px; font-size: clamp(52px, 5.5vw, 82px); }
.wl-hero-sub { max-width: 650px; }
.wl-signup-panel { width: 100%; max-width: 430px; justify-self: end; padding: 32px; }
@media (max-width: 1100px) {
  .wl-hero-inner { width: calc(100% - 64px); gap: 58px; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); }
  .wl-hero-h1 { font-size: clamp(48px, 5.5vw, 68px); }
}
@media (max-width: 820px) {
  .wl-hero-inner { width: min(100% - 40px, 620px); min-height: 0; grid-template-columns: 1fr; gap: 42px; padding: 64px 0 68px; }
  .wl-signup-panel { max-width: 430px; justify-self: start; padding: 26px; }
}

/* App Factory final review: structured output card for the chat2 completion artifact. */
.af-final-review-card { margin: 28px 0; padding: 28px; border: 1px solid rgba(17, 24, 39, .14); border-radius: 28px; background: #f8fafc; color: #111827; box-shadow: 0 18px 50px rgba(15, 23, 42, .08); }
.af-final-review-summary { padding: 22px 0 18px; border-bottom: 1px solid rgba(17, 24, 39, .12); }
.af-final-review-summary h3 { margin: 0 0 8px; color: #111827; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.03em; }
.af-final-review-summary p, .af-review-columns p, .af-review-columns li { color: #334155; line-height: 1.6; }
.af-review-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.af-review-metrics > div { min-height: 92px; padding: 15px; border: 1px solid rgba(17, 24, 39, .12); border-radius: 18px; background: #fff; }
.af-review-metrics span { display: block; margin-bottom: 8px; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.af-review-metrics strong { display: block; color: #111827; font-size: .94rem; }
.af-review-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.af-review-columns article { padding: 18px; border: 1px solid rgba(17, 24, 39, .12); border-radius: 20px; background: #fff; }
.af-review-columns h4 { margin: 0 0 10px; color: #111827; font-size: 1rem; }
.af-review-columns ol { margin: 0; padding-left: 1.2rem; }
.af-review-pdf { display: inline-flex; margin-top: 18px; padding: 11px 16px; border-radius: 999px; background: #111827; color: #fff; font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.af-review-pdf:hover { background: #2563eb; transform: translateY(-1px); }
@media (max-width: 900px) { .af-review-metrics, .af-review-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .af-final-review-card { padding: 20px; border-radius: 22px; } .af-review-metrics, .af-review-columns { grid-template-columns: 1fr; } }


/* Import App flow — light editorial dashboard treatment, with clear credential boundaries. */
.import-app-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .38); backdrop-filter: blur(7px); }
.import-app-dialog { width: min(760px, 100%); max-height: min(820px, calc(100vh - 48px)); overflow: auto; background: #fff; border: 1px solid #d8e0ea; border-radius: 24px; box-shadow: 0 24px 80px rgba(15, 23, 42, .22); padding: 30px; color: #172033; }
.import-app-dialog-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid #e2e8f0; }
.import-app-dialog-head h2 { margin: 5px 0 8px; font-size: 28px; letter-spacing: -.04em; color: #172033; }
.import-app-dialog-head p, .import-app-step-copy p { margin: 0; color: #5b6a7e; line-height: 1.55; }
.import-app-close { width: 36px; height: 36px; border: 1px solid #dbe3ec; border-radius: 50%; background: #f7f9fc; color: #25344a; font-size: 25px; cursor: pointer; }
.import-app-error { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #f0b7b7; border-radius: 10px; background: #fff5f5; color: #a12d2d; font-size: 13px; }
.import-app-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 24px; }
.import-app-choice { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 160px; padding: 22px; text-align: left; background: #f7f9fc; border: 1px solid #dce4ee; border-radius: 17px; color: #172033; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.import-app-choice:hover { transform: translateY(-2px); border-color: #9fb3ca; box-shadow: 0 12px 28px rgba(30, 55, 85, .1); }
.import-app-choice-primary { background: #eef4f8; border-color: #b9ccdc; }
.import-app-choice-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: #172033; color: #fff; font-size: 21px; }
.import-app-choice strong, .import-app-choice small, .import-app-repo strong, .import-app-repo small, .import-app-connector strong, .import-app-connector small { display: block; }
.import-app-choice strong { margin-bottom: 7px; font-size: 15px; }
.import-app-choice small { color: #5b6a7e; font-size: 12px; line-height: 1.5; }
.import-app-choice > b { font-size: 20px; color: #61728a; }
.import-app-step { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding-top: 28px; }
.import-app-step-index { color: #547d12; font-size: 12px; font-weight: 800; letter-spacing: .12em; padding-top: 4px; }
.import-app-step-copy h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.025em; color: #172033; }
.import-app-action { margin-top: 22px; }
.import-app-text-button { display: inline-block; margin-top: 16px; padding: 0; border: 0; background: none; color: #355a82; font-weight: 700; cursor: pointer; }
.import-app-text-button:disabled { color: #92a0af; cursor: wait; }
.import-app-search { width: 100%; margin: 18px 0 10px; padding: 12px 13px; border: 1px solid #ccd7e4; border-radius: 9px; color: #172033; background: #fff; outline: none; }
.import-app-search:focus { border-color: #7696b5; box-shadow: 0 0 0 3px rgba(83, 125, 154, .14); }
.import-app-repo-list { display: grid; gap: 8px; max-height: 320px; overflow: auto; padding-right: 3px; }
.import-app-repo { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid #e0e6ee; border-radius: 11px; background: #fff; text-align: left; color: #172033; cursor: pointer; }
.import-app-repo:hover, .import-app-repo.selected { border-color: #9eb4c8; background: #f4f8fb; }
.import-app-repo-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #eaf0f5; color: #3d5973; }
.import-app-repo small, .import-app-connector small { margin-top: 3px; color: #6c7a8c; font-size: 11px; }
.import-app-repo > b { color: #547d12; }
.import-app-empty { padding: 22px; border: 1px dashed #c9d4e1; border-radius: 11px; color: #66758a; text-align: center; }
.import-app-connector-list { display: grid; gap: 9px; margin-top: 20px; }
.import-app-connector { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce4ee; border-radius: 11px; background: #fff; cursor: pointer; }
.import-app-connector.selected { background: #f3f8f4; border-color: #b9d1bf; }
.import-app-connector input { position: absolute; opacity: 0; pointer-events: none; }
.import-app-connector-check { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #bbc8d5; border-radius: 6px; color: #fff; background: #fff; font-size: 13px; }
.import-app-connector.selected .import-app-connector-check { border-color: #547d12; background: #547d12; }
.import-app-custom { margin-top: 20px; padding: 17px; border: 1px solid #dce4ee; border-radius: 14px; background: #f8fafc; }
.import-app-custom h4 { margin: 5px 0 4px; color: #172033; }
.import-app-custom p { margin: 0 0 13px; color: #64748b; font-size: 12px; }
.import-app-custom-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 9px; }
.import-app-custom-fields input { min-width: 0; padding: 10px 11px; border: 1px solid #ccd7e4; border-radius: 8px; color: #172033; background: #fff; }
.import-app-custom-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.import-app-custom-list span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border-radius: 7px; background: #eaf3ea; color: #28482d; font-size: 12px; }
.import-app-custom-list b { font-size: 10px; font-weight: 600; color: #547d12; }
.import-app-custom-list button { border: 0; background: none; color: #587064; cursor: pointer; }
.import-app-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 25px; }
@media (max-width: 640px) { .import-app-overlay { padding: 10px; align-items: flex-end; } .import-app-dialog { max-height: calc(100vh - 20px); padding: 21px; border-radius: 20px 20px 0 0; } .import-app-choice-grid, .import-app-custom-fields { grid-template-columns: 1fr; } .import-app-choice { min-height: 126px; padding: 16px; } .import-app-dialog-head h2 { font-size: 23px; } }

/* Referral billing controls: keep ownership and checkout states easy to scan. */
.po-referral-card { background: linear-gradient(135deg, #f8fbff 0%, #ffffff 72%); border-color: #cfe0f5; }
.po-referral-checkout-card { background: #fbfcfe; border-color: #d8e0ea; }
.po-referral-code-row, .po-referral-input-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.po-referral-code { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid #a9bfdc; border-radius: 9px; background: #fff; color: #102a43; font: 700 21px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.po-referral-input { max-width: 170px; letter-spacing: .18em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; }
.po-referral-message { margin: 10px 0 0; color: #486581; font-size: 13px; }
@media (max-width: 680px) { .po-referral-code-row, .po-referral-input-row { align-items: stretch; flex-direction: column; } .po-referral-code, .po-referral-input { max-width: none; width: 100%; } }

/* Waitlist dashboard — referral card */
.wl-referral-section { margin-top: 34px; padding: 26px 24px; border: 1px solid #d9e2ec; border-radius: 16px; background: linear-gradient(135deg, #f8fafc, #eef3f9); }
.wl-referral-section h2 { margin: 6px 0 8px; font-size: 22px; color: #102a43; }
.wl-referral-intro { margin: 0 0 18px; color: #486581; font-size: 14px; line-height: 1.55; max-width: 640px; }
.wl-referral-note { margin: 0 0 12px; color: #b45309; font-size: 13px; }
.wl-referral-card { display: grid; gap: 16px; }
.wl-referral-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-referral-code { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #a9bfdc; border-radius: 10px; background: #fff; color: #102a43; font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
.wl-referral-stats { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wl-referral-stats strong { font-size: 26px; color: #102a43; }
.wl-referral-stats span { color: #486581; font-size: 13px; }
.wl-referral-stats em { font-style: normal; font-size: 13px; font-weight: 600; color: #829ab1; padding: 4px 10px; border-radius: 999px; background: #e6edf5; }
.wl-referral-stats em.is-active { color: #046c4e; background: #d7f0e3; }
.wl-referral-progress span { display: block; margin-bottom: 6px; color: #486581; font-size: 12.5px; }
.wl-referral-progress div { height: 8px; border-radius: 999px; background: #dbe6f1; overflow: hidden; max-width: 420px; }
.wl-referral-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #22c55e); transition: width .3s ease; }
@media (max-width: 680px) { .wl-referral-section { padding: 20px 16px; } .wl-referral-code-row { align-items: stretch; flex-direction: column; } .wl-referral-code { justify-content: center; width: 100%; } }


/* Surgical operations additions */
.marketing-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0;padding:14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.marketing-controls label{display:flex;align-items:center;gap:8px;font-size:13px}
.marketing-controls select,.marketing-controls input[type=text],.domain-form input{padding:9px 11px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
.marketing-platforms{display:flex;gap:6px}
.marketing-platforms button{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:8px 11px;cursor:pointer}
.marketing-platforms button.active{background:#111;color:#fff;border-color:#111}
.marketing-post-list{display:grid;gap:10px;margin-top:16px}
.marketing-post{border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#fff}
.marketing-post>div{display:flex;gap:8px;align-items:center;text-transform:capitalize;font-size:12px}
.marketing-post span{color:#6b7280}
.marketing-post p{font-size:14px;line-height:1.55;white-space:pre-wrap}
.marketing-post button{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}
.personal-inline-note{margin:10px 0;padding:9px 11px;border-radius:8px;background:#f3f4f6;font-size:13px}
.personal-review-card,.personal-domain-card,.personal-branding-card{margin-top:18px;padding:18px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.personal-review-card ul{margin:12px 0 0 18px;padding:0}
.personal-review-card li{margin:7px 0;font-size:14px}
.domain-form{display:flex;gap:8px;margin-top:12px}
.domain-form input{flex:1;min-width:0}
.domain-form button,.personal-branding-card button{border:0;border-radius:8px;padding:9px 13px;background:#111;color:#fff;cursor:pointer}
.personal-domain-card small,.personal-branding-card small{display:block;margin-top:9px;color:#6b7280}
.personal-branding-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.personal-branding-card p{margin:4px 0 0;color:#6b7280;font-size:13px}

/* Main launch operations workspace */
.ops-main-page{min-height:100%;padding:32px 40px;background:#fafafa;color:#151515;overflow:auto}
.ops-main-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.ops-main-eyebrow{display:block;font-size:10px;letter-spacing:.14em;font-weight:700;color:#777;margin-bottom:7px}
.ops-main-header h1{margin:0;font-size:30px;letter-spacing:-.03em}
.ops-main-header p{margin:8px 0 0;color:#666;max-width:680px}
.ops-main-app-picker{display:flex;flex-direction:column;gap:6px;min-width:230px}
.ops-main-app-picker label{font-size:11px;font-weight:700;color:#777;text-transform:uppercase;letter-spacing:.08em}
.ops-main-app-picker select{padding:11px 12px;border:1px solid #ddd;border-radius:9px;background:#fff}
.ops-main-tabs{display:flex;gap:4px;border-bottom:1px solid #e7e7e7;margin-bottom:24px;overflow:auto}
.ops-main-tabs button{border:0;background:transparent;padding:11px 15px;color:#777;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.ops-main-tabs button.active{color:#111;border-bottom-color:#111;font-weight:700}
.ops-main-tabs button:disabled{opacity:.45;cursor:not-allowed}
.ops-main-body{max-width:1250px}
.ops-main-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ops-main-card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:18px}
.ops-main-card>span,.ops-main-card>small{display:block;color:#777;font-size:12px}
.ops-main-card>strong{display:block;font-size:17px;margin:8px 0 5px}
.ops-main-empty{margin:40px auto;max-width:700px;padding:48px;text-align:center;background:#fff;border:1px solid #e8e8e8;border-radius:14px;color:#666}
.ops-main-empty strong{display:block;color:#222;font-size:17px;margin-bottom:8px}
.ops-db-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.ops-db-header h2{margin:0 0 6px;font-size:22px}
.ops-db-header p{margin:0;color:#666;max-width:750px}
.ops-db-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px}
.ops-db-tables h3,.ops-db-rows h3,.ops-db-sql h3{margin:0 0 12px;font-size:14px}
.ops-db-tables button{width:100%;display:flex;justify-content:space-between;border:0;background:transparent;padding:9px 8px;border-radius:8px;cursor:pointer;text-align:left}
.ops-db-tables button:hover,.ops-db-tables button.active{background:#f2f3f5}
.ops-db-tables button strong{color:#888}
.ops-db-table-wrap{overflow:auto;max-height:420px}
.ops-db-rows table{width:100%;border-collapse:collapse;font-size:12px}
.ops-db-rows th,.ops-db-rows td{text-align:left;padding:8px;border-bottom:1px solid #eee;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.ops-db-sql{margin-top:14px}
.ops-db-sql p{font-size:12px;color:#777}
.ops-db-sql textarea{width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:8px;padding:10px;font-family:monospace;font-size:12px}
.ops-db-sql button{margin-top:8px}
.ops-db-sql pre{max-height:300px;overflow:auto;background:#111;color:#eee;border-radius:8px;padding:12px;font-size:11px}
.sidebar-launch-locked{display:flex;align-items:center;gap:9px;margin:2px 8px;padding:9px 12px;border-radius:8px;color:#aaa;opacity:.55;cursor:not-allowed;font-size:13px}
.sidebar-launch-locked .sidebar-item-icon{width:14px;text-align:center}
.sidebar-launch-locked small{margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){.ops-main-page{padding:24px 18px}.ops-main-header{align-items:stretch;flex-direction:column}.ops-main-grid{grid-template-columns:1fr 1fr}.ops-db-layout{grid-template-columns:1fr}}


/* ── Guaranteed page scrolling ────────────────────────────────────────── */
/* The app shell is intentionally viewport-locked, so each page owns its
   vertical scroll area instead of relying on the body scrollbar. */
.content-area {
  min-width: 0;
  min-height: 0;
}

.content-area > .new-task-screen,
.content-area > .files-page,
.content-area > .tl-page,
.content-area > .ops-main-page {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.new-task-screen {
  justify-content: flex-start;
  align-items: center;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overscroll-behavior: contain;
}

.new-task-hero {
  flex-shrink: 0;
}

.capabilities-section {
  flex-shrink: 0;
  padding-bottom: 64px;
}

.tl-page {
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: 64px;
}

.files-page {
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.files-grid {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keep the task detail workspace usable while its history/event columns
   retain their own scrollbars. */
.tasks-layout {
  min-height: 0;
  height: 100%;
}

.tasks-history,
.event-stream,
.preview-pane {
  min-height: 0;
}

@media (max-width:760px) { .capability-modal { width:calc(100vw - 28px); max-height:calc(100vh - 28px); padding:32px 24px 28px; border-radius:20px; } .capability-modal h3 { font-size:26px; } .capability-modal > p:not(.capabilities-eyebrow) { font-size:15px; } }

.ops-main-header-actions{display:flex;align-items:flex-end;gap:12px}.ops-main-import-button{border:1px solid #111;background:#111;color:#fff;border-radius:9px;padding:11px 15px;font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap}.ops-main-import-button:hover{background:#2a2a2a}.ops-main-header-actions-buttons{display:flex;align-items:center;gap:8px}.ops-main-import-secondary{background:#fff;color:#111;border:1px solid #cfd6df}.ops-main-import-secondary:hover{background:#f3f5f7}.ops-edit-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px}.ops-main-inline-button{align-self:flex-start;border:1px solid #dfe5ee;border-radius:8px;background:#fff;color:#243147;padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer}

.operations-import-dialog{width:min(900px,100%)}.operations-import-progress{display:grid;grid-template-columns:repeat(9,minmax(70px,1fr));gap:4px;margin-top:20px;padding:6px;border:1px solid #e2e8f0;border-radius:12px;background:#f7f9fc;overflow:auto}.operations-import-progress button{border:0;background:transparent;border-radius:8px;padding:8px 5px;color:#718096;font-size:10px;cursor:pointer;white-space:nowrap}.operations-import-progress button.active{background:#172033;color:#fff}.operations-import-progress button.done{color:#547d12;background:#eef5ea}.operations-import-prompt{margin-top:18px;padding:13px 15px;border:1px solid #dce4ee;border-left:3px solid #547d12;border-radius:10px;background:#f8fafc;color:#536478;font-size:12px;line-height:1.55}.operations-import-prompt strong{color:#23334a}

.operations-import-overlay{z-index:1200;background:rgba(10,12,16,.48);backdrop-filter:blur(6px)}.operations-import-dialog{width:min(1120px,94vw);max-height:92vh;overflow:auto;padding:28px}.import-app-dialog-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:22px}.import-app-dialog-head h2{margin:5px 0 7px}.import-app-dialog-head p{margin:0;color:#69707d}.import-app-close{border:0;background:transparent;font-size:28px;cursor:pointer}.operations-import-progress{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:22px}.operations-import-progress button{border:1px solid #e1e4e8;background:#fafafa;border-radius:9px;padding:9px 5px;font-size:11px;color:#777}.operations-import-progress button span{display:block;font-size:10px;margin-bottom:3px}.operations-import-progress button.active{border-color:#111;background:#111;color:#fff}.operations-import-step{display:flex;gap:18px}.operations-import-step .import-app-step-copy{flex:1}.operations-import-prompt{margin-top:18px;padding:13px 15px;border:1px solid #e5e7eb;border-radius:10px;background:#f8f9fb;font-size:12px;line-height:1.55;color:#4b5563}.operations-import-connector-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.operations-import-field{display:block;margin:12px 0}.operations-import-field>span{display:block;font-size:12px;font-weight:600;margin-bottom:6px}.operations-import-field input,.operations-import-field textarea,.operations-import-field select{width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:9px;padding:10px;background:#fff}.operations-import-check{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #eee}.operations-import-review{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.operations-import-review>div{padding:13px;border:1px solid #e5e7eb;border-radius:10px}.operations-import-review span,.operations-import-review strong{display:block}.operations-import-review span{font-size:11px;color:#777;margin-bottom:5px}.operations-import-final-warning{margin-top:15px;padding:14px;border:1px solid #dfe3e8;border-radius:10px;display:flex;flex-direction:column;gap:5px}.import-app-submit-row{display:flex;justify-content:space-between;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid #eee}@media(max-width:800px){.operations-import-progress{grid-template-columns:repeat(3,1fr)}.operations-import-connector-list,.operations-import-review{grid-template-columns:1fr}.operations-import-dialog{padding:18px}}

.ops-analytics-full{display:flex;flex-direction:column;gap:16px}.ops-analytics-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.ops-analytics-head h2{margin:4px 0 6px}.ops-analytics-head p{margin:0;color:#69707d;max-width:760px}.ops-analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ops-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ops-analytics-grid .ops-main-card h3,.ops-analytics-full>.ops-main-card h3{margin:0 0 10px}.ops-analytics-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef1f5;font-size:13px}.ops-analytics-row strong{white-space:nowrap}.ops-analytics-row small{font-weight:500;color:#7b8492}.ops-analytics-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ops-analytics-section-head h3{margin:0 0 5px}.ops-analytics-section-head p{margin:0;color:#737b88}.ops-analytics-error-list{display:grid;gap:8px;margin-top:12px}.ops-analytics-error-list>div{padding:10px 12px;border:1px solid #f0d8d8;border-radius:9px;background:#fffafa}.ops-analytics-error-list strong,.ops-analytics-error-list span{display:block}.ops-analytics-error-list span{font-size:11px;color:#7a808a;margin-top:3px}.ops-analytics-muted{color:#7b8492}.ops-analytics-event-table{overflow:auto;margin-top:12px;border:1px solid #e7ebf0;border-radius:10px}.ops-analytics-event-table table{width:100%;border-collapse:collapse;font-size:11px}.ops-analytics-event-table th,.ops-analytics-event-table td{padding:9px 10px;border-bottom:1px solid #eef1f5;text-align:left;vertical-align:top;white-space:nowrap}.ops-analytics-event-table td:last-child{white-space:normal;min-width:260px}.ops-analytics-event-table code{font-size:10px;word-break:break-word}@media(max-width:900px){.ops-analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-analytics-grid{grid-template-columns:1fr}.ops-analytics-head{flex-direction:column}}@media(max-width:560px){.ops-analytics-kpis{grid-template-columns:1fr}}


/* Waitlist feature feedback: high-visibility entry point and submission workspace */
.wl-feature-request-banner {
  display: flex; align-items: center; gap: 18px; margin: 24px 0;
  padding: 24px; border: 1px solid rgba(126, 106, 255, .32); border-radius: 20px;
  background: radial-gradient(ellipse at 0% 0%, rgba(115, 91, 255, .18), transparent 58%), var(--wl-panel, #11121b);
}
.wl-feature-request-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px;
  width: 48px; height: 48px; border-radius: 15px; color: #c6bbff;
  background: rgba(130, 107, 255, .18); font-size: 24px;
}
.wl-feature-request-copy { flex: 1; min-width: 0; }
.wl-feature-request-copy h2 { margin: 5px 0 7px; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.035em; }
.wl-feature-request-copy p { margin: 0; max-width: 640px; color: var(--wl-muted, #a7a7b7); line-height: 1.6; }
.wl-nav-new { margin-left: auto; padding: 3px 6px; border-radius: 6px; color: #d6ceff; background: rgba(130, 107, 255, .18); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .06em; }
.wl-feature-requests-page { max-width: 1180px; margin: 0 auto; padding: 28px 0 56px; }
.wl-feature-requests-page > h1 { margin: 8px 0 12px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.055em; }
.wl-feature-requests-page > .wl-feature-intro { max-width: 760px; margin-bottom: 28px; }
.wl-feature-request-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 20px; align-items: start; }
.wl-feature-request-form, .wl-feature-request-aside, .wl-feature-submissions {
  border: 1px solid var(--wl-border, rgba(255,255,255,.1)); border-radius: 20px;
  background: var(--wl-panel, #11121b); padding: clamp(18px, 3vw, 28px);
}
.wl-feature-form-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.wl-feature-form-heading h2, .wl-feature-request-aside h2, .wl-feature-submissions h2 { margin: 0 0 6px; letter-spacing: -.025em; }
.wl-feature-form-heading p { margin: 0; color: var(--wl-muted, #a7a7b7); font-size: 13px; line-height: 1.5; }
.wl-feature-request-form label { display: flex; justify-content: space-between; gap: 10px; margin: 17px 0 8px; font-size: 13px; font-weight: 700; }
.wl-feature-request-form label span { color: var(--wl-muted, #a7a7b7); font-size: 11px; font-weight: 500; }
.wl-feature-request-form input, .wl-feature-request-form select, .wl-feature-request-form textarea {
  display: block; width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid var(--wl-border, rgba(255,255,255,.14));
  border-radius: 11px; color: inherit; background: rgba(255,255,255,.035); font: inherit; font-size: 14px;
}
.wl-feature-request-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.wl-feature-request-form input:focus, .wl-feature-request-form select:focus, .wl-feature-request-form textarea:focus { outline: 2px solid rgba(143, 123, 255, .65); outline-offset: 1px; }
.wl-feature-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.wl-feature-form-foot > span { color: var(--wl-muted, #a7a7b7); font-size: 11px; }
.wl-feature-form-foot button:disabled { opacity: .6; cursor: wait; }
.wl-feature-form-message { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.wl-feature-form-message.is-error { color: #ffb8b8; background: rgba(255, 89, 89, .09); }
.wl-feature-form-message.is-success { color: #a8f0cb; background: rgba(48, 194, 124, .1); }
.wl-feature-request-aside { background: linear-gradient(155deg, rgba(130,107,255,.11), transparent 55%), var(--wl-panel, #11121b); }
.wl-feature-request-aside h2 { margin-top: 10px; font-size: 23px; }
.wl-feature-request-aside ul { display: grid; gap: 20px; padding: 0; margin: 24px 0 0; list-style: none; }
.wl-feature-request-aside li { display: flex; gap: 12px; }
.wl-feature-request-aside li > span { color: #b7aaff; font-size: 12px; font-weight: 800; }
.wl-feature-request-aside li strong { font-size: 13px; }
.wl-feature-request-aside li p { margin: 5px 0 0; color: var(--wl-muted, #a7a7b7); font-size: 12px; line-height: 1.55; }
.wl-feature-submissions { margin-top: 24px; }
.wl-feature-submissions .wl-section-heading { margin-bottom: 16px; }
.wl-feature-empty { padding: 18px; border: 1px dashed var(--wl-border, rgba(255,255,255,.14)); border-radius: 12px; color: var(--wl-muted, #a7a7b7); font-size: 13px; }
.wl-feature-submission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wl-feature-submission-list article { padding: 17px; border: 1px solid var(--wl-border, rgba(255,255,255,.1)); border-radius: 14px; min-width: 0; }
.wl-feature-submission-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--wl-muted, #a7a7b7); font-size: 10px; }
.wl-feature-status { padding: 4px 7px; border-radius: 99px; background: rgba(130,107,255,.14); color: #d4ccff; text-transform: capitalize; }
.wl-feature-submission-list h3 { margin: 12px 0 7px; font-size: 16px; }
.wl-feature-submission-list article p { margin: 0; color: var(--wl-muted, #a7a7b7); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.wl-feature-submission-list article small { display: block; margin-top: 14px; color: var(--wl-muted, #a7a7b7); font-size: 10px; }
@media (max-width: 760px) {
  .wl-feature-request-banner { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .wl-feature-request-banner .wl-primary-btn { width: 100%; justify-content: center; }
  .wl-feature-request-layout { grid-template-columns: 1fr; }
  .wl-feature-submission-list { grid-template-columns: 1fr; }
  .wl-feature-form-foot { align-items: stretch; flex-direction: column; }
  .wl-feature-form-foot .wl-primary-btn { width: 100%; justify-content: center; }
}


/* Jostavan waitlist feature requests — use the existing slate, white and blue brand palette.
   Keep every text surface high-contrast; no unrelated violet/dark-theme styling. */
.wl-feature-request-banner {
  color: #101923;
  border: 1px solid #c7d9e8;
  background: linear-gradient(115deg, #eaf4fb 0%, #f7fafc 72%);
}
.wl-feature-request-mark {
  color: #fff;
  background: #286c9f;
}
.wl-feature-request-copy h2 { color: #101923; }
.wl-feature-request-copy p { color: #4e5965; }
.wl-nav-new {
  color: #174d73;
  background: #dbeeff;
  border: 1px solid #b8d6ec;
}
.wl-feature-requests-page { color: #101923; }
.wl-feature-requests-page .wl-dashboard-eyebrow { color: #286c9f; }
.wl-feature-requests-page > h1 { color: #101923; }
.wl-feature-requests-page > .wl-feature-intro { color: #4e5965; }
.wl-feature-request-form,
.wl-feature-request-aside,
.wl-feature-submissions {
  color: #17202a;
  border-color: #d4dce4;
  background: #fff;
  box-shadow: 0 8px 26px rgba(28, 47, 65, .045);
}
.wl-feature-form-heading h2,
.wl-feature-request-aside h2,
.wl-feature-submissions h2,
.wl-feature-submission-list h3 { color: #111827; }
.wl-feature-form-heading p,
.wl-feature-request-aside li p,
.wl-feature-submission-list article p { color: #4e5965; }
.wl-feature-request-form label { color: #243344; }
.wl-feature-request-form label span,
.wl-feature-form-foot > span { color: #5f6d7b; }
.wl-feature-request-form input,
.wl-feature-request-form select,
.wl-feature-request-form textarea {
  color: #17202a;
  background: #f7fafc;
  border-color: #cbd5df;
}
.wl-feature-request-form input::placeholder,
.wl-feature-request-form textarea::placeholder { color: #6b7785; opacity: 1; }
.wl-feature-request-form select option { color: #17202a; background: #fff; }
.wl-feature-request-form input:focus,
.wl-feature-request-form select:focus,
.wl-feature-request-form textarea:focus {
  outline-color: #4385bc;
  border-color: #4385bc;
}
.wl-feature-request-aside {
  background: linear-gradient(150deg, #edf6fc 0%, #fff 64%);
}
.wl-feature-request-aside li > span { color: #286c9f; }
.wl-feature-empty {
  color: #526170;
  border-color: #cbd5df;
  background: #f7fafc;
}
.wl-feature-submission-list article {
  color: #17202a;
  border-color: #d4dce4;
  background: #f9fbfd;
}
.wl-feature-submission-top,
.wl-feature-submission-list article small { color: #5f6d7b; }
.wl-feature-status {
  color: #174d73;
  background: #dbeeff;
  border: 1px solid #b8d6ec;
}
.wl-feature-form-message.is-error {
  color: #8f2525;
  background: #fff0f0;
  border: 1px solid #f0caca;
}
.wl-feature-form-message.is-success {
  color: #17633f;
  background: #eaf8f0;
  border: 1px solid #bfe5ce;
}
.wl-feature-form-foot .wl-primary-btn,
.wl-feature-request-banner .wl-primary-btn {
  color: #fff;
  background: #1e67a2;
  border: 1px solid #1e67a2;
}
.wl-feature-form-foot .wl-primary-btn:hover,
.wl-feature-request-banner .wl-primary-btn:hover {
  color: #fff;
  background: #174f7d;
  border-color: #174f7d;
}
.wl-feature-form-foot .wl-primary-btn:disabled { color: #fff; background: #6d91ad; }
@media (max-width: 760px) {
  .wl-feature-request-banner { background: linear-gradient(145deg, #eaf4fb, #f7fafc); }
}



/* Operations Revenue workspace */
.ops-revenue-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ops-revenue-actions select{min-height:38px;padding:0 12px;border:1px solid var(--border-color,#dfe3e8);border-radius:9px;background:var(--card-bg,#fff);color:inherit}
.ops-revenue-demo-note{display:flex;gap:12px;align-items:center;padding:13px 16px;border:1px solid #ead7a1;border-radius:12px;background:#fff9e7;color:#594516;margin:14px 0}
.ops-revenue-demo-note strong{font-size:11px;letter-spacing:.08em;white-space:nowrap}
.ops-revenue-demo-note span{font-size:13px;line-height:1.5}
.ops-revenue-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.ops-revenue-metrics-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.ops-revenue-metrics-strip>div{padding:15px;border:1px solid var(--border-color,#e6e8ec);border-radius:12px;background:var(--card-bg,#fff);min-width:0}
.ops-revenue-metrics-strip span{display:block;font-size:11px;color:var(--muted-color,#6b7280);margin-bottom:7px}
.ops-revenue-metrics-strip strong{font-size:18px;letter-spacing:-.025em;overflow-wrap:anywhere}
.ops-revenue-chart-grid{align-items:stretch}
.ops-revenue-bar-row{margin:16px 0}
.ops-revenue-bar-row>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13px}
.ops-revenue-bar-row>div span{color:var(--text-color,#252a31)}
.ops-revenue-bar-row>div strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-revenue-bar-row>div small{color:var(--muted-color,#6b7280);font-weight:500;margin-left:5px}
.ops-revenue-bar-row>i{display:block;overflow:hidden;height:8px;border-radius:999px;background:var(--subtle-bg,#eef0f3)}
.ops-revenue-bar-row>i>b{display:block;height:100%;border-radius:999px;background:currentColor;opacity:.72;min-width:2px}
.ops-revenue-ledger{margin-top:14px;min-width:0}
.ops-revenue-filter{display:flex;gap:5px;flex-wrap:wrap}
.ops-revenue-filter button{border:1px solid var(--border-color,#dfe3e8);border-radius:8px;padding:7px 10px;background:transparent;color:inherit;font-size:12px;cursor:pointer}
.ops-revenue-filter button.active{background:var(--text-color,#222);color:var(--card-bg,#fff);border-color:var(--text-color,#222)}
.ops-revenue-type{display:inline-flex;padding:4px 7px;border-radius:6px;background:var(--subtle-bg,#eef0f3);font-size:11px;text-transform:capitalize}
.ops-revenue-type.revenue{background:#e5f5eb;color:#17663b}
.ops-revenue-type.expense,.ops-revenue-type.fee,.ops-revenue-type.refund{background:#fff0e8;color:#9c3c15}
.ops-revenue-positive{color:#17663b;font-weight:600}
.ops-revenue-negative{color:#9c3c15;font-weight:600}
.ops-revenue-footnote{font-size:12px;line-height:1.6;color:var(--muted-color,#6b7280);margin:14px 2px}
@media(max-width:1050px){.ops-revenue-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-revenue-metrics-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-revenue-chart-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ops-revenue-kpis{grid-template-columns:1fr 1fr}.ops-revenue-metrics-strip{grid-template-columns:1fr 1fr}.ops-revenue-actions{width:100%}.ops-revenue-demo-note{align-items:flex-start;flex-direction:column}}


/* Collapsible navigation sidebar */
.sidebar {
  transition: width 180ms ease, min-width 180ms ease;
}
.sidebar-collapse-btn {
  flex-shrink: 0;
}
.sidebar-collapsed {
  --sidebar-width: 68px;
  width: 68px;
  min-width: 68px;
}
.sidebar-collapsed .sidebar-header {
  padding: 14px 18px;
  flex-direction: column;
  gap: 12px;
}
.sidebar-collapsed .sidebar-logo span,
.sidebar-collapsed .sidebar-logo em,
.sidebar-collapsed .sidebar-header-actions .sidebar-mini-btn:not(.sidebar-collapse-btn),
.sidebar-collapsed .sidebar-item:not(.sidebar-item-icon),
.sidebar-collapsed .sidebar-tasks-panel,
.sidebar-collapsed .sidebar-launch-locked > span:not(.sidebar-item-icon),
.sidebar-collapsed .sidebar-launch-locked small,
.sidebar-collapsed .sidebar-footer .sidebar-user > :not(.sidebar-avatar),
.sidebar-collapsed .sidebar-footer .sidebar-profile-dropdown {
  display: none !important;
}
.sidebar-collapsed .sidebar-logo {
  justify-content: center;
}
.sidebar-collapsed .sidebar-nav {
  padding: 8px 10px;
  overflow-x: hidden;
}
.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
  font-size: 0;
}
.sidebar-collapsed .sidebar-item-icon {
  margin: 0;
}
.sidebar-collapsed .sidebar-launch-locked {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}
.sidebar-collapsed .sidebar-footer {
  padding: 10px;
}
.sidebar-collapsed .sidebar-footer .sidebar-user {
  justify-content: center;
  padding: 8px 0;
}
.sidebar-collapsed .sidebar-header-actions {
  flex-direction: column;
}

/* Operations overview: concise cross-functional dashboard */
.ops-overview{display:flex;flex-direction:column;gap:18px}
.ops-overview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ops-overview-heading h2{margin:4px 0 6px}
.ops-overview-heading p{margin:0;color:var(--muted-color,#6b7280);max-width:760px;line-height:1.55}
.ops-overview-product{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:17px 18px;border:1px solid var(--border-color,#e3e7ec);border-radius:13px;background:var(--card-bg,#fff)}
.ops-overview-product>div{display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1}
.ops-overview-product span{font-size:10px;letter-spacing:.09em;color:var(--muted-color,#737b88);font-weight:800}
.ops-overview-product strong{font-size:15px}
.ops-overview-product small{font-size:12px;color:var(--muted-color,#6b7280);overflow-wrap:anywhere}
.ops-overview-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ops-overview-section-title h3{margin:0}
.ops-overview-section-title>span{font-size:11px;color:var(--muted-color,#6b7280)}
.ops-overview-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.ops-overview-card{min-width:0;display:flex;flex-direction:column;gap:16px}
.ops-overview-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ops-overview-card-head>div{display:flex;align-items:center;gap:9px}
.ops-overview-card-head h3{margin:0;font-size:15px}
.ops-overview-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--subtle-bg,#f0f3f6);font-weight:800}
.ops-overview-card-head button{border:0;background:transparent;color:var(--link-color,#286c9f);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.ops-overview-primary-stat{display:flex;flex-direction:column;gap:3px}
.ops-overview-primary-stat strong{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.045em;line-height:1.1}
.ops-overview-primary-stat span{font-size:12px;color:var(--muted-color,#6b7280)}
.ops-overview-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ops-overview-stats>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.ops-overview-stats span{font-size:11px;color:var(--muted-color,#6b7280)}
.ops-overview-stats strong{font-size:14px;overflow-wrap:anywhere}
.ops-overview-negative{color:#a63b32}
.ops-overview-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-color,#edf0f3);font-size:10px;line-height:1.5;color:var(--muted-color,#6b7280)}
.ops-overview-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ops-overview-bottom>div{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px solid var(--border-color,#e3e7ec);border-radius:12px;background:var(--card-bg,#fff);min-width:0}
.ops-overview-bottom strong{font-size:13px}
.ops-overview-bottom span{font-size:11px;color:var(--muted-color,#6b7280);overflow-wrap:anywhere;line-height:1.5}
@media(max-width:1000px){.ops-overview-columns{grid-template-columns:1fr 1fr}.ops-overview-columns .ops-overview-card:last-child{grid-column:1/-1}}
@media(max-width:650px){.ops-overview-heading{flex-direction:column}.ops-overview-columns,.ops-overview-bottom{grid-template-columns:1fr}.ops-overview-columns .ops-overview-card:last-child{grid-column:auto}.ops-overview-product{align-items:flex-start;flex-direction:column}}

/* Secure app revenue withdrawal flow */
.ops-withdrawal-screen{display:flex;flex-direction:column;gap:18px}
.ops-withdrawal-screen .ops-analytics-head{align-items:flex-start}
.ops-withdrawal-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:16px;align-items:start}
.ops-withdrawal-form{display:flex;flex-direction:column;gap:14px}
.ops-withdrawal-form h3,.ops-withdrawal-history h3{margin:0 0 2px}
.ops-withdrawal-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.ops-withdrawal-form input,.ops-withdrawal-form select{width:100%;box-sizing:border-box;border:1px solid var(--border-color,#dce1e7);border-radius:9px;background:var(--input-bg,#fff);color:inherit;padding:11px 12px;font:inherit;font-weight:400;min-height:42px}
.ops-withdrawal-balance{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid var(--border-color,#dce1e7);border-radius:10px;background:var(--subtle-bg,#f7f9fb)}
.ops-withdrawal-balance span{font-size:11px;color:var(--muted-color,#68717e)}
.ops-withdrawal-balance strong{font-size:25px;letter-spacing:-.035em}
.ops-withdrawal-balance small,.ops-withdrawal-security-note{font-size:11px;color:var(--muted-color,#68717e);line-height:1.55}
.ops-withdrawal-form button{align-self:flex-start}
.ops-withdrawal-history{display:flex;flex-direction:column;gap:14px}
.ops-withdrawal-history-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color,#edf0f3)}
.ops-withdrawal-history-row:last-child{border-bottom:0}
.ops-withdrawal-history-row>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.ops-withdrawal-history-row strong{font-size:14px}
.ops-withdrawal-history-row span,.ops-withdrawal-history-row small{font-size:11px;color:var(--muted-color,#68717e);overflow-wrap:anywhere}
.ops-withdrawal-status{border-radius:999px;padding:4px 8px;background:var(--subtle-bg,#f1f4f7);text-transform:capitalize;white-space:nowrap}
.ops-withdrawal-status.success{color:#18794e;background:#e8f6ef}
.ops-withdrawal-status.failed,.ops-withdrawal-status.reversed{color:#a63b32;background:#fff0ee}
@media(max-width:850px){.ops-withdrawal-layout{grid-template-columns:1fr}.ops-withdrawal-screen .ops-analytics-head{flex-direction:column}}

.ops-db-query-notice{font-size:11px;color:#258457;margin:10px 0}
.ops-db-sql pre{max-height:360px;overflow:auto;background:#101827;color:#d8e1f2;border-radius:10px;padding:14px;font-size:11px;line-height:1.55}


/* Vytrax public growth landing page */
.vx-public-page{min-height:100vh;background:#f7f9f6;color:#17231d;font-family:inherit;overflow:hidden}
.vx-public-nav{height:78px;max-width:1320px;margin:0 auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid #e4eae4}
.vx-public-brand{display:inline-flex;align-items:center;gap:10px;color:#17231d;text-decoration:none;font-size:21px;font-weight:850;letter-spacing:-.055em}
.vx-brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#17231d;color:#d8ff70;font-size:19px;font-weight:900;letter-spacing:-.08em}
.vx-public-nav-links{display:flex;align-items:center;gap:30px}
.vx-public-nav-links a,.vx-public-footer>div a{color:#647168;text-decoration:none;font-size:12px;font-weight:700;transition:color .2s}
.vx-public-nav-links a:hover,.vx-public-footer>div a:hover{color:#477d32}
.vx-nav-cta{display:inline-flex;align-items:center;gap:16px;padding:12px 16px;background:#17231d;color:#fff;text-decoration:none;font-size:12px;font-weight:800;border-radius:6px}
.vx-nav-cta span{color:#d8ff70;font-size:16px}
.vx-hero{max-width:1320px;margin:0 auto;padding:104px 42px 94px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.85fr);gap:70px;align-items:center}
.vx-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#567a39;font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.vx-eyebrow i{width:7px;height:7px;border-radius:50%;background:#8dbb43;box-shadow:0 0 0 4px #e5efd9}
.vx-hero h1{margin:23px 0 23px;max-width:740px;font-size:clamp(48px,6.2vw,83px);line-height:.99;letter-spacing:-.078em;font-weight:850}
.vx-hero h1 em,.vx-section-intro h2 em,.vx-solution-copy h2 em,.vx-final-cta h2 em{font-style:normal;color:#709b38}
.vx-hero-lede{max-width:650px;margin:0;color:#26362d;font-size:19px;line-height:1.6;font-weight:600;letter-spacing:-.015em}
.vx-hero-support{max-width:630px;margin:15px 0 0;color:#69766e;font-size:14px;line-height:1.75}
.vx-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.vx-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:49px;padding:0 19px;border-radius:6px;background:#17231d;color:#fff!important;text-decoration:none;font-size:12px;font-weight:800;box-shadow:0 8px 22px rgba(23,35,29,.12);transition:transform .2s,background .2s}
.vx-btn-primary:hover{transform:translateY(-2px);background:#2c4434}
.vx-btn-primary span{color:#d8ff70;font-size:17px}
.vx-btn-secondary{color:#34483a;text-decoration:none;font-size:12px;font-weight:800}
.vx-btn-secondary span{margin-left:8px;color:#729b3e}
.vx-hero-note{display:flex;align-items:center;gap:9px;margin-top:24px;color:#78847b;font-size:11px;font-weight:650}
.vx-note-check{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e4efd8;color:#568331;font-size:11px;font-weight:900}
.vx-hero-visual{position:relative;padding:24px;background:#fff;border:1px solid #dfe7df;border-radius:13px;box-shadow:0 26px 70px rgba(35,57,42,.09),12px 12px 0 #e7efdf;transform:rotate(1deg)}
.vx-visual-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:19px;border-bottom:1px solid #edf0eb;color:#839087;font-size:9px;font-weight:850;letter-spacing:.12em}
.vx-visual-top>span{display:flex;align-items:center;gap:8px}.vx-visual-top i{width:6px;height:6px;border-radius:50%;background:#79ad43}
.vx-visual-top>b{padding:6px 8px;border-radius:4px;background:#f0f5e9;color:#5b8537;font-size:8px}
.vx-visual-app{display:flex;align-items:center;gap:11px;padding:21px 0}
.vx-app-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#17231d;color:#d8ff70;font-weight:900}
.vx-visual-app>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.vx-visual-app strong{font-size:12px;color:#25342b}.vx-visual-app small{font-size:10px;color:#89948c}
.vx-live-tag{margin-left:auto;color:#719b45;font-size:8px;font-weight:850;letter-spacing:.07em}
.vx-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vx-metric-grid>div{min-height:105px;padding:15px;border:1px solid #e8ede7;border-radius:7px;display:flex;flex-direction:column;justify-content:space-between}
.vx-metric-grid small{color:#929d94;font-size:8px;font-weight:850;letter-spacing:.13em}
.vx-metric-grid strong{color:#26372c;font-size:16px;letter-spacing:-.04em}
.vx-metric-grid span{color:#849087;font-size:9px}
.vx-metric-grid .vx-metric-highlight{background:#f1f7e9;border-color:#dce9ce}
.vx-visual-insight{display:flex;align-items:center;gap:12px;margin-top:13px;padding:14px;border:1px solid #e4ebdd;border-radius:7px;background:#fbfdf9}
.vx-insight-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#e9f2dd;color:#668e3d;font-size:17px}
.vx-visual-insight>div{display:flex;flex:1;flex-direction:column;gap:4px}.vx-visual-insight b{font-size:10px;color:#314334}.vx-visual-insight small{font-size:9px;color:#89948b;line-height:1.4}.vx-insight-arrow{color:#719b45}
.vx-visual-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:19px;color:#8b968d;font-size:7px;font-weight:850;letter-spacing:.09em}
.vx-visual-bottom i{height:1px;min-width:10px;flex:1;background:#dfe7db}
.vx-proof-strip{max-width:1320px;margin:0 auto;padding:21px 42px;border-top:1px solid #e3e9e2;border-bottom:1px solid #e3e9e2;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vx-proof-strip>span{color:#8a968d;font-size:9px;font-weight:850;letter-spacing:.13em}.vx-proof-strip>b{color:#59675e;font-size:11px;font-weight:750}
.vx-problem-section,.vx-platform-section{max-width:1320px;margin:0 auto;padding:112px 42px}
.vx-section-intro{max-width:780px}
.vx-section-intro h2,.vx-solution-copy h2{margin:19px 0;font-size:clamp(38px,5vw,63px);line-height:1.04;letter-spacing:-.067em;font-weight:830}
.vx-section-intro>p,.vx-solution-copy>p{max-width:690px;color:#69776e;font-size:15px;line-height:1.8}
.vx-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}
.vx-pain-grid article{min-height:210px;padding:25px;border:1px solid #e1e8e0;border-radius:8px;background:#fff}
.vx-pain-grid article>span{color:#7da64a;font-size:10px;font-weight:900;letter-spacing:.12em}
.vx-pain-grid h3{margin:43px 0 10px;color:#233329;font-size:19px;letter-spacing:-.04em}
.vx-pain-grid p{margin:0;color:#748077;font-size:12px;line-height:1.7}
.vx-problem-closer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:21px 24px;background:#eaf2e2;border-radius:7px}
.vx-problem-closer strong{color:#30452f;font-size:13px}.vx-problem-closer span{color:#65765f;font-size:11px}
.vx-solution-section{padding:105px max(42px,calc((100vw - 1236px)/2));display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;background:#17231d;color:#f5f8f2}
.vx-solution-copy .vx-eyebrow{color:#c1e58b}.vx-solution-copy h2{font-size:clamp(37px,4.5vw,57px);max-width:520px}.vx-solution-copy h2 em{color:#c3e68d}.vx-solution-copy>p{color:#b2bdb3}
.vx-dark-link{display:inline-flex;gap:18px;margin-top:20px;color:#d3f2a4;text-decoration:none;font-size:12px;font-weight:850}.vx-dark-link span{font-size:17px}
.vx-solution-steps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#405044}
.vx-solution-steps article{display:flex;align-items:flex-start;gap:14px;min-height:165px;padding:24px;background:#1d2c23}
.vx-solution-steps article>span{color:#c5e98d;font-size:10px;font-weight:900}.vx-solution-steps article>div{flex:1}.vx-solution-steps h3{margin:0 0 9px;color:#f1f5ed;font-size:17px;letter-spacing:-.035em}.vx-solution-steps p{margin:0;color:#aab8ac;font-size:11px;line-height:1.7}.vx-solution-steps article>b{color:#c5e98d;font-size:14px}
.vx-platform-section{padding-top:112px;padding-bottom:118px}
.vx-platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:48px}
.vx-platform-grid article{min-height:205px;padding:23px;border:1px solid #e1e8e0;border-radius:8px;background:#fff}
.vx-platform-symbol{display:grid;place-items:center;width:32px;height:32px;margin-bottom:19px;border-radius:8px;background:#edf4e5;color:#648b3e;font-size:17px;font-weight:800}
.vx-platform-grid small{color:#84918a;font-size:8px;font-weight:900;letter-spacing:.14em}.vx-platform-grid h3{margin:9px 0;color:#29382e;font-size:17px;letter-spacing:-.035em}.vx-platform-grid p{max-width:300px;margin:0;color:#77837a;font-size:11px;line-height:1.7}
.vx-final-cta{padding:105px 24px 110px;text-align:center;background:#edf4e7;border-top:1px solid #dfe9d8}
.vx-final-cta h2{margin:20px auto 16px;color:#17231d;font-size:clamp(42px,6vw,70px);line-height:1;letter-spacing:-.075em}
.vx-final-cta>p{max-width:620px;margin:0 auto 27px;color:#68776c;font-size:14px;line-height:1.75}
.vx-final-cta>div{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}.vx-final-pricing{color:#435c43;font-size:11px;font-weight:800;text-decoration:none}
.vx-final-cta>small{display:block;margin-top:18px;color:#879387;font-size:10px}
.vx-public-footer{max-width:1320px;margin:0 auto;padding:25px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vx-public-footer>span{color:#849087;font-size:10px}.vx-public-footer>div{display:flex;gap:20px}
@media(max-width:950px){.vx-hero{grid-template-columns:1fr;gap:48px;padding-top:75px}.vx-hero-copy{max-width:760px}.vx-hero-visual{max-width:650px;width:100%;margin:0 auto}.vx-solution-section{grid-template-columns:1fr;gap:45px}.vx-solution-copy{max-width:700px}}
@media(max-width:700px){.vx-public-nav{height:68px;padding:0 19px}.vx-public-nav-links{display:none}.vx-hero{padding:65px 20px 60px}.vx-hero h1{font-size:clamp(46px,13vw,68px)}.vx-hero-lede{font-size:16px}.vx-hero-support{font-size:13px}.vx-hero-visual{padding:17px;transform:none}.vx-proof-strip{padding:19px 20px;justify-content:flex-start;gap:13px 22px}.vx-proof-strip>span{width:100%}.vx-problem-section,.vx-platform-section{padding:78px 20px}.vx-pain-grid,.vx-platform-grid{grid-template-columns:1fr}.vx-pain-grid article{min-height:170px}.vx-pain-grid h3{margin-top:25px}.vx-problem-closer{align-items:flex-start;flex-direction:column}.vx-solution-section{padding:76px 20px}.vx-solution-steps{grid-template-columns:1fr}.vx-solution-steps article{min-height:130px}.vx-final-cta{padding:80px 20px}.vx-public-footer{padding:23px 20px}.vx-public-footer>span{order:3;width:100%}}
@media(max-width:420px){.vx-nav-cta{padding:10px 11px;font-size:10px}.vx-visual-top{font-size:7px}.vx-live-tag{font-size:7px}.vx-visual-bottom{font-size:6px}.vx-hero-actions{align-items:flex-start;flex-direction:column;gap:13px}}


/* Vytrax centered sign-in / sign-up dialog */
.vx-public-nav-actions{display:flex;align-items:center;gap:18px}
.vx-nav-login{border:0;background:transparent;color:#435348;padding:10px 2px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.vx-nav-login:hover{color:#6b963c}
.vx-nav-cta{border:0;cursor:pointer;font-family:inherit}
.vx-btn-primary{border:0;cursor:pointer;font-family:inherit}
.vx-dark-link{border:0;background:transparent;cursor:pointer;font-family:inherit}
.vx-auth-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(11,19,14,.66);backdrop-filter:blur(9px);overflow-y:auto;animation:vx-auth-fade .18s ease}
.vx-auth-dialog{position:relative;width:min(100%,450px);max-height:calc(100vh - 36px);overflow-y:auto;padding:34px 36px 27px;border:1px solid rgba(255,255,255,.7);border-radius:17px;background:#fff;color:#1b2a20;box-shadow:0 28px 100px rgba(0,0,0,.28);animation:vx-auth-rise .22s ease}
.vx-auth-close{position:absolute;top:16px;right:17px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f4ef;color:#68756b;font-size:23px;line-height:1;cursor:pointer}
.vx-auth-close:hover{background:#e7eee1;color:#203126}
.vx-auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:25px;color:#17231d;font-size:19px;letter-spacing:-.05em}
.vx-auth-kicker{color:#719544;font-size:9px;font-weight:900;letter-spacing:.17em}
.vx-auth-dialog h2{margin:9px 0 7px;color:#1b2a20;font-size:27px;line-height:1.12;letter-spacing:-.055em}
.vx-auth-description{margin:0 0 21px;color:#78847b;font-size:12px;line-height:1.65}
.vx-auth-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:45px;border:1px solid #e1e7df;border-radius:7px;background:#fff;color:#26372c;font-family:inherit;font-size:12px;font-weight:750;cursor:pointer}
.vx-auth-google:hover{background:#f8faf6;border-color:#cbd9c4}
.vx-auth-google b{display:grid;place-items:center;width:21px;height:21px;border:1px solid #e7e9e7;border-radius:50%;color:#4285f4;font-size:13px}
.vx-auth-divider{display:flex;align-items:center;gap:12px;margin:17px 0;color:#a0aaa1;font-size:10px}
.vx-auth-divider:before,.vx-auth-divider:after{content:"";height:1px;flex:1;background:#edf0eb}
.vx-auth-form{display:flex;flex-direction:column;gap:12px}
.vx-auth-form label{display:flex;flex-direction:column;gap:6px;color:#425247;font-size:10px;font-weight:800}
.vx-auth-form input{box-sizing:border-box;width:100%;min-height:43px;padding:0 12px;border:1px solid #dfe6de;border-radius:7px;background:#fbfcfa;color:#1d2b21;font:inherit;font-size:12px;font-weight:500;outline:none;transition:border .15s,box-shadow .15s}
.vx-auth-form input:focus{border-color:#8eaf69;box-shadow:0 0 0 3px rgba(142,175,105,.15)}
.vx-auth-form input::placeholder{color:#a6afa7}
.vx-auth-optional{display:inline;color:#9aa59b;font-size:9px;font-weight:500}
.vx-auth-submit{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:47px;margin-top:4px;padding:0 15px;border:0;border-radius:7px;background:#17231d;color:#fff;font-family:inherit;font-size:12px;font-weight:850;cursor:pointer}
.vx-auth-submit span{color:#d8ff70;font-size:17px}
.vx-auth-submit:hover{background:#2c4434}
.vx-auth-submit:disabled,.vx-auth-google:disabled{opacity:.6;cursor:wait}
.vx-auth-error,.vx-auth-message{margin:0;padding:10px 11px;border-radius:6px;font-size:11px;line-height:1.5}
.vx-auth-error{background:#fff0ed;color:#a33c2e}
.vx-auth-message{background:#eff7e8;color:#496f32}
.vx-auth-text-link{border:0;background:transparent;color:#668d3c;font-family:inherit;font-size:10px;font-weight:800;cursor:pointer}
.vx-auth-forgot{display:block;margin:12px 0 0 auto}
.vx-auth-switch{margin-top:20px;text-align:center;color:#77847a;font-size:10px}
.vx-auth-switch button{border:0;background:transparent;color:#5f8937;font:inherit;font-weight:850;cursor:pointer}
.vx-auth-terms{margin:17px 0 0;text-align:center;color:#a0aaa1;font-size:9px;line-height:1.6}
.vx-auth-terms a{color:#6b8f4d;text-decoration:none;font-weight:750}
@keyframes vx-auth-fade{from{opacity:0}to{opacity:1}}
@keyframes vx-auth-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.vx-public-nav-actions{gap:11px}.vx-nav-login{font-size:11px}.vx-nav-cta{padding:10px 11px;font-size:10px}.vx-auth-backdrop{padding:12px;align-items:center}.vx-auth-dialog{padding:29px 21px 23px;border-radius:13px;max-height:calc(100vh - 24px)}.vx-auth-dialog h2{font-size:24px}}

/* Vytrax My Apps and app workspaces must scroll inside the fixed-height app shell. */
.apps-surface-layout { min-height: 0; height: 100dvh; }
.apps-content-area { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.apps-content-area > .vx-portfolio,
.apps-content-area > .apps-hub { min-height: 100%; }