*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:#000000; --bg:#08090d; --bg2:#0e1018; --bg3:#151820; --bg4:#1c2030;
  --border:#252a3a; --border2:#323850;
  --blue-dark:#0f2a45; --blue-mid:#1a4a78; --blue:#2a6aaa; --blue-light:#4a8acc; --blue-bright:#6aaae8;
  --silver-dark:#5a6878; --silver:#8a9ab0; --silver-light:#c0ccd8; --chrome:#d8e0e8;
  --text:#dde2ec; --text2:#8892aa; --text3:#4a5268;
  --accent:#2a6aaa; --accent2:#1a4a78;
  --extract:#2a9d6f; --extract-bg:#0a2018; --extract-bdr:#164030;
  --gl:#c07030; --gl-bg:#201408; --gl-bdr:#402810;
  --std:#4a6888; --std-bg:#101820; --std-bdr:#1e3050;
  --success:#2a9d6f; --danger:#c04040; --warning:#c08030;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',system-ui,sans-serif;
  --r:6px; --r-lg:12px;
}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:13px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--r);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;border:1px solid;text-decoration:none;transition:all .15s;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--blue-light);border-color:var(--blue-light)}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:5px 12px;font-size:12px;background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-sm:hover{border-color:var(--blue);color:var(--blue)}
.btn-xs{padding:3px 9px;font-size:11px;background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-xs:hover{border-color:var(--blue);color:var(--blue)}
.btn-danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-explain{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-explain:hover:not(:disabled){background:var(--blue);color:#fff}
.btn-generate{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-generate:hover:not(:disabled){background:var(--blue-light)}
.btn-deploy{background:transparent;border-color:var(--extract-bdr);color:var(--extract)}
.btn-deploy:hover:not(:disabled){background:var(--extract);color:#fff}
.btn-save{background:transparent;border-color:var(--success);color:var(--success)}
.btn-save:hover:not(:disabled){background:var(--success);color:#fff}
.btn-clear{background:transparent;border-color:var(--border2);color:var(--text3);margin-left:auto}
.btn-clear:hover{border-color:var(--text2);color:var(--text2)}
.btn-upgrade-sm{display:inline-block;margin-top:8px;padding:4px 12px;font-size:11px;background:var(--blue);border-color:var(--blue);color:#fff;border-radius:var(--r);text-decoration:none;font-weight:500}
.btn-upgrade-nav{padding:4px 12px;font-size:11px;background:var(--blue);border-color:var(--blue);color:#fff}
.btn-price-primary{width:100%;justify-content:center;background:var(--blue);border-color:var(--blue);color:#fff}
.btn-price-primary:hover{background:var(--blue-light)}
.btn-price-ghost{width:100%;justify-content:center;background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-price-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-nav-cta{padding:6px 16px!important;font-size:13px!important;background:var(--blue);border-color:var(--blue);color:#fff!important}
.btn-nav-cta:hover{background:var(--blue-light)!important}
.btn-hero-primary{padding:12px 28px;font-size:14px;font-weight:600;background:var(--blue);border-color:var(--blue);color:#fff}
.btn-hero-primary:hover{background:var(--blue-light);border-color:var(--blue-light)}
.btn-hero-ghost{padding:12px 28px;font-size:14px;background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-hero-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-auth{width:100%;justify-content:center;background:var(--blue);border-color:var(--blue);color:#fff;padding:11px;font-size:14px}
.btn-auth:hover{background:var(--blue-light)}

/* FLASH */
.flash{padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:12px;border:1px solid}
.flash-success{background:rgba(42,157,111,.1);border-color:var(--success);color:var(--success)}
.flash-error{background:rgba(192,64,64,.1);border-color:var(--danger);color:var(--danger)}

/* LANDING */
.page-landing{overflow-x:hidden}
.land-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,9,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.land-nav-inner{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{height:36px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a{color:var(--text2);text-decoration:none;font-size:13px;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.hero{padding:120px 2rem 80px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-block;padding:4px 14px;background:var(--blue-dark);border:1px solid var(--blue-mid);border-radius:99px;font-size:11px;color:var(--blue-light);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.25rem}
.hero-title{font-size:48px;font-weight:700;line-height:1.1;color:var(--text);margin-bottom:1.25rem}
.hero-accent{background:linear-gradient(135deg,var(--blue-light),var(--silver-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:16px;color:var(--text2);line-height:1.7;margin-bottom:2rem;max-width:480px}
.hero-actions{display:flex;gap:1rem;margin-bottom:1.5rem}
.hero-proof{display:flex;gap:1.25rem;flex-wrap:wrap}
.hero-proof span{font-size:12px;color:var(--text3)}
.hero-visual{position:relative}
.code-preview{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.code-preview-bar{background:var(--bg3);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.r{background:#c04040}.dot.y{background:#c08030}.dot.g{background:#2a9d6f}
.code-preview-title{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--text3)}
.code-preview-body{padding:1.25rem;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--text);overflow-x:auto}
.features,.how,.pricing{padding:80px 2rem}
.features{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-inner{max-width:1200px;margin:0 auto}
.section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-light);margin-bottom:.75rem}
.section-title{font-size:32px;font-weight:700;color:var(--text);margin-bottom:3rem}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;transition:border-color .2s}
.feat-card:hover{border-color:var(--blue-mid)}
.feat-icon{font-size:24px;color:var(--blue-light);margin-bottom:1rem}
.feat-card h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:.6rem}
.feat-card p{font-size:13px;color:var(--text2);line-height:1.7}
.steps{display:flex;align-items:center;gap:1.5rem}
.step{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;text-align:center}
.step-num{font-size:40px;font-weight:700;color:var(--blue-dark);font-family:var(--mono);margin-bottom:1rem;line-height:1}
.step h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:.6rem}
.step p{font-size:13px;color:var(--text2);line-height:1.7}
.step-arrow{font-size:24px;color:var(--border2);flex-shrink:0}
.pricing-grid,.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.price-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;position:relative}
.price-featured{border-color:var(--blue);background:linear-gradient(135deg,var(--bg2),var(--blue-dark))}
.price-current{border-color:var(--success)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:600;padding:3px 12px;border-radius:99px}
.price-plan{font-size:16px;font-weight:600;color:var(--text);margin-bottom:.5rem}
.price-amount{font-size:36px;font-weight:700;color:var(--chrome);margin-bottom:.25rem}
.price-amount span{font-size:14px;color:var(--text2);font-weight:400}
.price-ghs{font-size:12px;color:var(--text3);margin-bottom:1.5rem}
.price-features{list-style:none;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:8px}
.price-features li{font-size:13px;color:var(--text2)}
.price-features li.dim{color:var(--text3)}
.current-plan-label{justify-content:center;color:var(--success);border-color:var(--success);cursor:default}
.land-footer{background:var(--bg2);border-top:1px solid var(--border);padding:2rem}
.land-footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-logo{height:32px;opacity:.7}
.footer-copy{font-size:12px;color:var(--text3)}
.footer-links{display:flex;gap:1.25rem}
.footer-links a{font-size:12px;color:var(--text3);text-decoration:none}
.footer-links a:hover{color:var(--text2)}

/* AUTH */
.page-auth{display:flex;min-height:100vh}
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;width:100%}
.auth-left{background:linear-gradient(135deg,var(--black) 0%,var(--blue-dark) 100%);padding:3rem;display:flex;flex-direction:column;gap:3rem;border-right:1px solid var(--border)}
.auth-logo-link{display:inline-block}
.auth-logo{height:48px;width:auto}
.auth-left-content h2{font-size:28px;font-weight:700;color:var(--text);margin-bottom:1rem;line-height:1.2}
.auth-left-content p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:2rem}
.auth-perks{list-style:none;display:flex;flex-direction:column;gap:14px}
.auth-perks li{font-size:14px;color:var(--text2);display:flex;align-items:center;gap:10px}
.perk-icon{color:var(--blue-light);font-size:12px;flex-shrink:0}
.auth-right{display:flex;align-items:center;justify-content:center;padding:3rem;background:var(--bg)}
.auth-card{width:100%;max-width:420px}
.auth-title{font-size:26px;font-weight:700;color:var(--text);margin-bottom:.5rem}
.auth-sub{font-size:13px;color:var(--text2);margin-bottom:2rem}
.auth-form{display:flex;flex-direction:column;gap:1rem}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-group label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text3)}
.req{color:var(--blue-light)}
.field-group input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;color:var(--text);font-size:13px;font-family:var(--sans);transition:border-color .15s;outline:none}
.field-group input:focus{border-color:var(--blue)}
.field-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
.field-check input{width:auto}
.auth-switch{margin-top:1.25rem;text-align:center;font-size:13px;color:var(--text2)}
.auth-switch a{color:var(--blue-light);text-decoration:none}

/* APP NAV */
.appnav{background:var(--bg2);border-bottom:1px solid var(--border);height:52px;flex-shrink:0;position:sticky;top:0;z-index:50}
.appnav-inner{display:flex;align-items:center;height:100%;padding:0 1.25rem;gap:1.5rem}
.appnav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.appnav-logo-img{height:32px;width:auto}
.appnav-product{font-size:13px;font-weight:500;color:var(--text3);border-left:1px solid var(--border);padding-left:10px}
.appnav-links{display:flex;gap:4px}
.appnav-link{padding:5px 12px;border-radius:var(--r);font-size:13px;color:var(--text2);text-decoration:none;transition:all .15s}
.appnav-link:hover{background:var(--bg3);color:var(--text)}
.appnav-link.active{background:var(--blue-dark);color:var(--blue-light)}
.appnav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.appnav-usage{display:flex;align-items:center;gap:6px}
.usage-pill{font-family:var(--mono);font-size:11px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);padding:2px 8px;border-radius:99px}
.plan-pill{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:99px}
.plan-free{background:var(--bg3);border:1px solid var(--border);color:var(--text3)}
.plan-developer{background:var(--blue-dark);border:1px solid var(--blue-mid);color:var(--blue-light)}
.plan-team{background:rgba(192,112,48,.15);border:1px solid var(--gl-bdr);color:var(--gl)}
.appnav-user{position:relative;cursor:pointer}
.user-initial{width:30px;height:30px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff}
.user-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);min-width:200px;padding:8px 0;box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;z-index:100}
.appnav-user:hover .user-menu{display:block}
.user-menu-name{padding:8px 14px 2px;font-size:13px;font-weight:500;color:var(--text)}
.user-menu-email{padding:0 14px 8px;font-size:11px;color:var(--text3)}
.user-menu-sep{border:none;border-top:1px solid var(--border);margin:4px 0}
.user-menu-item{display:block;padding:7px 14px;font-size:13px;color:var(--text2);text-decoration:none;transition:all .1s}
.user-menu-item:hover{background:var(--bg3);color:var(--text)}
.user-menu-logout{color:var(--danger)}

/* APP BODY / DASHBOARD */
.page-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app-body{flex:1;overflow-y:auto}
.dash-wrap{max-width:960px;margin:0 auto;padding:2rem}
.dash-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2rem;gap:1rem}
.dash-title{font-size:24px;font-weight:700;color:var(--text)}
.dash-sub{font-size:13px;color:var(--text3);margin-top:4px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem}
.stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:.5rem}
.stat-value{font-size:32px;font-weight:700;color:var(--text);line-height:1;margin-bottom:.5rem}
.stat-of{font-size:16px;color:var(--text3);font-weight:400}
.stat-hint{font-size:11px;color:var(--text3);margin-top:6px}
.usage-bar{height:4px;background:var(--bg4);border-radius:2px;margin:8px 0 4px;overflow:hidden}
.usage-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-light));border-radius:2px;transition:width .4s}
.dash-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:1.5rem}
.dash-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.dash-section-header h2{font-size:14px;font-weight:600;color:var(--text)}
.routine-list{display:flex;flex-direction:column;gap:2px}
.routine-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--r);transition:background .1s}
.routine-row:hover{background:var(--bg3)}
.routine-name{font-size:13px;font-weight:500;color:var(--text);margin-bottom:4px}
.routine-meta{display:flex;align-items:center;gap:6px}
.badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:99px}
.badge-standard{background:var(--std-bg);border:1px solid var(--std-bdr);color:var(--std)}
.badge-extract{background:var(--extract-bg);border:1px solid var(--extract-bdr);color:var(--extract)}
.badge-gl{background:var(--gl-bg);border:1px solid var(--gl-bdr);color:var(--gl)}
.badge-lang{background:var(--bg3);border:1px solid var(--border);color:var(--text3)}
.routine-date{font-size:11px;color:var(--text3)}
.routine-actions{display:flex;gap:6px;flex-shrink:0}
.empty-state{text-align:center;padding:3rem}
.empty-state p{font-size:13px;color:var(--text2)}
.empty-state a{color:var(--blue-light);text-decoration:none}
.upgrade-banner{background:linear-gradient(135deg,var(--blue-dark),var(--bg2));border:1px solid var(--blue-mid);border-radius:var(--r-lg);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.upgrade-banner-content{display:flex;align-items:center;gap:1rem}
.upgrade-banner-icon{font-size:20px;color:var(--blue-light)}
.upgrade-banner-content strong{font-size:14px;color:var(--text);display:block;margin-bottom:3px}
.upgrade-banner-content p{font-size:13px;color:var(--text2)}

/* BUILDER */
.builder-body{display:flex;flex-direction:column;overflow:hidden;flex:1}
.builder-layout{display:grid;grid-template-columns:220px 1fr;flex:1;overflow:hidden}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:1rem .875rem;display:flex;flex-direction:column;gap:1.25rem}
.section-title{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.section-extract{color:var(--extract);border-color:var(--extract-bdr)}
.section-gl{color:var(--gl);border-color:var(--gl-bdr)}
.chip-group{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:4px 9px;font-size:11px;border-radius:99px;cursor:pointer;border:1px solid;font-family:var(--sans);font-weight:500;transition:all .12s}
.chip-std{background:var(--std-bg);border-color:var(--std-bdr);color:var(--std)}
.chip-std:hover{background:var(--std-bdr);color:var(--text)}
.chip-extract{background:var(--extract-bg);border-color:var(--extract-bdr);color:var(--extract)}
.chip-extract:hover{background:var(--extract-bdr);color:#fff}
.chip-gl{background:var(--gl-bg);border-color:var(--gl-bdr);color:var(--gl)}
.chip-gl:hover{background:var(--gl-bdr);color:#fff}
.sidebar-ref{margin-top:auto}
.ref-text{font-size:11px;color:var(--text3);line-height:2}
.ref-text.mono{font-family:var(--mono);font-size:10px}
.builder-main{display:flex;flex-direction:column;overflow:hidden}
.builder-topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:.625rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-shrink:0}
.builder-topbar-title{font-size:13px;font-weight:500;color:var(--text);flex:1}
.lang-toggle{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lang-btn{padding:4px 12px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--text2);cursor:pointer;font-family:var(--mono);transition:all .15s}
.lang-btn.active{background:var(--blue);color:#fff}
.builder-content{display:flex;flex-direction:column;flex:1;overflow:hidden}
.form-panel{background:var(--bg2);border-bottom:1px solid var(--border);padding:.875rem 1.25rem;flex-shrink:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
input[type="text"],textarea,select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--sans);font-size:12px;padding:7px 10px;transition:border-color .15s;outline:none;width:100%}
input[type="text"]:focus,textarea:focus,select:focus{border-color:var(--blue)}
textarea{resize:vertical}
select option,select optgroup{background:var(--bg3)}
.extras.hidden{display:none}
.extras-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quota-warning{margin-top:10px;padding:8px 12px;background:rgba(192,64,64,.1);border:1px solid var(--danger);border-radius:var(--r);font-size:12px;color:var(--danger)}
.quota-warning.hidden{display:none}
.quota-warning a{color:var(--blue-light)}
.output-panel{display:flex;flex-direction:column;overflow:hidden;flex:1}
.output-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.otab{padding:9px 16px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;font-family:var(--sans);transition:all .15s}
.otab.active{color:var(--blue-light);border-bottom-color:var(--blue)}
.tab-content{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.tab-content.active{display:flex;min-height:0}
.output-box{flex:1;overflow-y:auto;padding:1.25rem 1.5rem;min-height:0}
.output-box h3{font-size:13px;font-weight:600;color:var(--blue-light);margin:1.25rem 0 .5rem;padding-bottom:4px;border-bottom:1px solid var(--border)}
.output-box h3:first-child{margin-top:0}
.output-box p{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:.5rem}
.output-box ul,.output-box ol{padding-left:1.4rem;margin-bottom:.75rem}
.output-box li{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:3px}
.output-box code{font-family:var(--mono);font-size:11px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:var(--extract)}
.output-box strong{font-weight:600;color:var(--silver-light)}
.output-empty{text-align:center;padding:3rem 2rem;max-width:400px;margin:0 auto}
.output-empty p{font-size:13px;color:var(--text2);line-height:1.7}
.output-empty p strong{color:var(--text)}
.code-toolbar{display:flex;align-items:center;gap:8px;padding:7px 1rem;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.code-lang-badge{font-family:var(--mono);font-size:11px;background:var(--std-bg);border:1px solid var(--std-bdr);color:var(--blue-light);padding:2px 8px;border-radius:99px}
.code-type-badge{font-size:11px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:2px 8px;border-radius:99px}
.copy-btn,.download-btn{margin-left:auto;padding:4px 11px;font-size:11px;font-weight:500;border-radius:var(--r);cursor:pointer;font-family:var(--sans);transition:all .15s;border:1px solid var(--border2);background:transparent;color:var(--text2)}
.copy-btn:hover,.download-btn:hover{border-color:var(--blue);color:var(--blue)}
.download-btn{margin-left:0}
.code-box{flex:1;overflow:auto;padding:1.25rem 1.5rem;font-family:var(--mono);font-size:11.5px;line-height:1.7;white-space:pre}
.kw{color:#7c8ff5;font-weight:500}.cm{color:var(--text3);font-style:italic}.str{color:#68d391}.num{color:#f6ad55}.call{color:#9ae6b4}
.statusbar{height:24px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 1rem;flex-shrink:0}
#status-text{font-size:11px;color:var(--text3);font-family:var(--mono)}
.status-generating{color:var(--blue-light)!important}.status-done{color:var(--success)!important}.status-error{color:var(--danger)!important}
@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}
.dot1{animation:blink 1.2s infinite 0s}.dot2{animation:blink 1.2s infinite .3s}.dot3{animation:blink 1.2s infinite .6s}

/* UPGRADE */
.upgrade-wrap{max-width:960px;margin:0 auto;padding:2rem}
.upgrade-header{text-align:center;margin-bottom:2.5rem}
.upgrade-header h1{font-size:28px;font-weight:700;color:var(--text);margin-bottom:.5rem}
.upgrade-header p{font-size:14px;color:var(--text2)}
.upgrade-note{text-align:center;font-size:12px;color:var(--text3);margin-top:1.5rem}
.upgrade-note strong{color:var(--text2)}

/* ADMIN NAV LINK */
.appnav-admin { color: var(--blue-light) !important; }
.appnav-admin:hover { background: var(--blue-dark) !important; color: var(--blue-bright) !important; }
.appnav-admin.active { background: var(--blue-dark) !important; color: var(--blue-bright) !important; }

/* ── GUEST MODAL ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.modal-blur-bg {
  position: absolute; inset: 0;
  background: rgba(8,9,13,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card {
  position: relative; z-index: 10;
  background: var(--bg2);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  max-width: 520px; width: 90%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--blue-dark);
}
.modal-icon {
  font-size: 28px; color: var(--blue-light);
  margin-bottom: 1rem;
  animation: pulse-glow 2s infinite;
}
.modal-title {
  font-size: 22px; font-weight: 700;
  color: var(--text); margin-bottom: 0.75rem;
}
.modal-sub {
  font-size: 14px; color: var(--text2);
  line-height: 1.7; margin-bottom: 2rem;
}
.modal-plans {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem; margin-bottom: 2rem;
}
.modal-plan {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem 0.75rem;
  position: relative;
}
.modal-plan-featured {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--bg3), var(--blue-dark));
}
.modal-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 10px; border-radius: 99px;
}
.modal-plan-name {
  font-size: 12px; font-weight: 600;
  color: var(--text2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.modal-plan-price {
  font-size: 26px; font-weight: 700;
  color: var(--chrome); line-height: 1;
  margin-bottom: 6px;
}
.modal-plan-detail {
  font-size: 11px; color: var(--text3); line-height: 1.5;
}
.modal-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 1.25rem;
}
.btn-modal-free {
  background: transparent; border-color: var(--border2);
  color: var(--text2); justify-content: center;
}
.btn-modal-free:hover { border-color: var(--blue); color: var(--blue); }
.btn-modal-paid {
  background: var(--blue); border-color: var(--blue);
  color: #fff; justify-content: center; font-weight: 600;
}
.btn-modal-paid:hover { background: var(--blue-light); }
.btn-modal-team {
  background: transparent; border-color: var(--gl-bdr);
  color: var(--gl); justify-content: center;
}
.btn-modal-team:hover { background: var(--gl); color: #fff; }
.modal-login {
  font-size: 13px; color: var(--text3);
}
.modal-login a { color: var(--blue-light); text-decoration: none; }

/* ── GUEST NAV BADGE ─────────────────────────────────────── */
.guest-badge {
  font-size: 11px; color: var(--blue-light);
  background: var(--blue-dark);
  border: 1px solid var(--blue-mid);
  padding: 3px 12px; border-radius: 99px;
  font-weight: 500;
}

/* ── VERSION SELECTOR ────────────────────────────────────── */
.version-badge-row {
  margin-bottom: 10px;
}
.version-badge {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  color: var(--blue-light);
  background: var(--blue-dark);
  border: 1px solid var(--blue-mid);
  border-radius: 99px;
  padding: 3px 12px;
  font-family: var(--sans);
}
.code-ver-badge {
  font-size: 11px;
  background: var(--blue-dark);
  border: 1px solid var(--blue-mid);
  color: var(--blue-light);
  padding: 2px 8px; border-radius: 99px;
  font-family: var(--mono);
}

/* ── LANDING EXTRAS ──────────────────────────────────────── */
.hero-inner { flex: 1; }
.hero-cta-block { margin-bottom: 1.5rem; }
.hero-cta-note {
  font-size: 12px; color: var(--text3);
  margin-top: 10px; letter-spacing: 0.02em;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem;
}
.hero-tag {
  font-size: 11px; font-weight: 500;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); padding: 4px 10px; border-radius: 99px;
}

/* PROOF BAR */
.proof-bar {
  background: var(--bg2); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 14px 2rem;
}
.proof-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; font-size: 13px; color: var(--text3);
}
.proof-item {
  font-size: 13px; color: var(--text2); font-weight: 500;
}

/* HOW CTA */
.how-cta { text-align: center; margin-top: 3rem; }

/* FINAL CTA */
.final-cta {
  padding: 80px 2rem;
  background: linear-gradient(135deg, var(--black) 0%, var(--blue-dark) 100%);
  border-top: 1px solid var(--blue-mid);
}
.final-cta-inner { text-align: center; }
.final-cta h2 {
  font-size: 28px; font-weight: 700;
  color: var(--text); margin-bottom: 1rem;
}
.final-cta p {
  font-size: 15px; color: var(--text2);
  margin-bottom: 2rem; line-height: 1.7;
}

/* CURRENCY TOGGLE */
.pricing-currency-toggle {
  display: flex; justify-content: center;
  gap: 0; margin-bottom: 2.5rem;
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; width: fit-content; margin-left: auto; margin-right: auto;
}
.currency-btn {
  padding: 7px 24px; font-size: 13px; font-weight: 600;
  border: none; background: transparent;
  color: var(--text2); cursor: pointer;
  font-family: var(--sans); transition: all 0.15s;
  letter-spacing: 0.05em;
}
.currency-btn.active {
  background: var(--blue); color: #fff;
}

/* PRICING NOTE */
.pricing-note {
  text-align: center; font-size: 12px;
  color: var(--text3); margin-top: 2rem;
}
.pricing-note strong { color: var(--text2); }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 768px and below
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* LANDING NAV */
  .land-nav-inner { padding: 0 1rem; }
  .nav-links a:not(.btn-nav-cta):not(.nav-login) { display: none; }
  .nav-login { display: none; }

  /* HERO */
  .hero {
    grid-template-columns: 1fr;
    padding: 90px 1.25rem 48px;
    gap: 2.5rem;
  }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .btn-hero-primary, .btn-hero-ghost { width: 100%; justify-content: center; }
  .hero-proof { flex-direction: column; gap: 6px; }
  .hero-visual { display: none; }

  /* PROOF BAR */
  .proof-bar-inner { flex-wrap: wrap; gap: 10px; font-size: 12px; }

  /* FEATURES */
  .features { padding: 48px 1.25rem; }
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* HOW IT WORKS */
  .how { padding: 48px 1.25rem; }
  .steps { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); font-size: 18px; text-align: center; }

  /* PRICING */
  .pricing { padding: 48px 1.25rem; }
  .pricing-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .pricing-currency-toggle { width: 100%; }
  .currency-btn { flex: 1; }

  /* FINAL CTA */
  .final-cta { padding: 48px 1.25rem; }
  .final-cta h2 { font-size: 22px; }

  /* FOOTER */
  .land-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  /* AUTH PAGES */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: 2rem 1.25rem; align-items: flex-start; }
  .auth-card { max-width: 100%; }

  /* DASHBOARD */
  .dash-wrap { padding: 1.25rem; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stat-value { font-size: 24px; }
  .dash-header { flex-direction: column; gap: 0.75rem; }
  .upgrade-banner { flex-direction: column; gap: 0.75rem; }
  .upgrade-banner-content { flex-direction: column; }

  /* UPGRADE PAGE */
  .upgrade-wrap { padding: 1.25rem; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .admin-stat-value { font-size: 20px; }

  /* APP NAV */
  .appnav-inner { padding: 0 1rem; gap: 0.75rem; }
  .appnav-product { display: none; }
  .appnav-links { display: none; }
  .appnav-usage { display: none; }

  /* ROUTINE LIST */
  .routine-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .routine-actions { width: 100%; justify-content: flex-start; }

  /* ADMIN TABLE — scroll horizontally */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── BUILDER — desktop only message on mobile ── */
@media (max-width: 900px) {
  .builder-mobile-warning {
    display: flex !important;
  }
  .builder-layout {
    display: none !important;
  }
  .builder-body > .statusbar {
    display: none !important;
  }
}

@media (min-width: 901px) {
  .builder-mobile-warning {
    display: none !important;
  }
}

/* ── XML EXPORT BUTTON ───────────────────────────────────── */
.xml-btn {
  padding: 4px 11px; font-size: 11px; font-weight: 500;
  border-radius: var(--r); cursor: pointer; font-family: var(--sans);
  transition: all 0.15s; border: 1px solid var(--extract-bdr);
  background: transparent; color: var(--extract);
  margin-left: 0;
}
.xml-btn:hover { background: var(--extract); color: #fff; border-color: var(--extract); }

/* ── EXPLAIN / DEPLOY TOOLBAR ────────────────────────────── */
.explain-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 1rem; background: var(--bg2);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.explain-toolbar-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text3);
}

/* ── OUTPUT BOX SCROLL FIX ───────────────────────────────── */
.output-panel {
  display: flex; flex-direction: column;
  overflow: hidden; flex: 1; min-height: 0;
}
.tab-content.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.output-box {
  flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.75;
}
.output-box h3 { font-size: 14px; margin-top: 1.5rem; }
.output-box p  { font-size: 13.5px; line-height: 1.75; }
.output-box li { font-size: 13.5px; line-height: 1.75; margin-bottom: 5px; }

/* ══════════════════════════════════════════════════════════
   BUILDER REDESIGN — cleaner split layout
══════════════════════════════════════════════════════════ */

/* Override old builder-content grid */
.builder-content { display: none; }

/* New split layout */
.builder-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Form panel — left side, scrollable */
.form-panel {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.form-panel .field { display: flex; flex-direction: column; gap: 4px; }
.form-panel label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); }
.form-panel input, .form-panel select, .form-panel textarea {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-family: var(--sans); font-size: 12px; padding: 7px 10px;
  transition: border-color .15s; outline: none; width: 100%;
}
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { border-color: var(--blue); }
.form-panel textarea { resize: vertical; min-height: 90px; }

.extras.hidden { display: none; }
.extras { display: flex; flex-direction: column; gap: 0.75rem; }

.action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.action-bar-2 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-explain  { justify-content: center; background: transparent; border-color: var(--blue); color: var(--blue); font-size: 12px; padding: 8px 6px; }
.btn-explain:hover:not(:disabled) { background: var(--blue); color: #fff; }
.btn-generate { justify-content: center; background: var(--blue); border-color: var(--blue); color: #fff; font-size: 12px; padding: 8px 6px; }
.btn-generate:hover:not(:disabled) { background: var(--blue-light); }
.btn-deploy   { justify-content: center; background: transparent; border-color: var(--extract-bdr); color: var(--extract); font-size: 12px; padding: 8px 6px; }
.btn-deploy:hover:not(:disabled) { background: var(--extract); color: #fff; }

/* Output panel — right side */
.output-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

/* ── SCROLL BOXES — THE FIX ─────────────────────────────── */
.output-scroll {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 1.25rem 1.5rem;
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.75;
  -webkit-overflow-scrolling: touch;
}

.code-scroll {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: auto !important;
  padding: 1.25rem 1.5rem;
  min-height: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* Make tab-content fill available space */
.tab-content { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.tab-content.active { display: flex; }

/* Output box prose styling */
.output-scroll h3 { font-size: 14px; font-weight: 600; color: var(--blue-light); margin: 1.25rem 0 .5rem; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.output-scroll h3:first-child { margin-top: 0; }
.output-scroll p  { font-size: 13.5px; color: var(--text); line-height: 1.75; margin-bottom: .5rem; }
.output-scroll ul, .output-scroll ol { padding-left: 1.4rem; margin-bottom: .75rem; }
.output-scroll li { font-size: 13.5px; color: var(--text); line-height: 1.75; margin-bottom: 4px; }
.output-scroll code { font-family: var(--mono); font-size: 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--extract); }
.output-scroll strong { font-weight: 600; color: var(--silver-light); }

/* ── INTERACTIVE REFINEMENT ─────────────────────────────── */
.refine-panel {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}

.refine-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.refine-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.refine-hint {
  font-size: 11px;
  color: var(--text3);
}

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

.refine-textarea {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 10px;
  resize: none;
  outline: none;
  transition: border-color .15s;
  line-height: 1.5;
}

.refine-textarea:focus { border-color: var(--blue); }

.btn-refine {
  padding: 8px 16px;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}

.btn-refine:hover:not(:disabled) { background: var(--blue-light); }
.btn-refine:disabled { opacity: .4; cursor: not-allowed; }

.refine-history {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 80px;
  overflow-y: auto;
}

.refine-entry {
  font-size: 11px;
  color: var(--text3);
  padding: 3px 8px;
  background: var(--bg3);
  border-radius: var(--r);
  border-left: 2px solid var(--blue);
}

/* ── SIDEBAR COMPACT ────────────────────────────────────── */
.sidebar { padding: .75rem; gap: 1rem; }
.section-title { font-size: 9px; padding-bottom: 6px; margin-bottom: 6px; }
.chip { padding: 3px 8px; font-size: 10px; }

/* Remove old output-box reference conflicts */
.output-box { display: none; }

@media (max-width: 900px) {
  .builder-mobile-warning { display: flex !important; }
  .builder-split { display: none !important; }
  .builder-topbar { display: none !important; }
  .statusbar { display: none !important; }
}

/* ── FIELD CORRECTION PANEL ─────────────────────────────── */
.field-correction-panel {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.correction-header {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.correction-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: #7c8ff5;
}
.correction-hint { font-size: 11px; color: var(--text3); }
.correction-body { padding: 10px 1rem; }
.correction-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 10px;
}
.corr-field { display: flex; flex-direction: column; gap: 3px; }
.corr-field label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text3);
}
.corr-field input, .corr-field select {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text);
  font-size: 11px; padding: 5px 8px;
  font-family: var(--mono); outline: none;
}
.corr-field input:focus, .corr-field select:focus { border-color: #7c8ff5; }
.correction-footer {
  display: flex; align-items: center; gap: 10px;
}
.btn-corr-submit {
  padding: 6px 14px; font-size: 11px; font-weight: 500;
  background: #534AB7; border: none; color: #fff;
  border-radius: var(--r); cursor: pointer; white-space: nowrap;
  font-family: var(--sans);
}
.btn-corr-submit:hover { background: #3C3489; }
.correction-note {
  font-size: 10px; color: var(--text3); line-height: 1.5; flex: 1;
}
.corr-toast {
  margin-top: 8px; padding: 7px 10px;
  border-radius: var(--r); font-size: 11px; line-height: 1.5;
}
.corr-toast.success {
  background: rgba(42,157,111,.1);
  border: 1px solid var(--success); color: var(--success);
}
.corr-toast.error {
  background: rgba(192,64,64,.1);
  border: 1px solid var(--danger); color: var(--danger);
}

/* ══════════════════════════════════════════════════════════
   MODE TABS — Generate / Review / Migrate
══════════════════════════════════════════════════════════ */
.mode-tabs {
  display: flex; gap: 2px;
  background: var(--bg3);
  border-radius: var(--r);
  padding: 3px;
}
.mode-tab {
  padding: 4px 14px; font-size: 11px; font-weight: 500;
  border-radius: var(--r); border: none; cursor: pointer;
  background: transparent; color: var(--text3);
  font-family: var(--sans); transition: all .15s;
}
.mode-tab.active { background: var(--blue); color: #fff; }
.mode-tab:hover:not(.active) { color: var(--text2); }

/* ── MODE PANELS ─────────────────────────────────────────── */
.mode-panel { display: none; }
.mode-panel.visible { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 100px); overflow: hidden; min-height: 0; }
.hidden { display: none !important; }

/* ── REVIEW / MIGRATE FORM PANEL ───────────────────────────── */
.review-form-panel {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
}
.review-form-panel .field label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); }
.review-form-panel .field input,
.review-form-panel .field select,
.review-form-panel .field textarea {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-family: var(--sans); font-size: 12px; padding: 7px 10px;
  width: 100%; outline: none; transition: border-color .15s;
}
.review-form-panel .field textarea { resize: vertical; min-height: 80px; font-family: var(--mono); font-size: 11px; }
.review-form-panel .field input:focus,
.review-form-panel .field select:focus,
.review-form-panel .field textarea:focus { border-color: var(--blue); }

.review-note {
  font-size: 10px; color: var(--text3); line-height: 1.5;
  padding: 6px 8px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r);
}

/* ── REVIEW OUTPUT ──────────────────────────────────────────── */
.review-output-panel {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0; flex: 1;
}

.review-fields-toast {
  flex-shrink: 0; padding: 7px 12px; font-size: 11px;
  background: rgba(42,157,111,.08); border-top: 1px solid var(--border);
  color: var(--success); line-height: 1.5;
}

/* ── MIGRATE SELECTORS ──────────────────────────────────────── */
.migrate-selectors {
  display: flex; align-items: center; gap: 10px;
}
.migrate-env-block {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 10px;
}
.migrate-env-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue-light);
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.migrate-arrow {
  font-size: 22px; color: var(--blue); flex-shrink: 0;
}

.migrate-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: var(--bg2);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}

/* ── REPORT STYLING ────────────────────────────────────────── */
.output-scroll .review-section { margin-bottom: 1.5rem; }
.output-scroll .critical { color: var(--danger); }
.output-scroll .warning  { color: var(--gl); }
.output-scroll .info     { color: var(--blue-light); }

/* Builder split hidden when in review/migrate mode */
.builder-split.mode-hidden { display: none !important; }

/* ── FIX MODE PANELS DISPLAY ────────────────────────────── */
.mode-panel { display: none !important; }
.mode-panel.visible {
  display: grid !important;
  grid-template-columns: 340px 1fr;
  width: 100%;
  height: calc(100vh - 88px);
  overflow: hidden;
}

.review-output-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
}

.review-form-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
  background: var(--bg2);
  border-right: 1px solid var(--border);
}

.review-form-panel .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-form-panel label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text3);
}

.review-form-panel select,
.review-form-panel input,
.review-form-panel textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 10px;
  width: 100%;
  outline: none;
}

.review-form-panel textarea {
  font-family: var(--mono) !important;
  font-size: 11px !important;
}

.review-form-panel select:focus,
.review-form-panel textarea:focus { border-color: var(--blue); }

/* ── BACK TO BUILDER BUTTON ─────────────────────────────── */
.btn-back-to-builder {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg3); color: var(--blue-light);
  cursor: pointer; font-family: var(--sans);
  transition: all .15s; width: fit-content;
}
.btn-back-to-builder:hover {
  background: var(--blue); color: #fff; border-color: var(--blue);
}