.salon-tv-remote { box-sizing: border-box; width: min(900px, calc(100% - 32px)); margin: 36px auto; border: 3px solid #30281f; border-bottom: 14px solid #30281f; border-radius: 24px 24px 12px 12px; background: #514639; color: #fff7e6; box-shadow: 0 18px 24px #21170d40; overflow: hidden; }
.salon-tv-remote[hidden] { display: none; }
.tv-case-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 28px 38px 32px; background: linear-gradient(165deg, #91816b, #605343 65%, #493e32); border-top: 2px solid #b5a48b; }
.salon-tv-remote h2 { margin: 0; color: #fff7e6; font: 600 1.6rem Georgia, serif; }
.tv-case-top > span { font-size: .85rem; color: #f3e9d8; }
.tv-wood-face { padding: 24px 26px 14px; border-top: 3px solid #c39662; background: repeating-linear-gradient(2deg, #663b171c 0 1px, transparent 1px 5px, #ffd19b22 5px 7px, transparent 7px 12px), linear-gradient(100deg, #a36331, #d59b60 35%, #bb7c42 65%, #cb935a); }
.tv-console { display: flex; gap: 20px; align-items: stretch; padding: 22px 22px 28px; border: 6px solid #33291f; border-radius: 65px 65px 32px 32px; background: linear-gradient(#514536, #3b3228); box-shadow: inset 0 4px 8px #160e09a0, 0 2px 1px #e7b986; }
.tv-row-selector { flex: 0 0 58px; min-width: 0; border: 0; margin: 0; padding: 0; align-self: center; }
.tv-row-selector legend { font: 12px Arial, sans-serif; text-align: center; margin-bottom: 8px; color: #f9ecd8; }
.tv-row-selector label { display: block; position: relative; cursor: pointer; }
.tv-row-selector input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.tv-row-selector span { display: grid; place-items: center; min-height: 44px; border: 2px solid #211a14; background: #30281f; color: #d4c4ae; font: bold 16px Arial, sans-serif; }
.tv-row-selector input:checked + span { color: #fff8e8; background: repeating-linear-gradient(0deg, #776856 0 2px, #514536 2px 4px); box-shadow: inset 0 2px #beaa8b, 0 2px 4px #17120e; border-left: 4px solid #f0c47d; }
.tv-keyboard-scroll { flex: 1; min-width: 0; overflow-x: auto; padding: 0 4px 12px; }
.tv-keyboard { min-width: 590px; }
.tv-number-row, .tv-channel-keys { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px; }
.tv-number-row { border-bottom: 1px solid #b3a086; color: #c8bba8; text-align: center; font: 600 16px/26px Arial, sans-serif; }
.tv-number-row[data-active] { color: #fff2cc; background: #ffffff0c; border-bottom-color: #f2cd89; }
.tv-number-row .tv-empty-number { opacity: .35; }
.tv-channel-keys { margin-top: 12px; }
.tv-channel-keys button { height: 90px; min-width: 0; padding: 0; border: 2px solid #241d16; border-top-color: #8e806c; border-radius: 4px 4px 13px 13px; background: linear-gradient(90deg, #4d4131, #75664f 45%, #584b39); color: #fff3d6; box-shadow: 0 9px 0 #211b15, 3px 6px 4px #100c0890, inset 2px 0 2px #a28b6350; cursor: pointer; font: bold 15px Arial, sans-serif; }
.tv-channel-keys button span { display: block; margin-top: 40px; }
.tv-channel-keys button[aria-pressed=true] { transform: translateY(6px); box-shadow: 0 3px 0 #211b15, inset 0 3px 7px #21170c; border-top-color: #d7b578; background: linear-gradient(90deg, #403425, #60503a); color: #ffe1a0; }
.tv-channel-keys button:disabled { cursor: default; color: #a3937d; filter: brightness(.8); }
.tv-channel-keys button:not(:disabled):hover { border-color: #e3c08a; }
.tv-case-brand { margin-top: 16px; text-align: right; color: #3c281a; text-shadow: 0 1px #e2b785; font: bold 14px Georgia, serif; }
.salon-tv-remote .tv-now-playing { margin: 0; padding: 18px 24px 6px; font-size: 1rem; color: #fff5df; overflow-wrap: anywhere; }
.salon-tv-remote .tv-instructions { margin: 0; padding: 4px 24px 18px; font-size: .88rem; color: #e1d4bf; }
.tv-channel-keys button:focus-visible, .tv-row-selector input:focus-visible + span { outline: 3px solid #ffdd97; outline-offset: 3px; }
@media (max-width: 640px) { .tv-case-top { padding: 20px; } .tv-case-top > span { max-width: 100px; text-align: right; } .tv-wood-face { padding: 16px 10px 12px; } .tv-console { gap: 10px; padding: 18px 10px 20px; border-radius: 30px 30px 20px 20px; border-width: 4px; } .tv-row-selector { flex-basis: 48px; } .salon-tv-remote { margin: 24px auto; } }