:root{--bg:#0b0e16;--panel:#101828;--panel2:#0e1424;--line:#2a3a5e;--txt:#e9f2ff;--muted:#a9bfdc;--accent:#3cd2ff;}
*{box-sizing:border-box;}html,body{height:100%;}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(900px 600px at 30% 20%,#15244a,var(--bg));color:var(--txt);}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(60,210,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,210,255,.05) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:radial-gradient(closest-side at 30% 20%,rgba(0,0,0,1),rgba(0,0,0,.2));opacity:.55;}
.wrap{max-width:1100px;margin:28px auto;padding:0 16px;position:relative;}
.head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;background:rgba(16,24,40,.92);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(6px);}
.brand{display:flex;gap:14px;align-items:center;min-width:0;}
.logo{height:48px;width:auto;}
.brandTitle{font-weight:800;font-size:20px;}
.brandSub{color:var(--muted);margin-top:3px;font-size:13px;}
.pill{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(14,20,36,.9);color:var(--muted);font-size:12px;white-space:nowrap;}
.pill.subtle{opacity:.9;}
.card{margin-top:14px;padding:16px;background:rgba(16,24,40,.92);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(6px);}
.stepper{display:flex;gap:10px;margin-bottom:14px;}
.step{flex:1;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(14,20,36,.9);color:var(--muted);display:flex;align-items:center;gap:10px;}
.step .dot{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(16,24,40,.9);font-weight:700;color:var(--muted);}
.step.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(60,210,255,.92),rgba(60,210,255,.76));color:#061018;font-weight:800;}
.step.active .dot{border-color:rgba(6,16,24,.25);background:rgba(6,16,24,.12);color:#061018;}
.stepPanel{display:none;} .stepPanel.show{display:block;animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.notice{padding:14px;border:1px dashed rgba(60,210,255,.35);background:rgba(60,210,255,.07);border-radius:16px;margin-bottom:14px;}
.noticeTitle{font-weight:800;} .noticeText{color:var(--muted);margin-top:4px;font-size:13px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:13px;}
input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);outline:none;}
input:focus,textarea:focus{border-color:var(--accent);}
.hint{font-size:12px;color:rgba(169,191,220,.9);margin-top:6px;}
.toggleBox{display:flex;flex-direction:column;justify-content:flex-end;}
.toggle{display:flex;gap:10px;align-items:center;margin-top:8px;}
.toggle input{width:18px;height:18px;}
.hp{display:none;}
.actions{margin-top:14px;display:flex;justify-content:flex-end;}
.actions.two{justify-content:space-between;}
.btn{padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(14,20,36,.9);color:var(--txt);cursor:pointer;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:linear-gradient(180deg,rgba(60,210,255,1),rgba(60,210,255,.82));border-color:rgba(60,210,255,.9);color:#061018;font-weight:800;}
.topRow{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.metaTitle{font-weight:900;font-size:16px;} .metaSub{color:var(--muted);font-size:12px;margin-top:3px;}
.progress{min-width:240px;} .progressText{color:var(--muted);font-size:12px;text-align:right;margin-bottom:6px;}
.bar{height:10px;border-radius:999px;border:1px solid rgba(42,58,94,.9);background:rgba(14,20,36,.9);overflow:hidden;}
.barFill{height:100%;width:0%;background:rgba(60,210,255,.95);transition:width .15s ease;}
.qCard{margin:12px 0;padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(14,20,36,.9);}
.qTitle{font-weight:800;margin-bottom:10px;}
.likertRow{display:flex;gap:10px;flex-wrap:wrap;}
.likertBtn{width:46px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;transition:transform .08s ease,border-color .15s ease,background .15s ease;}
.likertBtn:hover{transform:translateY(-1px);border-color:rgba(60,210,255,.8);}
.likertBtn.active{background:rgba(60,210,255,.95);color:#061018;border-color:rgba(60,210,255,.95);font-weight:800;}
.txt{resize:vertical;min-height:84px;}
.summary{margin-top:10px;border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(14,20,36,.6);}
.sumRow{display:flex;justify-content:space-between;gap:12px;padding:10px 8px;border-bottom:1px solid rgba(42,58,94,.35);}
.sumRow:last-child{border-bottom:none;}
.sumRow b{color:var(--accent);}
.msg{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);color:var(--muted);min-height:44px;display:flex;align-items:center;}
.msg.ok{border-color:rgba(46,204,113,.8);color:#bff3d0;}
.msg.err{border-color:rgba(231,76,60,.9);color:#ffd2cd;}
.footer{margin:14px 2px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(169,191,220,.85);font-size:12px;}
.muted{color:rgba(169,191,220,.85);}
@media (max-width:820px){.grid2{grid-template-columns:1fr;}.progressText{text-align:left;}.head{flex-direction: column;}.brandText{text-align: center;}.brand{flex-direction: column;}.step{padding:6px;font-size:12px}}
.likertBtn.wide {width: auto;padding: 0 14px;}