:root{
  --bg:#F3F5F2; --panel:#FFFFFF; --panel-2:#F8FAF7; --ink:#14201B; --muted:#5B6862; --faint:#8D9993;
  --rule:#DDE3DE; --accent:#0F7B5F; --accent-ink:#FFFFFF; --accent-soft:#DDF1E8;
  --warn:#9A5B0B; --warn-soft:#FBEFD6; --bad:#B42318; --bad-soft:#FDE7E4; --info:#3F51B5; --info-soft:#E7EAF8;
  --shadow:0 1px 2px rgba(20,32,27,.06),0 2px 8px rgba(20,32,27,.05);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1210; --panel:#131C18; --panel-2:#17221D; --ink:#E3EBE7; --muted:#9FADA6; --faint:#6D7A74;
  --rule:#243029; --accent:#34C38F; --accent-ink:#06130D; --accent-soft:#12302A;
  --warn:#E6AE55; --warn-soft:#33250F; --bad:#F87171; --bad-soft:#3B1515; --info:#9AA7EE; --info-soft:#1D2240;
  --shadow:none; color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 60px}
.wide{max-width:1100px}
header.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
header.bar h1{font-size:20px;margin:0;line-height:1.2}
header.bar .sp{flex:1}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);letter-spacing:.02em;font-size:13px;text-transform:uppercase}
.brand i{width:22px;height:22px;border-radius:7px;background:var(--accent);display:inline-block;position:relative}
.brand i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--accent-ink)}
.muted{color:var(--muted)} small{font-size:12.5px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.card h2{font-size:17px;margin:0 0 10px}
.btn{border:1px solid var(--rule);background:var(--panel);border-radius:10px;padding:8px 14px;font-weight:600;white-space:nowrap}
a.btn{text-decoration:none;color:inherit;display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.bad{color:var(--bad)} .btn.sm{padding:5px 10px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;max-width:100%;border:1px solid var(--rule);border-radius:10px;background:var(--panel-2);padding:9px 11px}
textarea{resize:vertical;min-height:70px}
input:disabled,textarea:disabled,select:disabled{opacity:.85}
/* form */
fieldset.sec{border:1px solid var(--rule);border-radius:14px;background:var(--panel);padding:16px 18px 6px;margin:0 0 16px;min-width:0;box-shadow:var(--shadow)}
fieldset.sec legend{font-weight:700;font-size:16px;padding:0 6px;margin-left:-6px}
.fld{margin:0 0 16px;min-width:0}
.fld .lbl{display:block;font-weight:600;margin-bottom:5px}
.fld .hint{display:block;color:var(--muted);margin:-2px 0 6px}
.req{color:var(--bad)}
.opts{display:grid;gap:6px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rule);border-radius:10px;padding:8px 11px;background:var(--panel-2);cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input{margin-top:4px;flex:none;accent-color:var(--accent)}
.opt small{display:block;color:var(--muted)}
.opt.agree{background:transparent}
.err{color:var(--bad);display:block}
.err:empty{display:none}
.fld.bad input,.fld.bad textarea,.fld.bad .opt{border-color:var(--bad)}
.msg{border-radius:10px;padding:10px 12px;margin:10px 0}
.msg.ok{background:var(--accent-soft)} .msg.bad{background:var(--bad-soft);color:var(--bad)} .msg.warn{background:var(--warn-soft)}
.msg:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* chips + steps */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--rule);white-space:nowrap}
.chip.pending{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.active{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.suspended{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.steps li{display:flex;gap:10px;align-items:center}
.steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--rule);flex:none}
.steps li.done::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--panel)}
.steps li.done{color:var(--ink)} .steps li{color:var(--muted)}
.bar-prog{height:6px;border-radius:9px;background:var(--rule);overflow:hidden;margin:6px 0 2px}
.bar-prog i{display:block;height:100%;background:var(--accent)}
.ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;padding:5px 0;border-bottom:1px dashed var(--rule)}
.ans span{color:var(--muted)} .ans b{font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}
h4{margin:14px 0 4px;font-size:14px}
@media (max-width:560px){.ans{grid-template-columns:1fr;gap:0}}
dialog{border:1px solid var(--rule);border-radius:14px;background:var(--panel);color:var(--ink);max-width:min(560px,calc(100vw - 32px));width:100%;padding:20px}
dialog::backdrop{background:rgba(0,0,0,.4)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.04em;background:var(--panel-2);border:1px solid var(--rule);border-radius:8px;padding:8px 12px;display:inline-block;user-select:all}
.sticky-save{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);padding:10px 0;border-top:1px solid var(--rule);display:flex;gap:10px;align-items:center;flex-wrap:wrap}