:root{--bg:#f5f7fb;--card:#fff;--ink:#172033;--muted:#667085;--line:#dbe2ec;--brand:#315fd5;--brand2:#7b61ff;--ok:#12805c;--warn:#a76100;--bad:#b42318;--soft:#eef3fb;--r:16px;--shadow:0 10px 28px rgba(20,34,66,.08)}
[data-theme=dark]{--bg:#0e1420;--card:#151d2a;--ink:#edf2f7;--muted:#a8b3c3;--line:#2b394b;--brand:#7ea4ff;--soft:#1c2737;--shadow:0 10px 28px rgba(0,0,0,.24)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}button,input,textarea,select{font:inherit}button{cursor:pointer}.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 95%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topin{max-width:1450px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:14px}.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;font-weight:900}.brand{min-width:240px}.brand b{display:block}.brand small{color:var(--muted)}nav{display:flex;gap:7px;flex:1;overflow:auto}nav button,.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 12px;border-radius:10px}nav button{border-color:transparent;background:transparent;color:var(--muted);white-space:nowrap}nav button.active{background:var(--soft);border-color:var(--line);color:var(--brand);font-weight:800}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.small{font-size:12px;padding:7px 9px}.btn.danger{color:var(--bad)}.wrap{max-width:1450px;margin:auto;padding:20px 18px 50px}.view{display:none}.view.active{display:block}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}.pad{padding:20px}.hero{display:grid;grid-template-columns:1.5fr .7fr;gap:16px}.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.08;margin:7px 0 12px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:900}.muted{color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.stat{padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:13px}.stat b{display:block;font-size:28px}.sectionhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:24px 0 12px}.sectionhead h2,.sectionhead h3{margin:0}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:1fr 1fr}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:13px;font-weight:800}input,textarea,select{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 11px;outline:none}textarea{min-height:86px;resize:vertical}.note{background:var(--soft);border-left:4px solid var(--brand);border-radius:10px;padding:12px 14px;color:var(--muted)}.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}.sidebar{position:sticky;top:80px;padding:14px;max-height:calc(100vh - 100px);overflow:auto}.topicnav{padding:9px 10px;border-radius:10px;margin:4px 0;cursor:pointer;display:flex;gap:8px;align-items:center}.topicnav:hover,.topicnav.active{background:var(--soft)}.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}.dot.ok{background:var(--ok)}.topic{margin-bottom:18px;overflow:hidden}.topichead{padding:14px 16px;background:var(--soft);border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:center}.topichead input{font-weight:850;font-size:16px}.pill{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:5px 8px;border-radius:999px;font-size:11px;white-space:nowrap}.topicbody{padding:17px}.blocks{display:grid;gap:12px;margin-top:14px}.block{border:1px solid var(--line);border-radius:14px;padding:14px}.block h4{margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}.req{font-size:11px;color:var(--brand);background:var(--soft);border-radius:999px;padding:4px 7px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.checklist{display:grid;gap:8px}.check{display:grid;grid-template-columns:24px 1fr auto;gap:9px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:11px}.ci{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--soft)}.check.ok .ci{color:var(--ok)}.check.warn .ci{color:var(--warn)}.warning{color:var(--warn);font-size:12px}.error{color:var(--bad);font-size:12px}.success{color:var(--ok);font-size:12px}.previewframe{width:100%;min-height:720px;border:1px solid var(--line);border-radius:14px;background:#fff}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.exportcard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;margin:9px 0}.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:34px}
.syncgrid{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:end}
.syncstatus{margin-top:9px;font-size:12px;color:var(--muted)}
.syncstatus.ok{color:var(--ok)}.syncstatus.err{color:var(--bad)}.syncstatus.busy{color:var(--warn)}
.codebox{position:relative;margin-top:10px}.codebox textarea{min-height:420px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;white-space:pre;overflow:auto}
.codecopy{position:absolute;right:8px;top:8px}
.steps{margin:8px 0 0;padding-left:22px}.steps li{margin:6px 0}
@media(max-width:900px){.syncgrid{grid-template-columns:1fr 1fr}.syncgrid .field{grid-column:1/-1}}
@media(max-width:900px){.hero,.grid.two,.layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none}}@media(max-width:600px){.topin{flex-wrap:wrap}.brand{min-width:auto;flex:1}nav{order:3;width:100%}.wrap{padding:14px 10px 40px}.topichead{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}}

.logo{overflow:hidden;padding:0;background:transparent}.logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}