:root{
  --ink:#11182a; --muted:#5b6577; --line:#e4e8f0; --bg:#f5f7fb;
  --brand:#131D6C; --brand-2:#2438c7; --ok:#1f9d55; --warn:#c0392b; --white:#fff;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

header.top{background:var(--brand);color:#fff;padding:14px 26px;display:flex;
  align-items:center;justify-content:space-between}
header.top .brand{font-weight:800;letter-spacing:.3px;font-size:1.05rem}
header.top a{color:#cdd5ff;font-weight:600;margin-left:18px}
header.top a:hover{color:#fff;text-decoration:none}

.wrap{max-width:960px;margin:30px auto;padding:0 20px}
h1{font-size:1.7rem;margin:0 0 6px}
h2{font-size:1.2rem;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 22px}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.grid{grid-template-columns:1fr}}

.site{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.swatches{display:flex;gap:5px}
.sw{width:18px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}
.tag{display:inline-block;background:#eef1fb;color:var(--brand-2);font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:99px}

label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
textarea{min-height:80px;resize:vertical}
.row{display:grid;grid-template-columns:120px 1fr 1fr;gap:8px;align-items:start;
  border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#fafbfe}
.row .full{grid-column:1/-1}
.row .head{display:flex;justify-content:space-between;align-items:center;grid-column:1/-1}
.row label{margin:6px 0 3px;font-size:.78rem;color:var(--muted)}

.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:99px;
  padding:12px 26px;font-weight:700;font-size:.95rem;cursor:pointer}
.btn:hover{background:var(--brand-2);text-decoration:none}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn.sm{padding:7px 16px;font-size:.85rem}
.btn.danger{background:var(--warn)}

.banner{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:.92rem}
.banner.warn{background:#fff5f4;border:1px solid #f3c4c0;color:#922}
.banner.ok{background:#eefaf2;border:1px solid #bfe6cd;color:#176b39}
.banner.info{background:#eef3ff;border:1px solid #c8d6f7;color:#274690}

pre{background:#0f1426;color:#d6def5;padding:16px;border-radius:10px;overflow:auto;
  font-size:.82rem;line-height:1.5;max-height:380px}
.kv{margin:4px 0;font-size:.92rem}
.kv b{display:inline-block;width:110px;color:var(--muted)}
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted);font-size:.85rem}