.directv-preview{width:100%;max-width:430px;margin:36px auto;padding:16px;color:#eef3fa}
.directv-preview header{margin-bottom:28px}.directv-preview header>span{font:10px var(--mono);letter-spacing:.12em;color:#00b7f4}.directv-preview h1{font-size:22px;margin:8px 0}.directv-preview p{font-size:12px;color:#9aa9bd;margin:0}
.directv-remote{padding:16px 0;margin:0;border-block:0;border-radius:12px;background:transparent}
.source-console>.directv-remote.source-control-panel{border-block:0}
.directv-layout{display:grid;grid-template-columns:88px 40px minmax(0,164px);gap:18px;justify-content:center;align-items:center}
.directv-digits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,48px);gap:9px 6px}
.directv-digits button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;width:100%;padding:2px;border-radius:50%;border-color:#353c47;background:linear-gradient(#2a2f38,#191d25);box-shadow:0 2px 3px #0008}
.directv-digits strong{font-size:18px;font-weight:500;line-height:1.15}.directv-digits small{font-size:6px;line-height:1.2;color:#c1cad7}
.directv-rockers{display:grid;gap:14px}.directv-rockers .remote-rocker{height:126px}.directv-rockers small{font-size:8px}.directv-rockers button{padding:0;min-height:44px}
.directv-navigation{display:grid;gap:7px;min-width:0}.directv-nav-row{display:flex;gap:5px;justify-content:space-between}.directv-nav-row button{flex:1;min-width:0;padding:0;min-height:40px;border-radius:20px;background:#1b1e25;border-color:#303640;font-size:9px}.directv-nav-row button[aria-label=Inicio]{font-size:21px}
.directv-navigation .source-dpad{width:100%;height:auto;aspect-ratio:1;min-height:0;padding:4px;gap:0;background:radial-gradient(circle,#343d4b,#1d2532);border-color:#485362;box-shadow:0 4px 7px #0003}
.directv-navigation .source-dpad button{min-width:0;min-height:0;padding:0;background:transparent;border:0;font-size:27px}.directv-navigation .source-dpad .center{background:#2c394c;border-radius:50%;font-size:14px;box-shadow:0 3px 6px #0003}
.directv-nav-row button[aria-label=Volver]{font-size:21px}.directv-bottom button{font-size:18px;min-height:44px}.directv-bottom .mute{font-size:8px}
.directv-extra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 12px 0}.directv-extra button{font-size:10px;padding:4px;background:#1b1e25}.directv-extra[hidden]{display:none}
.directv-status{min-height:46px;font-size:12px;line-height:1.5;color:#8cbfd9;padding-top:14px}.directv-preview footer{font-size:10px;line-height:1.7;color:#8591a2;margin-top:12px}
@media(max-width:370px){.directv-preview{padding:12px}.directv-layout{grid-template-columns:76px 36px minmax(0,148px);gap:10px}.directv-digits{grid-template-rows:repeat(5,44px);gap:10px 4px}.directv-digits strong{font-size:17px}.directv-rockers .remote-rocker{height:116px}.directv-nav-row{gap:3px}.directv-nav-row button{font-size:8px}.directv-navigation{gap:9px}}

/* Compact physical-remote layout: guide row, square keypad, lower rockers. */
.directv-remote .directv-layout{grid-template-columns:88px minmax(0,190px);grid-template-areas:"digits nav" "digits rockers";gap:10px 18px;align-items:start}
.directv-remote .directv-digits{grid-area:digits}
.directv-remote .directv-navigation{grid-area:nav;gap:9px}
.directv-remote .directv-rockers{grid-area:rockers;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.directv-remote .directv-rockers .remote-rocker{height:76px;width:100%;border-radius:9px;position:relative;background:linear-gradient(#30343a,#121417);border:1px solid #41454b;box-shadow:inset 0 1px #ffffff12,0 2px 3px #0008}
.directv-remote .directv-rockers button{min-height:28px;height:28px;font-size:20px}
.directv-remote .directv-rockers small{font-size:9px;line-height:16px}
.directv-remote .directv-nav-row button{min-height:30px;border-radius:14px;font-size:9px;background:linear-gradient(#30343a,#17191c)}
.directv-remote .directv-navigation .source-dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;aspect-ratio:1;height:auto;border-radius:24px;padding:9px;gap:5px;background:linear-gradient(145deg,#272b2e,#141719);border:1px solid #41464b;box-shadow:inset 0 2px 4px #000b,0 2px 3px #0008}
.directv-remote .source-dpad button{position:static;transform:none;width:100%;height:100%;min-height:0;min-width:0;border-radius:7px;font-size:23px}
.directv-remote .source-dpad .up{grid-area:1/2}.directv-remote .source-dpad .left{grid-area:2/1}.directv-remote .source-dpad .center{grid-area:2/2;border-radius:7px;font-size:13px;background:linear-gradient(#363b40,#202529);border:1px solid #50565c;box-shadow:inset 0 1px #ffffff15,0 2px 3px #0008}
.directv-remote .source-dpad .right{grid-area:2/3}.directv-remote .source-dpad .down{grid-area:3/2}
.directv-remote .source-dpad .record{grid-area:1/1;color:#f12f43;font-size:18px}.directv-remote .source-dpad .exit{grid-area:1/3;font-size:9px}.directv-remote .source-dpad .back{grid-area:3/1;font-size:9px}.directv-remote .source-dpad .more{grid-area:3/3;font-size:14px}
.directv-remote .directv-bottom button{min-height:30px;font-size:14px}.directv-remote .directv-bottom .mute{font-size:8px}
@media(max-width:370px){.directv-remote .directv-layout{grid-template-columns:72px minmax(0,166px);gap:10px}.directv-remote .source-dpad .back,.directv-remote .source-dpad .exit{font-size:8px}}

.directv-remote .source-dpad :is(.up,.down,.left,.right){background:linear-gradient(#30363b,#202529);border:1px solid #42494f;box-shadow:inset 0 1px #ffffff0b,0 2px 3px #0005}
.directv-extra>.directv-bottom{grid-column:1/-1}

.directv-remote .directv-layout{grid-template-columns:88px minmax(0,170px) 40px;grid-template-areas:"digits nav rockers";align-items:center;gap:10px}
.directv-remote .directv-digits{grid-template-rows:repeat(5,40px);grid-template-columns:repeat(2,40px);gap:8px}
.directv-remote .directv-digits button{width:40px;height:40px;min-height:40px;aspect-ratio:1;border-radius:50%;font-size:18px;padding:0}
.directv-remote .directv-rockers{grid-template-columns:1fr;gap:0}
.directv-remote .directv-rockers .remote-rocker{height:120px}
.directv-remote .directv-rockers button{height:46px}
.directv-remote .source-dpad .guide{grid-area:1/1;font-size:9px}
.directv-remote .source-dpad svg{width:20px;height:20px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.directv-remote .source-dpad .up svg{transform:rotate(-90deg)}.directv-remote .source-dpad .down svg{transform:rotate(90deg)}.directv-remote .source-dpad .left svg{transform:rotate(180deg)}
@media(max-width:370px){.directv-remote .directv-layout{grid-template-columns:72px minmax(0,140px) 34px;gap:7px}.directv-remote .directv-digits{grid-template-columns:repeat(2,34px);grid-template-rows:repeat(5,34px);gap:6px 4px}.directv-remote .directv-digits button{width:34px;height:34px;min-height:34px;font-size:17px}}

/* Four commands inside the keypad corners. */
.directv-remote .source-dpad .guide{grid-area:1/1;font-size:9px}
.directv-remote .source-dpad .info{grid-area:1/3;font-size:9px}
.directv-remote .source-dpad .exit{grid-area:3/1;font-size:9px}
.directv-remote .source-dpad .back{grid-area:3/3;font-size:9px}

.directv-remote .directv-layout{grid-template-columns:88px minmax(0,226px);grid-template-areas:"digits nav" "digits rockers";gap:12px 16px;align-items:center}
.directv-remote .directv-rockers .remote-rocker{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;border-radius:14px}
.directv-remote .directv-rockers button{height:42px;min-height:42px}
.directv-remote .directv-rockers button:first-child{grid-column:3;grid-row:1}
.directv-remote .directv-rockers small{grid-column:2;grid-row:1;padding:0 12px}
.directv-remote .directv-rockers button:last-child{grid-column:1;grid-row:1}
@media(max-width:370px){.directv-remote .directv-layout{grid-template-columns:72px minmax(0,184px);gap:10px}}

.directv-remote.source-control-panel>.source-control-result{position:static;margin:4px 16px 16px;min-height:15px;max-height:none;overflow:visible;line-height:1.5}

/* One continuous directional rocker, with a separate confirmation key. */
.directv-remote .directv-navigation .source-dpad{position:relative;isolation:isolate;gap:0;width:80%;justify-self:center}
.directv-remote .source-dpad::before{content:"";position:absolute;inset:9px;z-index:-1;pointer-events:none;background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop stop-color='%2331373b'/%3E%3Cstop offset='1' stop-color='%23202427'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M45 1H55Q67 1 67 13V26Q67 33 74 33H87Q99 33 99 45V55Q99 67 87 67H74Q67 67 67 74V87Q67 99 55 99H45Q33 99 33 87V74Q33 67 26 67H13Q1 67 1 55V45Q1 33 13 33H26Q33 33 33 26V13Q33 1 45 1Z' fill='url(%23g)' stroke='%230e1113' stroke-width='1.6'/%3E%3C/svg%3E");filter:drop-shadow(0 1px 1px #0009)}
.directv-remote .source-dpad :is(.up,.down,.left,.right){background:transparent;border:0;box-shadow:none}
.directv-remote .source-dpad :is(.up,.down,.left,.right):active:not(:disabled){background:#ffffff0d}
.directv-remote .source-dpad .center{width:calc(100% - 8px);height:calc(100% - 8px);place-self:center;border:1px solid #111517;box-shadow:inset 0 1px #ffffff12,0 0 0 1px #42494c;border-radius:10px}

/* Phone layout: side rockers, centered cross, two numeric rows. */
.directv-remote .directv-layout{width:100%;max-width:360px;margin-inline:auto;padding-inline:8px;box-sizing:border-box;grid-template-columns:calc(7.5% + 27.1px) minmax(0,1fr) calc(7.5% + 27.1px);grid-template-areas:"volume nav channel" "digits digits digits";gap:18px 12px;align-items:center}
.directv-remote .directv-volume{grid-area:volume}
.directv-remote .directv-channel{grid-area:channel}
.directv-remote .directv-navigation .source-dpad{width:100%;border-radius:40px}
.directv-remote .source-dpad :is(.guide,.info,.exit,.back){font-size:12px;font-weight:600}
.directv-remote .directv-rockers{align-self:stretch;padding-block:12px}
.directv-remote .directv-rockers .remote-rocker{width:85%;justify-self:center;height:100%;min-height:132px;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;border-radius:999px}
.directv-remote .directv-rockers button{width:100%;height:100%;min-height:44px}
.directv-remote .directv-rockers button:first-child{grid-column:1;grid-row:1}
.directv-remote .directv-rockers small{grid-column:1;grid-row:2;padding:8px 0;writing-mode:horizontal-tb;justify-self:center;font-size:11px;font-weight:600;letter-spacing:.03em}
.directv-remote .directv-rockers button:last-child{grid-column:1;grid-row:3}
.directv-remote .directv-digits{width:100%;max-width:300px;justify-self:center;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:10px}
.directv-remote .directv-digits button{width:100%;height:auto;min-height:0;aspect-ratio:1;max-width:50px;justify-self:center;font-size:20px}
.directv-remote.source-control-panel>.source-control-result{text-align:center;margin:8px 12px 20px}
@media(max-width:370px){.directv-remote .directv-layout{grid-template-columns:calc(7.5% + 24.45px) minmax(0,1fr) calc(7.5% + 24.45px);gap:14px 7px;padding-inline:4px}.directv-remote .directv-digits{gap:8px}.directv-remote .directv-digits strong{font-size:18px}.directv-remote .directv-navigation .source-dpad{padding:6px;border-radius:40px}.directv-remote .source-dpad::before{inset:6px}.directv-remote .source-dpad :is(.guide,.info,.exit,.back){font-size:11px}}