/* Совместимо со старыми ТВ-браузерами (Tizen/webOS, ~Chromium 47):
   без CSS-переменных, grid, gap, :has(), aspect-ratio, backdrop-filter, sticky. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0b0d12;color:#eef1f7;font-family:Arial,'Segoe UI',Tahoma,sans-serif}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;border:0}

/* фокус для пульта */
.focusable{outline:none;-webkit-transition:all .12s ease;transition:all .12s ease}
.focusable:focus{box-shadow:0 0 0 4px #ffffff,0 8px 24px rgba(0,0,0,.6);-webkit-transform:scale(1.06);transform:scale(1.06);position:relative;z-index:5}

body.is-login #app{display:none}
body.is-app #login{display:none}

/* ===== ВХОД ===== */
.login{min-height:100%;text-align:center;padding-top:5%}
.login__box{display:inline-block;width:420px;max-width:92%;background:#11141c;border-radius:20px;padding:34px 26px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.login__title{font-size:36px;font-weight:bold}
.login__hint{color:#8b93a7;margin-top:8px;font-size:18px}
.pin{height:36px;margin:22px 0 6px;text-align:center}
.pin__dot{display:inline-block;width:18px;height:18px;border-radius:50%;background:#2a3142;margin:0 7px;vertical-align:middle}
.pin__dot.on{background:#ff5252}
.login__err{color:#ff5252;font-size:18px;margin-bottom:6px}
.numpad{width:312px;max-width:100%;margin:14px auto 0;text-align:center;font-size:0}
.key{display:inline-block;width:92px;height:84px;line-height:84px;margin:6px;background:#161a24;border-radius:14px;font-size:30px;font-weight:bold;vertical-align:top;text-align:center}
.key--ok{background:#ff5252;color:#fff}
.key--act{background:#1d2230;font-size:30px}

/* ===== ПРИЛОЖЕНИЕ ===== */
.app{min-height:100%;padding-bottom:50px}
.topbar{padding:16px 36px;background:#0e1118;border-bottom:1px solid #1d2230}
.topbar:after{content:"";display:block;clear:both}
.brand{float:left;font-size:22px;font-weight:bold;letter-spacing:2px;color:#ff5252;line-height:46px;margin-right:18px}
.tab{display:inline-block;font-size:20px;padding:11px 22px;border-radius:30px;background:#161a24;font-weight:bold;margin-right:10px;vertical-align:middle}
.tab.is-active{background:#ff5252;color:#fff}
.tab--ghost{float:right;background:none;color:#8b93a7}

.view{display:none;padding:16px 36px}
.view.is-active{display:block}
.view__title{font-size:24px;font-weight:bold;margin:6px 0 18px}

/* сетка постеров — inline-block, без grid */
.grid{text-align:center;font-size:0}
.card{display:inline-block;width:180px;margin:12px;background:#161a24;border-radius:12px;overflow:hidden;text-align:left;vertical-align:top;font-size:14px}
.poster-wrap{position:relative;width:100%;height:0;padding-top:150%;background:#0a0c11}
.card__poster{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.poster-ph{position:absolute;top:42%;left:0;width:100%;text-align:center;color:#8b93a7;font-size:16px}
.card__body{padding:10px 12px 14px}
.card__title{font-size:16px;font-weight:bold;line-height:1.25;height:40px;overflow:hidden}
.card__meta{margin-top:6px;color:#8b93a7;font-size:13px}
.card__rating{color:#ffd166;font-weight:bold;margin-right:8px}

.empty{color:#8b93a7;font-size:20px;padding:30px 4px}

/* ===== ПОИСК ===== */
.search{margin:6px 0 16px}
.search__field{min-height:58px;line-height:58px;background:#161a24;border-radius:12px;padding:0 20px;font-size:26px;white-space:nowrap;overflow:hidden}
.search__caret{display:inline-block;width:2px;height:28px;background:#ff5252;vertical-align:middle;margin-left:3px}
.search__hint{color:#8b93a7;font-size:15px;margin-top:8px}
.osk{margin:10px 0 22px;text-align:center;font-size:0}
.osk__key{display:inline-block;min-width:60px;height:58px;line-height:58px;margin:6px;padding:0 12px;background:#161a24;border-radius:10px;font-size:24px;font-weight:bold;vertical-align:top;text-align:center}
.osk__key--wide{min-width:150px}
.osk__key--act{background:#1d2230;color:#3da9fc;font-size:20px}

/* ===== ПЛЕЕР ===== */
.player{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:50}
.player__bar{position:absolute;top:0;left:0;right:0;height:58px;background:rgba(8,10,14,.92);white-space:nowrap;overflow-x:auto;overflow-y:hidden;z-index:2;padding:0 6px}
.player__bar::-webkit-scrollbar{height:0;width:0}
.player__back{display:inline-block;margin:9px 8px;font-size:18px;background:rgba(255,255,255,.16);padding:9px 16px;border-radius:10px;font-weight:bold;vertical-align:middle}
.player__title{display:inline-block;color:#fff;font-size:18px;font-weight:bold;vertical-align:middle;max-width:320px;overflow:hidden;white-space:nowrap;margin:0 10px}
.player__trans{display:inline-block;vertical-align:middle}
.trans{display:inline-block;background:#1d2230;color:#cdd3df;border-radius:8px;padding:9px 14px;margin:0 5px;font-size:16px;font-weight:bold;vertical-align:middle}
.trans.is-active{background:#ff5252;color:#fff}
.player__host{position:absolute;top:58px;left:0;right:0;bottom:0}
.player__host .kinobox,.player__host iframe{width:100%;height:100%;border:0}

/* тост */
.toast{position:fixed;left:0;right:0;bottom:36px;text-align:center;z-index:80}
.toast b{display:inline-block;font-weight:normal;background:#000;border:1px solid #333;padding:12px 22px;border-radius:10px;font-size:18px}

/* ===== РЯДЫ (Netflix-стиль) ===== */
.rows{padding:6px 0 30px}
.row{margin:0 0 26px}
.row__title{font-size:22px;font-weight:bold;margin:0 36px 10px;color:#eef1f7}
.row__track{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:8px 36px 16px}
.row__track::-webkit-scrollbar{height:0;width:0;background:transparent}
.row .card{display:inline-block;width:158px;margin:0 14px 0 0;white-space:normal}
.row .card__title{height:38px;font-size:15px}

/* ошибка/повтор в плеере */
.player__err{color:#eef1f7;text-align:center;padding:8% 20px;font-size:21px}
.player__err .btn{display:inline-block;margin-top:20px;background:#ff5252;color:#fff;padding:13px 30px;border-radius:10px;font-size:20px;font-weight:bold}
.player__loading{color:#8b93a7;text-align:center;padding:8% 20px;font-size:20px}