:root {
  --bg: #10111b;
  --panel: #191b29;
  --text: #f5f7ff;
  --muted: #a7b0ca;
  --accent: #ff7b2d;
  --line: #303449;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% -18%, #303655 0, #171927 34%, #0e0f18 78%); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.shell { max-width: 1180px; margin: auto; padding: 30px 28px 64px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 68px; }
.brand { font-size: 27px; font-weight: 850; letter-spacing: -.8px; }
.brand span { color: var(--accent); }
.ghost { border: 1px solid #4b526e; background: #151724; color: #c6cce0; border-radius: 12px; padding: 10px 17px; transition: .2s; }
.ghost:hover { border-color: #8791b8; color: #fff; background: #202337; }
.hero { max-width: 760px; margin-bottom: 42px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; }
.hero h1 { margin: 15px 0 18px; font-size: clamp(38px, 6vw, 68px); line-height: .98; letter-spacing: -3.6px; }
.hero p { max-width: 700px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.theater-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.theater-item { position: relative; min-height: 168px; border: 0; padding: 18px 14px 14px; border-radius: 18px; background: transparent; color: #aeb7d0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; overflow: hidden; transition: transform .22s, color .22s, background .22s; }
.theater-item::before { content: ""; position: absolute; inset: 18px 0; opacity: 0; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #5c678d20, transparent 66%); transition: opacity .22s; pointer-events: none; }
.theater-item:hover { transform: translateY(-5px); color: #fff; background: #1b1e2d66; }
.theater-item:hover::before { opacity: 1; }
.theater-item small { position: relative; font-size: 13px; font-weight: 650; letter-spacing: .2px; }
.theater-logo-image { position: relative; width: auto !important; max-width: 158px !important; height: 91px !important; object-fit: contain; filter: drop-shadow(0 8px 12px #0007); }
.section-title { display: flex; justify-content: space-between; align-items: end; margin: 20px 0; }
.section-title h1 { margin: 0; font-size: 32px; }
.section-title p { margin: 0; color: var(--muted); }
.toolbar { display: flex; gap: 10px; margin-bottom: 22px; }
.toolbar input { flex: 1; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--panel); color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.show { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); cursor: pointer; transition: .2s transform, .2s border-color; }
.show:hover { transform: translateY(-4px); border-color: #727ba8; }
.poster { display: block; width: 100%; aspect-ratio: 3 / 4; background: #292c3d; object-fit: cover; }
.show-body { padding: 13px; }
.show-title { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.show-meta { margin-top: 7px; color: var(--muted); font-size: 12px; }
.back { margin-right: 10px; }
.detail { display: grid; grid-template-columns: minmax(190px, 280px) 1fr; gap: 28px; }
.detail-poster { width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; background: #292c3d; object-fit: cover; }
.detail h1 { margin: 5px 0 12px; font-size: 38px; }
.detail p { color: var(--muted); line-height: 1.6; }
.episodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 9px; margin-top: 22px; }
.ep { padding: 11px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.ep.locked { color: #777d98; }
.empty, .loading { padding: 50px 0; color: var(--muted); text-align: center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: #0009; }
.modal { width: 100%; max-width: 430px; padding: 25px; border: 1px solid #3a3e58; border-radius: 20px; background: #1c1e2c; box-shadow: 0 20px 80px #0008; }
.modal h2 { margin-top: 0; }
.modal p { color: var(--muted); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions a, .modal-actions button { padding: 11px 16px; border: 0; border-radius: 10px; }
.modal-actions a { background: var(--accent); color: #fff; }
.modal-actions button { background: #303449; color: #fff; }
@media (max-width: 800px) { .shell { padding: 24px 18px 50px; } .topbar { margin-bottom: 48px; } .theater-grid { gap: 12px; } .theater-item { min-height: 145px; padding: 12px 8px; } .theater-logo-image { max-width: 122px !important; height: 72px !important; } }
@media (max-width: 560px) { .shell { padding: 20px 14px 40px; } .topbar { margin-bottom: 38px; } .theater-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theater-item { min-height: 142px; } .theater-logo-image { max-width: 132px !important; } .detail { grid-template-columns: 1fr; } .detail-poster { max-width: 230px; } .section-title { align-items: start; flex-direction: column; gap: 12px; } }
.single-theater { display: flex; justify-content: center; max-width: 280px; }
.single-theater .theater-item { width: 260px; min-height: 190px; }
.reelshort-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #f7f7fb; font-size: 25px; font-weight: 850; letter-spacing: -.8px; }
.reelshort-logo > span:last-child span, .reel-brand > span:last-child { color: #ff3d72; }
.reelshort-mark, .reel-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg,#ff3e72,#ff1e5b); color: white; font-size: 17px; box-shadow: 0 6px 15px #ff1e5b55; }
.reel-page { min-height: 100vh; padding-bottom: 80px; color: #f7f7fb; background: #090a0e; font-family: Inter, system-ui, sans-serif; }
.reel-top { display: flex; align-items: center; gap: 28px; max-width: 980px; margin: auto; padding: 20px 24px; }
.reel-brand { display: flex; align-items: center; gap: 10px; min-width: 210px; font-size: 23px; font-weight: 850; }
.reel-brand-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
.reel-search { flex: 1; max-width: 330px; padding: 12px 18px; border: 1px solid #262936; border-radius: 30px; color: #a8acbb; }
.reel-search span { margin-left: 8px; font-size: 14px; }
.reel-lang { padding: 10px 16px; border: 1px solid #292c38; border-radius: 22px; background: #12131a; color: #f4f4f8; }
.reel-tabs { display: flex; gap: 28px; max-width: 980px; margin: auto; padding: 0 24px 18px; border-bottom: 1px solid #272933; overflow-x: auto; }
.reel-tabs a { position: relative; padding-top: 2px; color: #8f92a2; font-size: 17px; font-weight: 650; white-space: nowrap; }
.reel-tabs a.active { color: #f6f6fa; }
.reel-tabs a.active::after { content: ""; position: absolute; right: 0; bottom: -19px; left: 0; height: 3px; border-radius: 3px; background: #ff2c6b; }
.reel-content { max-width: 980px; margin: auto; padding: 16px 24px 30px; }
.reel-hero { position: relative; height: 300px; overflow: hidden; border-radius: 18px; background: #191b25; }
.reel-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .84; }
.reel-hero::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,#090a0ee8); }
.reel-hero div { position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.reel-hero strong { font-size: 20px; text-shadow: 0 2px 6px #000; }
.reel-hero small { color: #ff5280; font-weight: 700; }
.reel-content h2 { margin: 28px 0 16px; font-size: 22px; }
.reel-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reel-card { position: relative; min-height: 250px; overflow: hidden; border-radius: 13px; background: #171821; cursor: pointer; }
.reel-card img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; transition: transform .25s; }
.reel-card:hover img { transform: scale(1.04); }
.reel-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,#050509e8); }
.reel-card b { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 1; font-size: 14px; }
.reel-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; justify-content: space-around; max-width: 980px; margin: auto; padding: 10px 24px 8px; border-top: 1px solid #242630; background: #111219f5; }
.reel-bottom a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #858998; font-size: 12px; }
.reel-bottom a span { font-size: 22px; line-height: 1; }
.reel-bottom a.active, .reel-bottom a:hover { color: #ff2c6b; }
.membership { max-width: 760px; margin: auto; padding-top: 10px; }
.membership h1 { margin: 12px 0; font-size: clamp(36px,6vw,60px); letter-spacing: -3px; }
.membership p { color: var(--muted); font-size: 17px; }
.member-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 30px 0; }
.member-plans div { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#24283b,#171925); }
.member-plans b { color: var(--accent); text-transform: uppercase; }
.member-plans strong { font-size: 28px; }
.member-plans small { color: var(--muted); }
.member-action { display: inline-block; padding: 13px 18px; border-radius: 12px; background: var(--accent); color: white; font-weight: 700; }
.admin-shell { min-height: 100vh; padding: 34px clamp(18px,5vw,72px) 70px; background: #f5f7fb; color: #141726; }
.admin-login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:#f5f7fb; color:#141726; }
.admin-login-card { width:min(100%,420px); padding:30px; border:1px solid #e0e4ef; border-radius:22px; background:white; box-shadow:0 20px 50px #26345b18; }
.admin-login-card h1 { margin:12px 0 8px; font-size:32px; }
.admin-login-card p { color:#74798c; line-height:1.6; }
.admin-login-card form { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.admin-login-card label { display:flex; flex-direction:column; gap:6px; color:#4e5568; font-size:13px; font-weight:700; }
.admin-login-card input { box-sizing:border-box; width:100%; padding:12px; border:1px solid #d9deeb; border-radius:10px; font:inherit; }
.admin-login-card small { display:block; margin-top:18px; color:#9298a8; }
.admin-auth-error { min-height:18px; margin:0 !important; color:#d55d70 !important; font-size:13px; }
.admin-captcha-label { margin-top:2px; }
.admin-captcha-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-captcha-row strong { padding:10px 14px; border-radius:9px; background:#eef0ff; color:#5668c7; letter-spacing:1px; }
.admin-captcha-row button { border:0; background:none; color:#5668c7; cursor:pointer; font-size:12px; }
.admin-head, .admin-layout { max-width: 1180px; margin: 0 auto; }
.admin-head { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:28px; }
.admin-head h1 { margin: 10px 0 6px; font-size: clamp(34px,5vw,52px); letter-spacing:-2px; }
.admin-head p, .admin-list-head p { color:#6f7587; }
.admin-back, .admin-text-btn { color:#5b6fbb; }
.admin-stats { display:flex; flex-direction:column; align-items:center; padding:18px 28px; border:1px solid #dce1ef; border-radius:18px; background:white; box-shadow:0 12px 30px #26345b12; }
.admin-logout { border:0; padding:9px 13px; border-radius:9px; background:#fff0f2; color:#c45268; cursor:pointer; font-weight:700; }
.admin-stats strong { font-size:36px; color:#5668c7; }
.admin-stats span { color:#74798c; font-size:13px; }
.admin-layout { display:grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.5fr); gap:20px; }
.admin-form, .admin-list { padding:22px; border:1px solid #e0e4ef; border-radius:22px; background:white; box-shadow:0 12px 30px #26345b0d; }
.admin-form { display:flex; flex-direction:column; gap:13px; }
.admin-form-title, .admin-list-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.admin-form h2, .admin-list h2 { margin:0; font-size:20px; }
.admin-form label { display:flex; flex-direction:column; gap:6px; color:#4e5568; font-size:13px; font-weight:700; }
.admin-shared-token { padding:12px; border:1px solid #d9def2; border-radius:12px; background:#f5f6ff; }
.admin-shared-token span { color:#7c8294; font-size:12px; font-weight:400; }
.admin-token-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.admin-save-token { border:0; padding:7px 11px; border-radius:8px; background:#5668c7; color:white; font-size:12px; font-weight:700; cursor:pointer; }
.admin-token-actions span, #shared-token-status { color:#7c8294; font-size:12px; font-weight:400; }
#shared-token-status { display:block; margin-top:6px; color:#2d9b71; }
.admin-form input { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid #d9deeb; border-radius:10px; background:#fbfcff; color:#171a27; font:inherit; font-weight:400; outline:none; }
.admin-form input:focus { border-color:#7185e0; box-shadow:0 0 0 3px #7185e01c; }
.admin-two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-check { flex-direction:row !important; align-items:center; }
.admin-check input { width:auto; }
.admin-logo-preview { display:grid; place-items:center; min-height:76px; border:1px dashed #cdd3e4; border-radius:12px; background:#f8f9fd; color:#9aa0b2; }
.admin-logo-preview img { max-width:120px; max-height:62px; object-fit:contain; }
.admin-primary { border:0; padding:12px; border-radius:11px; background:#5668c7; color:white; font-weight:800; cursor:pointer; }
.admin-note { margin:0; color:#8a90a2; font-size:12px; line-height:1.5; }
.admin-list-head { margin-bottom:15px; }
.admin-list-head span { padding:6px 10px; border-radius:99px; background:#eef0ff; color:#5668c7; font-size:12px; white-space:nowrap; }
.admin-table { display:flex; flex-direction:column; gap:9px; }
.admin-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto auto auto; align-items:center; gap:11px; padding:11px; border:1px solid #edf0f6; border-radius:14px; }
.admin-row img { width:42px; height:42px; object-fit:contain; border-radius:10px; background:#f3f4f9; }
.admin-row-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.admin-row-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-row-main small { color:#848a9a; }
.admin-row button { border:0; background:none; color:#5668c7; cursor:pointer; font-weight:700; }
.admin-row button.danger { color:#d55d70; }
.admin-status { color:#a0a5b3; font-size:12px; }
.admin-status.on { color:#2d9b71; }
@media (max-width: 800px) { .admin-head { align-items:flex-start; flex-direction:column; } .admin-layout { grid-template-columns:1fr; } }
@media (max-width: 700px) { .reel-top { flex-wrap: wrap; gap: 14px; } .reel-brand { min-width: 0; flex: 1; } .reel-search { order: 3; flex-basis: 100%; max-width: none; } .reel-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .reel-hero { height: 240px; } .member-plans { grid-template-columns: 1fr; } }