:root {
  --bg: #09090b;
  --surface: #121216;
  --surface-2: #19191f;
  --line: #2a2a32;
  --text: #f7f7f8;
  --muted: #a4a4ae;
  --red: #ef3340;
  --yellow: #ffd100;
  --green: #32d583;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 75% 0%, #261217 0, transparent 28rem), var(--bg); color: var(--text); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button, input, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }

.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.03em; font-size: 1.2rem; }
.brand img { width: 38px; height: 38px; }
.muted { color: var(--muted); }

.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--red); background: var(--red); color: #fff; font-weight: 750; cursor: pointer; transition: transform .15s, opacity .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button-small { min-height: 39px; padding: 0 16px; font-size: .92rem; }
.button-ghost { background: transparent; border-color: var(--line); }
.button-wide { width: 100%; margin-top: 12px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero { min-height: 660px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; padding-block: 60px 110px; }
.eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: .16em; font-weight: 800; font-size: .75rem; }
.hero h1 { margin: 18px 0 22px; font-size: clamp(3.4rem, 8vw, 7.2rem); line-height: .88; letter-spacing: -.075em; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-copy > p { max-width: 700px; color: #c6c6ce; font-size: 1.15rem; margin-bottom: 34px; }
.hero-card { border: 1px solid var(--line); border-radius: 28px; padding: 28px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: 0 25px 90px rgba(0,0,0,.42); }
.status { color: var(--muted); font-size: .9rem; }
.status span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); margin-right: 7px; }
.pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; margin: 34px 0; }
.pipeline div { min-height: 82px; display: grid; place-items: center; text-align: center; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 10px; font-weight: 700; }
.pipeline b { color: var(--red); }
.hero-card ul { margin: 0; padding-left: 1.2rem; color: #d4d4da; }
.hero-card li + li { margin-top: 10px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 100px; }
.features article { border-top: 1px solid var(--line); padding: 25px 6px; }
.features strong { color: var(--red); }
.features h2 { margin: 18px 0 8px; font-size: 1.6rem; }
.features p { color: var(--muted); margin: 0; }

.config-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding-block: 44px 90px; }
.sidebar { position: sticky; top: 26px; align-self: start; }
.sidebar h1 { margin: 10px 0 16px; font-size: 2.7rem; line-height: 1; letter-spacing: -.055em; }
.sidebar p { color: var(--muted); }
.sidebar nav { display: grid; gap: 5px; margin-top: 30px; }
.sidebar nav a { padding: 10px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.sidebar nav a:hover { color: var(--text); border-color: var(--red); }
.panel { min-width: 0; }
.form-section, .unlock-box, .result { background: rgba(18,18,22,.9); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 38px); margin-bottom: 20px; }
.section-heading { display: flex; gap: 17px; margin-bottom: 27px; }
.section-heading > span { color: var(--red); font-weight: 900; font-size: .82rem; padding-top: 5px; }
.section-heading h2, .unlock-box h2, .result h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.section-heading p, .unlock-box p, .result p { margin: 5px 0 0; color: var(--muted); }
label { display: grid; gap: 8px; font-weight: 690; margin-top: 19px; }
small { color: var(--muted); font-weight: 450; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #0d0d10; color: var(--text); padding: 13px 14px; outline: 0; resize: vertical; }
input:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,51,64,.13); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); padding: 0; }
fieldset { margin: 21px 0 0; padding: 0; border: 0; }
legend { font-weight: 700; margin-bottom: 10px; }
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.check-grid label, .check-row label, .toggle { display: flex; align-items: center; gap: 9px; margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #0e0e12; font-weight: 550; }
.check-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.toggle { margin-top: 18px; }
.inline-field { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 20px; }
.message { margin: 14px 0; border: 1px solid var(--red); background: rgba(239,51,64,.1); border-radius: 10px; padding: 12px 14px; }
.message.success { border-color: var(--green); background: rgba(50,213,131,.08); }
.result { text-align: center; padding-block: 50px; }
.result label { text-align: left; }
.result .actions { justify-content: center; margin-top: 20px; }
.success-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(50,213,131,.12); color: var(--green); font-size: 2rem; margin: 0 auto 17px; }
.plain-link { display: block; color: var(--yellow); margin-top: 24px; word-break: break-all; }
.footer { color: var(--muted); border-top: 1px solid var(--line); padding-block: 28px 45px; font-size: .9rem; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 25px; }
  .hero-card { max-width: 680px; }
  .config-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar nav { display: none; }
}
@media (max-width: 650px) {
  .features, .check-grid, .check-row, .two-columns { grid-template-columns: 1fr; }
  .hero { padding-top: 35px; }
  .hero h1 { font-size: 3.5rem; }
  .pipeline { grid-template-columns: 1fr; }
  .pipeline b { transform: rotate(90deg); text-align: center; }
  .inline-field { grid-template-columns: 1fr; }
}

/* AIOSpain v0.2: identidad fija y selector de presets */
.fixed-identity { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(239,51,64,.08), rgba(255,255,255,.02)); padding: 15px 16px; }
.fixed-identity img { width: 44px; height: 44px; }
.fixed-identity div { display: grid; gap: 2px; }
.fixed-identity strong { font-size: 1.08rem; }
.fixed-identity small { display: block; }
.lock-badge { border: 1px solid rgba(255,209,0,.35); color: var(--yellow); background: rgba(255,209,0,.07); border-radius: 999px; padding: 5px 10px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.addon-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 14px; align-items: end; }
.addon-search { margin: 0; }
.addon-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button-compact { min-height: 42px; padding-inline: 14px; font-size: .86rem; }
.selection-count { margin: 15px 0 5px; color: var(--muted); font-size: .9rem; font-weight: 700; }
.selection-count.has-selection { color: var(--green); }
.addon-groups { display: grid; gap: 26px; margin-top: 22px; }
.addon-group { min-width: 0; }
.addon-group h3 { margin: 0 0 11px; color: #d9d9df; font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; }
.addon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.addon-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #0e0e12; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.addon-card:hover { transform: translateY(-1px); border-color: #464650; }
.addon-card:has(input:checked) { border-color: var(--red); background: rgba(239,51,64,.08); box-shadow: inset 0 0 0 1px rgba(239,51,64,.15); }
.addon-card input { margin-top: 3px; }
.addon-card-body { display: grid; min-width: 0; gap: 7px; }
.addon-card-title { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.addon-card-title strong { line-height: 1.2; }
.addon-card-title em { color: var(--yellow); background: rgba(255,209,0,.08); border: 1px solid rgba(255,209,0,.22); border-radius: 999px; padding: 3px 7px; font-size: .64rem; font-style: normal; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.addon-card small { line-height: 1.42; }
.addon-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.addon-tags span { color: #c8c8d0; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; font-size: .68rem; font-weight: 650; }
.empty-search { color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 12px; padding: 18px; }
.source-note { display: block; margin-top: 19px; }

@media (max-width: 760px) {
  .addon-toolbar { grid-template-columns: 1fr; }
  .addon-grid { grid-template-columns: 1fr; }
  .addon-toolbar-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .button-compact { padding-inline: 8px; }
}

@media (max-width: 480px) {
  .fixed-identity { grid-template-columns: auto 1fr; }
  .lock-badge { grid-column: 1 / -1; justify-self: start; }
  .addon-toolbar-actions { grid-template-columns: 1fr; }
}

/* AIOSpain v0.3: Debrid y Streaming Catalogs Plus */
select { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #0d0d10; color: var(--text); padding: 13px 38px 13px 14px; outline: 0; }
select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,51,64,.13); }
.addon-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.addon-card-title .anime-badge { color: #78c8ff; background: rgba(68,165,255,.09); border-color: rgba(68,165,255,.25); }
.security-note { display: grid; gap: 5px; border: 1px solid rgba(50,213,131,.26); background: rgba(50,213,131,.065); border-radius: 13px; padding: 14px 16px; }
.security-note strong { color: var(--green); }
.security-note span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.debrid-services { display: grid; gap: 12px; margin: 18px 0 14px; }
.debrid-row { display: grid; grid-template-columns: minmax(160px,.7fr) minmax(220px,1.3fr) auto; gap: 11px; align-items: end; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #0e0e12; }
.debrid-row label { margin: 0; }
.debrid-remove { min-height: 47px; padding-inline: 15px; }
.debrid-row-help { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.debrid-row-info { line-height: 1.45; }
.debrid-provider-link { color: var(--yellow); font-size: .82rem; font-weight: 750; white-space: nowrap; }
.catalog-integration { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 15px; padding: 18px; background: linear-gradient(135deg, rgba(255,209,0,.06), rgba(255,255,255,.015)); }
.catalog-integration h3 { margin: 7px 0 5px; font-size: 1.25rem; }
.catalog-integration p { color: var(--muted); margin: 0; line-height: 1.5; }
.catalog-integration code { color: var(--yellow); }
input:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 760px) {
  .debrid-row { grid-template-columns: 1fr; }
  .debrid-row-help { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .catalog-integration { grid-template-columns: 1fr; }
  .catalog-integration .button { width: 100%; }
}