/* Phone layouts must flow independently of the desktop/TV columns. */
@media(max-width:900px) {
 html body.uno-settings[data-setting-page] .detail-app { display:block; width:100%; min-width:0; max-width:100%; padding:0; }
 html[data-appearance] body.uno-settings .uno-settings-menu { position:relative; top:auto; display:flex; flex-direction:row; align-items:center; width:100%; height:auto; max-height:none; min-height:130px; padding:76px 12px 10px; gap:6px; overflow-x:auto; overflow-y:hidden; box-sizing:border-box; }
 html body.uno-settings .uno-settings-menu a { flex:0 0 auto; min-height:44px; margin:0; padding:10px 12px; font-size:14px; gap:8px; }
 html body.uno-settings .uno-settings-menu svg { width:20px; height:20px; }
 html body.uno-settings .settings-sidebar-brand { position:absolute; top:10px; left:16px; padding:0; z-index:20; }
 html body.uno-settings .settings-sidebar-brand .uno-logo { width:95px; height:48px; }
 html body.uno-settings .uno-settings-content { width:100%; min-width:0; padding:18px 16px 32px; box-sizing:border-box; }
 html body.uno-settings .uno-settings-heading h1 { font-size:28px; }
 html body.uno-settings .uno-settings-heading p { font-size:16px; }
 html body.uno-settings .setting-row { width:100%; min-width:0; padding:16px 12px; gap:10px; }
 html body.uno-settings .row-left { flex:1; min-width:0; gap:10px; }
 html body.uno-settings .row-copy { min-width:0; }
 html body.uno-settings .row-title { font-size:16px; overflow-wrap:anywhere; }
 html body.uno-settings .row-subtitle { font-size:13px; overflow-wrap:anywhere; }
 html body.uno-settings .row-right { flex:0 1 30%; min-width:0; max-width:30%; }
 html body.uno-settings .row-value { font-size:13px; white-space:normal; overflow-wrap:anywhere; }
 html[data-appearance] body.player-app-shell .app-settings-header { left:auto; right:8px; width:60px; height:68px; min-height:68px; padding:0; }
 html body .app-settings-header :is(.app-settings-clock,.app-settings-weather) { display:none; }
 html body .library-main { min-width:0; width:100%; box-sizing:border-box; }
 html body .category-list { grid-auto-columns:min(75vw,280px); align-items:stretch; }
 html body .category-shelf { overflow:visible; }
 html body .shelf-heading { gap:10px; }
 html body .shelf-title { font-size:24px; }
 html body .shelf-note { display:none; }
 /* Preview, controls and channels share the same vertical scroller. */
 html body .livetv-viewport { height:100dvh; overflow-y:auto!important; overflow-x:hidden; padding:12px 12px calc(90px + env(safe-area-inset-bottom)); box-sizing:border-box; }
 html body .hero-tiger-container { position:relative!important; inset:auto!important; width:100%!important; height:auto!important; aspect-ratio:16/9; margin:0 0 12px; min-height:0; }
 html body .livetv-body { position:relative!important; inset:auto!important; display:flex; flex-direction:column; width:100%; height:auto!important; min-height:0; padding:0!important; gap:12px; overflow:visible!important; pointer-events:auto; }
 html body .stream-info-col { height:auto!important; min-height:0; width:100%; padding:0; flex:none; opacity:1!important; transform:none!important; visibility:visible!important; }
 html body .stream-info-col.is-scroll-collapsed { pointer-events:auto; }
 html body .stream-title { font-size:23px; }
 html body .rail-col { position:relative; inset:auto; display:flex; flex-direction:row; height:48px; min-height:48px; flex:none; justify-content:center; padding:0; }
 html body .category-col { position:relative; inset:auto; display:flex; flex-direction:row; width:100%; height:54px; min-height:54px; flex:none; overflow-x:auto; overflow-y:hidden; }
 html body .category-item { flex:0 0 auto; }
 html body .channels-col { position:relative; inset:auto; width:100%; height:auto!important; min-height:200px; flex:none; overflow:visible!important; mask-image:none!important; -webkit-mask-image:none!important; }
 html body .channels-col .channel-card { min-height:108px; max-height:none; height:auto; }
 html body.uno-search-open .livetv-viewport { padding-top:112px; }
 html.playbox-embedded body .live-search-inline.playbox-shell-search-host.active .live-search-field,
 html body .live-search-inline.active .live-search-field { position:fixed; top:12px!important; left:12px!important; right:12px!important; width:auto; height:56px; min-height:56px; z-index:1000; }
 html body .live-search-inline.active .search-input { height:50px; font-size:16px; }
 html body .uno-live-search-status { left:12px; top:calc(100% + 8px); transform:none; width:auto; padding:3px 8px; border-radius:8px; background:var(--search-fill); }
 /* Compact Home cards retain their touch targets without filling the viewport. */
 html body .dashboard-header { position:relative; height:88px; min-height:88px; padding:14px 18px!important; }
 html body .dashboard-header .brand-logo { position:static; transform:none; }
 html body .dashboard-header .brand-logo .uno-logo { width:125px; max-height:65px; }
 html body .carousel-container { position:relative; inset:auto; width:100%; height:auto; padding:12px 16px!important; }
 html body .cards-track { display:flex; flex-direction:column; width:100%; gap:16px!important; padding:0!important; transform:none!important; }
 html body .iptv-card { flex:none!important; width:100%!important; height:176px!important; min-height:176px!important; max-width:none!important; transform:none!important; }
 html body .card-content-grid { height:100%; padding:20px!important; }
 html body .card-title { font-size:24px!important; }
 html body .card-icon-wrapper { width:80px; }
 html body .custom-card-icon { width:76px!important; height:76px!important; }
 html body .pill-tab-glow { display:none; }
}
/* Narrow phones need stacked statistics and controls, not compressed TV rows. */
@media(max-width:600px) {
 html body.uno-settings .playlist-source-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 html body.uno-settings .playlist-stat { flex-direction:column; min-width:0; gap:6px; }
 html body.uno-settings .playlist-stat > div { min-width:0; }
 html body.uno-settings .playlist-stat :is(strong,small) { overflow-wrap:anywhere; }
 html body.uno-settings .playlist-source-card footer { flex-wrap:wrap; }
 html body.uno-settings .playlist-source-controls > button { flex:1 1 140px; min-width:0; max-width:100%; }
 html body.uno-settings .source-wizard { padding:16px; }
 html body.uno-settings .source-wizard header { flex-wrap:wrap; gap:12px; }
 html body.uno-settings .source-wizard-file { padding:12px; }
 html body.uno-settings .source-wizard-pair { min-width:0; overflow-wrap:anywhere; }
 html body.uno-settings .source-wizard-pair svg { max-width:240px; margin-inline:auto; }
 html body.uno-settings .account-access-card > div { min-width:0; overflow-wrap:anywhere; }
 html body.uno-settings .account-entry { min-width:0; max-width:100%; }
}
@media(max-width:700px) {
 html body.uno-settings .multiscreen-card:not(.is-fullscreen) .multiscreen-preview[data-count="3"] .screen:first-child { grid-row:auto; aspect-ratio:16/9; }
}
@media(max-width:900px) {
 html body .channels-col .channel-info { height:auto; min-height:76px; gap:5px; }
 html body .channels-col .channel-title { font-size:16px; line-height:1.25; white-space:nowrap; display:block; flex-shrink:0; }
 html body .channels-col .channel-views { flex-shrink:0; }
 html body .app-shell-header .nav-capsule { background:#101b1c!important; }
 html[data-appearance="light"] body .app-shell-header .nav-capsule { background:#f2f4f1!important; }
}
@media(max-width:900px) {
 html body .iptv-card .pill-tab-glow { display:none!important; }
 html body .app-shell-header .nav-capsule { border-radius:0!important; width:100%; max-width:100%; }
}
/* Keep Settings branding in its own row, including after scrolling. */
@media(max-width:900px) {
 html body.uno-settings .settings-sidebar-brand { position:absolute; top:10px; left:16px; }
 html[data-appearance] body.uno-settings .uno-settings-menu { flex-wrap:nowrap; flex-shrink:0; min-height:140px; padding-top:82px; }
 html body.uno-settings .uno-settings-content { clear:both; padding-top:24px; }
 html body.uno-settings .uno-settings-heading { scroll-margin-top:80px; }
}