/* THE X_X MOVIE / Mobile Cinema Pro V5
   Single, mobile-first theme derived from the user's Mobile Cinema App HTML reference.
   UI only: never modifies authentication, catalog, media URLs, progress or favorites. */
:root {
  color-scheme: dark;
  --bg: #100f14;
  --panel: #1c1924;
  --line: #38303e;
  --text: #f9f6fb;
  --muted: #b3aaba;
  --mint: #ff405d;
  --blue: #e92a4c;
  --radius: 22px;
  --red: #f00036;
  --red-strong: #ec1748;
  --pink: #ff738e;
  --border: rgba(255,255,255,.1);
  font-family: system-ui, -apple-system, 'Noto Sans Thai', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
}
html { scrollbar-color: #5b435a #120e16; scroll-padding-top: 88px }
body {
  background:
    radial-gradient(ellipse 65% 310px at 50% -85px, rgba(92,31,72,.36), transparent 86%),
    linear-gradient(180deg,#130f19 0,#100f14 430px,#100f14 100%);
  min-width: 320px;
  overflow-x: clip;
}
::selection { background: #ba244f; color: #fff }
button, select, input { -webkit-tap-highlight-color: transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline: 3px solid #ff879b; outline-offset: 3px }
button, .btn, a { touch-action: manipulation }
.content-width { width: min(1230px,calc(100% - 48px)) }
.header { border:0; border-bottom:1px solid #ffffff0c; background:rgba(16,13,21,.90); box-shadow:0 6px 35px #0002; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px) }
.header.is-scrolled { box-shadow: 0 8px 30px #0009; border-bottom-color:#ffffff16 }
.navbar { height:76px; gap:24px }
.brand { font-size: 16px; letter-spacing:-.025em; font-weight:850 }
.brand strong { color: var(--pink) }
.brand-icon { height:46px; min-width:46px; border-radius:15px; background:linear-gradient(140deg,#ff385f,#d40b3d 85%); color:#fff; box-shadow:0 8px 28px #f0003642; font-weight:950 }
.desktop-nav a { color:#b6a9b9; transition:color .2s }
.desktop-nav a.nav-active,.desktop-nav a:hover { border-color:var(--red);color:#fff }
.searchbox { height:46px; border:1px solid #483b4d; background:#201a29; border-radius:16px; transition:border-color .2s,box-shadow .2s }
.searchbox:focus-within { border-color:#ff647c; box-shadow:0 0 0 3px #ff396020 }
.search-icon { color:#ff8095; font-size:25px }
.searchbox input { color:#fff; font-size:14px }
.searchbox input::placeholder { color:#aa9cac; opacity:1 }
.account-button { min-height:44px; padding:11px 16px; background:#2a202f; border:1px solid #60475a; color:#ffb9c8; border-radius:14px; font-weight:800 }
.mobile-intro { display:none }
.hero { min-height:510px; margin-top:24px; border-radius:29px; border:1px solid #5c425244; background-color:#2a1b2b; background-image:radial-gradient(circle at 70% 35%,#6e315b,#281728 47%,#15101c); background-size:cover; background-position:center 25%; box-shadow:0 24px 74px #0006; align-items:flex-end }
.hero-fade { background:linear-gradient(90deg,#100d18f2 0%,#120d18a8 51%,#130d1940 100%),linear-gradient(0deg,#110e18fa 0%,#120d18a6 28%,transparent 75%) }
.hero-inner { max-width:760px; width:100%; padding:58px clamp(26px,5.6%,76px) 56px }
.kicker,.overline { color:#ff819b; font-size:10px; letter-spacing:.15em; font-weight:850 }
.signal { background:#ff4d75; box-shadow:0 0 17px #ff346a }
.hero-tag { border-color:#ff87aa85; color:#ffc4cf; background:#5e183938; margin-top:29px; letter-spacing:.15em; border-radius:8px }
.hero h1 { font-weight:900; letter-spacing:-.038em; font-size:clamp(36px,4.6vw,64px); line-height:1.19; margin:16px 0 13px; text-wrap:balance; text-shadow:0 5px 30px #000a }
.hero p { color:#eee2ee; max-width:590px; line-height:1.8; font-size:15px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden }
.hero-actions { gap:12px; margin-top:24px }
.btn { min-height:46px; border-radius:14px; padding:12px 20px; letter-spacing:.005em; transition:transform .2s, background .2s, box-shadow .2s; font-weight:800 }
.btn:active { transform:scale(.97) }
.btn-primary { background:linear-gradient(125deg,#ff3f61,#f00036 72%); color:#fff; border-color:#ff647a; box-shadow:0 10px 32px #d00c4360 }
.btn-primary:hover { background:linear-gradient(125deg,#ff5877,#f41c4c); box-shadow:0 14px 38px #d00c4372 }
.btn-soft { background:#ffffff15; color:#fff; border:1px solid #ffffff45; backdrop-filter:blur(9px) }
.btn-soft:hover { background:#ffffff28 }
.shelf { margin:42px 0 50px }
.section-heading { gap:12px; align-items:end; margin-bottom:19px }
.section-heading h2,.section-heading h1 { color:#fff; font-size:clamp(22px,2.9vw,29px); font-weight:850; letter-spacing:-.03em; line-height:1.34 }
.section-more { font-size:12px; color:#ff93a8; font-weight:750 }
.count,.hint { color:#b4a9b9 }
.toolbar { margin-bottom:20px; gap:14px }
.chips { gap:8px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -ms-overflow-style:none; scrollbar-width:none; max-width:100% }
.chips::-webkit-scrollbar { display:none }
.chip { min-height:43px; white-space:nowrap; color:#c9bbcc; background:#211a27; border:1px solid #48394c; border-radius:15px; font-weight:750; padding:10px 17px }
.chip.active { color:#fff; background:linear-gradient(120deg,#ed1744,#ce0b38); border-color:#f55272; box-shadow:0 7px 19px #dc00394b }
select { background:#241d2d; border:1px solid #57455c; color:#f5e9f3; min-height:43px; border-radius:12px; max-width:200px }
.grid { gap:26px 17px }
.movie-card { min-width:0; isolation:isolate }
.cover { background:linear-gradient(135deg,#5e2a49,#281f39 70%); border:1px solid #4c3c4f; border-radius:19px; color:#e8c5db; box-shadow:0 12px 38px #0007; transition:transform .22s, box-shadow .22s, border-color .22s }
.cover:hover { transform:translateY(-4px); border-color:#ff6682; box-shadow:0 16px 44px #0009,0 0 0 1px #ff385127 }
.cover img { transition:transform .32s ease,filter .32s ease }
.cover:hover img { transform:scale(1.045) }
.cover:after { content:""; position:absolute; bottom:0; left:0; right:0; height:36%; pointer-events:none; background:linear-gradient(0deg,#140913a8,transparent) }
.cover-label { z-index:1; background:#df1648ec; border:1px solid #f8849680; color:#fff; border-radius:9px; font-weight:800; font-size:10px; padding:6px 10px }
.fav-mini { width:44px; height:44px; font-size:24px; top:7px; right:7px; color:#fff; border-color:#ffffff64; background:#201522db; box-shadow:0 7px 18px #0006; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.fav-mini.is-fav { color:#ff6689; border-color:#ff6175ad }
.movie-card h3 { font-size:14px; color:#fff; margin:12px 2px 5px; font-weight:800; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:1.45em }
.movie-card p { color:#b6a6b5; font-size:12px; line-height:1.6; margin:0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.cover-placeholder { font-size:13px; line-height:1.65; padding:16px; text-align:center; color:#ffc1d2 }
.mini-progress { z-index:3; bottom:0; background:#ffffff4d; height:5px }
.mini-progress span { background:linear-gradient(90deg,#fb416f,#ff9baa) }
/* The live D1-backed rails created in HTML Themes V4 remain real, not mock data. */
.rail-grid { display:flex; gap:15px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; padding:5px 2px 21px; scrollbar-width:thin; scrollbar-color:#795169 transparent }
.rail-grid .movie-card { flex:0 0 clamp(145px,16vw,206px); scroll-snap-align:start }
.rail-grid .cover { aspect-ratio:2/3 }
.cinematic-rail { margin:39px 0 }
#resumeList .movie-card { max-width:265px }
#resumeList .cover { aspect-ratio:16/10; border-radius:17px }
#resumeList .cover img { object-fit:cover }
#resumeList .mini-progress { height:6px }
#resumeSection .section-heading h2 { font-size:clamp(22px,3vw,27px) }
.empty { color:#c3b2c6; background:#211a28c9; border:1px dashed #6b506e; border-radius:20px; min-height:130px; padding:36px 24px }
.page-view { padding-top:36px; min-height:60vh }
.page-view .section-heading { margin-bottom:16px }
.watch-page { padding-top:24px }
.text-btn { min-height:44px; color:#ff92a9 }
.video-shell { border:1px solid #624b64; border-radius:21px; background:#080609; box-shadow:0 18px 60px #000a }
.video-state { color:#d5c7d5; background:#0c0711c9 }
.player-tools { background:#1a1520; border:1px solid #423448; border-radius:13px; padding:12px 14px; margin-top:13px }
.player-actions select { min-height:41px }
.video-column h1 { color:#fff; font-weight:850 }
.meta { color:#ff899f; line-height:1.7 }
.description { color:#cbbecd; line-height:1.9; overflow-wrap:anywhere }
.details-aside { background:#1b1622; border:1px solid #45384c; border-radius:20px }
.details-aside h2 { color:#fff }
.related-item { min-height:60px; border-radius:12px; padding:5px; transition:background .2s }
.related-item:hover { background:#3a283b }
.related-item span { color:#f8f0f9 }
.related-item small { color:#bdabba }
.dialog { background:#1b1522; border:1px solid #5a415d; border-radius:25px; color:#fff; max-height:min(90dvh,850px); overflow:auto }
.dialog::backdrop { background:#09060bdc; backdrop-filter:blur(9px) }
.account-form label { color:#dfcde0 }
.account-form input { color:#fff; background:#261e2d; border-color:#675071; min-height:48px }
.dialog-close { min-width:44px; min-height:44px; color:#ffd0dc }
.error-message { color:#ffb3c2 }
.toast { background:#3d2035; border:1px solid #c7597a; color:#fff; box-shadow:0 20px 55px #000b }
footer { border-color:#ffffff16; color:#a999ab }
.mobile-nav { isolation:isolate }
.mobile-nav a.nav-active { color:#ff5578 }
.mobile-nav [aria-current='page'] { color:#ff6983 }
@media (max-width:800px) {
  .navbar { gap:12px }
  .grid { gap:20px 13px }
  #resumeList { display:flex; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory; padding:2px 1px 16px; scrollbar-width:none }
  #resumeList .movie-card { flex:0 0 clamp(195px,40vw,260px); scroll-snap-align:start }
  #resumeList::-webkit-scrollbar { display:none }
}
@media (max-width:600px) {
  html { scroll-padding-top:112px }
  .content-width { width:calc(100% - 30px) }
  .header { background:#100d17ef }
  .navbar { height:auto; min-height:67px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "search"; align-items:center; gap:7px; padding:10px 0 12px }
  .brand { grid-area:brand; gap:9px; font-size:14px; width:max-content }
  .brand-icon { height:38px; min-width:38px; border-radius:12px; font-size:16px }
  .searchbox { grid-area:search; width:100%; height:42px; margin:0; padding:0 12px; background:#241c2e; border-radius:13px }
  .searchbox input { font-size:13px }
  .account-button,.desktop-nav { display:none }
  .mobile-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:21px; margin-bottom:13px }
  .mobile-intro .intro-kicker { font-size:10px; font-weight:800; color:#e29bb3; letter-spacing:.1em }
  .mobile-intro h2 { font-size:clamp(21px,6vw,26px); font-weight:900; margin:5px 0 0; line-height:1.3; letter-spacing:-.03em }
  .mobile-intro .intro-mark { flex:0 0 43px; height:43px; border-radius:50%; display:grid; place-items:center; background:#281c2d; border:1px solid #705063; color:#ff8ba8; font-size:22px }
  .hero { min-height:350px; aspect-ratio:5/5.45; max-height:480px; margin-top:0; border-radius:23px; background-position:center 28%; align-items:flex-end }
  .hero-fade { background:linear-gradient(0deg,#100c17fc 0%,#100c17d9 26%,#100c17a3 44%,transparent 88%),linear-gradient(100deg,#160d1c42,transparent 85%) }
  .hero-inner { padding:20px 20px 24px; width:100% }
  .kicker { font-size:9px; gap:8px; letter-spacing:.1em }
  .hero-tag { margin-top:13px; font-size:9px; padding:5px 9px }
  .hero h1 { font-size:clamp(27px,7.8vw,37px); line-height:1.18; margin:11px 0; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden }
  .hero p { font-size:12px; line-height:1.62; -webkit-line-clamp:2; color:#e9deea }
  .hero-actions { margin-top:16px; gap:9px }
  .hero-actions .btn { min-height:45px; font-size:12px; padding:10px 13px; flex:1 }
  .shelf,.cinematic-rail { margin:29px 0 33px }
  .section-heading { margin-bottom:15px }
  .section-heading h2,.section-heading h1 { font-size:20px }
  .section-more,.count { font-size:11px }
  .overline { font-size:9px }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 11px }
  .rail-grid { width:calc(100vw - 15px); margin-right:-15px; gap:11px; padding:2px 15px 19px 0 }
  .rail-grid .movie-card { flex:0 0 clamp(143px,42vw,178px) }
  #resumeList .movie-card { flex:0 0 215px }
  .cover { border-radius:17px }
  .movie-card h3 { font-size:13px }
  .movie-card p { font-size:11px }
  .fav-mini { width:44px; height:44px; top:5px; right:5px }
  .toolbar { align-items:stretch; gap:9px }
  .chips { width:100% }
  .right-tools { flex:1; gap:8px }
  .right-tools select { flex:1; max-width:none; min-width:0; font-size:12px }
  .watch-page { padding-top:8px }
  .watch-layout { margin-top:10px }
  .video-shell { border-radius:15px; margin-inline:-15px; border-inline:0; width:calc(100% + 30px) }
  .player-tools { margin-top:14px; padding:11px }
  .player-actions { gap:7px; flex-wrap:wrap }
  .player-actions label { font-size:12px }
  .video-column h1 { margin-top:20px; font-size:24px }
  .description { font-size:14px }
  .movie-actions { flex-wrap:wrap }
  .page-view { padding-top:22px }
  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); bottom:0; left:0; right:0; z-index:40; gap:2px; background:#19131ff5; border-top:1px solid #ffffff25; border-radius:21px 21px 0 0; padding:10px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 -12px 35px #0008 }
  .mobile-nav a,.mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; border:0; border-radius:14px; background:transparent; font-size:10px; line-height:1.2; padding:5px 2px; color:#bfb0c5 }
  .mobile-nav a span,.mobile-nav button span { font-size:20px }
  .mobile-nav a.nav-active { background:#f0184230; color:#ff8fa3 }
  .mobile-nav a:active,.mobile-nav button:active { background:#ffffff12 }
  footer { padding-bottom:120px; margin-top:32px; font-size:11px }
  .toast { bottom:calc(96px + env(safe-area-inset-bottom)); font-size:12px; max-width:calc(100% - 30px) }
  .dialog { padding:21px; border-radius:20px; width:calc(100% - 22px) }
}
@media (max-width:360px) {
  .hero { min-height:330px }
  .hero-inner { padding:17px }
  .hero h1 { font-size:27px }
  .hero-actions .btn { padding:10px 8px }
  .mobile-nav a,.mobile-nav button { font-size:9px }
  .brand { font-size:13px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
}