:root {
  --main:#1e3a8a;
  --accent:#3b82f6;
  --light:#eff6ff;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
}

/* Container */
.spg-generator-container {
  max-width:800px;
  margin:30px auto;
  background:var(--bg);
  border-radius:20px;
  box-shadow:0 12px 40px rgba(30,58,138,.15);
  overflow:hidden;
}

/* Header */
.spg-header {
  padding:50px 30px;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
}

.spg-title {
  font-size:2.2rem;
  font-weight:800;
}

.spg-subtitle {
  opacity:.9;
}

/* Controls */
.spg-controls {
  padding:30px;
  background:#f9fafb;
}

.spg-label {
  font-weight:700;
  color:var(--main);
  margin-bottom:10px;
  display:block;
}

.spg-filter-buttons,
.spg-number-selector {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.spg-filter-btn,
.spg-num-btn {
  border:2px solid var(--main);
  background:#fff;
  color:var(--main);
  padding:10px 18px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.spg-filter-btn.active,
.spg-num-btn.active {
  background:var(--main);
  color:#fff;
}

.spg-filter-btn:hover,
.spg-num-btn:hover {
  box-shadow:0 0 0 3px rgba(30,58,138,.15);
}

/* Generate Button */
.spg-generate-btn {
  width:100%;
  margin-top:25px;
  padding:18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6);
  color:#fff;
  font-size:1.15rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 25px rgba(30,58,138,.35);
  transition:.2s;
}

.spg-generate-btn:active {
  transform:scale(.98);
}

.spg-disabled {
  opacity:.6;
  cursor:not-allowed;
}

/* Results */
.spg-results {
  padding:30px;
}

.spg-power-card {
  border:3px solid var(--main);
  border-radius:16px;
  padding:24px;
  margin-bottom:18px;
  animation:fadeUp .4s ease;
}

@keyframes fadeUp {
  from {opacity:0;transform:translateY(15px)}
  to {opacity:1;transform:none}
}

.spg-power-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.spg-power-name {
  font-size:1.3rem;
  font-weight:800;
  color:var(--main);
}

.spg-power-tier {
  padding:6px 14px;
  border-radius:8px;
  font-weight:800;
  color:#fff;
}

.tier-s {background:#dc2626}
.tier-a {background:#7c3aed}
.tier-b {background:#2563eb}
.tier-c {background:#16a34a}

/* Loading */
.spg-loading {
  text-align:center;
}

.spg-spinner {
  width:55px;
  height:55px;
  border:5px solid #e5e7eb;
  border-top-color:var(--main);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin {
  to {transform:rotate(360deg)}
}

/* Mobile */
@media(max-width:480px){
  .spg-filter-buttons,
  .spg-number-selector {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}