/*
 * Mock Vistu UI. A screen is laid out at its real logical size (dp on Android, pt on Apple:
 * 1 CSS px = 1 dp/pt) and scaled into the device frame, so proportions match the apps.
 * Values come from the apps' code: android/ui/{mobile,tv,shared} and clickr-ios/App (the iOS repo keeps its old folder name for now).
 */

.ck {
  --primary: #8AB4F8;
  --on-primary: #0B1B33;
  --bg: #0E1116;
  --surface: #0E1116;
  --sc: #1A1F28;            /* surfaceContainer */
  --sch: #232A36;           /* surfaceContainerHigh */
  --sv: #1B2230;            /* surfaceVariant */
  --sec-c: #2A3A57;         /* secondaryContainer */
  --on: #E3E6EB;
  --on-v: #B4BCC8;
  --outline: #3A4250;
  --fav: #8AB4F8;
  --live: #D32F2F;
  --g-movie: #B388FF; --g-sport: #4CD787; --g-news: #5AB0FF; --g-kids: #FFC24A; --g-ent: #FF7AB0; --g-doc: #3FD0C4;
  position: absolute; left: 0; top: 0; overflow: hidden;
  background: var(--bg); color: var(--on);
  font-family: Roboto, 'Google Sans', system-ui, sans-serif;
  transform-origin: 0 0;
  -webkit-font-smoothing: antialiased;
}
.ck.ios {
  --primary: #8AB4F8; --bg: #000; --surface: #000; --sc: #1C1C1E; --sch: #2C2C2E; --sv: #1C1C1E;
  --q: rgba(118,118,128,.24); --on: #fff; --on-v: rgba(235,235,245,.6); --fav: #FF375F; --outline: rgba(84,84,88,.6);
  font-family: -apple-system, 'SF Pro Text', 'SF Pro', Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.ck.tv { --bg: #0E1116; }
.ck.ios.tv { --bg: #0B0B0F; }
.ck * { box-sizing: border-box; }
.ck .ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; }
.ck.ios .ms { font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24; }
.ck.ios .ms.f, .ck .ms.f { font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' 0, 'opsz' 24; }

.ck .col { display: flex; flex-direction: column; }
.ck .col > *, .ck .content > * { flex-shrink: 0; }
.ck .row { display: flex; align-items: center; }
.ck .grow { flex: 1; min-width: 0; }
.ck .muted { color: var(--on-v); }
.ck .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck .accent { color: var(--primary); }

/* Status bars */
.ck .sb { height: 36px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; flex: none; }
.ck .sb .ic { display: flex; gap: 4px; align-items: center; }
.ck .sb .ms { font-size: 17px; }
.ck.ios .sb { height: 62px; padding: 18px 40px 0 48px; font-size: 17px; font-weight: 600; }
.ck.ios .sb .ms { font-size: 19px; }
.ck .home-ind { position: absolute; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: rgba(255,255,255,.85); z-index: 50; }
.ck.android .home-ind { width: 108px; margin-left: -54px; height: 4px; bottom: 6px; background: rgba(255,255,255,.6); }

/* Logo */
.ck .logo-strip { padding: 8px 16px 2px; flex: none; }
.ck.ios .logo-strip { padding: 4px 16px 2px; }

/* Shell: phone */
.ck .shell { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ck .content { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.ck .navbar { flex: none; height: 80px; background: #161B22; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 12px; }
.ck .navbar .it { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-v); font-size: 12px; font-weight: 500; }
.ck .navbar .pill { width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.ck .navbar .it.on .pill { background: var(--sec-c); color: #D6E3FF; }
.ck .navbar .it.on { color: var(--on); }
.ck .navbar .ms { font-size: 24px; }
.ck.ios .navbar { height: 86px; background: rgba(22,22,24,.94); border-top: .5px solid rgba(84,84,88,.65); padding: 4px 6px 0; }
.ck.ios .navbar .it { width: auto; flex: 1; height: 52px; justify-content: center; gap: 2px; font-size: 10px; margin: 0 2px; border-radius: 12px; color: rgba(235,235,245,.6); }
.ck.ios .navbar .it.on { background: rgba(138,180,248,.15); color: var(--primary); font-weight: 600; }
.ck.ios .navbar .pill { width: auto; height: auto; background: none !important; color: inherit !important; }
.ck.ios .navbar .ms { font-size: 22px; }

/* Shell: rail (tablet, foldable) */
.ck .shell.wide { flex-direction: row; }
.ck .rail { flex: none; width: 80px; display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 12px; background: var(--bg); }
.ck .rail .it { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--on-v); }
.ck .rail .pill { width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.ck .rail .it.on .pill { background: var(--sec-c); color: #D6E3FF; }
.ck .rail .it.on { color: var(--on); }
.ck .rail .ms { font-size: 24px; }
.ck .rail .items { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ck.ios .rail { width: 88px; background: rgba(22,22,24,.94); border-right: .5px solid rgba(84,84,88,.65); gap: 4px; }
.ck.ios .rail .items { gap: 4px; margin-top: 12px; }
.ck.ios .rail .it { width: 76px; height: 60px; justify-content: center; border-radius: 12px; font-size: 11px; color: rgba(235,235,245,.6); gap: 3px; }
.ck.ios .rail .it.on { background: rgba(138,180,248,.15); color: var(--primary); font-weight: 600; }
.ck.ios .rail .pill { width: auto; height: auto; background: none !important; color: inherit !important; }

/* Shell: TV side menu */
.ck .tvmenu { position: absolute; left: 0; top: 0; bottom: 0; width: 88px; padding: 12px; display: flex; flex-direction: column; z-index: 20; }
.ck .tvmenu .items { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ck .tvmenu .it { height: 40px; border-radius: 20px; display: flex; align-items: center; gap: 14px; padding: 0 16px; color: var(--on-v); font-size: 14px; font-weight: 500; }
.ck .tvmenu .it .ms { font-size: 22px; }
.ck .tvmenu .it.on { color: var(--on); background: rgba(138,180,248,.16); }
.ck .tvmenu .it.focus { background: var(--on); color: #0E1116; transform: scale(1.04); }
.ck .tvmenu.open { width: 250px; background: linear-gradient(90deg, rgba(14,17,22,.98) 70%, rgba(14,17,22,.85)); box-shadow: 30px 0 60px rgba(0,0,0,.6); }
.ck .tvmenu:not(.open) .it { width: 56px; padding: 0 17px; }
.ck .tvmenu:not(.open) .lbl { display: none; }
.ck.ios .tvmenu { width: 120px; padding: 40px 12px; }
.ck.ios .tvmenu .items { gap: 10px; }
.ck.ios .tvmenu .it { height: 68px; border-radius: 14px; font-size: 29px; gap: 20px; padding: 0 12px; }
.ck.ios .tvmenu .it .ms { font-size: 34px; width: 48px; text-align: center; }
.ck.ios .tvmenu:not(.open) .it { width: 72px; }
.ck.ios .tvmenu.open { width: 380px; background: rgba(40,40,46,.82); backdrop-filter: blur(40px); box-shadow: 30px 0 80px rgba(0,0,0,.5); }
.ck.ios .tvmenu .it.on { color: var(--primary); background: rgba(138,180,248,.2); }
.ck.ios .tvmenu .it.focus { background: #fff; color: #000; transform: scale(1.05); }

/* Headers */
.ck .hdr { display: flex; align-items: center; padding: 8px 4px 8px 16px; flex: none; }
.ck .hdr h1 { font-size: 28px; font-weight: 400; margin: 0; flex: 1; display: flex; align-items: center; gap: 6px; }
.ck .hdr .btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--on-v); }
.ck .hdr .btn .ms { font-size: 24px; }
.ck.ios .hdr { gap: 8px; padding: 8px 16px; border-bottom: .5px solid var(--outline); }
.ck.ios .hdr h1 { font-size: 17px; font-weight: 600; }
.ck.ios .hdr .btn { width: 40px; height: 36px; color: var(--primary); }
.ck.ios .hdr .btn .ms { font-size: 22px; }
.ck.ios .large-title { font-size: 34px; font-weight: 700; padding: 6px 16px 8px; letter-spacing: .01em; }

/* Guide */
.ck .guide { position: relative; overflow: hidden; flex: 1; }
.ck .g-time { position: absolute; top: 0; height: var(--hh); font-size: 11px; font-weight: 500; color: var(--on-v); display: flex; align-items: center; padding-left: 6px; white-space: nowrap; }
.ck.ios .g-time { font-size: 12px; font-weight: 400; }
.ck.ios .g-time::before { content: ''; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: rgba(235,235,245,.3); }
.ck .g-ch { position: absolute; left: 0; width: var(--cw); background: var(--sch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.ck.ios .g-ch { background: none; }
.ck .g-ch img, .ck .g-ch .lg { width: var(--lw); height: var(--lh); }
.ck .g-ch .nm { font-size: 11px; font-weight: 500; max-width: 100%; display: flex; gap: 2px; align-items: center; }
.ck .g-ch .nm .ms { font-size: 10px; color: var(--fav); }
.ck .g-p { position: absolute; border-radius: 4px; background: var(--sc); padding: 3px 6px 3px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.ck .g-p.now { background: var(--sec-c); }
.ck .g-p .t { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ck .g-p .s { font-size: 11px; color: var(--on-v); white-space: nowrap; }
.ck .g-p.genre::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc); }
.ck .g-p.genre::after { content: ''; position: absolute; inset: 0; background: var(--gc); opacity: .16; pointer-events: none; }
.ck .g-p > * { position: relative; z-index: 1; }
.ck.ios .g-p { background: var(--q); padding: 0 8px; gap: 2px; }
.ck.ios .g-p.now { background: rgba(138,180,248,.28); }
.ck.ios .g-p .t { font-size: 16px; font-weight: 400; }
.ck.ios .g-p .s { font-size: 12px; }
.ck .g-p.focus { background: var(--on) !important; color: #0E1116; outline: 2px solid var(--on); }
.ck .g-p.focus .s { color: #3a4250; }
.ck .g-p.focus::after, .ck .g-p.focus::before { display: none; }
.ck .badge { font-size: 9px; font-weight: 700; letter-spacing: .5px; border-radius: 3px; padding: 1px 4px; line-height: 1.25; flex: none; }
.ck .badge.live { background: var(--live); color: #fff; }
.ck .badge.new { background: var(--primary); color: var(--on-primary); }
.ck .g-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 5; }
.ck .g-now::before { content: ''; position: absolute; top: calc(var(--hh) - 8px); left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: none; }
.ck.tv .g-now { width: 3px; }
.ck.ios.tv .g-now { width: 4px; }

/* TV guide pieces */
.ck .tv-body { position: absolute; top: 0; bottom: 0; right: 0; display: flex; flex-direction: column; }
.ck .tv-head { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 12px; flex: none; }
.ck .obtn { height: 36px; border-radius: 18px; border: 1px solid var(--outline); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--on); }
.ck .obtn .ms { font-size: 18px; }
.ck .fbtn { height: 36px; border-radius: 18px; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 14px; font-weight: 500; }
.ck .fbtn .ms, .ck .tbtn .ms { font-size: 18px; }
.ck .tbtn { height: 36px; border-radius: 18px; background: var(--sch); color: var(--on); display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 14px; font-weight: 500; }
.ck .details { display: flex; gap: 16px; padding: 8px 24px; flex: none; }
.ck .details .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck .details .cn { font-size: 14px; font-weight: 500; color: var(--on-v); }
.ck .details .pt { font-size: 24px; }
.ck .details .meta { font-size: 14px; color: var(--primary); }
.ck .details .ds { font-size: 13px; color: var(--on-v); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ck .preview { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; position: relative; flex: none; }
.ck .preview svg, .ck .video svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* iOS TV guide */
.ck.ios.tv .obtn { height: 66px; border-radius: 12px; border: none; background: rgba(255,255,255,.1); font-size: 27px; padding: 0 28px; gap: 14px; }
.ck.ios.tv .obtn .ms { font-size: 30px; }
.ck.ios.tv .details .cn { font-size: 25px; font-weight: 600; }
.ck.ios.tv .details .pt { font-size: 38px; font-weight: 700; }
.ck.ios.tv .details .meta { font-size: 29px; }
.ck.ios.tv .details .ds { font-size: 25px; }
.ck.ios.tv .g-ch { flex-direction: row; justify-content: flex-start; gap: 20px; padding: 0 20px; }
.ck.ios.tv .g-ch .nm { font-size: 29px; font-weight: 400; }
.ck.ios.tv .g-p .t { font-size: 29px; }
.ck.ios.tv .g-p .s { font-size: 23px; }
.ck.ios.tv .g-p { padding: 0 16px; gap: 4px; border-radius: 6px; }
.ck.ios.tv .g-time { font-size: 23px; }
.ck.android.tv .g-ch { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 6px; background: rgba(27,34,48,.6); }
.ck.android.tv .g-ch .nm { font-size: 14px; }
.ck.android.tv .g-p { background: rgba(27,34,48,.45); padding: 4px 8px 4px 10px; }
.ck.android.tv .g-p.now { background: var(--sv); }
.ck.android.tv .g-p .t { font-size: 14px; }
.ck.android.tv .g-p .s { font-size: 11px; opacity: .7; color: var(--on); }
.ck.android.tv .g-time { font-size: 12px; }

/* Lists and chips */
.ck .chips { display: flex; gap: 8px; padding: 4px 16px 10px; overflow: hidden; flex: none; }
.ck .chip { height: 32px; border-radius: 8px; border: 1px solid var(--outline); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--on-v); }
.ck .chip.on { background: var(--sec-c); border-color: transparent; color: #D6E3FF; }
.ck .chip.on .ms { font-size: 18px; }
.ck.ios .chip { border: none; border-radius: 999px; background: var(--q); color: var(--on); font-size: 15px; height: 30px; }
.ck.ios .chip.on { background: var(--primary); color: #fff; }
.ck .sec-h { font-size: 16px; font-weight: 500; padding: 12px 16px 8px; display: flex; justify-content: space-between; align-items: center; }
.ck.ios .sec-h { font-size: 17px; font-weight: 600; }
.ck .sec-h .more { font-size: 14px; color: var(--primary); font-weight: 500; }

/* Posters */
.ck .poster { border-radius: 8px; overflow: hidden; aspect-ratio: 2/3; position: relative; background: var(--sv); }
.ck .poster svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ck .pgrid { display: grid; gap: 16px 12px; padding: 0 16px; }
.ck .pcell .pt { font-size: 12px; font-weight: 500; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck.ios .pcell .pt { font-size: 12px; font-weight: 400; }
.ck .prow { display: flex; gap: 12px; padding: 0 16px; overflow: hidden; }
.ck .cw { flex: none; }
.ck .cw .card { border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 16/9; }
.ck .cw .card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck .cw .card .play { position: absolute; left: 8px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.ck .cw .card .play .ms { font-size: 18px; color: #fff; }
.ck .prog { height: 4px; border-radius: 2px; background: rgba(227,230,235,.2); overflow: hidden; }
.ck .prog i { display: block; height: 100%; background: var(--primary); border-radius: 2px; }
.ck .cw .t { font-size: 14px; font-weight: 500; margin-top: 6px; }
.ck .cw .s { font-size: 11px; color: var(--on-v); }

/* Channel list rows */
.ck .chrow { display: flex; gap: 14px; align-items: center; padding: 10px 16px; }
.ck .chrow .lg { width: 64px; height: 44px; border-radius: 6px; overflow: hidden; flex: none; }
.ck .chrow .lg svg, .ck .g-ch svg { width: 100%; height: 100%; display: block; }
.ck .chrow .nm { font-size: 16px; font-weight: 500; }
.ck .chrow .nw { font-size: 14px; color: var(--on-v); }
.ck .chrow .nx { font-size: 12px; color: var(--on-v); }
.ck .divider { height: 1px; background: rgba(255,255,255,.08); margin-left: 94px; }

/* Buttons */
.ck .btn-f { height: 40px; border-radius: 20px; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; font-size: 14px; font-weight: 500; }
.ck .btn-o { height: 40px; border-radius: 20px; border: 1px solid var(--outline); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; font-size: 14px; font-weight: 500; }
.ck .btn-f .ms, .ck .btn-o .ms { font-size: 18px; }
.ck.ios .btn-f { border-radius: 12px; height: 44px; color: #0a1a33; font-size: 17px; font-weight: 600; }
.ck.ios .btn-o { border-radius: 12px; height: 44px; border: none; background: rgba(138,180,248,.15); font-size: 17px; }

/* Inputs */
.ck .field { border: 1px solid var(--outline); border-radius: 4px; height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; font-size: 16px; position: relative; }
.ck .field.focus { border: 2px solid var(--primary); }
.ck .field label { position: absolute; top: -9px; left: 12px; font-size: 12px; background: var(--bg); padding: 0 4px; color: var(--on-v); }
.ck .field.focus label { color: var(--primary); }
.ck .field .ms { color: var(--on-v); font-size: 24px; }
.ck.ios .field { border: none; background: var(--sc); border-radius: 10px; height: 44px; font-size: 17px; }
.ck.ios .field label { display: none; }
.ck .caret { display: inline-block; width: 2px; height: 20px; background: var(--primary); vertical-align: middle; margin-left: 1px; }

/* Player */
.ck .video { position: absolute; inset: 0; background: #000; }
.ck .scrim-t { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(rgba(0,0,0,.7), transparent); }
.ck .scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* Settings */
.ck .card-s { background: var(--sc); border-radius: 12px; padding: 16px; }
.ck .seg { display: flex; border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; height: 40px; }
.ck .seg div { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; }
.ck .seg div + div { border-left: 1px solid var(--outline); }
.ck .seg .on { background: var(--sec-c); color: #D6E3FF; }
.ck .seg .ms { font-size: 18px; }
.ck.ios .seg { border: none; background: rgba(118,118,128,.24); border-radius: 9px; height: 32px; padding: 2px; }
.ck.ios .seg div + div { border: none; }
.ck.ios .seg .on { background: #636366; color: #fff; border-radius: 7px; }
.ck .switch { width: 52px; height: 32px; border-radius: 16px; background: var(--primary); position: relative; flex: none; }
.ck .switch::after { content: ''; position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--on-primary); }
.ck .switch.off { background: var(--sch); border: 2px solid var(--outline); }
.ck .switch.off::after { left: 6px; right: auto; top: 6px; width: 16px; height: 16px; background: var(--outline); }
.ck.ios .switch { background: #34C759; width: 51px; height: 31px; }
.ck.ios .switch::after { background: #fff; width: 27px; height: 27px; top: 2px; right: 2px; }
.ck.ios .switch.off { background: rgba(120,120,128,.32); border: none; }
.ck.ios .switch.off::after { left: 2px; top: 2px; width: 27px; height: 27px; background: #fff; }
.ck .form-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: 16px; }

/* Art title overlay */
.art-title { color: #fff; line-height: .95; text-shadow: 0 2px 20px rgba(0,0,0,.5); display: block; }
.ck.tv .g-p.focus .s { color: #3a4250; opacity: 1; }