/* site.css · site 9 · harbor-cyan · legacy page class overrides */

:root{
  --pink:#0ea5e9;
  --blue:#0284c7;
  --green:#0ea5e9;
  --orange:#f97316;
  --ink:#0c4a6e;
  --muted:#64748b;
  --panel:#f0f9ff;
  --line:rgba(14,165,233,.18);
  --soft:#ffffff;
  --shadow:0 12px 40px rgba(14,165,233,.12);
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--soft);
  color:var(--ink);
  font-family:"Segoe UI","PingFang SC","Noto Sans SC",system-ui,sans-serif;
}
img{display:block;max-width:100%}
a{transition:color .2s ease,background .2s ease,transform .2s ease}

.page-hero,.compact-hero{
  position:relative;overflow:hidden;margin-bottom:32px;padding:36px 32px;border-radius:16px;
  background:linear-gradient(125deg,var(--panel) 0%,rgba(14,165,233,.08) 60%,rgba(249,115,22,.05) 100%);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.compact-hero h1,.page-hero h1{
  font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:900;color:var(--ink);margin:0 0 12px;
}
.compact-hero p,.page-hero p{color:var(--muted);line-height:1.75;margin:0}
.eyebrow,.eyebrow.solo{
  display:inline-flex;margin-bottom:12px;padding:5px 12px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:.75rem;font-weight:800;
}

.section-block{margin-bottom:40px}
.section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
  padding-left:12px;border-left:4px solid var(--orange);
}
.section-head h2{font-size:1.25rem;font-weight:900;color:var(--ink);margin:0}
.section-head a{color:var(--pink);font-weight:700}

.movie-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

.filter-panel{
  display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;padding:14px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
}
.filter-panel input,.filter-panel select{
  flex:1;min-width:140px;padding:10px 14px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--ink);outline:none;font-weight:600;
}
.filter-panel input:focus,.filter-panel select:focus{border-color:var(--pink)}

.empty-state{
  padding:32px;border-radius:12px;background:var(--panel);text-align:center;
  color:var(--muted);font-weight:700;border:1px dashed var(--line);
}

.rank-panel{padding:24px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.rank-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category-grid.large{grid-template-columns:repeat(3,minmax(0,1fr))}
.category-tile,.overview-card{
  display:block;padding:22px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.category-tile:hover,.overview-card:hover{
  transform:translateY(-3px);border-color:rgba(14,165,233,.45);box-shadow:var(--shadow);
}
.category-tile strong,.overview-main strong{
  display:block;font-size:1.05rem;font-weight:900;margin-bottom:8px;color:var(--pink);
}
.category-tile span,.overview-main span{display:block;color:var(--muted);line-height:1.65;font-size:.88rem}
.overview-links{display:flex;justify-content:space-between;margin-top:12px;font-size:.82rem;color:var(--pink);font-weight:700}

.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;font-size:.82rem;color:var(--muted)}
.breadcrumb a{color:var(--pink);font-weight:600}

.seo-brand-block{
  margin:0 0 22px;padding:22px 26px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
}
.seo-brand-block h1{
  margin:0 0 10px;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;color:var(--pink);
}
.seo-brand-block p{margin:0;color:var(--muted);line-height:1.75;font-size:.92rem}

.primary-btn,.ghost-btn{
  display:inline-flex;padding:11px 22px;border-radius:999px;font-weight:800;font-size:.88rem;
}
.primary-btn{
  background:linear-gradient(135deg,var(--orange),#ea580c);color:#fff!important;
  box-shadow:0 6px 20px rgba(249,115,22,.3);
}
.ghost-btn{
  background:#fff;color:var(--pink)!important;border:2px solid var(--pink);margin-left:10px;
}

@media (max-width:1100px){
  .movie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-grid,.category-grid.large{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .movie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-panel{flex-direction:column}
  .rank-list{grid-template-columns:1fr}
  .category-grid,.category-grid.large{grid-template-columns:1fr}
}