*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1f2937;background:#f5f7fb}
a{color:#13357b}.top{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#13357b;color:#fff}
.brand{color:#fff;font-weight:800;font-size:22px;text-decoration:none}.tag{background:#b01b07;padding:4px 10px;border-radius:12px;font-size:13px}
.wrap{max-width:760px;margin:24px auto;padding:0 16px}.foot{text-align:center;color:#6b7280;font-size:13px;padding:24px}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin:16px 0}
label{display:block;margin:10px 0;font-weight:600;font-size:14px}input,select{display:block;width:100%;padding:10px;margin-top:4px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px}
input[type=checkbox],input[type=radio]{display:inline;width:auto;margin-right:6px}input[type=color]{height:44px;padding:2px}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>label{flex:1;min-width:140px}.row>label.isd{flex:0 0 90px;min-width:90px}
button{background:#b01b07;color:#fff;border:0;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px}
button.link{background:none;color:#13357b;padding:0;font-size:14px;font-weight:600;text-decoration:underline}
.inline{display:inline}.hint{color:#6b7280;font-size:13px;font-weight:400}.alert{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:8px;margin:8px 0}
.notice{background:#dcfce7;color:#166534;padding:10px 14px;border-radius:8px;margin:8px 0}
.namebox{display:flex;align-items:center;gap:6px;font-size:16px}.namebox input{flex:1;margin:0}
.ok{color:#166534}.bad{color:#991b1b}.hero h1{font-size:30px;margin-bottom:6px}.features li{margin:6px 0}
.steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;font-size:12px}.steps li{padding:4px 8px;border-radius:10px;background:#e5e7eb}
.steps li.now{background:#13357b;color:#fff}.steps li.done{background:#c7d2fe}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.theme{border:1px solid #cbd5e1;border-radius:10px;padding:12px;font-weight:400}
.swatch{display:inline-block;width:22px;height:22px;border-radius:50%;margin-right:4px;vertical-align:middle}.theme small{display:block;color:#6b7280}
/* checkpoint 2: previews, errors, mobile */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
fieldset.themes{border:0;padding:0;margin:0}.theme{cursor:pointer;position:relative}.theme input[type=radio]{position:absolute;top:10px;right:6px}
.theme:has(input:checked),.theme.sel{border-color:#13357b;box-shadow:0 0 0 2px #13357b}.theme:focus-within{outline:2px solid #2563eb;outline-offset:2px}
.preview{display:block;width:100%;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;margin:4px 0 8px;background:#fff}
.preview>span{display:block}.pv-head{display:flex;justify-content:space-between;align-items:center;height:22px;padding:0 8px;background:var(--p)}
.pv-logo{width:34px;height:8px;border-radius:4px;background:#fff;opacity:.9}.pv-menu{width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.6)}
.l2 .pv-head,.l5 .pv-head{flex-direction:row-reverse}.l3 .pv-head,.l6 .pv-head{background:#fff;border-bottom:3px solid var(--p)}.l3 .pv-logo,.l6 .pv-logo{background:var(--p)}.l3 .pv-menu,.l6 .pv-menu{background:#cbd5e1}
.l4 .pv-head{justify-content:center;gap:10px}
.pv-hero{height:54px;padding:12px 10px;background:linear-gradient(135deg,var(--p),var(--s))}.pv-search{display:flex;gap:4px;background:#fff;border-radius:6px;padding:5px}
.pv-field{flex:1;height:12px;border-radius:3px;background:#e5e7eb}.pv-btn{width:30px;height:12px;border-radius:3px;background:var(--s)}.pv-foot{height:14px;background:var(--s);opacity:.85}
.split{display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start}.preview-box{position:sticky;top:10px}
.alert ul{margin:6px 0 0;padding-left:18px}.alert a{color:#991b1b}.alert:focus{outline:2px solid #991b1b}
input.invalid,select.invalid{border-color:#dc2626;background:#fef2f2}.field-error{display:block;color:#991b1b;font-size:13px;font-weight:400;margin-top:4px}
@media (max-width:600px){
  .top{padding:10px 14px}.brand{font-size:19px}.tag{font-size:12px}.wrap{margin:12px auto;padding:0 10px}
  h1{font-size:22px}.hero h1{font-size:24px}.card{padding:14px;border-radius:10px}
  .row{flex-direction:column;gap:0}.row>label,.row>label.isd{flex:1 1 auto;min-width:0}
  input,select{font-size:16px}button{width:100%;padding:14px}button.link{width:auto;padding:0}
  .steps{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.steps li{white-space:nowrap}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme{padding:8px}.theme small{display:none}
  .split{grid-template-columns:1fr}.preview-box{position:static;order:-1}
  .namebox{flex-wrap:wrap}
}
@media (max-width:360px){.themes{grid-template-columns:1fr}}