:root {
  color-scheme: dark;
  --bg: #050208;
  --card: rgba(255, 255, 255, .075);
  --card-strong: rgba(24, 17, 30, .88);
  --line: rgba(255, 255, 255, .12);
  --text: #fff;
  --muted: #bdb5c8;
  --accent: #ff2e67;
  --accent-2: #8a2dff;
  --radius: 26px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  direction: rtl;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 0%, rgba(255, 46, 103, .18), transparent 34%),
    radial-gradient(circle at 12% 22%, rgba(138, 45, 255, .14), transparent 30%),
    linear-gradient(180deg, #09030d, #030105 72%);
}

.topbar {
  position: sticky;
  top: 18px;
  z-index: 50;
  width: min(1320px, calc(100% - 36px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(13, 9, 17, .82);
  backdrop-filter: blur(22px) saturate(140%);
}

.brand, .top-actions, .search-box, .bottom-nav, .stats-grid, .detail-actions, .source-list, .chip-list {
  display: flex;
  align-items: center;
}

.brand { gap: 12px; font-size: 20px; font-weight: 900; white-space: nowrap; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #a2003b);
  font-size: 28px;
  box-shadow: 0 10px 26px rgba(255, 46, 103, .3);
}

.search-box {
  height: 50px;
  gap: 8px;
  padding: 0 8px 0 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.search-box input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 0 18px;
  font-size: 15px;
}

.search-box button, .icon-button, .profile-button, .primary-button, .ghost-button, .pill-button, .source-item button, .stack-form button {
  border: 0;
  cursor: pointer;
  color: var(--text);
}

.search-box button, .icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.top-actions { gap: 10px; }
.icon-button { position: relative; font-size: 18px; }
#notification-dot {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
#notification-dot.active { display: block; }

.profile-button, .primary-button, .stack-form button {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #d71055);
  font-weight: 900;
}

.app-shell {
  width: min(1320px, calc(100% - 36px));
  margin: 28px auto 110px;
}

.hero {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.hero-bg-next{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:translateX(-3%);transition:opacity .7s ease,transform .7s ease;z-index:0}.hero-bg-next.active{opacity:1;transform:translateX(0)}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,2,8,.08), rgba(5,2,8,.94) 68%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(610px, 92%);
  padding: 68px 58px 50px;
  transition:opacity .28s ease,transform .28s ease;
}
.hero-content.changing{opacity:.15;transform:translateX(18px)}
.eyebrow, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #ffbad0;
  font-weight: 800;
  font-size: 13px;
}
.hero h1 { margin: 18px 0 12px; font-size: clamp(34px, 5vw, 58px); line-height: 1.35; }
.hero p, .muted { color: var(--muted); line-height: 2; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.ghost-button, .pill-button {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.07);
  font-weight: 800;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin: 30px 0 10px;
}
.quick-chip {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px 14px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s, border-color .18s;
}
.quick-chip:hover { transform: translateY(-4px); border-color: rgba(255,46,103,.7); }

.section { margin-top: 40px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section h2 { margin: 0; font-size: 25px; }
.section-head .more { color: #ff5f8e; font-weight: 900; }
.poster-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.poster-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}
.poster-card:hover { transform: translateY(-7px); border-color: rgba(255,46,103,.75); background: rgba(255,255,255,.1); }
.poster-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #17101a;
}
.poster-card .title { padding: 12px 12px 4px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-card .meta { padding: 0 12px 14px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.series-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,46,103,.9);
  font-size: 12px;
  font-weight: 900;
}
.poster-cover { position: relative; }
.progress-line { height: 4px; background: rgba(255,255,255,.12); margin: 6px 12px 0; border-radius: 20px; overflow: hidden; }
.progress-line span { display:block; height:100%; background: var(--accent); }

.page-head, .profile-card, .detail-card, .empty-state, .comment-card, .notice-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.page-head { padding: 24px; margin-bottom: 24px; }
.page-head h1 { margin: 0 0 8px; }
.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 18px;
}

.detail-card {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 28px;
  padding: 26px;
  background: var(--card-strong);
  position: relative;
}
.detail-poster img { width: 100%; border-radius: 24px; aspect-ratio: 2 / 3; object-fit: cover; }
.detail-card h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.chip-list { gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.detail-actions { gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.compact-actions{position:absolute;top:16px;left:16px;margin:0;z-index:4;gap:8px}.compact-actions .ghost-button{padding:8px 11px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.72);box-shadow:none}.compact-actions .ghost-button:hover{background:rgba(255,255,255,.11);color:#fff}
.source-list { gap: 12px; flex-wrap: wrap; margin-top: 14px; align-items: stretch; }
.source-item {
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.07);
}
.source-item strong, .source-item span { display: block; }
.source-item span { color: var(--muted); font-size: 13px; margin-top: 4px; }
.source-item button { width: 100%; height: 38px; margin-top: 10px; border-radius: 999px; background: var(--accent); font-weight: 900; }
.season-card { margin-top: 14px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.episode-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }

.comments { display: grid; gap: 12px; }
.comment-card { padding: 14px 16px; }
.comment-card strong { display: block; color: #fff; margin-bottom: 5px; }
.comment-form { display: grid; gap: 10px; margin-top: 14px; }
.comment-form textarea { min-height: 96px; resize: vertical; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.07); color: #fff; padding: 14px; }

.profile-card { padding: 22px; display: grid; gap: 18px; }
.profile-header { display: flex; align-items: center; gap: 16px; }
.avatar { width: 86px; height: 86px; border-radius: 28px; object-fit: cover; background: rgba(255,255,255,.12); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.stat strong { display: block; font-size: 24px; color: #fff; }
.stat span { color: var(--muted); font-size: 13px; }
.empty-state { padding: 26px; text-align: center; color: var(--muted); }

.modal {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #120b16;
  color: #fff;
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(0,0,0,.74); backdrop-filter: blur(8px); }
.small-modal { width: min(460px, 94vw); padding: 28px; }
.modal-close {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.stack-form { display: grid; gap: 12px; }
.stack-form input {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 0 14px;
  outline: 0;
}
.form-message { min-height: 22px; margin: 0; color: #ffbad0; }
.player-modal { width: min(1100px, 96vw); padding: 0; overflow: hidden; }
.player-modal video { display: block; width: 100%; max-height: 76vh; background: #000; }
.player-info { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(0,0,0,.45); color: var(--muted); }
.player-close { z-index: 3; background: rgba(0,0,0,.65); }
.notice-list{display:grid;gap:12px;margin-top:18px}.notice-card { padding: 16px; margin-top: 12px; }.list-notice{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;margin-top:0}.notice-card h3{margin:0 0 6px;font-size:18px}.notice-card p{margin:0;color:var(--muted);line-height:1.9;font-size:14px}.notice-card img { width: 100%; height: 76px; object-fit: cover; border-radius: 16px; margin-top: 0; }.compact-head{padding:22px 24px}.compact-head h1{margin-bottom:4px}
.site-footer{width:min(100% - 36px,1320px);margin:20px auto 112px;padding:18px 20px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.045);color:var(--muted);text-align:center;backdrop-filter:blur(14px)}.site-footer p{margin:0;font-size:13px;line-height:1.9}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  width: min(620px, calc(100% - 30px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-around;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(13, 9, 17, .84);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.bottom-nav a {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 20px;
  color: var(--muted);
  font-size: 20px;
}
.bottom-nav a span { font-size: 12px; font-weight: 800; }
.bottom-nav a.active { color: #fff; background: rgba(255,46,103,.17); }

.loading { min-height: 240px; display: grid; place-items: center; color: var(--muted); }
.hidden { display: none !important; }

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; border-radius: 24px; }
  .search-box { grid-column: 1 / -1; order: 3; }
  .brand { font-size: 17px; }
  .app-shell { width: min(100% - 24px, 1320px); margin-top: 20px; }
  .hero { min-height: 360px; border-radius: 28px; }
  .hero-content { padding: 44px 26px; }
  .poster-row { grid-auto-columns: 150px; gap: 14px; }
  .detail-card { grid-template-columns: 1fr; padding: 18px; }
  .detail-poster img { max-width: 280px; }
  .grid-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .bottom-nav a { min-width: auto; }
}

/* Final responsive polish */
@font-face{font-family:IRANSans;src:local("IRANSans"),local("IRANSansWeb"),local("Vazirmatn"),local("Tahoma");font-display:swap}
body{font-family:IRANSans,"Segoe UI",Tahoma,Arial,sans-serif}
.slider-arrow{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:rgba(10,6,14,.62);backdrop-filter:blur(12px);color:#fff;font-size:28px;cursor:pointer}.slider-next{right:18px}.slider-prev{left:18px}.hero-dots{display:flex;gap:8px;margin-top:18px}.hero-dot{width:9px;height:9px;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer}.hero-dot.active{width:26px;background:var(--accent)}
.download-list .download-item{display:block;min-width:190px;border:1px solid var(--line);border-radius:18px;padding:12px;background:rgba(255,255,255,.07);color:#fff}.download-item strong,.download-item span,.download-item em{display:block}.download-item span{color:var(--muted);font-size:13px;margin-top:4px}.download-item em{margin-top:10px;padding:9px 14px;border-radius:999px;background:rgba(255,46,103,.18);color:#ffbad0;font-style:normal;font-weight:900;text-align:center}
.description-box,.meta-box,.media-box{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.055)}.description-box h2,.meta-box h2,.media-box h2{margin:0 0 12px;font-size:20px}.description-box p{margin:0;line-height:2.05;color:#e9e5ee}.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.meta-grid div{padding:12px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.055);min-width:0}.meta-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.meta-grid strong{display:block;color:#fff;font-size:14px;line-height:1.7;overflow-wrap:anywhere}.media-box .section-head{margin-bottom:4px}.stream-box{margin-top:24px;background:linear-gradient(135deg,rgba(255,46,103,.11),rgba(18,157,255,.08),rgba(255,255,255,.04))}.media-list,.episode-media-list{display:grid;gap:10px}.media-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(0,0,0,.18);min-width:0}.media-quality{min-width:0}.media-quality strong{display:block;color:#fff;font-size:15px}.media-quality span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.media-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.media-actions button,.media-actions a{border:0;border-radius:999px;padding:9px 13px;font-weight:900;font-size:12px;cursor:pointer}.media-actions button{background:linear-gradient(135deg,var(--accent),#d71055);color:#fff}.media-actions a{background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--line)}.related-section{padding-top:4px}.english-title{direction:ltr;text-align:right}
.seasons-grid{display:grid;gap:14px;margin-top:12px}.season-card{padding:0;border-radius:22px;overflow:hidden}.season-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer;list-style:none}.season-title::-webkit-details-marker{display:none}.season-title:after{content:'⌄';color:#ffbad0;font-weight:900;transition:.2s}.season-card[open] .season-title:after{transform:rotate(180deg)}.season-title strong{font-size:18px}.season-title span{color:var(--muted);font-size:13px;margin-right:auto}.episode-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-items:start;overflow:visible;padding:0 16px 16px}.episode-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.06);padding:0;min-width:0;overflow:hidden;align-self:start}.episode-summary{display:flex;align-items:center;gap:9px;min-height:54px;padding:10px;cursor:pointer;list-style:none}.episode-summary::-webkit-details-marker{display:none}.episode-summary:after{content:'⌄';color:#ffbad0;font-weight:900;margin-right:auto;transition:.2s}.episode-card[open] .episode-summary:after{transform:rotate(180deg)}.episode-summary b{display:grid;place-items:center;min-width:32px;height:32px;border-radius:10px;background:rgba(255,46,103,.22);color:#ffbad0}.episode-summary span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.episode-summary em{font-style:normal;color:var(--muted);font-size:12px;font-weight:900}.episode-media-list{padding:0 10px 10px}
@media(max-width:720px){.topbar{top:8px;width:calc(100% - 20px);margin-top:10px;padding:10px;gap:10px}.brand span:last-child{display:none}.brand-mark{width:40px;height:40px}.profile-button{padding:0 14px}.search-box{height:46px}.app-shell{width:calc(100% - 20px);margin-bottom:96px}.hero{min-height:420px;background-position:center top}.hero:before{background:linear-gradient(180deg,rgba(5,2,8,.14),rgba(5,2,8,.96) 72%)}.hero-content{width:100%;padding:170px 20px 28px}.hero h1{font-size:28px}.hero p{font-size:14px;line-height:1.9}.slider-arrow{width:38px;height:38px;font-size:24px;top:42%}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-chip{padding:14px 10px;border-radius:18px;font-size:13px}.section{margin-top:28px}.section h2{font-size:20px}.poster-row{grid-auto-columns:138px;gap:12px}.poster-card{border-radius:18px}.grid-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-card{gap:18px;border-radius:22px}.detail-poster img{max-width:210px;margin:auto;display:block}.source-list{display:grid;grid-template-columns:1fr;gap:10px}.source-item,.download-list .download-item{min-width:0}.episode-list{grid-template-columns:1fr}.episode-summary span{white-space:normal;line-height:1.7}.media-row{align-items:flex-start}.bottom-nav{bottom:10px;width:calc(100% - 20px);padding:8px;border-radius:24px}.bottom-nav a{padding:7px 5px;font-size:18px}.bottom-nav a span{font-size:10px}.player-info{display:block}.modal{max-width:calc(100vw - 18px)}}

/* Pagination and overflow fixes */
.paged-grid{align-items:start}.grid-list{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));align-items:start}.poster-card{min-width:0;max-width:100%}.poster-card img{max-width:100%}.page-head,.detail-card,.profile-card,.section,.season-card,.source-item,.download-item{min-width:0;overflow:hidden}.detail-card>div{min-width:0}.detail-card p{overflow-wrap:anywhere}.chip-list,.detail-actions,.source-list{max-width:100%;overflow:hidden}.source-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:stretch}.source-item,.download-list .download-item{min-width:0;width:100%}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px auto 8px}.pagination a,.pagination span{min-width:96px;text-align:center;border:1px solid var(--line);border-radius:999px;padding:11px 18px;background:rgba(255,255,255,.075);font-weight:900}.pagination a{background:linear-gradient(135deg,var(--accent),#d71055);color:#fff}.episode-card,.episode-summary,.media-row,.pill-button,.quick-chip,.source-item,.download-item{max-width:100%}
@media(max-width:520px){.grid-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.paged-grid .poster-card .title{font-size:13px}.paged-grid .poster-card .meta{font-size:11px}.page-head{padding:18px;border-radius:20px}.source-list{grid-template-columns:1fr}.pagination{gap:8px}.pagination a,.pagination span{min-width:auto;padding:10px 14px;font-size:13px}.detail-actions{display:grid;grid-template-columns:1fr}.detail-actions button{width:100%}.compact-actions{display:flex;grid-template-columns:none}.compact-actions button{width:auto}.season-title{align-items:flex-start;flex-direction:column}.media-row{display:block}.media-actions{margin-top:10px}.media-actions button,.media-actions a{flex:1;text-align:center}.episode-summary em{display:none}}
@media(max-width:520px){.list-notice{grid-template-columns:72px 1fr;gap:10px}.notice-card{padding:12px;border-radius:18px}.notice-card h3{font-size:15px}.notice-card p{font-size:12px;line-height:1.8}.notice-card img{height:62px;border-radius:13px}.site-footer{width:calc(100% - 20px);margin-bottom:96px;padding:14px}.site-footer p{font-size:11px}.bottom-nav{width:calc(100% - 20px)}.bottom-nav a{min-width:0}}

/* Mobile final layout */
@media (max-width: 640px), (max-device-width: 640px), (hover: none) and (pointer: coarse) {
  body { overflow-x: hidden; }
  .topbar {
    position: sticky;
    top: 8px;
    width: calc(100% - 16px);
    margin-top: 8px;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
  }
  .brand { min-width: 0; gap: 8px; font-size: 0; }
  .brand-mark { width: 38px; height: 38px; border-radius: 14px; font-size: 23px; }
  .top-actions { justify-content: flex-end; gap: 7px; }
  .icon-button { width: 38px; height: 38px; font-size: 16px; }
  .profile-button { height: 38px; padding: 0 12px; font-size: 12px; }
  .search-box {
    grid-column: 1 / -1;
    order: 3;
    height: 42px;
    padding-right: 6px;
  }
  .search-box input { padding: 0 10px; font-size: 13px; }
  .search-box button { width: 34px; height: 34px; flex: 0 0 34px; }

  .app-shell {
    width: calc(100% - 16px);
    margin: 16px auto 96px;
  }
  .hero {
    min-height: 330px;
    border-radius: 24px;
    background-position: center top;
    box-shadow: 0 16px 50px rgba(0,0,0,.28);
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(5,2,8,.08), rgba(5,2,8,.95) 68%);
  }
  .hero-content {
    width: 100%;
    padding: 132px 16px 22px;
  }
  .eyebrow, .tag { padding: 6px 10px; font-size: 11px; }
  .hero h1 {
    margin: 12px 0 8px;
    font-size: clamp(22px, 8vw, 30px);
    line-height: 1.45;
  }
  .hero p {
    font-size: 12px;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-actions { margin-top: 16px; gap: 8px; }
  .primary-button, .ghost-button, .pill-button, .stack-form button {
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }
  .slider-arrow {
    width: 34px;
    height: 34px;
    top: 40%;
    font-size: 20px;
  }
  .slider-next { right: 10px; }
  .slider-prev { left: 10px; }
  .hero-dots { margin-top: 12px; gap: 6px; }

  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 4px;
  }
  .quick-chip {
    min-width: 0;
    padding: 12px 8px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.6;
  }
  .section { margin-top: 24px; }
  .section-head { margin-bottom: 10px; }
  .section h2 { font-size: 18px; }
  .section-head .more { font-size: 12px; }
  .poster-row {
    grid-auto-columns: minmax(122px, 36vw);
    gap: 10px;
    padding-bottom: 12px;
  }
  .poster-card { border-radius: 16px; }
  .poster-card .title { padding: 9px 9px 3px; font-size: 12px; }
  .poster-card .meta { padding: 0 9px 10px; font-size: 10px; }
  .series-badge { right: 7px; top: 7px; padding: 3px 7px; font-size: 10px; }
  .grid-list, .paged-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-head, .profile-card, .detail-card, .empty-state, .comment-card, .notice-card {
    border-radius: 18px;
  }
  .page-head { padding: 16px; margin-bottom: 16px; }
  .page-head h1 { font-size: 22px; }
  .detail-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .detail-poster img {
    max-width: 190px;
    margin: 0 auto;
    border-radius: 18px;
  }
  .detail-card h1 { font-size: 24px; line-height: 1.45; padding-left: 84px; }
  .compact-actions {
    top: 10px;
    left: 10px;
    gap: 6px;
  }
  .compact-actions .ghost-button {
    height: 30px;
    padding: 0 8px;
    font-size: 10px;
  }
  .description-box, .meta-box, .media-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
  }
  .description-box h2, .meta-box h2, .media-box h2 { font-size: 16px; }
  .description-box p { font-size: 13px; line-height: 1.9; }
  .meta-grid { grid-template-columns: 1fr; gap: 8px; }
  .meta-grid div { padding: 10px; border-radius: 13px; }

  .media-row { display: block; padding: 10px; border-radius: 14px; }
  .media-quality strong { font-size: 13px; }
  .media-actions { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; }
  .media-actions button, .media-actions a { text-align: center; padding: 9px 8px; }
  .season-title { padding: 12px; flex-direction: row; align-items: center; }
  .season-title strong { font-size: 15px; }
  .episode-list { grid-template-columns: 1fr; padding: 0 10px 10px; gap: 9px; }
  .episode-summary { min-height: 48px; padding: 9px; }
  .episode-summary span { white-space: normal; font-size: 12px; }
  .episode-summary em { display: none; }

  .profile-header { align-items: flex-start; }
  .avatar { width: 64px; height: 64px; border-radius: 20px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px; border-radius: 15px; }
  .stat strong { font-size: 18px; }
  .notice-list { gap: 9px; }
  .list-notice { grid-template-columns: 68px 1fr; gap: 10px; }
  .notice-card { padding: 10px; }
  .notice-card img { height: 58px; border-radius: 12px; }
  .notice-card h3 { font-size: 14px; }
  .notice-card p { font-size: 11px; line-height: 1.75; }

  .bottom-nav {
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 7px;
    border-radius: 22px;
  }
  .bottom-nav a {
    min-width: 0;
    padding: 7px 3px;
    border-radius: 16px;
    font-size: 17px;
  }
  .bottom-nav a span { font-size: 9px; }
  .site-footer {
    width: calc(100% - 16px);
    margin: 8px auto 86px;
    padding: 12px;
    border-radius: 18px;
  }
  .site-footer p { font-size: 10px; }

  .small-modal { width: calc(100vw - 18px); padding: 20px; }
  .player-modal { width: calc(100vw - 12px); border-radius: 18px; }
  .player-info { display: block; font-size: 12px; }
  .pagination { gap: 6px; }
  .pagination a, .pagination span { min-width: 0; padding: 9px 12px; font-size: 12px; }
}

@media (max-width: 360px), (max-device-width: 360px) {
  .poster-row { grid-auto-columns: minmax(112px, 42vw); }
  .grid-list, .paged-grid { gap: 8px; }
  .quick-chip { font-size: 11px; }
  .detail-card h1 { font-size: 21px; padding-left: 74px; }
}