/* Generated from the Android app Theme.kt (IPTV Monster Visual Identity v2.0). Do not edit by hand. */
:root { --bg: #0D0E11; --panel: #15171B; --item: #1C1F24; --hover: #272B32; --selected: #30281C; --accent: #D9AE60; --onaccent: #141210; --primary: #D9AE60; --primaryhover: #E8C381; --onprimary: #141210; --focus: #F4D9A5; --text: #F3F2EF; --muted: #B4B6BD; --divider: #32363E; --cborder: #777E89; --bg-rgb: 13, 14, 17; --panel-rgb: 21, 23, 27; --item-rgb: 28, 31, 36; --text-rgb: 243, 242, 239; --focus-rgb: 244, 217, 165; --accent-rgb: 217, 174, 96; }
html.th-midnight-blue { --bg: #0A1019; --panel: #111B28; --item: #192535; --hover: #223248; --selected: #1C3853; --accent: #82AFE0; --onaccent: #0A1019; --primary: #82AFE0; --primaryhover: #A5C7EB; --onprimary: #0A1019; --focus: #C9E2FF; --text: #F1F5FA; --muted: #B2BFCE; --divider: #304154; --cborder: #6F859C; --bg-rgb: 10, 16, 25; --panel-rgb: 17, 27, 40; --item-rgb: 25, 37, 53; --text-rgb: 241, 245, 250; --focus-rgb: 201, 226, 255; --accent-rgb: 130, 175, 224; }
html.th-burgundy-cinema { --bg: #130D10; --panel: #1D1419; --item: #291D23; --hover: #38262F; --selected: #442832; --accent: #D9949E; --onaccent: #130D10; --primary: #9F3447; --primaryhover: #B14054; --onprimary: #FFFFFF; --focus: #F2CED2; --text: #FAF1F3; --muted: #CCB6BD; --divider: #49343F; --cborder: #9B7785; --bg-rgb: 19, 13, 16; --panel-rgb: 29, 20, 25; --item-rgb: 41, 29, 35; --text-rgb: 250, 241, 243; --focus-rgb: 242, 206, 210; --accent-rgb: 217, 148, 158; }
html.th-alpine-emerald { --bg: #0B1411; --panel: #13221B; --item: #182B21; --hover: #1F382A; --selected: #294133; --accent: #8FC5A4; --onaccent: #0B1411; --primary: #8FC5A4; --primaryhover: #AED5BD; --onprimary: #0B1411; --focus: #D4E9DC; --text: #F1F7F3; --muted: #B0C2B7; --divider: #2C4337; --cborder: #6F8F7D; --bg-rgb: 11, 20, 17; --panel-rgb: 19, 34, 27; --item-rgb: 24, 43, 33; --text-rgb: 241, 247, 243; --focus-rgb: 212, 233, 220; --accent-rgb: 143, 197, 164; }
html.th-ember-dawn { --bg: #17100C; --panel: #251A13; --item: #2E2017; --hover: #3B2A1E; --selected: #483223; --accent: #E5A16C; --onaccent: #17100C; --primary: #E5A16C; --primaryhover: #ECBB95; --onprimary: #17100C; --focus: #F5DBC7; --text: #FBF3EC; --muted: #CDB9A8; --divider: #493428; --cborder: #9A7A62; --bg-rgb: 23, 16, 12; --panel-rgb: 37, 26, 19; --item-rgb: 46, 32, 23; --text-rgb: 251, 243, 236; --focus-rgb: 245, 219, 199; --accent-rgb: 229, 161, 108; }
html.th-amethyst-bloom { --bg: #120F19; --panel: #20192B; --item: #291F36; --hover: #362847; --selected: #3D314E; --accent: #BBA1DE; --onaccent: #120F19; --primary: #BBA1DE; --primaryhover: #CEBBE7; --onprimary: #120F19; --focus: #E5DBF2; --text: #F5F1FA; --muted: #BDB3CC; --divider: #3A3050; --cborder: #8575A0; --bg-rgb: 18, 15, 25; --panel-rgb: 32, 25, 43; --item-rgb: 41, 31, 54; --text-rgb: 245, 241, 250; --focus-rgb: 229, 219, 242; --accent-rgb: 187, 161, 222; }
:root { --success: #8BCDA7; --warn: #E7C278; --danger: #F0929D; --notify: #FF3B30; --video: rgba(0,0,0,.8); }
/* Inter (Latin) and Noto Sans Arabic, weights 400, 500 and 600 only: the same families and weights as the Android app (Visual Identity v2.0 font specification; SIL Open Font License 1.1). Font-face rules only; sizes and roles are in app.css. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url(fonts/noto-sans-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 600; font-display: swap; src: url(fonts/noto-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
/* IPTV Monster for TVs (Visual Identity v2.0). Fonts: fonts.css. Sizes are written in dp exactly as in the Android app (build step turns 0.0625rem into 1/16 rem).
   Reference screen: 960 x 540 dp (a 1080p Google TV). 1rem = 1rem = 1/60 of the screen width on every TV, so
   all sizes, proportions and fonts are identical on Samsung, Hisense and TCL. */

html { font-size: calc(100vw / 60); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { color: var(--text); font-family: Inter, "Noto Sans Arabic", sans-serif; font-size: 1rem; line-height: 1.5; letter-spacing: 0; font-weight: 400; direction: ltr; -webkit-font-smoothing: antialiased; }
html[lang=ar] body { line-height: 1.65; }
/* Type roles (Type.kt, TV column): page 600 40/1.08 with -0.025em tracking on Latin only, section 600 32/1.2, body 400 16, meta 400 13, label 500 16 */
.t-page { font-size: 2.5rem; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.t-section { font-size: 2rem; line-height: 1.2; font-weight: 600; }
html[lang=ar] .t-page { line-height: 1.3; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { border: 0; margin: 0; padding: 0; background: none; text-align: left; }
.tx { unicode-bidi: plaintext; }
.dim { color: var(--muted); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }
.b, .sb { font-weight: 600; }   /* real files exist for 400 / 500 / 600 only: no synthetic bold */
.md { font-weight: 500; }
.s11, .s12, .s13, .s14 { font-size: 0.8125rem; }          /* meta */
.s15, .s18, .s20 { font-size: 1rem; }                /* body / label */
.s22 { font-size: 2rem; line-height: 1.2; } .s24 { font-size: 2.5rem; line-height: 1.08; }
.clamp1, .clamp2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.clamp1 { -webkit-line-clamp: 1; } .clamp2 { -webkit-line-clamp: 2; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.w1 { flex: 1 1 0; min-width: 0; }
.fill { flex: 1 1 auto; min-width: 0; min-height: 0; }
.rg8 > * + * { margin-left: 0.5rem; }
.rg6 > * + * { margin-left: 0.375rem; }
.cg8 > * + * { margin-top: 0.5rem; }
.cg10 > * + * { margin-top: 0.625rem; }
.cg6 > * + * { margin-top: 0.375rem; }
.scrollx { overflow-x: auto; overflow-y: hidden; padding: 0 0.5rem; display: flex; align-items: center; flex: 0 0 auto; max-width: 100%; }
.scrollx > * { flex: 0 0 auto; }
.scrolly { overflow-y: auto; overflow-x: hidden; }
::-webkit-scrollbar { display: none; }
.hidden { display: none !important; }
.ic { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; display: block; }

/* ---------- backdrop (one baked picture) and layers ---------- */
#bd { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; }
#app { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }
body.full #bd { display: none; }
#scr { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

/* ---------- FocusBox (Visual Identity v2.0): 3 dp ring + 4 dp dark gap, 160 ms ease-out; selected = fill + 3 dp accent marker; controls radius 8, artwork/tiles 10 ---------- */
.fb { position: relative; background: var(--item); border-radius: 0.5rem; cursor: pointer; transition: box-shadow 160ms cubic-bezier(0, 0, .2, 1), transform 160ms cubic-bezier(0, 0, .2, 1), background-color 160ms cubic-bezier(0, 0, .2, 1); outline: none; -webkit-tap-highlight-color: transparent; }
.fb.clip { overflow: hidden; }
.fb:focus { z-index: 2; box-shadow: 0 0 0 0.25rem var(--bg), 0 0 0 0.4375rem var(--focus); }
.fb.sel { background: var(--selected); }
.fb.sel::after { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 0.1875rem; border-radius: 0.09375rem; background: var(--accent); }
.fb.off { background: var(--panel); color: var(--muted); cursor: default; }
.fb.ghost { background: transparent; }
.fb.zoom:focus { transform: scale(1.02); }
.fb.round { border-radius: 50%; }
.fb.art { border-radius: 0.625rem; }
.fb.r16 { border-radius: 1rem; } .fb.r6 { border-radius: 0.375rem; } .fb.r0 { border-radius: 0; }
.fb.ghost.sel::after { display: none; }
/* quiet (player controls): nothing until focus, then a 15 percent tint and a 2 dp ring inside the bounds, no dark gap */
.fb.quiet { background: transparent; }
.fb.quiet:focus { background: rgba(var(--focus-rgb), .15); box-shadow: inset 0 0 0 0.125rem var(--focus); }
/* calm (main tiles): the fill is 30 percent opaque while idle and goes solid with the focus ring */
.fb.calm { background: rgba(var(--item-rgb), .3); }
.fb.calm:focus { background: var(--item); }

/* FocusButton */
.btn { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.5rem 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--text); vertical-align: middle; }
.btn.sel, .btn.pri { font-weight: 600; }
.btn.dot { padding-right: 2.75rem; }
.btn.dot::before { content: ""; position: absolute; right: 0.875rem; top: 50%; width: 1.375rem; height: 1.375rem; margin-top: -0.6875rem; border-radius: 50%; background: var(--notify); border: 0.1875rem solid #fff; box-sizing: border-box; }
.btn .ic { margin-right: 0.5rem; }
.btn.pri { background: var(--primary); color: var(--onprimary); }
.btn.pri:hover { background: var(--primaryhover); }
.btn.off { color: var(--muted); }
.btn.fullw { display: flex; width: 100%; }
.btn .lbl { min-width: 0; }
/* IconBtn: round, symbol only */
.ib { display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.ib.off { color: #6B7280; }
.ib .lbl10 { position: absolute; font-size: 0.75rem; line-height: 1; font-weight: 500; letter-spacing: 0; }
.hint { position: absolute; z-index: 40; background: rgba(0,0,0,.9); color: #fff; font-size: 0.8125rem; line-height: 1.5; padding: 0.375rem 0.75rem; border-radius: 0.5rem; white-space: nowrap; left: 50%; transform: translateX(-50%); pointer-events: none; }

/* Status line: colour always paired with an icon and text */
.stat { display: flex; align-items: center; font-size: 1rem; }
.stat .ic { width: 1.15em; height: 1.15em; margin-right: 0.5rem; }
.stat > span { min-width: 0; }
.stat.ok { color: var(--success); } .stat.warn { color: var(--warn); } .stat.err { color: var(--danger); }
.stat.meta { font-size: 0.8125rem; }

/* ---------- Header ---------- */
.hdr { display: flex; align-items: center; padding-bottom: 0.75rem; }
.hdr.compact { padding-bottom: 0.5rem; }
.hdr .mascot { width: 3.25rem; height: 3.25rem; object-fit: contain; margin: 0 1rem 0 0; flex: 0 0 auto; }
.hdr.compact .mascot { width: 2.5rem; height: 2.5rem; margin-right: 0.75rem; }
.hdr .ib { margin-right: 1rem; }
.hdr.compact .ib { margin-right: 0.75rem; }
.hdr .title { flex: 1 1 0; min-width: 0; font-size: 2.5rem; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.hdr.compact .title { font-size: 2rem; line-height: 1.2; letter-spacing: 0; }
.hdr.fillt .title { flex: 0 1 auto; max-width: 15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
.hdr.fillt .trail { flex: 1 1 0; min-width: 0; padding-left: 1rem; }
html[lang=ar] .hdr .title { letter-spacing: 0; line-height: 1.3; }
.screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.screen.pad48 { padding: 1.5rem 3rem; }
.screen.sect { padding: 0.625rem 2rem; }
.body { flex: 1 1 0; min-height: 0; display: flex; }

/* ---------- text fields (TvTextField = M3 outlined field + focus ring; CompactSearch) ---------- */
.tf { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; outline: none; }
.tf fieldset { margin: 0; border: 0.0625rem solid var(--cborder); border-radius: 0.25rem; padding: 0 1rem; height: 3.5rem; display: flex; align-items: center; min-width: 0; }
.tf legend { font-size: 0.75rem; line-height: 1rem; color: var(--muted); padding: 0 0.25rem; margin-left: -0.25rem; }
.tf legend.empty { display: none; }
.tf input { background: transparent; border: 0; outline: none; width: 100%; height: 100%; font-size: 1rem; color: var(--text); padding: 0; margin-top: -0.5rem; }
.tf.nolbl input { margin-top: 0; }
.tf.nolbl fieldset { padding-top: 0; }
.tf .ring { position: absolute; left: 0; right: 0; top: 0.5rem; bottom: 0; border-radius: 0.375rem; pointer-events: none; transition: box-shadow 160ms cubic-bezier(0, 0, .2, 1); }
.tf:focus .ring { box-shadow: 0 0 0 0.25rem var(--bg), 0 0 0 0.4375rem var(--focus); }
.tf.editing fieldset { border-color: var(--accent); border-width: 0.125rem; padding: 0 0.9375rem; }
.tf.editing legend { color: var(--accent); }
.tf.nolbl .ring { top: 0; }
.cs { position: relative; height: 2.75rem; display: flex; align-items: center; }
.cs .box { outline: none; }
.cs .box { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; padding: 0 0.75rem; background: var(--item); border: 0.0625rem solid var(--cborder); border-radius: 0.5rem; transition: border-color 160ms; }
.cs .box:focus, .cs .box.editing { border: 0.1875rem solid var(--focus); padding: 0 0.625rem; }
.cs .ic { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; color: var(--muted); }
.cs .box:focus .ic, .cs .box.editing .ic { color: var(--focus); }
.cs input { background: transparent; border: 0; outline: none; flex: 1 1 0; min-width: 0; height: 100%; font-size: 0.9375rem; color: var(--text); padding: 0; }
.cs input::placeholder { color: var(--muted); opacity: 1; }
.cs .clr { margin-left: 0.375rem; width: 2.75rem; height: 2.75rem; }
.cs .clr .ic { width: 1.125rem; height: 1.125rem; margin: 0; color: #fff; }

/* ---------- main screen: 4% margins, bar 15%, gap 3%, tiles 59%, gap 3%, footer 12% ---------- */
.main { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 4vh 4vw; display: flex; flex-direction: column; }
.main .bar { height: 15vh; display: flex; align-items: center; flex: 0 0 auto; }
.main .acts { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
.main .acts .scrollx > * + * { margin-left: 0.5rem; }
.main .tiles { margin-top: 3vh; height: 59vh; display: flex; flex: 0 0 auto; }
.main .tiles > * + * { margin-left: 2.5vw; }
/* Brand lockup: amber symbol (55% of the bar) + wordmark, "IPTV" 400 muted and "Monster" 600; clear space = 1/4 of the symbol */
.lock { display: flex; align-items: center; padding: 2.0625vh; max-width: 45vw; flex: 0 0 auto; }
.lock img { width: 8.25vh; height: 8.25vh; object-fit: contain; flex: 0 0 auto; margin-right: 2.0625vh; }
.lock .w { font-size: 3.795vh; line-height: 1.5; white-space: nowrap; }
.lock .w1 { color: var(--muted); font-weight: 400; margin-right: .99vh; }
.lock .w2 { color: var(--text); font-weight: 600; }
/* Calm section tile: item fill at 30% until focused, 10 radius, bare accent icon, page-heading title, quiet count */
.tile { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tile .ic { width: 11.8vh; height: 11.8vh; color: var(--accent); }
.tile .tl { margin-top: 3.54vh; font-size: 2.5rem; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html[lang=ar] .tile .tl { letter-spacing: 0; line-height: 1.3; }
.tile .cnt { font-size: 0.8125rem; color: var(--muted); }
.main .foot { margin-top: 3vh; height: 12vh; display: flex; align-items: flex-end; flex: 0 0 auto; }
.main .foot > div { flex: 1 1 0; min-width: 0; font-size: 0.8125rem; line-height: 1.5; display: flex; flex-direction: column; justify-content: flex-end; }
.main .foot .r { text-align: right; align-items: flex-end; margin-left: 1rem; }
.main .foot .r > .dim { text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- lists / grid ---------- */
.sidecol { display: flex; flex-direction: column; min-height: 0; }
.sidecol > * + * { margin-top: 0.375rem; }
.catlist { flex: 1 1 0; min-height: 0; padding: 0.5rem; }
.catlist > * + * { margin-top: 0.5rem; }
.catlist .btn { width: 100%; }
.grid { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 0.375rem; height: 100%; overflow-y: auto; overflow-x: hidden; }
.card { width: calc((100% - 6 * 0.5rem) / 7); margin: 0 0.5rem 0.5rem 0; }
.card:nth-child(7n) { margin-right: 0; }
.card .pic { position: relative; width: 100%; padding-top: 150%; background: var(--panel); overflow: hidden; }
.card .pic > * { position: absolute; }
.card .pic img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.card .pic .ini { left: 0; right: 0; top: 50%; margin-top: -1.625rem; text-align: center; font-size: 2.5rem; line-height: 3.25rem; color: var(--muted); }
.card .star { right: 0.375rem; top: 0.375rem; background: rgba(0,0,0,.667); border-radius: 0.375rem; padding: 0 0.375rem; color: var(--accent); }
.card .unav { left: 0; right: 0; top: 50%; text-align: center; background: rgba(0,0,0,.8); padding: 0.375rem; color: var(--warn); font-size: 0.875rem; transform: translateY(-50%); }
.card .badge { left: 0.25rem; bottom: 0.5625rem; background: rgba(0,0,0,.8); border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.75rem; line-height: 1rem; }
.card .badge.hot { background: var(--notify); color: #fff; font-weight: 600; }
.pbar { left: 0; right: 0; bottom: 0; height: 0.3125rem; background: rgba(0,0,0,.6); }
.pbar i { display: block; height: 100%; background: var(--accent); }
.card .nmw { padding: 0.25rem 0.375rem; }
.card .nm { text-align: center; height: calc(2 * var(--tl)); line-height: var(--tl); font-size: var(--ts); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; --ts: 0.6875rem; --tl: 0.875rem; }
.center { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; }
.spin { width: 3rem; height: 3rem; border: 0.25rem solid var(--divider); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.spin.sm { width: 1.75rem; height: 1.75rem; border-width: 0.1875rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* live */
.chrow { display: flex; align-items: center; padding: 0.375rem; min-height: 3.25rem; }
.chrow .lg { width: 2.25rem; height: 2.25rem; background: var(--panel); flex: 0 0 auto; margin-right: 0.5rem; }
.chrow .lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chrow .cn { flex: 1 1 0; min-width: 0; font-size: 0.875rem; line-height: 1.0625rem; }
.chrow .st { color: var(--accent); margin-left: 0.375rem; }
.chlist { padding: 0.5rem; flex: 1 1 0; min-height: 0; }
.chlist > * + * { margin-top: 0.375rem; }
.prev16 { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.prev16 .ph { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--muted); }

/* details */
.poster { background: var(--panel); position: relative; overflow: hidden; }
.poster img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.dpad { padding: 0.75rem; border-radius: 0.75rem; background: rgba(36,39,45,.55); border: 0.125rem solid transparent; outline: none; transition: border-color 160ms; }
.dpad:focus { border-color: var(--focus); }
.infoline { font-size: 0.8125rem; }
.infoline b { color: var(--muted); font-weight: 600; }
.cast { display: flex; overflow-x: auto; padding: 0.5rem 0.375rem; }
.cast > * { flex: 0 0 6.25rem; margin-right: 0.625rem; }
.cast .nm { padding: 0.25rem 0.375rem; text-align: center; font-size: 0.8125rem; line-height: 1.5; height: 3.25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cast .ro { padding: 0 0.375rem 0.375rem; text-align: center; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast .ph { position: relative; width: 100%; padding-top: 150%; background: var(--panel); }
.cast .ph > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cast .ph .ini { display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 2rem; font-weight: 600; }
.ep { display: flex; align-items: center; padding: 0.375rem; }
.ep .th { position: relative; width: 10rem; padding-top: 5.625rem; flex: 0 0 10rem; background: var(--panel); margin-right: 0.75rem; overflow: hidden; }
.ep .th img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.ep .th .w { position: absolute; left: 0.25rem; top: 0.25rem; background: rgba(0,0,0,.8); border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.8125rem; line-height: 1.3; }

/* ---------- modal (Dialog) ---------- */
.scrim { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 60; }
.dlg { background: var(--panel); border: 0.0625rem solid var(--divider); border-radius: 1.25rem; padding: 1.5rem; min-width: 20rem; max-width: 35rem; max-height: calc(100vh - 2rem); overflow-y: auto; color: var(--text); }
.dlg > * + * { margin-top: 0.625rem; }
.dlg h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; }

/* ---------- player ---------- */
#vbox { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #000; display: none; z-index: 5; overflow: hidden; }
#vbox.on { display: block; }
#vbox.slot { pointer-events: none; }
#vid { position: absolute; background: #000; object-fit: fill; }
#pl { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; background: transparent; display: none; }
#pl.on { display: block; }
#pl .ctl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 1; transition: opacity 250ms; }
#pl .ctl.hide { opacity: 0; pointer-events: none; }
#pl .gt { position: absolute; left: 0; right: 0; top: 0; height: 7.5rem; background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,0)); }
#pl .top { position: absolute; left: 0; top: 0; padding: 1.5rem 3rem; display: flex; align-items: center; max-width: 100%; }
#pl .top .tt { font-size: 2rem; line-height: 1.2; font-weight: 600; min-width: 0; }
#pl .top .live { color: var(--danger); font-weight: 600; margin-left: 1rem; white-space: nowrap; }
/* D24 bottom block. Every size is a share of the screen height from the 1080p design (148 px block = 13.7vh, never above 15) */
#pl .blk { position: absolute; left: 2.5vw; right: 2.5vw; bottom: 2.222vh; height: 13.7vh; padding: .926vh 2.222vh; border-radius: 1.481vh; background: rgba(var(--bg-rgb), .4); }
#pl .blk::before { content: ""; position: absolute; left: 1.481vh; right: 1.481vh; top: 0; height: 1px; background: rgba(var(--text-rgb), .14); }
#pl .r1 { height: 3.704vh; display: flex; align-items: center; }
#pl .r1 > * + * { margin-left: 1.111vh; }
#pl .r2 { height: 7.407vh; margin-top: .741vh; display: flex; align-items: center; justify-content: space-between; }
#pl .r2.scroll { justify-content: flex-start; overflow-x: auto; }
#pl .r2.scroll > * + * { margin-left: .741vh; }
#pl .r2 > .grp { display: flex; align-items: center; }
#pl .tm { font-size: 2.037vh; line-height: 1.2; white-space: nowrap; min-width: 5.926vh; }
#pl .tm.rem { color: var(--muted); text-align: right; min-width: 6.667vh; }
#pl .small { font-size: 1.667vh; }
.pb { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 7.407vh; height: 7.407vh; border-radius: 1.111vh; color: rgba(var(--text-rgb), .88); }
.pb.rect { width: 12.037vh; }
.pb.r1 { width: 3.704vh; height: 3.704vh; }
.pb .ic { width: 3.333vh; height: 3.333vh; }
.pb.r1 .ic { width: 2.963vh; height: 2.963vh; }
.pb.off, .pb.off:focus { color: #6B7280; background: transparent; box-shadow: none; cursor: default; }
.pb .val { font-size: 1.667vh; font-weight: 600; color: rgba(var(--text-rgb), .9); white-space: nowrap; }
.pb .hint { z-index: 50; }
.seek { position: relative; flex: 1 1 0; min-width: 0; height: 3.704vh; display: flex; align-items: center; cursor: pointer; outline: none; }
.seek .tr { position: absolute; left: 0; right: 0; height: .556vh; background: var(--divider); border-radius: .278vh; }
.seek .fl { position: absolute; left: 0; height: .556vh; background: var(--accent); border-radius: .278vh; }
.seek:focus .tr, .seek:focus .fl { height: .926vh; border-radius: .463vh; }
.seek .kn { position: absolute; width: 1.111vh; height: 1.111vh; margin-left: -.556vh; border-radius: 50%; background: var(--accent); }
.seek:focus .kn { width: 1.852vh; height: 1.852vh; margin-left: -.926vh; }
.seek .tip { position: absolute; top: -2.9vh; width: 8.5vh; margin-left: -4.25vh; text-align: center; border-radius: .6vh; background: rgba(var(--panel-rgb), .92); font-size: 1.667vh; line-height: 1.5; padding: .2vh 0; display: none; }
.seek:focus .tip { display: block; }
.badge-live { background: #D32F3F; border-radius: 0.25rem; padding: .37vh .81vh; font-size: 1.667vh; font-weight: 600; color: #fff; white-space: nowrap; }
.noseek { color: var(--warn); font-size: 1.667vh; flex: 1 1 0; }
/* paused with the controls hidden: a large thin Play symbol stays on screen */
#pglyph { position: absolute; left: 50%; top: 50%; width: 23.1vh; height: 23.1vh; margin: -11.55vh 0 0 -11.55vh; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.4), rgba(0,0,0,0) 70%); display: none; align-items: center; justify-content: center; color: rgba(var(--text-rgb), .92); }
#pglyph.on { display: flex; }
#pglyph .ic { width: 8.889vh; height: 8.889vh; }
/* seek read-out while the controls are hidden */
#phud { position: absolute; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; background: rgba(var(--panel-rgb), .85); border-radius: 1.481vh; padding: 1.63vh 2.963vh; }
#phud.on { display: flex; }
#phud .hr { display: flex; align-items: center; }
#phud .hr .ic { width: 3.333vh; height: 3.333vh; color: var(--accent); margin-right: 0.5rem; }
#phud .hd { font-size: 2.648vh; font-weight: 600; }
#phud .ht { font-size: 1.667vh; color: var(--muted); }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--video); border-radius: 0.75rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; max-height: calc(100vh - 2rem); overflow-y: auto; z-index: 35; }
.panel > * + * { margin-top: 0.375rem; }
.panel.sm { padding: 0.625rem; }
.cue { position: absolute; right: 3rem; bottom: 2.5rem; width: 21.25rem; background: rgba(0,0,0,.867); border-radius: 0.625rem; padding: 0.625rem; z-index: 34; }
.cue.up { bottom: calc(15.922vh + 1rem); }
.cue > * + * { margin-top: 0.375rem; }
.cue .th { position: relative; width: 7.5rem; padding-top: 4.21875rem; background: var(--panel); flex: 0 0 7.5rem; margin-right: 0.625rem; overflow: hidden; }
.cue .th img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#vstat { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 33; pointer-events: none; display: none; }
#vstat.on { display: block; }
#vstat .spin { position: absolute; left: 50%; top: 50%; margin: -1.5rem 0 0 -1.5rem; }
#vstat .spin.sm { margin: -1rem 0 0 -1rem; width: 2rem; height: 2rem; }
#vstat .panel { pointer-events: auto; }
#toast { position: fixed; left: 50%; top: 1.5rem; transform: translateX(-50%); background: var(--item); border: 0.0625rem solid var(--divider); border-radius: 0.75rem; padding: 0.5rem 1rem; z-index: 90; display: none; }
#toast.on { display: block; }