/* QuantumBuild — Quantum design system (shared DNA with QuantumFuel/Grow/Property) */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg-app:#0a1518; --bg-deep:#071012;
  --bg-panel:rgba(255,255,255,0.025); --bg-card:rgba(255,255,255,0.02);
  --bg-input:rgba(255,255,255,0.04); --bg-subtle:rgba(255,255,255,0.03);
  --accent:#00e6d2; --accent-hover:#00cfc0;
  --a5:rgba(0,230,210,.05); --a6:rgba(0,230,210,.06); --a8:rgba(0,230,210,.08);
  --a9:rgba(0,230,210,.09); --a10:rgba(0,230,210,.10); --a12:rgba(0,230,210,.12);
  --a15:rgba(0,230,210,.15); --a20:rgba(0,230,210,.20); --a30:rgba(0,230,210,.30);
  --text-1:#cde; --text-2:#9ab; --text-3:#4a7080; --text-4:#3a6070; --text-5:#2a5060;
  --err:#e24b4a; --err-light:#f09595; --warn:#efaa27; --ok:#97c459;
  --btn-txt:#071012; --login-bg:#071012;
}
[data-theme="light"]{
  --bg-app:#eef2f5; --bg-deep:#f4f7f9; --bg-panel:#fff; --bg-card:#fff;
  --bg-input:rgba(0,0,0,.04); --bg-subtle:rgba(0,0,0,.03);
  --accent:#008a80; --accent-hover:#007068;
  --a5:rgba(0,130,120,.05); --a6:rgba(0,130,120,.07); --a8:rgba(0,0,0,.06);
  --a9:rgba(0,0,0,.07); --a10:rgba(0,130,120,.10); --a12:rgba(0,130,120,.10);
  --a15:rgba(0,130,120,.12); --a20:rgba(0,0,0,.10); --a30:rgba(0,0,0,.15);
  --text-1:#0d1f2d; --text-2:#1a3548; --text-3:#274858; --text-4:#345868; --text-5:#3f6272;
  --btn-txt:#fff; --login-bg:#eef2f5;
}

body{background:var(--bg-app);font-family:'Inter',system-ui,sans-serif;color:var(--text-1);
  font-size:13px;line-height:1.5;transition:background .2s,color .2s;}
a{color:var(--accent);text-decoration:none;}

/* layout */
.wrap{max-width:760px;margin:0 auto;padding:32px 20px 64px;}
.wrap-wide{max-width:1100px;margin:0 auto;padding:24px 20px 64px;}

/* brand / logo */
.brand{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--a12);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--a20);}
.brand-mark svg{width:18px;height:18px;}
.brand-txt{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--text-1);}
.brand-txt span{font-weight:300;color:var(--text-3);}
.brand-sub{font-size:9px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-top:1px;}

/* hero */
.hero{margin:18px 0 28px;}
.hero h1{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;}
.hero p{font-size:14px;color:var(--text-2);max-width:600px;}

/* panel / card */
.panel{background:var(--bg-panel);border:1px solid var(--a9);border-radius:12px;
  padding:20px 22px;margin-bottom:14px;}
.panel-h{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}

/* form fields */
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.label{display:block;font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:3px;}
.hint{font-size:11px;color:var(--text-4);margin-bottom:7px;}
.req{color:var(--accent);}
.input,.textarea{width:100%;background:var(--bg-input);border:1px solid var(--a15);
  border-radius:8px;padding:10px 12px;color:var(--text-1);font-size:13px;outline:none;
  font-family:inherit;transition:border-color .15s;}
.textarea{resize:vertical;min-height:84px;line-height:1.5;}
.input:focus,.textarea:focus{border-color:var(--a30);}
.input::placeholder,.textarea::placeholder{color:var(--text-5);}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* buttons */
.btn{background:var(--accent);color:var(--btn-txt);font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:9px;border:none;cursor:pointer;transition:background .15s;}
.btn:hover{background:var(--accent-hover);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-outline{background:none;border:1px solid var(--a30);color:var(--accent);
  font-weight:600;font-size:12px;padding:7px 14px;border-radius:8px;cursor:pointer;}
.btn-outline:hover{background:var(--a8);}

/* misc */
.row{display:flex;gap:12px;flex-wrap:wrap;}
.row>.field{flex:1;min-width:200px;}
.foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.muted{color:var(--text-4);font-size:12px;}
.ok-box{background:var(--a8);border:1px solid var(--a20);border-radius:12px;
  padding:28px 24px;text-align:center;}
.ok-box h2{font-size:20px;margin-bottom:8px;color:var(--accent);}
.theme-toggle{position:fixed;top:16px;right:16px;z-index:60;}
/* On the wizard (form) the theme button lives inside the top bar next to the
   language switch, so it must flow inline instead of overlapping it. */
.wz-top-right .theme-toggle{position:static;top:auto;right:auto;z-index:auto;}

/* dashboard */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.met{background:var(--bg-panel);border:1px solid var(--a9);border-radius:10px;padding:13px 14px;}
.met-lbl{font-size:10px;color:var(--text-4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.met-val{font-size:22px;font-weight:800;line-height:1;color:var(--text-1);}
table{width:100%;border-collapse:collapse;}
th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-4);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--a10);}
td{padding:10px;border-bottom:1px solid var(--a5);font-size:12px;color:var(--text-2);vertical-align:top;}
tr:hover td{background:var(--a5);}
.badge{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:700;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;}
.b-new{background:var(--a12);color:var(--accent);}
.b-done{background:rgba(99,153,34,.15);color:var(--ok);}
.b-gen{background:rgba(239,170,39,.15);color:var(--warn);}
.b-err{background:rgba(226,75,74,.15);color:var(--err-light);}
.mini-spin{width:9px;height:9px;border:1.5px solid rgba(239,170,39,.35);border-top-color:var(--warn);
  border-radius:50%;animation:spin .7s linear infinite;}

/* row actions */
.acts{display:flex;gap:6px;flex-wrap:wrap;}
.abtn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--a20);color:var(--accent);background:none;transition:all .15s;white-space:nowrap;}
.abtn:hover{background:var(--a8);border-color:var(--a30);}
.abtn.solid{background:var(--accent);color:var(--btn-txt);border-color:var(--accent);}
.abtn:disabled{opacity:.5;cursor:not-allowed;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:fadeIn .2s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--bg-deep);border:1px solid var(--a15);border-radius:14px;width:100%;max-width:860px;
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--a10);}
.modal-h .t{font-size:14px;font-weight:700;color:var(--text-1);}
.modal-h .sub{font-size:11px;color:var(--text-4);}
.modal-acts{display:flex;gap:8px;align-items:center;}
.modal-x{background:none;border:none;color:var(--text-3);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;}
.modal-x:hover{color:var(--text-1);}
.modal-tabs{display:flex;gap:3px;padding:10px 18px 0;border-bottom:1px solid var(--a10);}
.tabp{background:none;border:none;color:var(--text-4);font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:7px 7px 0 0;cursor:pointer;font-family:inherit;transition:all .15s;
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabp:hover{color:var(--text-2);}
.tabp.on{color:var(--accent);border-bottom-color:var(--accent);}
.modal-body{overflow:auto;padding:22px 26px;}
.prog-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 20px;
  color:var(--text-3);font-size:13px;text-align:center;}

/* key-value form table */
.md table.kv{width:100%;}
.md table.kv th{width:230px;text-align:left;color:var(--text-3);font-weight:600;font-size:12px;
  vertical-align:top;padding:9px 14px 9px 0;border-bottom:1px solid var(--a5);text-transform:none;letter-spacing:0;}
.md table.kv td{color:var(--text-1);font-size:13px;padding:9px 0;border-bottom:1px solid var(--a5);white-space:pre-wrap;}

/* rendered markdown */
.md h1{font-size:22px;font-weight:800;margin:4px 0 12px;color:var(--text-1);}
.md h2{font-size:16px;font-weight:700;margin:20px 0 8px;color:var(--text-1);border-top:1px solid var(--a8);padding-top:14px;}
.md h3{font-size:13px;font-weight:700;margin:14px 0 5px;color:var(--text-2);}
.md p{margin:6px 0;color:var(--text-2);}
.md strong{color:var(--text-1);}
.md code{font-family:monospace;font-size:12px;background:var(--bg-subtle);border:1px solid var(--a10);
  border-radius:5px;padding:1px 6px;color:var(--accent);}
.md blockquote{border-left:3px solid var(--a30);background:var(--a5);padding:8px 14px;margin:8px 0;
  color:var(--text-2);border-radius:0 6px 6px 0;}
.md li{margin:3px 0 3px 18px;color:var(--text-2);}
.md .todo{margin:3px 0;color:var(--text-2);}
.md hr{border:none;border-top:1px solid var(--a10);margin:16px 0;}
.md table{margin:10px 0;}
.md details{margin:10px 0;color:var(--text-3);font-size:12px;}
.md summary{cursor:pointer;color:var(--text-2);font-weight:600;}
.cmd{font-family:monospace;font-size:11px;background:var(--bg-deep);border:1px solid var(--a10);
  border-radius:6px;padding:3px 7px;color:var(--text-2);user-select:all;}
.spinner{width:22px;height:22px;border:2px solid var(--a12);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ═══ WIZARD ═══════════════════════════════════════════════════════════════ */
/* animated background orbs — gives the page life */
.bg-orbs{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;
  animation:drift 20s ease-in-out infinite;}
.orb1{width:420px;height:420px;background:radial-gradient(circle,var(--accent),transparent 68%);top:-110px;left:-90px;}
.orb2{width:360px;height:360px;background:radial-gradient(circle,#3a8fff,transparent 70%);bottom:-120px;right:-80px;animation-delay:-7s;opacity:.28;}
.orb3{width:260px;height:260px;background:radial-gradient(circle,var(--accent),transparent 70%);top:40%;right:18%;animation-delay:-13s;opacity:.18;}
[data-theme="light"] .orb{opacity:.22;}
[data-theme="light"] .orb2{opacity:.16;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(46px,34px) scale(1.08);}}

.wz{min-height:100vh;display:flex;flex-direction:column;position:relative;}
.wz-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);
  box-shadow:0 0 14px var(--accent);transition:width .5s cubic-bezier(.4,0,.2,1);z-index:50;}
.wz-top{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;}
.wz-top-right{display:flex;align-items:center;gap:16px;}
.wz-count{font-size:12px;color:var(--text-4);font-weight:600;}
.lang-switch{display:flex;gap:2px;background:var(--bg-panel);border:1px solid var(--a10);border-radius:8px;padding:3px;}
.lang-switch button{background:none;border:none;color:var(--text-4);font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:6px;cursor:pointer;font-family:inherit;letter-spacing:.04em;transition:all .15s;}
.lang-switch button:hover{color:var(--text-2);}
.lang-switch button.on{background:var(--a12);color:var(--accent);}
.wz-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 24px 60px;}
.wz-inner{width:100%;max-width:660px;}

.step{animation:stepIn .5s cubic-bezier(.2,.7,.2,1) both;}
.step.leaving{animation:stepOut .26s ease forwards;}
@keyframes stepIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes stepOut{to{opacity:0;transform:translateY(-18px);}}

.q-num{font-size:11px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;margin-bottom:12px;}
.step h2{font-size:29px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-bottom:9px;color:var(--text-1);}
.q-hint{font-size:14px;color:var(--text-2);margin-bottom:24px;max-width:560px;}
.step .input,.step .textarea{font-size:16px;padding:13px 15px;}
.step .textarea{min-height:120px;}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.choices.one{grid-template-columns:1fr;}
.choice{position:relative;background:var(--bg-panel);border:1px solid var(--a12);border-radius:13px;
  padding:16px 18px 16px 54px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;
  animation:popIn .45s backwards;}
.choice:hover{transform:translateY(-2px);border-color:var(--a30);background:var(--a6);
  box-shadow:0 8px 24px -12px var(--accent);}
.choice.selected{border-color:var(--accent);background:var(--a12);}
.choice .ic{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--accent);}
.choice .c-label{font-size:15px;font-weight:700;color:var(--text-1);}
.choice .c-desc{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.4;}
.choice.plain{padding-left:18px;}
.choice .key{position:absolute;right:11px;top:11px;font-size:10px;color:var(--text-5);
  border:1px solid var(--a12);border-radius:5px;padding:1px 6px;font-weight:700;}
.think{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center;}
.think .spinner{width:30px;height:30px;}
.think-txt{font-size:14px;color:var(--text-2);}
.think-sub{font-size:12px;color:var(--text-4);}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{padding:10px 16px;border-radius:999px;border:1px solid var(--a15);background:var(--bg-panel);
  color:var(--text-2);cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;user-select:none;
  animation:popIn .4s backwards;}
.chip:hover{border-color:var(--a30);color:var(--text-1);}
.chip.on{background:var(--accent);color:var(--btn-txt);border-color:var(--accent);}
.chip-other{margin-top:14px;}

.wz-nav{display:flex;align-items:center;gap:14px;margin-top:28px;}
.wz-hint{font-size:12px;color:var(--text-4);}
.wz-hint kbd{background:var(--bg-deep);border:1px solid var(--a12);border-radius:5px;
  padding:1px 6px;font-size:11px;color:var(--text-2);}
.wz-back{background:none;border:none;color:var(--text-4);cursor:pointer;font-size:13px;
  font-weight:600;padding:6px 4px;transition:color .15s;}
.wz-back:hover{color:var(--text-2);}

/* intro / outro */
.intro{text-align:center;}
.intro h1{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.08;margin-bottom:14px;}
.intro h1 span{color:var(--accent);}
.intro p{font-size:16px;color:var(--text-2);max-width:480px;margin:0 auto 28px;}
.intro .btn{font-size:16px;padding:14px 30px;}
.intro .meta{margin-top:16px;font-size:12px;color:var(--text-4);}
.outro{text-align:center;}
.check{width:84px;height:84px;border-radius:50%;background:var(--a12);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:checkPop .55s cubic-bezier(.2,1.3,.4,1) both;}
.check svg{width:42px;height:42px;color:var(--accent);}
.outro h2{font-size:28px;font-weight:800;margin-bottom:10px;}
.outro p{font-size:15px;color:var(--text-2);max-width:440px;margin:0 auto;}
@keyframes checkPop{0%{opacity:0;transform:scale(.4);}60%{transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}

@media(max-width:560px){
  .choices{grid-template-columns:1fr;}
  .step h2{font-size:24px;}
  .intro h1{font-size:30px;}
}