*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:radial-gradient(circle at top,#1e293b 0,#0f172a 45%,#020617 100%);color:#e5e7eb}
.wrap{max-width:1240px;margin:0 auto;padding:18px}
.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
.brand{font-size:22px;font-weight:900;color:#fff;text-decoration:none}
nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav a,.btn{display:inline-block;text-decoration:none;color:#fff;border:1px solid #475569;background:#111827;border-radius:12px;padding:10px 13px;font-weight:800}
.pill,.primary{background:#2563eb!important;border-color:#2563eb!important}
.green{background:#059669!important;border-color:#059669!important}
.orange{background:#b45309!important;border-color:#b45309!important}
.red{background:#991b1b!important;border-color:#991b1b!important}
.hero,.card{background:linear-gradient(180deg,#111827,#0b1220);border:1px solid #334155;border-radius:20px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.22);margin-bottom:16px}
.hero h1{font-size:44px;line-height:1.05;margin:14px 0}
.hero p{font-size:16px;color:#cbd5e1;line-height:1.55;max-width:980px}
h1{font-size:34px;margin:0 0 14px} h2{margin:0 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.small{font-size:13px;color:#cbd5e1;line-height:1.5}
.badge{display:inline-block;border:1px solid #334155;background:#172554;border-radius:999px;padding:6px 10px;color:#bfdbfe;font-size:12px;font-weight:900}
label{display:block;color:#94a3b8;font-size:13px;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #475569;background:#0b1220;color:#fff}
textarea{min-height:270px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.msg,.err,.warn{padding:12px 14px;border-radius:12px;margin-bottom:12px}
.msg{background:#052e16;color:#bbf7d0;border:1px solid #166534}.err{background:#450a0a;color:#fecaca;border:1px solid #7f1d1d}.warn{background:#431407;color:#fed7aa;border:1px solid #9a3412}
.table{width:100%;border-collapse:collapse}.table td,.table th{border-bottom:1px solid #334155;padding:10px;text-align:left;vertical-align:top}
.selectgrid{display:grid;grid-template-columns:1fr 150px 150px;gap:12px;align-items:end}
.previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.frameWrap{height:650px;border:1px solid #334155;border-radius:14px;overflow:hidden;background:#fff}.frameWrap iframe{width:100%;height:100%;border:0;background:#fff}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.stats span{background:#0b1220;border:1px solid #334155;border-radius:999px;padding:6px 10px;color:#cbd5e1;font-size:12px}
.footer{text-align:center;color:#94a3b8;margin:30px 0}.footer a{color:#e5e7eb}
@media(max-width:950px){.top{display:block}.top nav{margin-top:12px}.grid2,.grid3,.previewGrid,.selectgrid{grid-template-columns:1fr}.hero h1{font-size:31px}.wrap{padding:12px}.frameWrap{height:520px}}