*{box-sizing:border-box} :root{--ink:#172033;--muted:#667085;--panel:#fff;--bg:#f4f7fb;--accent:#3568d4;--accent2:#244da4;--line:#d9e1ec}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
button,input{font:inherit}.app-shell{max-width:1100px;margin:auto;padding:32px 20px 60px}.hero{background:linear-gradient(135deg,#1d315d,#3568d4);color:white;border-radius:22px;padding:34px;margin-bottom:24px;box-shadow:0 14px 35px rgba(23,32,51,.14)}
.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:800;opacity:.78}.hero h1{margin:.25rem 0 .4rem;font-size:clamp(2rem,5vw,3.7rem)}.subtitle{margin:0;opacity:.9;font-size:1.05rem}
.screen{display:none}.screen.active{display:block}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.feature-card{min-height:280px;text-align:left;border:1px solid var(--line);background:white;border-radius:22px;padding:28px;cursor:pointer;box-shadow:0 10px 28px rgba(23,32,51,.07);transition:.2s transform,.2s box-shadow}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(23,32,51,.12)}.icon{display:block;font-size:3rem;margin-bottom:30px}.card-title{display:block;font-weight:900;font-size:1.5rem;margin-bottom:10px}.card-copy{display:block;color:var(--muted);line-height:1.55}
.back{border:0;background:transparent;color:var(--accent);font-weight:800;padding:8px 0 16px;cursor:pointer}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 28px rgba(23,32,51,.07)}
.panel h2{font-size:2rem;margin-top:0}.muted,.status{color:var(--muted);line-height:1.6}.upload-box{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;border:2px dashed #9eb2d7;border-radius:18px;padding:38px;background:#f8faff;cursor:pointer;margin:24px 0}
.upload-box input{margin-top:12px}.preview-wrap{display:flex;justify-content:center;margin:20px 0}.preview-wrap img{max-width:100%;max-height:500px;border-radius:12px;border:1px solid var(--line)}.hidden{display:none}
.workflow{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.step{padding:9px 12px;border-radius:999px;background:#eef1f6;color:#7a8496;font-size:.85rem;font-weight:700}.step.ready{background:#e6efff;color:#2856b2}
.primary{border:0;background:var(--accent);color:white;border-radius:12px;padding:14px 20px;font-weight:900;cursor:pointer}.primary:hover{background:var(--accent2)}.result{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:28px;font-size:1.8rem;font-weight:900;text-align:center;background:#f8faff}
.generation-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.generation-filters label{border:1px solid var(--line);padding:8px 11px;border-radius:999px;background:#fff;font-weight:700;font-size:.9rem}
code{background:#eef1f6;padding:2px 5px;border-radius:5px}@media(max-width:700px){.choice-grid{grid-template-columns:1fr}.feature-card{min-height:220px}.app-shell{padding:16px 12px 40px}.hero,.panel{border-radius:17px;padding:22px}.hero h1{font-size:2.25rem}}
/* ========================================
   EXCLUDED POKÉMON MANAGER
   ======================================== */

.excluded-manager {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #d9e2f1;
}

.manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.manager-header h3 {
  margin: 0 0 6px 0;
  font-size: 1.25rem;
  color: #0b1b36;
}

.manager-header .muted {
  margin: 0;
}

.secondary {
  appearance: none;
  border: 1px solid #2f66dc;
  background: #ffffff;
  color: #2f66dc;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.secondary:hover {
  background: #edf3ff;
  transform: translateY(-1px);
}

.secondary:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.excluded-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.excluded-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: #f6f8fc;
  border: 1px solid #d9e2f1;
  border-radius: 12px;
}

.excluded-name {
  color: #0b1b36;
  font-weight: 700;
}

.include-btn {
  flex-shrink: 0;
}

#includedStatus {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .manager-header {
    align-items: stretch;
  }

  .manager-header .secondary {
    width: 100%;
  }

  .excluded-item {
    align-items: center;
  }
}