:root{
  --bg:#0f1011;
  --surface:#17191b;
  --surface2:#202326;
  --ink:#f7f7f4;
  --muted:#a8adb2;
  --accent:#f1c64d;
  --accent2:#d6a900;
  --danger:#ff6b6b;
  --ok:#77d99b;
  --line:#303439;
  --radius:22px;
  --shadow:0 14px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0b0c0d;
  color:var(--ink);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{
  width:min(100%,520px);
  min-height:100vh;
  margin:0 auto;
  background:var(--bg);
  padding-bottom:86px;
  box-shadow:0 0 80px rgba(0,0,0,.6);
}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:rgba(15,16,17,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;flex:1}
.brand-mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent);color:#111;font-weight:900;font-size:14px;
}
.brand-name{font-weight:900;letter-spacing:.08em;font-size:13px}
.tagline{font-size:12px;color:var(--muted)}
.icon-btn{
  width:40px;height:40px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);
}
.hidden{display:none!important}
main{padding:18px 16px 30px}
.hero{
  padding:28px 22px;
  background:linear-gradient(145deg,#1b1e20,#121314);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.eyebrow{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.11em;margin:0 0 8px}
.hero h1{font-size:34px;line-height:1.02;margin:0 0 12px}
.hero p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.5}
.primary,.secondary,.ghost{
  border:0;border-radius:15px;padding:14px 18px;font-weight:800;
}
.primary{background:var(--accent);color:#111}
.primary:hover{background:#ffd768}
.secondary{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.large{font-size:17px;padding:16px 20px}
.full{width:100%}
.text-btn{border:0;background:transparent;color:var(--accent);font-weight:800}
.quick-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;
}
.quick-card{
  text-align:left;padding:18px 16px;min-height:150px;
  border:1px solid var(--line);border-radius:20px;
  background:var(--surface);color:var(--ink);
}
.quick-card strong{display:block;font-size:17px;margin:10px 0 7px}
.quick-card span{font-size:13px;line-height:1.4;color:var(--muted)}
.quick-icon{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;background:var(--accent);color:#111;font-weight:900;
}
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:18px;margin-top:16px;
}
.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel h2{margin:0 0 14px;font-size:20px}
.empty-state{text-align:center;padding:24px 8px}
.empty-icon{
  width:62px;height:62px;border-radius:20px;margin:0 auto 14px;
  display:grid;place-items:center;background:var(--surface2);font-size:26px;
}
.empty-state h3{margin:0 0 8px}
.empty-state p{color:var(--muted);line-height:1.5}
.project-card{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#121416}
.project-photo{
  height:150px;
  background:
   radial-gradient(circle at 20% 20%,rgba(241,198,77,.22),transparent 28%),
   linear-gradient(145deg,#2f3438,#17191b);
  background-size:cover;background-position:center;
}
.project-body{padding:16px}
.project-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.project-name{margin:0;font-size:22px}
.progress-ring{
  width:52px;height:52px;border-radius:50%;
  border:5px solid var(--accent);display:grid;place-items:center;flex:none;
}
.progress-text{font-size:12px;font-weight:900}
.budget-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.budget-row div{padding:10px;border-radius:14px;background:var(--surface2)}
.budget-row small{display:block;color:var(--muted);margin-bottom:4px}
.budget-row strong{font-size:16px}
.savings-chip{
  display:inline-block;margin-bottom:14px;padding:8px 10px;border-radius:999px;
  background:rgba(119,217,155,.12);color:var(--ok);font-size:13px;
}
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,520px);z-index:30;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:8px 8px max(8px,env(safe-area-inset-bottom));
  background:rgba(15,16,17,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.nav-item{border:0;background:transparent;color:var(--muted);padding:8px 2px}
.nav-item span{display:block;font-size:20px}
.nav-item small{font-size:11px}
.nav-item.active{color:var(--accent)}
.screen-title{margin:8px 0 4px;font-size:30px}
.screen-subtitle{margin:0 0 20px;color:var(--muted);line-height:1.5}
.form-card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:18px;margin:14px 0;
}
label{display:block;font-size:13px;font-weight:800;margin:0 0 8px}
input,select,textarea{
  width:100%;background:#101214;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;outline:none;
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.option{
  border:1px solid var(--line);background:var(--surface2);color:var(--ink);
  border-radius:16px;padding:14px;text-align:left;
}
.option.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wizard-actions{display:flex;gap:10px;margin-top:18px}
.wizard-actions button{flex:1}
.step-dots{display:flex;gap:6px;margin:8px 0 18px}
.step-dot{height:5px;flex:1;border-radius:99px;background:var(--line)}
.step-dot.active{background:var(--accent)}
.photo-upload{
  border:1px dashed #565d63;border-radius:18px;padding:20px;text-align:center;background:#111315
}
.photo-upload input{display:none}
.photo-preview{width:100%;max-height:260px;object-fit:cover;border-radius:14px;margin-top:12px}
.dashboard-head{
  border-radius:24px;padding:20px;background:linear-gradient(145deg,#1c1f21,#121314);border:1px solid var(--line)
}
.dashboard-head h1{margin:0 0 8px;font-size:29px}
.status-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.status-pill{padding:8px 10px;border-radius:999px;background:var(--surface2);font-size:12px}
.next-card{
  margin-top:16px;border-radius:24px;padding:20px;
  background:var(--accent);color:#111;
}
.next-card h2{margin:0 0 10px}
.next-card p{line-height:1.5}
.action-stack{display:grid;gap:10px;margin-top:14px}
.action-stack button{width:100%}
.checklist{display:grid;gap:9px;margin-top:12px}
.check-row{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;background:var(--surface2)}
.check-row input{width:auto;margin-top:3px}
.money-good{color:var(--ok);font-weight:900}
.money-warn{color:var(--accent);font-weight:900}
.warning{
  border-left:4px solid var(--danger);padding:12px 14px;border-radius:10px;background:rgba(255,107,107,.09);color:#ffd7d7
}
.success{
  border-left:4px solid var(--ok);padding:12px 14px;border-radius:10px;background:rgba(119,217,155,.09);color:#d9ffe6
}
.result-card{margin-top:14px;border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface)}
.big-answer{font-size:25px;font-weight:950;margin:0 0 8px}
.muted{color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--surface2);padding:16px;border-radius:16px}
.metric small{display:block;color:var(--muted)}
.metric strong{font-size:22px}
.list-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}
.list-card h3{margin:0 0 6px}
.list-card p{margin:0;color:var(--muted)}
.inline-actions{display:flex;gap:8px;margin-top:12px}
.inline-actions button{flex:1}
@media(max-width:380px){
  .quick-grid,.option-grid{grid-template-columns:1fr}
  .hero h1{font-size:30px}
}

.brain-badge{
  font-size:10px;font-weight:900;letter-spacing:.12em;
  padding:6px 8px;border-radius:999px;background:rgba(241,198,77,.13);color:var(--accent)
}
.brain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.brain-grid div{background:var(--surface2);padding:12px;border-radius:14px}
.brain-grid small{display:block;color:var(--muted);margin-bottom:5px}
.brain-grid strong{font-size:13px;line-height:1.35}
.mini-context{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:5px;font-size:12px}
.mini-context span{color:var(--muted)}
.savings-log{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.savings-log:last-child{border-bottom:0}
.savings-log span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.metric-grid{margin-top:14px}
.list-card .success{font-size:13px}
@media(max-width:380px){.metric-grid{grid-template-columns:1fr}}

.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:0}
.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:6px}
.timeline-item span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
#summaryCard ul{padding-left:20px}
#summaryCard li{margin:6px 0;color:var(--muted)}

.template-card{width:100%}
.code-preview{
  white-space:pre-wrap;word-break:break-word;background:#0b0c0d;border:1px solid var(--line);
  padding:12px;border-radius:12px;color:#d7dbe0;font-size:11px;max-height:360px;overflow:auto
}

.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.quality-grid label{font-size:11px;color:var(--muted)}
.quality-grid select{margin-top:5px}
@media(max-width:420px){.quality-grid{grid-template-columns:1fr}}

.extracted-card{margin-top:14px;padding:12px;background:var(--surface2);border-radius:14px}
.extracted-card>div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.extracted-card>div:last-child{border-bottom:0}
.extracted-card span{text-transform:capitalize;color:var(--muted);font-size:11px}
.extracted-card strong{font-size:12px}

.danger-check{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12px;color:var(--muted)}
.danger-check input{width:auto;margin-top:2px}
.readiness-hero{padding:18px;border-radius:18px;margin:14px 0}
.readiness-hero.ready{background:rgba(44,160,90,.12);border:1px solid rgba(44,160,90,.35)}
.readiness-hero.not-ready{background:var(--surface2);border:1px solid var(--line)}
.gate-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.gate-row:last-child{border-bottom:0}
.gate-pass{font-size:20px}
.gate-wait{font-size:20px;color:var(--muted)}

.progress-track{height:10px;background:var(--surface2);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:999px}
.field-case{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.field-case:last-child{border-bottom:0}
.field-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);font-weight:700}
.field-done{opacity:.72}
.field-check{display:flex;align-items:center;gap:8px;margin:10px 0 6px;font-size:12px;color:var(--muted)}
.field-check input{width:auto}

.beta-note{padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:12px;color:var(--muted)}

.restore-label{display:block;cursor:pointer}

#deployCheckList .gate-row span:last-child{font-size:11px;color:var(--muted);text-align:right}

.env-banner{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:6px 14px;font-size:11px;letter-spacing:.08em}
.env-banner.staging{background:#5a4100;color:#fff3c4}
.env-banner.production{background:#0d5b2a;color:#d7ffe4}
.selected-env{outline:2px solid var(--accent)}

.welcome-card{padding:22px 4px;max-width:520px;margin:auto}
.welcome-card h1{font-size:34px;line-height:1.05;margin:8px 0 12px}
.welcome-card p{line-height:1.5}
.giant-action{min-height:68px;font-size:16px;margin-top:12px}
.store-actions{margin:18px 0}
.center-note{text-align:center;margin-top:14px}
.store-shortcut{margin:10px 0 16px;min-height:54px}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid currentColor;outline-offset:2px}