* { box-sizing: border-box; }
:root { --bg:#0b1020; --panel:#141b33; --ink:#eef1ff; --mut:#9aa5c9; --acc:#5b8cff; --acc2:#00d4ff; }
body { margin:0; font-family:"Archivo",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--acc2); }
.top { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:#0e1430; border-bottom:1px solid #232c52; }
.brand { font-weight:800; font-size:22px; color:#fff; text-decoration:none; letter-spacing:.3px; }
.langsw a { color:var(--mut); text-decoration:none; font-weight:700; }
.langsw a.on { color:#fff; text-decoration:underline; }
.wrap { max-width:860px; margin:0 auto; padding:18px 14px 44px; }
.hero { text-align:left; padding:16px 2px 4px; }
.hero h1 { font-size:clamp(30px,6.5vw,46px); line-height:1.08; margin:6px 0 10px; background:linear-gradient(90deg,#fff,var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sub { color:var(--mut); font-size:17px; line-height:1.45; margin:0 0 16px; }
.notice { background:#3a2405; border:1px solid #a86e00; color:#ffd27a; border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:14.5px; }
.creator textarea { width:100%; background:var(--panel); border:1.5px solid #2c3866; border-radius:12px; color:var(--ink); padding:13px; font-size:16px; font-family:inherit; resize:vertical; }
.creator button { width:100%; margin-top:10px; padding:15px; border:none; border-radius:12px; background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; font-size:18px; font-weight:800; cursor:pointer; }
.creator button:disabled { opacity:.55; }
.mini { color:var(--mut); font-size:13px; }
.err { color:#ff7b7b; font-weight:700; min-height:18px; }
.ok { color:#6fe08c; font-weight:700; }
.examples { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--mut); font-size:13.5px; }
.chip { background:#1a2347; color:var(--ink); border:1px solid #2c3866; border-radius:20px; padding:7px 12px; font-size:13px; cursor:pointer; text-align:left; }
.box { background:var(--panel); border:1px solid #232c52; border-radius:14px; padding:16px; margin-top:18px; }
.box h2 { margin:2px 0 10px; font-size:22px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.step h3 { margin:4px 0 5px; font-size:16px; color:var(--acc2); }
.step p { color:var(--mut); font-size:14.5px; line-height:1.45; margin:0; }
.mysite { display:flex; justify-content:space-between; gap:10px; padding:10px 2px; border-bottom:1px solid #232c52; }
.mysite:last-child { border-bottom:none; }
.ms-name { font-weight:600; }
.ms-btns { white-space:nowrap; }
.linkrow { display:flex; gap:8px; }
.linkrow input { flex:1; background:#0e1430; border:1px solid #2c3866; color:var(--ink); border-radius:9px; padding:11px; font-size:14.5px; }
.linkrow button, .chatrow button { background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; border:none; border-radius:9px; padding:11px 16px; font-weight:800; cursor:pointer; }
.btnlink { display:inline-block; background:#1a2347; border:1px solid #2c3866; border-radius:9px; padding:11px 16px; text-decoration:none; font-weight:700; }
.chatrow { display:flex; gap:8px; }
.chatrow input { flex:1; background:#0e1430; border:1px solid #2c3866; color:var(--ink); border-radius:9px; padding:12px; font-size:15.5px; }
.preview { width:100%; height:72vh; border:1px solid #2c3866; border-radius:12px; margin-top:18px; background:#fff; }
.dns { background:#0e1430; border:1px dashed #2c3866; border-radius:9px; padding:11px; color:var(--ink); }
.okbox { background:#0d3318; border:1px solid #1f7a3d; color:#a9f0bb; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.adminf label { display:block; margin:12px 0; font-size:14.5px; color:var(--mut); }
.adminf input, .adminf select, .box input[type=password] { width:100%; background:#0e1430; border:1px solid #2c3866; color:var(--ink); border-radius:9px; padding:11px; font-size:15px; margin-top:5px; }
.adminf button, .box button[type=submit] { background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; border:none; border-radius:9px; padding:12px 18px; font-weight:800; cursor:pointer; margin-top:6px; }
button.ghost { background:transparent !important; border:1px solid #2c3866 !important; color:var(--mut) !important; }
.foot { text-align:center; color:var(--mut); padding:18px; font-size:13px; }