/* NoirPlay UI v15 — premium layout refresh */
:root{
  --np-glow:rgba(229,9,20,.14);
  --np-glow-strong:rgba(229,9,20,.25);
  --np-panel:color-mix(in srgb,var(--surface) 90%,transparent);
  --np-panel-2:color-mix(in srgb,var(--surface-2) 94%,transparent);
  --np-shadow-lg:0 28px 80px rgba(0,0,0,.28);
  --np-shadow-sm:0 12px 34px rgba(0,0,0,.12);
}
html[data-theme="light"]{
  --np-shadow-lg:0 28px 70px rgba(23,31,44,.12);
  --np-shadow-sm:0 12px 30px rgba(23,31,44,.08);
}
body{
  background:
    radial-gradient(circle at 50% -180px,var(--np-glow),transparent 420px),
    linear-gradient(180deg,var(--bg),var(--bg) 72%,color-mix(in srgb,var(--bg) 92%,var(--red) 8%));
}

/* Header polish */
.site-header{box-shadow:0 8px 30px rgba(0,0,0,.09)}
.header-row{min-height:76px;gap:10px}
.header-logo{padding:5px 9px;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.search{min-height:44px;border-radius:12px;background:color-mix(in srgb,var(--input) 94%,transparent)}
.search input{padding-inline:15px;font-size:13px}
.search button{width:54px;font-size:19px}
.menu-toggle,.theme-toggle,.language-toggle{border-radius:10px}

/* HOME */
.home-main{padding-bottom:28px}
.home-hero{
  position:relative;
  min-height:470px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:20px;
  margin-top:22px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 22%,rgba(229,9,20,.24),transparent 30%),
    radial-gradient(circle at 20% 115%,rgba(229,9,20,.09),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 94%,#000 6%),var(--surface));
  box-shadow:var(--np-shadow-lg)
}
.home-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to right,#000,transparent 78%)
}
.home-hero-copy{position:relative;z-index:1;align-self:center;padding:54px 52px}
.home-badge{
  width:max-content;display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid color-mix(in srgb,var(--line) 70%,var(--red) 30%);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);font-size:9px;letter-spacing:.08em
}
.home-badge>span{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(229,9,20,.10)}
.home-badge b{font-size:9px}.home-badge small{color:#e66b72;font-weight:900}
.home-hero h1{max-width:850px;margin:18px 0 16px;font-size:clamp(44px,5.7vw,80px);line-height:.95;letter-spacing:-.06em}
.home-hero-copy>p{max-width:730px;margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.home-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.home-primary-action,.home-secondary-action{min-height:46px;padding-inline:18px;border-radius:10px}
.home-feature-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.home-feature-pills span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);color:var(--muted);font-size:9px;font-weight:750}
.home-hero-side{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:36px 42px 36px 10px}
.home-product-card{
  width:min(430px,100%);overflow:hidden;padding:18px;
  border:1px solid color-mix(in srgb,var(--line) 70%,#fff 30%);border-radius:22px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.22)
}
.home-product-brand{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line-soft)}
.home-product-brand img{width:58px;height:58px;padding:2px;border-radius:14px;background:#090909}
.home-product-brand span{display:block;color:#e06a70;font-size:8px;font-weight:950;letter-spacing:.15em}.home-product-brand strong{display:block;margin-top:3px;font-size:16px}
.home-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.home-metrics article{min-height:116px;display:flex;flex-direction:column;padding:13px;border:1px solid var(--line-soft);border-radius:13px;background:var(--surface-2)}
.home-metrics article>span{color:var(--muted);font-size:9px}.home-metrics b{margin:auto 0 0;font-size:34px;letter-spacing:-.055em}.home-metrics small{margin-top:2px;color:var(--muted-2);font-size:8px}
.home-product-note{display:flex;align-items:center;gap:10px;margin-top:10px;padding:11px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.02)}
.status-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#49c778;box-shadow:0 0 0 5px rgba(73,199,120,.10)}
.home-product-note b{display:block;font-size:9px}.home-product-note small{display:block;margin-top:2px;color:var(--muted);font-size:8px;line-height:1.4}
.home-section{padding:34px 0 8px}
.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.home-section-head h2{margin:4px 0 0;font-size:26px;letter-spacing:-.035em}.home-section-head p{margin:5px 0 0;color:var(--muted);font-size:11px}.home-section-head>a{color:var(--muted);font-size:10px;font-weight:850}.home-section-head>a:hover{color:var(--text)}
.home-featured-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-discovery-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding:28px 0 18px;align-items:start}
.home-catalog-panel{min-width:0}.home-section-head.compact{margin-bottom:14px}
.home-sidebar{position:sticky;top:94px;display:grid;gap:11px}
.home-side-card{overflow:hidden;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--np-shadow-sm)}
.home-side-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.home-side-card-head h3{margin:3px 0 0;font-size:14px}.home-side-card-head>a{color:var(--muted);font-size:8px;font-weight:850}.home-side-card-head>a:hover{color:var(--text)}
.home-popular-tags{display:flex;gap:6px;flex-wrap:wrap;padding-top:11px}
.home-tag{padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:9px;font-weight:760;transition:.14s ease}.home-tag:hover{transform:translateY(-1px);border-color:#5b626d;color:var(--text);background:var(--surface-3)}
.home-guide-card{padding:12px}.home-guide-card>.eyebrow{display:block;padding:2px 4px 8px}
.home-guide-card>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border-radius:9px;color:var(--text)}
.home-guide-card>a:hover{background:var(--surface-2)}.home-guide-card>a>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-weight:900}.home-guide-card b{display:block;font-size:10px}.home-guide-card small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.home-guide-card i{color:var(--muted);font-style:normal}

/* Video cards — denser, cleaner */
.video-card{padding-bottom:4px}
.video-thumb{border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.video-card h3{font-size:13px;line-height:1.32;margin-top:9px}.video-meta{font-size:8px}

/* WATCH PAGE */
.watch-page{padding-top:16px}
.watch-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 12px;padding:0 2px}
.watch-page-head .watch-breadcrumb{margin:0;min-height:auto}.watch-page-head-copy{text-align:right}.watch-page-head-copy p{margin:3px 0 0;color:var(--muted-2);font-size:8px}
.watch-layout{grid-template-columns:minmax(0,1fr) 350px;gap:16px}
.player-shell{border-radius:18px;border-color:color-mix(in srgb,var(--line) 82%,#fff 18%);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.player-topline{min-height:42px;padding-inline:14px;background:linear-gradient(180deg,#121315,#0c0d0f)}
.player-stage{padding:0;background:#000}
.source-dock{padding:12px 14px;background:linear-gradient(180deg,#0d0e10,#090a0b)}
.source-dock-copy strong{font-size:10px}.source-dock-copy span{font-size:8px}
.source-button{min-height:32px;padding:6px 11px;border-radius:8px;background:#15171a}.source-button.active{background:#f4f4f4;color:#0a0a0a;box-shadow:0 4px 18px rgba(255,255,255,.08)}
.video-info-card{padding:18px 19px;border-radius:15px;box-shadow:var(--np-shadow-sm)}
.watch-title{font-size:clamp(22px,2.2vw,32px)}
.quick-actions{gap:5px}.action-button{border-radius:10px;background:var(--surface-2)}
.watch-side{border-radius:15px;box-shadow:var(--np-shadow-sm)}
.side-heading{padding:15px}.related-list{padding:6px}.related{padding:7px;border-radius:10px}.related:hover{background:var(--surface-2)}
.comments-card{padding:18px;border-radius:15px;box-shadow:var(--np-shadow-sm)}
.more-like-this{margin-top:30px;padding-top:24px}

/* player control panel visual refinement */
.noir-custom-player .np-controls{background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.74) 48%,transparent);padding-bottom:13px}
.noir-custom-player .np-control{border-radius:7px}.noir-custom-player .np-quality,.noir-custom-player .np-speed{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}
.noir-custom-player .np-quality-menu,.noir-custom-player .np-speed-menu{border-radius:12px;background:rgba(12,13,16,.98);box-shadow:0 22px 60px rgba(0,0,0,.55)}

@media(max-width:1180px){
  .home-hero{grid-template-columns:1fr .72fr}.home-hero-copy{padding:46px 40px}.home-hero-side{padding-right:28px}
  .home-discovery-layout{grid-template-columns:minmax(0,1fr) 285px}
  .watch-layout{grid-template-columns:minmax(0,1fr) 315px}
}
@media(max-width:980px){
  .home-hero{grid-template-columns:1fr}.home-hero-side{padding:0 38px 34px;justify-content:flex-start}.home-product-card{width:min(600px,100%)}
  .home-discovery-layout{grid-template-columns:1fr}.home-sidebar{position:static;grid-template-columns:1fr 1fr}.watch-layout{grid-template-columns:1fr}.watch-side{position:static}
}
@media(max-width:700px){
  .home-main{width:min(100% - 20px,var(--max))}.home-hero{margin-top:12px;border-radius:18px}.home-hero-copy{padding:32px 23px}.home-hero h1{font-size:43px}.home-hero-copy>p{font-size:12px}.home-hero-actions{flex-direction:column}.home-hero-actions .btn{width:100%}.home-feature-pills{gap:5px}.home-feature-pills span{font-size:8px}.home-hero-side{padding:0 14px 16px}.home-product-card{padding:14px;border-radius:15px}.home-metrics article{min-height:96px}.home-metrics b{font-size:28px}.home-section{padding-top:26px}.home-section-head{align-items:flex-start}.home-section-head h2{font-size:23px}.home-sidebar{grid-template-columns:1fr}.home-discovery-layout{padding-top:22px}
  .watch-page-head{display:block}.watch-page-head-copy{display:none}.player-shell{border-radius:0}.video-info-card,.comments-card{box-shadow:none}.watch-layout{gap:10px}
}

.home-feature-pills i{font-style:normal;color:#d95f66;margin-right:3px}


/* V19 — Video page: single recommendation flow */
.watch-layout.watch-layout-single{
  display:block;
  grid-template-columns:none;
}
.watch-layout-single .watch-main{
  width:100%;
  max-width:none;
}
.watch-layout-single .player-shell,
.watch-layout-single .video-info-card{
  width:100%;
}
.more-like-this{
  margin-top:30px;
}
.more-like-this + .comments-card{
  margin-top:28px;
}
.more-like-this + .comments-card .comments-head{
  padding-bottom:2px;
}
@media(max-width:700px){
  .more-like-this + .comments-card{
    margin-top:20px;
  }
}


/* V20 — Inicio más compacto */
.home-hero{
  min-height:330px;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.72fr);
  gap:14px;
  margin-top:16px;
  border-radius:22px;
}
.home-hero-copy{
  padding:34px 38px;
}
.home-hero h1{
  max-width:720px;
  margin:13px 0 11px;
  font-size:clamp(34px,4.5vw,58px);
  line-height:.98;
  letter-spacing:-.05em;
}
.home-hero-copy>p{
  max-width:650px;
  font-size:12px;
  line-height:1.55;
}
.home-hero-actions{
  margin-top:18px;
}
.home-primary-action,.home-secondary-action{
  min-height:40px;
  padding-inline:15px;
}
.home-feature-pills{
  margin-top:14px;
  gap:6px;
}
.home-feature-pills span{
  padding:5px 8px;
  font-size:8px;
}
.home-hero-side{
  padding:24px 28px 24px 4px;
}
.home-product-card{
  width:min(380px,100%);
  padding:14px;
  border-radius:17px;
}
.home-product-brand{
  gap:9px;
  padding-bottom:10px;
}
.home-product-brand img{
  width:46px;
  height:46px;
  border-radius:11px;
}
.home-product-brand strong{
  font-size:14px;
}
.home-metrics{
  gap:6px;
  margin-top:9px;
}
.home-metrics article{
  min-height:82px;
  padding:10px;
  border-radius:10px;
}
.home-metrics b{
  font-size:27px;
}
.home-product-note{
  margin-top:7px;
  padding:8px 9px;
  border-radius:9px;
}
.home-product-note small{
  font-size:7px;
}

.home-discovery-layout.home-discovery-single{
  display:block;
  padding-top:22px;
}
.home-discovery-single .home-catalog-panel{
  width:100%;
}

@media(max-width:980px){
  .home-hero{
    min-height:0;
    grid-template-columns:1fr;
  }
  .home-hero-side{
    padding:0 28px 24px;
  }
  .home-product-card{
    width:min(560px,100%);
  }
}
@media(max-width:700px){
  .home-hero{
    margin-top:10px;
    border-radius:16px;
  }
  .home-hero-copy{
    padding:25px 20px;
  }
  .home-hero h1{
    font-size:36px;
  }
  .home-hero-copy>p{
    font-size:11px;
  }
  .home-hero-side{
    padding:0 13px 14px;
  }
  .home-product-card{
    padding:12px;
  }
  .home-metrics article{
    min-height:72px;
  }
  .home-metrics b{
    font-size:24px;
  }
}