:root{
  --bg:#faf7fd;
  --surface:#ffffff;
  --surface-2:#f6f0ff;
  --border:#e7def7;
  --text:#2b2142;
  --muted:#6e6592;
  --primary:#a78bfa;
  --primary-600:#8b5cf6;
  --primary-700:#7c3aed;
  --ok-bg:#ecfdf5;--ok-bd:#bbf7d0;--ok-fg:#166534;
  --warn-bg:#fff7ed;--warn-bd:#fed7aa;--warn-fg:#9a3412;
  --bad-bg:#fef2f2;--bad-bd:#fecaca;--bad-fg:#7f1d1d;
  --r-md:12px;
  --r-lg:16px;
  --shadow:0 10px 30px rgba(124,58,237,.06);
}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Noto Sans",sans-serif;
  line-height:1.55;
}
.site-header,.container{padding:clamp(16px,3.5vw,32px)}
.container{max-width:1100px;margin-inline:auto}
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:clamp(16px,2.5vw,28px);
}
h1,h2,h3{color:var(--text);margin:0 0 .6rem}
.tagline,.bullet,.muted{color:var(--muted)}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  transition:all .15s ease;
}
.btn:hover{
  border-color:var(--primary-600);
  color:var(--primary-700);
  transform:translateY(-1px);
}
.btn.primary{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
.btn.primary:hover{background:var(--primary-600)}
.btn.primary:active{background:var(--primary-700);transform:translateY(0)}
input[type="text"],select{
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
  outline:none;
}
input[type="text"]:focus,select:focus{
  border-color:var(--primary-600);
  box-shadow:0 0 0 3px rgba(139,92,246,.15);
}
button{
  padding:10px 16px;
  border-radius:10px;
  border:none;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
button:hover{background:var(--primary-600);transform:translateY(-1px)}
button:active{background:var(--primary-700);transform:translateY(0)}
#feedback{
  margin-top:.6rem;
  padding:12px 14px;
  border-radius:var(--r-md);
  border:1px dashed var(--border);
  background:var(--surface-2);
}
#feedback.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-fg)}
#feedback.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg)}
#feedback.bad{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad-fg)}
.history-list li{
  display:inline-block;
  padding:8px 12px;
  margin:6px 8px 0 0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
}
.site-footer{
  color:var(--muted);
  text-align:center;
  padding:24px;
}

.panel.info li {
  font-weight: normal;
  font-style: normal;
}

h1, h2 {
  color: var(--primary-700);
}