.ai-topbar-inner { grid-template-columns: auto 1fr; }
.ai-topbar-inner .dash-nav { justify-self: end; }
.ai-topbar-inner .dash-nav a.active { color: #047857; background: #ecfdf5; }
.ai-brand-mark { width: 46px; background: linear-gradient(135deg, #047857, #10b981 62%, #f97316); }

.ai-shell { width: min(1480px, calc(100vw - 42px)); margin: 0 auto; padding: 28px 0 70px; }
.ai-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 34px 38px; border: 1px solid #cce8dc; border-radius: 24px; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(249,115,22,.24), transparent 30%), linear-gradient(135deg, #064e3b, #047857 58%, #0f766e); box-shadow: 0 28px 70px -44px #064e3b; }
.ai-hero::after { content: ''; position: absolute; width: 320px; height: 320px; right: -140px; bottom: -220px; border: 50px solid rgba(255,255,255,.08); border-radius: 50%; }
.hero-kicker, .eyebrow { display: block; margin-bottom: 8px; color: #6ee7b7; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.ai-hero h1 { max-width: 820px; margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.045em; }
.ai-hero h1 em { color: #fdba74; font-style: normal; }
.ai-hero p { max-width: 830px; margin: 16px 0 0; color: #d1fae5; font-size: 1rem; line-height: 1.7; }
.ai-hero code { padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.13); color: #fff; }
.hero-contract { position: relative; z-index: 1; min-width: 250px; display: flex; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.hero-contract strong, .hero-contract small { display: block; }
.hero-contract strong { font-size: .88rem; }.hero-contract small { margin-top: 4px; color: #a7f3d0; font-size: .76rem; }
.contract-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #fb923c; box-shadow: 0 0 0 6px rgba(251,146,60,.15); }

.privacy-banner { display: flex; gap: 14px; align-items: center; margin: 18px 0; padding: 14px 18px; border: 1px solid #fed7aa; border-radius: 14px; background: #fff7ed; color: #9a3412; }
.privacy-banner > span { font-size: 1.3rem; }.privacy-banner strong, .privacy-banner small { display: block; }.privacy-banner small { margin-top: 3px; color: #c2410c; line-height: 1.5; }

.workflow-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr); gap: 20px; align-items: start; }
.config-column, .output-column { display: grid; gap: 20px; }
.output-column { position: sticky; top: 88px; }
.ai-card { border: 1px solid #dce7e3; border-radius: 18px; background: #fff; box-shadow: 0 14px 40px -32px rgba(15,23,42,.48); }
.config-column .ai-card { padding: 22px; }
.card-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.card-heading h2, .output-heading h2, .audit-heading h2 { margin: 0; color: #0f172a; font-size: 1.08rem; }
.card-heading p { margin: 3px 0 0; color: #64748b; font-size: .81rem; }
.step-number { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; font-weight: 900; background: #0ea5e9; box-shadow: 0 8px 18px -10px #0369a1; }
.step-number.orange { background: #f97316; }.step-number.green { background: #059669; }

.form-grid { display: grid; gap: 13px; }.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-card label { display: grid; gap: 6px; color: #475569; font-size: .78rem; font-weight: 800; }
.ai-card input:not([type=checkbox]), .ai-card select, .ai-card textarea { width: 100%; border: 1px solid #d7e1de; border-radius: 10px; outline: 0; background: #fbfdfc; color: #0f172a; font: 500 .88rem/1.5 var(--font); transition: .18s; }
.ai-card input:not([type=checkbox]), .ai-card select { min-height: 42px; padding: 0 11px; }.ai-card textarea { padding: 10px 12px; resize: vertical; }
.ai-card input:focus, .ai-card select:focus, .ai-card textarea:focus { border-color: #10b981; background: #fff; box-shadow: 0 0 0 4px rgba(16,185,129,.11); }
.secret-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.icon-button { min-width: 64px; border: 1px solid #d7e1de; border-radius: 10px; background: #f8fafc; color: #475569; font-weight: 800; cursor: pointer; }
.key-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; }
.check-label { display: flex !important; grid-template-columns: none !important; flex-direction: row; gap: 8px !important; align-items: center; font-weight: 650 !important; cursor: pointer; }.check-label input { accent-color: #059669; }
.text-button { border: 0; background: transparent; color: #047857; font-size: .76rem; font-weight: 800; cursor: pointer; }.text-button.danger { color: #dc2626; }
.provider-help { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f0fdf4; color: #166534; font-size: .76rem; line-height: 1.55; }

.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.mode-tab { display: grid; justify-items: start; gap: 3px; padding: 13px; border: 1px solid #dce4e1; border-radius: 12px; background: #fbfdfc; color: #475569; cursor: pointer; transition: .18s; }.mode-tab:hover { transform: translateY(-1px); border-color: #86efac; }.mode-tab.active { border-color: #10b981; background: #ecfdf5; color: #065f46; box-shadow: 0 8px 20px -16px #047857; }.mode-tab span { color: #f97316; font-size: 1rem; }.mode-tab strong { font-size: .81rem; }.mode-tab small { color: #64748b; font-size: .69rem; }

.matrix-card { display: grid; gap: 15px; }.matrix-card .card-heading { margin-bottom: 0; }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.count-grid label { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 10px; border: 1px solid #dce7e3; border-radius: 12px; background: #f8fafc; }.count-grid label > span { color: #0f172a; font-size: .83rem; }.count-grid label > small { grid-column: 1; color: #94a3b8; font-size: .65rem; font-weight: 600; }.count-grid input { grid-column: 2; grid-row: 1 / span 2; width: 56px !important; min-height: 40px !important; padding: 0 5px !important; text-align: center; background: #fff !important; }
.source-group.hidden, .progress-box.hidden { display: none; }
.generation-options { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: #64748b; font-size: .72rem; }
.generate-button { min-height: 52px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #047857, #10b981 70%, #f97316); font-weight: 900; font-size: .93rem; cursor: pointer; box-shadow: 0 15px 28px -18px #047857; transition: .18s; }.generate-button:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -17px #047857; }.generate-button:disabled { opacity: .6; cursor: wait; transform: none; }

.output-card { overflow: hidden; }.output-heading, .audit-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e5ece9; }.output-heading .eyebrow, .audit-heading .eyebrow { margin-bottom: 4px; color: #059669; }
.validation-badge { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border-radius: 999px; font-size: .72rem; font-weight: 900; }.validation-badge span { width: 8px; height: 8px; border-radius: 50%; }.validation-badge.idle { color: #64748b; background: #f1f5f9; }.validation-badge.idle span { background: #94a3b8; }.validation-badge.valid { color: #047857; background: #d1fae5; }.validation-badge.valid span { background: #10b981; }.validation-badge.invalid { color: #b91c1c; background: #fee2e2; }.validation-badge.invalid span { background: #ef4444; }
.progress-box { display: flex; gap: 12px; align-items: center; margin: 14px 16px 0; padding: 12px 14px; border: 1px solid #bae6fd; border-radius: 12px; background: #f0f9ff; }.progress-box strong, .progress-box small { display: block; }.progress-box strong { color: #075985; font-size: .82rem; }.progress-box small { margin-top: 2px; color: #0284c7; font-size: .72rem; }.progress-orbit { width: 26px; height: 26px; border: 3px solid #bae6fd; border-top-color: #0ea5e9; border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.code-output { width: calc(100% - 32px); min-height: 510px; margin: 16px; padding: 16px; resize: vertical; border: 1px solid #1e293b; border-radius: 13px; outline: 0; background: #0b1220; color: #d7fbe8; font: 500 12.5px/1.65 "JetBrains Mono", "Cascadia Code", monospace; tab-size: 2; }.code-output:focus { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.output-actions { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 16px; }.output-actions button { min-height: 36px; padding: 0 11px; border: 1px solid #d9e4e0; border-radius: 9px; background: #f8fafc; color: #334155; font-size: .73rem; font-weight: 850; cursor: pointer; }.output-actions button:hover { border-color: #86efac; background: #f0fdf4; color: #047857; }.output-actions .studio-button { margin-left: auto; border-color: #047857; color: #fff; background: #047857; }.output-actions .studio-button:hover { background: #065f46; color: #fff; }

.audit-card { overflow: hidden; }.audit-heading > span { color: #94a3b8; font-size: .68rem; font-weight: 800; }.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-bottom: 1px solid #e5ece9; background: #e5ece9; }.stat-grid div { padding: 13px; text-align: center; background: #f8fafc; }.stat-grid strong, .stat-grid span { display: block; }.stat-grid strong { color: #0f172a; font-size: 1.1rem; }.stat-grid span { margin-top: 2px; color: #64748b; font-size: .66rem; font-weight: 800; }
.issue-list { max-height: 330px; overflow: auto; padding: 12px 16px; }.empty-audit { display: grid; justify-items: center; gap: 5px; padding: 24px; color: #94a3b8; text-align: center; }.empty-audit span { font-size: 1.5rem; }.empty-audit p { margin: 0; font-size: .8rem; }
.issue { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid #edf2f0; }.issue:last-child { border-bottom: 0; }.issue-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-size: .7rem; font-weight: 900; }.issue.error .issue-icon { color: #b91c1c; background: #fee2e2; }.issue.warning .issue-icon { color: #b45309; background: #fef3c7; }.issue strong { display: block; color: #334155; font-size: .76rem; line-height: 1.45; }.issue small { color: #94a3b8; font-size: .66rem; }.issue-line { color: #94a3b8; font-size: .64rem; font-weight: 800; }
.audit-note { margin: 0; padding: 12px 16px 16px; color: #64748b; font-size: .72rem; line-height: 1.55; }

.ai-toast { position: fixed; z-index: 100001; right: 20px; bottom: 20px; max-width: min(390px, calc(100vw - 40px)); padding: 12px 15px; border-radius: 12px; color: #fff; background: #0f172a; box-shadow: 0 18px 46px rgba(15,23,42,.3); font-size: .8rem; font-weight: 750; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }.ai-toast.show { opacity: 1; transform: translateY(0); }.ai-toast.success { background: #047857; }.ai-toast.error { background: #b91c1c; }

@media (max-width: 1100px) { .workflow-grid { grid-template-columns: 1fr; }.output-column { position: static; }.ai-hero { grid-template-columns: 1fr; }.hero-contract { width: fit-content; }.ai-topbar-inner { grid-template-columns: 1fr; padding: 10px 0; }.ai-topbar-inner .dash-nav { justify-self: start; overflow-x: auto; max-width: 100%; } }
@media (max-width: 700px) { .ai-shell { width: min(100% - 24px, 1480px); padding-top: 14px; }.ai-hero { padding: 24px 20px; border-radius: 18px; }.ai-hero h1 { font-size: 2rem; }.privacy-banner { align-items: flex-start; }.form-grid.two { grid-template-columns: 1fr; }.count-grid { grid-template-columns: repeat(2, 1fr); }.mode-tabs { grid-template-columns: 1fr; }.mode-tab { grid-template-columns: auto 1fr; align-items: center; }.mode-tab small { grid-column: 2; }.key-actions, .generation-options { align-items: flex-start; flex-direction: column; }.code-output { min-height: 420px; }.output-actions .studio-button { margin-left: 0; }.hero-contract { min-width: 0; }.dash-topbar-inner { width: min(100% - 24px, 1500px); }.ai-topbar-inner .dash-brand { min-width: 0; }.ai-topbar-inner .dash-brand strong { font-size: .82rem; white-space: nowrap; }.ai-topbar-inner .dash-brand small { display: none; }.ai-topbar-inner .dash-nav > a:not(.active), .ai-topbar-inner .dash-nav .global-quick-link { display: none !important; }.ai-topbar-inner .dash-nav a { white-space: nowrap; }.ai-topbar-inner .global-hub-menu { margin: 0; } }