/* IPTV da Casa - Smart TV. Tela de 1920x1080 (escalada para a resolução da TV). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #07080A; color: #F9FAFB;
  font-family: "Samsung One", "LG Smart UI", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html.playing, body.playing, body.playing #stage { background: transparent; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #07080A; overflow: hidden;
  -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.hidden { display: none !important; }
.abs { position: absolute; }
img { border: 0; }

/* ---------- carregando / ativação ---------- */
#loading { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 50;
  background: radial-gradient(circle at center, #131A29 0%, #07080A 70%); text-align: center; }
#loading img { width: 150px; height: 150px; border-radius: 30px; margin-top: 330px; }
#loading .t { font-size: 42px; font-weight: 700; margin-top: 26px; }
#loading .m { font-size: 24px; color: #9CA3AF; margin-top: 14px; }
.spinner { width: 46px; height: 46px; margin: 30px auto 0; border: 5px solid rgba(255,255,255,0.12);
  border-top-color: #E5A93C; border-radius: 50%; -webkit-animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite; }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

#activation { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 40; background: #07080A; }
#activation .card { position: absolute; left: 360px; top: 150px; width: 1200px; height: 780px; background: #0E1118;
  border: 2px solid rgba(255,255,255,0.1); border-radius: 30px; padding: 60px 80px; }
#activation h1 { font-size: 46px; }
#activation .sub { font-size: 24px; color: #9CA3AF; margin-top: 12px; line-height: 1.5; }
#activation .ids { margin-top: 44px; }
#activation .id { display: inline-block; width: 500px; background: #141822; border-radius: 20px; padding: 26px 34px; margin-right: 24px; }
#activation .id .l { font-size: 18px; color: #9CA3AF; letter-spacing: 2px; }
#activation .id .v { font-size: 44px; font-weight: 700; margin-top: 8px; color: #E5A93C; letter-spacing: 3px; }
#activation .id.code { width: 1024px; background: #1B2B45; }
#activation .id.code .v { font-size: 96px; letter-spacing: 18px; color: #fff; line-height: 1.1; }
#activation .ids.small { margin-top: 18px; }
#activation .ids.small .id { padding: 14px 24px; width: 420px; }
#activation .ids.small .id .l { font-size: 14px; }
#activation .ids.small .id .v { font-size: 26px; letter-spacing: 2px; color: #D1D5DB; }
#activation .steps { font-size: 24px; color: #D1D5DB; margin-top: 40px; line-height: 1.8; }
#activation .steps b { color: #fff; }
#activation .row { margin-top: 36px; }
#activation .status { font-size: 20px; color: #9CA3AF; margin-top: 22px; }

/* ---------- botões ---------- */
.btn { display: inline-block; height: 66px; line-height: 66px; padding: 0 36px; border-radius: 15px; font-size: 24px; font-weight: 600;
  background: #141822; color: #fff; border: 3px solid transparent; margin-right: 18px; vertical-align: middle; white-space: nowrap;
  -webkit-transition: -webkit-transform 0.14s; transition: transform 0.14s; }
.btn.amber { background: #E5A93C; color: #07080A; }
.btn.ghost { background: rgba(255,255,255,0.08); }
.btn img { width: 28px; height: 28px; vertical-align: middle; margin: -4px 12px 0 -6px; }
.btn.amber img { -webkit-filter: invert(1); filter: invert(1); }
.focus, .btn.focus { border-color: #fff !important; -webkit-transform: scale(1.08); transform: scale(1.08); }
.btn.amber.focus { background: #F3BE5A; }

/* ---------- barra lateral ---------- */
#sidebar { position: absolute; left: 0; top: 0; width: 140px; height: 1080px; background: #0A0C10; border-right: 2px solid rgba(255,255,255,0.06); z-index: 5; }
#sidebar .logo { width: 72px; height: 72px; border-radius: 18px; margin: 34px 0 0 34px; }
#sidebar .brand { font-size: 15px; color: #9CA3AF; text-align: center; margin-top: 8px; }
.nav { position: absolute; left: 14px; width: 112px; height: 98px; border-radius: 18px; text-align: center; color: #9CA3AF; font-size: 17px;
  border: 3px solid transparent; }
.nav img { width: 36px; height: 36px; margin-top: 16px; opacity: 0.75; }
.nav div { margin-top: 6px; }
.nav.active { background: #1D2331; color: #fff; }
.nav.active img { opacity: 1; }
.nav.focus { border-color: #fff; color: #fff; -webkit-transform: scale(1.06); transform: scale(1.06); }
.nav.syncing img { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }

#main { position: absolute; left: 140px; top: 0; width: 1780px; height: 1080px; overflow: hidden; }

/* ---------- Início ---------- */
#home { position: absolute; left: 0; top: 0; width: 1780px; height: 1080px; }
#home .head { position: absolute; left: 60px; top: 32px; }
#home .hello { font-size: 40px; font-weight: 700; }
#home .counts { font-size: 21px; color: #9CA3AF; margin-top: 8px; }
#home .counts .dot { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: #22C55E; margin-right: 10px; }
#home .chip { position: absolute; right: 230px; top: 40px; background: #141822; border: 2px solid rgba(255,255,255,0.1); border-radius: 14px;
  padding: 12px 22px; font-size: 19px; color: #9CA3AF; }
#home .chip b { color: #fff; font-weight: 600; }
#home .chip .k { color: #E5A93C; }
#home .clock { position: absolute; right: 60px; top: 34px; text-align: right; font-size: 34px; font-weight: 700; }
#home .clock div { font-size: 18px; color: #9CA3AF; font-weight: 400; }
#hero { position: absolute; left: 0; top: 120px; width: 1780px; height: 470px; }
#hero .bd { position: absolute; right: 0; top: 0; width: 1100px; height: 470px; background-size: cover; background-position: center; opacity: 0.55; }
#hero .fade { position: absolute; right: 0; top: 0; width: 1100px; height: 470px;
  background: linear-gradient(to right, #07080A 0%, rgba(7,8,10,0.6) 35%, rgba(7,8,10,0) 70%), linear-gradient(to top, #07080A 0%, rgba(7,8,10,0) 40%); }
#hero .info { position: absolute; left: 60px; top: 40px; width: 1000px; }
#hero .tags span { display: inline-block; font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 8px; margin-right: 10px; }
#hero .tags .a { background: #E5A93C; color: #07080A; }
#hero .tags .b { background: #1B2B45; color: #6BB5FF; }
#hero h2 { font-size: 58px; font-weight: 800; margin-top: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero .meta { font-size: 21px; color: #9CA3AF; margin-top: 12px; }
#hero .plot { font-size: 22px; color: #D1D5DB; margin-top: 14px; height: 64px; overflow: hidden; line-height: 1.45; }
#hero .acts { margin-top: 26px; white-space: nowrap; }
#heroLast { max-width: 560px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
#pInfo .name .num { color: #E5A93C; margin-right: 14px; }
#rails { position: absolute; left: 0; top: 600px; width: 1780px; height: 480px; overflow: hidden; }
#rails .inner { position: absolute; left: 0; top: 0; width: 1780px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }
.rail { position: relative; height: 360px; }
.rail.ch { height: 230px; }
.rail h3 { position: absolute; left: 60px; top: 0; font-size: 28px; }
.rail h3 span { font-size: 19px; color: #9CA3AF; font-weight: 400; margin-left: 14px; }
.rail .track { position: absolute; left: 60px; top: 52px; height: 300px; white-space: nowrap; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }

/* ---------- cartões ---------- */
.card { position: relative; display: inline-block; vertical-align: top; margin-right: 22px; border-radius: 14px; border: 3px solid transparent;
  background: #141822; overflow: hidden; -webkit-transition: -webkit-transform 0.14s; transition: transform 0.14s; }
.card.focus { border-color: #fff; -webkit-transform: scale(1.07); transform: scale(1.07); z-index: 3; }
.card.poster { width: 196px; height: 290px; }
.card.poster .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #16181F center/cover no-repeat; }
.card.poster .ph { position: absolute; left: 10px; right: 10px; top: 110px; text-align: center; font-size: 20px; color: #9CA3AF; }
.card.poster .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 10px; font-size: 17px; font-weight: 600;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .badge { position: absolute; top: 9px; left: 9px; background: #E5A93C; color: #07080A; font-size: 14px; font-weight: 800; padding: 4px 9px; border-radius: 6px; }
.card .badge.r { left: auto; right: 9px; background: rgba(0,0,0,0.8); color: #fff; }
.card.channel { width: 330px; height: 150px; padding: 18px; }
.card.channel .logo { position: absolute; left: 18px; top: 26px; width: 96px; height: 96px; border-radius: 12px; background: #0E1118 center/contain no-repeat; }
.card.channel .nm { position: absolute; left: 134px; top: 34px; right: 14px; font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.channel .nm .num { color: #E5A93C; margin-right: 10px; }
.card.channel .lv { position: absolute; left: 134px; top: 76px; font-size: 15px; color: #9CA3AF; font-weight: 700; letter-spacing: 1px; }
.card.channel .lv i { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #EF4444; margin-right: 8px; }
.card.resume { width: 380px; height: 250px; }
.card.resume .img { position: absolute; left: 0; top: 0; width: 100%; height: 190px; background: #16181F center/cover no-repeat; }
.card.resume .nm { position: absolute; left: 14px; right: 14px; top: 200px; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.resume .bar { position: absolute; left: 0; top: 186px; height: 5px; background: #E5A93C; }

/* ---------- navegação de seção ---------- */
#browse { position: absolute; left: 0; top: 0; width: 1780px; height: 1080px; }
#cats { position: absolute; left: 0; top: 0; width: 400px; height: 1080px; background: #0A0C10; border-right: 2px solid rgba(255,255,255,0.06); }
#cats .h { padding: 40px 34px 20px; }
#cats .h div { font-size: 28px; font-weight: 800; letter-spacing: 1px; }
#cats .h span { font-size: 18px; color: #9CA3AF; }
#cats .list { position: absolute; left: 0; top: 140px; width: 400px; height: 940px; overflow: hidden; }
#cats .list .inner { position: absolute; left: 0; top: 0; width: 400px; }
.cat { height: 60px; line-height: 54px; margin: 0 20px 6px; padding: 0 20px; border-radius: 12px; font-size: 21px; color: #D1D5DB;
  border: 3px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat.sel { background: #1D2331; color: #fff; font-weight: 700; }
.cat.focus { border-color: #fff; color: #fff; }
#bhead { position: absolute; left: 440px; top: 36px; width: 1300px; }
#bhead .t { font-size: 38px; font-weight: 800; display: inline-block; max-width: 760px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#bhead .n { font-size: 19px; color: #9CA3AF; margin-top: 8px; }
.lic { display: inline-block; font-size: 16px; font-weight: 800; padding: 6px 12px; border-radius: 8px; margin-left: 16px; vertical-align: middle; }
.lic.ok { background: rgba(20,83,45,0.6); color: #4ADE80; }
.lic.warn { background: rgba(120,53,15,0.7); color: #FBBF24; }
.lic.bad { background: rgba(127,29,29,0.7); color: #F87171; }
.lic.muted { background: rgba(255,255,255,0.1); color: #9CA3AF; }
#search { position: absolute; right: 40px; top: 36px; width: 420px; height: 64px; background: #141822; border: 3px solid rgba(255,255,255,0.1);
  border-radius: 14px; font-size: 21px; color: #fff; padding: 0 22px 0 58px; outline: none; }
#search.focus { border-color: #fff; }
#searchIcon { position: absolute; right: 418px; top: 55px; width: 26px; height: 26px; opacity: 0.6; z-index: 2; }
#grid { position: absolute; left: 440px; top: 150px; width: 1320px; height: 930px; overflow: hidden; }
#grid .card.poster { margin: 0 22px 26px 0; }
#grid .card.channel { width: 410px; margin: 0 22px 22px 0; }
#grid .empty { font-size: 24px; color: #9CA3AF; padding: 60px 0; }
#grid .more { font-size: 18px; color: #6B7280; }

/* ---------- detalhes ---------- */
#details { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #07080A; z-index: 20; }
#details .bd { position: absolute; right: 0; top: 0; width: 1300px; height: 760px; background-size: cover; background-position: center; opacity: 0.45; }
#details .fade { position: absolute; right: 0; top: 0; width: 1300px; height: 760px;
  background: linear-gradient(to right, #07080A 0%, rgba(7,8,10,0.5) 40%, rgba(7,8,10,0) 75%), linear-gradient(to top, #07080A 0%, rgba(7,8,10,0) 45%); }
#details .poster { position: absolute; left: 90px; top: 90px; width: 300px; height: 444px; border-radius: 18px; background: #16181F center/cover no-repeat; }
#details .info { position: absolute; left: 450px; top: 90px; width: 1100px; }
#details h1 { font-size: 54px; font-weight: 800; }
#details .meta { font-size: 22px; color: #9CA3AF; margin-top: 14px; }
#details .plot { font-size: 23px; color: #D1D5DB; margin-top: 20px; line-height: 1.5; max-height: 210px; overflow: hidden; }
#details .acts { margin-top: 30px; }
#seasons { position: absolute; left: 90px; top: 600px; width: 1740px; white-space: nowrap; }
#seasons .btn { height: 54px; line-height: 50px; font-size: 20px; padding: 0 26px; }
#seasons .btn.sel { background: #E5A93C; color: #07080A; }
#episodes { position: absolute; left: 90px; top: 690px; width: 1740px; height: 380px; overflow: hidden; }
#episodes .inner { position: absolute; left: 0; top: 0; width: 1740px; }
.ep { height: 76px; margin-bottom: 10px; border-radius: 14px; background: #141822; border: 3px solid transparent; padding: 0 26px; line-height: 70px; font-size: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep b { color: #E5A93C; margin-right: 16px; }
.ep.focus { border-color: #fff; background: #1D2331; }
.ep .w { float: right; font-size: 17px; color: #9CA3AF; }

/* ---------- ajustes ---------- */
#settings { position: absolute; left: 0; top: 0; width: 1780px; height: 1080px; }
#settings h1 { position: absolute; left: 60px; top: 40px; font-size: 40px; }
#settings .box { position: absolute; left: 60px; top: 130px; width: 1100px; }
.row { position: relative; min-height: 90px; background: #0E1118; border: 3px solid transparent; border-radius: 18px; margin-bottom: 16px; padding: 20px 30px; }
.row.head { background: transparent; border-color: transparent; min-height: 0; padding-top: 24px; padding-bottom: 4px; }
.row.head .l { color: #E5A93C; }
.row.focus { border-color: #fff; }
.row .l { font-size: 24px; font-weight: 700; }
.row .d { font-size: 18px; color: #9CA3AF; margin-top: 6px; }
.row .sw { position: absolute; right: 30px; top: 26px; width: 84px; height: 44px; border-radius: 22px; background: #222733; }
.row .sw i { position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 18px; background: #9CA3AF; }
.row .sw.on { background: #fff; }
.row .sw.on i { left: 44px; background: #07080A; }
.row input { width: 100%; height: 58px; margin-top: 12px; background: #141822; border: 2px solid rgba(255,255,255,0.15); border-radius: 12px;
  color: #fff; font-size: 21px; padding: 0 18px; outline: none; }
#settings .about { position: absolute; left: 1210px; top: 130px; width: 520px; background: #0E1118; border-radius: 18px; padding: 30px; font-size: 20px; color: #9CA3AF; line-height: 1.9; }
#settings .about b { color: #fff; }

/* ---------- player ---------- */
#player { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 30; background: #000; }
body.playing #player { background: transparent; }
#video { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; }
#avplayer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#pspin { position: absolute; left: 937px; top: 517px; }
#pRetry { position: absolute; left: 0; top: 610px; width: 1920px; text-align: center; font-size: 24px; font-weight: 700; color: #fff; }
#pZap { position: absolute; right: 66px; top: 130px; padding: 10px 30px; border-radius: 14px; background: rgba(0,0,0,0.75); border: 2px solid rgba(229,169,60,0.6);
  font-size: 56px; font-weight: 800; letter-spacing: 3px; color: #fff; z-index: 2; }
#osd .top { position: absolute; left: 0; top: 0; width: 1920px; height: 220px; background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
#osd .bot { position: absolute; left: 0; bottom: 0; width: 1920px; height: 360px; background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0)); }
#pBack { position: absolute; left: 66px; top: 48px; }
#pGroup { position: absolute; right: 66px; top: 56px; font-size: 18px; color: #9CA3AF; background: rgba(20,24,34,0.9); padding: 8px 16px; border-radius: 10px; }
#pInfo { position: absolute; left: 66px; bottom: 210px; width: 1300px; }
#pInfo .pill { display: inline-block; font-size: 15px; font-weight: 800; padding: 5px 10px; border-radius: 6px; background: #EF4444; color: #fff; margin-right: 12px; }
#pInfo .sub { display: inline-block; font-size: 18px; color: #9CA3AF; }
#pInfo .name { font-size: 40px; font-weight: 800; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pProg { position: absolute; left: 66px; bottom: 150px; width: 1788px; height: 30px; }
#pProg .pos, #pProg .dur { position: absolute; top: 0; font-size: 20px; color: #D1D5DB; }
#pProg .pos { left: 0; }
#pProg .dur { right: 0; }
#pProg .bg { position: absolute; left: 110px; right: 110px; top: 11px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.2); }
#pProg .fg { position: absolute; left: 0; top: 0; height: 8px; border-radius: 4px; background: #E5A93C; }
#pBtns { position: absolute; right: 66px; bottom: 50px; white-space: nowrap; }
.ob { display: inline-block; width: 78px; height: 78px; border-radius: 18px; background: rgba(20,24,34,0.95); border: 3px solid transparent; margin-left: 14px;
  text-align: center; -webkit-transition: -webkit-transform 0.14s; transition: transform 0.14s; }
.ob img { width: 36px; height: 36px; margin-top: 18px; }
.ob.focus { border-color: #fff; -webkit-transform: scale(1.12); transform: scale(1.12); }
#skipBtn { position: absolute; right: 72px; bottom: 126px; }
#skipBtn.up { bottom: 297px; }
#nextCard { position: absolute; right: 72px; bottom: 126px; width: 540px; background: rgba(14,17,24,0.97); border-radius: 22px; padding: 26px; border: 2px solid rgba(255,255,255,0.1); }
#nextCard.up { bottom: 297px; }
#nextCard .p { font-size: 16px; font-weight: 800; color: #E5A93C; letter-spacing: 1px; }
#nextCard .n { font-size: 26px; font-weight: 700; margin: 10px 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tracks { position: absolute; left: 610px; top: 200px; width: 700px; background: #0D0F15; border: 2px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 34px; z-index: 35; }
#tracks h2 { font-size: 30px; margin-bottom: 18px; }
#tracks .sec { font-size: 15px; color: #6B7280; font-weight: 800; letter-spacing: 1px; margin: 18px 0 10px; }
.opt { height: 58px; line-height: 52px; border-radius: 12px; padding: 0 20px; font-size: 21px; border: 3px solid transparent; color: #D1D5DB; }
.opt.sel { color: #fff; font-weight: 700; }
.opt.sel:before { content: "● "; color: #E5A93C; }
.opt.focus { border-color: #fff; background: #1D2331; }

/* ---------- diálogos / aviso ---------- */
#dialog { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0,0,0,0.75); z-index: 60; }
#dialog .box { position: absolute; left: 560px; top: 300px; width: 800px; background: #0D0F15; border: 2px solid rgba(255,255,255,0.1); border-radius: 26px; padding: 44px; text-align: center; }
#dialog h2 { font-size: 34px; }
#dialog p { font-size: 22px; color: #9CA3AF; margin-top: 14px; line-height: 1.5; }
#dialog .pin { margin: 26px auto 0; font-size: 50px; letter-spacing: 22px; font-weight: 800; color: #E5A93C; height: 64px; }
#dialog .err { color: #F87171; font-size: 20px; margin-top: 10px; height: 26px; }
#dialog .acts { margin-top: 30px; }
#toast { position: absolute; left: 50%; bottom: 70px; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 1400px; z-index: 70;
  background: #1E232E; border: 2px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 18px 30px; font-size: 22px; text-align: center; }
/* linhas largas não aumentam no foco (sairiam da tela) */
.ep.focus, .cat.focus, .row.focus, .opt.focus { -webkit-transform: none; transform: none; }
/* Samsung: o vídeo do AVPlay fica numa camada abaixo da página; durante a reprodução as telas por trás somem */
body.playing #sidebar, body.playing #main, body.playing #details, body.playing #loading { visibility: hidden; }

/* ---------- perfis (Quem está assistindo?) ---------- */
#profiles { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 45; background: #07080A; text-align: center; }
#profiles h1 { font-size: 46px; margin-top: 250px; }
#profiles .sub { font-size: 22px; color: #9CA3AF; margin-top: 12px; }
#profiles .tiles { margin-top: 70px; height: 260px; }
#profiles .tile { display: inline-block; width: 200px; margin: 0 18px; vertical-align: top; border-radius: 22px; -webkit-transition: -webkit-transform 0.14s; transition: transform 0.14s; }
#profiles .tile.focus { -webkit-transform: scale(1.08); transform: scale(1.08); }
#profiles .sq { position: relative; width: 180px; height: 180px; margin: 0 auto; border-radius: 22px; line-height: 180px; font-size: 84px; font-weight: 800; color: #fff; border: 4px solid transparent; }
#profiles .tile.focus .sq { border-color: #fff; }
#profiles .sq.cur { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
#profiles .sq.add { background: #141822; color: #9CA3AF; border-color: rgba(255,255,255,0.1); }
#profiles .sq .shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 18px; background: rgba(0,0,0,0.55); }
#profiles .sq .shade img { width: 56px; height: 56px; margin-top: 62px; -webkit-filter: invert(1); filter: invert(1); }
#profiles .sq .kids { position: absolute; right: 8px; bottom: 8px; line-height: 1; padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,0.6); font-size: 13px; font-weight: 700; }
#profiles .n { margin-top: 16px; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#profiles .btn { margin: 56px 0 0; }
#dialog input { display: block; width: 100%; margin-top: 22px; height: 70px; border-radius: 14px; border: 3px solid rgba(255,255,255,0.15); background: #141822; color: #fff; font-size: 26px; padding: 0 22px; text-align: center; }
#dialog input:focus { border-color: #fff; outline: none; }