/* CarYou v6.6.25 — adaptive phone / tablet / desktop layout. */
:root{
  --cy-page-gutter:max(16px,env(safe-area-inset-left,0px));
  --cy-content-max:680px;
  --cy-card-gap:20px;
}

html[data-layout="compact"]{--cy-content-max:680px;--cy-card-gap:18px}
html[data-layout="medium"]{--cy-content-max:1000px;--cy-card-gap:20px}
html[data-layout="wide"]{--cy-content-max:1240px;--cy-card-gap:24px}

/* Main shell expands on iPad / tablet / computer, while phone remains compact. */
html[data-layout="medium"] body:not(.cy-admin-page),
html[data-layout="wide"] body:not(.cy-admin-page){
  padding-inline:max(24px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
}
html[data-layout="medium"] body:not(.cy-admin-page) .wrap,
html[data-layout="wide"] body:not(.cy-admin-page) .wrap{
  width:min(100%,var(--cy-content-max));
  max-width:var(--cy-content-max);
}

/* Tablet portrait: keep reading width comfortable instead of forcing tiny columns. */
html[data-device="tablet"][data-orientation="portrait"] body:not(.cy-admin-page) .wrap{
  --cy-content-max:820px;
}
html[data-device="tablet"][data-orientation="portrait"] .home-active #appView{
  display:block;
}
html[data-device="tablet"][data-orientation="portrait"] .home-active #appView>.card{
  margin-block:0 var(--cy-card-gap);
}
html[data-device="tablet"][data-orientation="portrait"] .home-active #appView>.welcome-strip,
html[data-device="tablet"][data-orientation="portrait"] .home-active #appView>.notice-banner{
  margin-bottom:var(--cy-card-gap);
}

/* Tablet landscape / desktop: use the extra canvas without stretching text excessively. */
html[data-device="tablet"][data-orientation="landscape"] .home-active #appView,
html[data-device="desktop"][data-layout="medium"] .home-active #appView,
html[data-device="desktop"][data-layout="wide"] .home-active #appView{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:var(--cy-card-gap);
}
html[data-layout="wide"] #appView>.card{
  padding:28px;
}
html[data-layout="wide"] .topbar{
  padding:12px 16px;
  border-radius:26px;
}
html[data-device="desktop"] #whoTop{display:inline;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-device="desktop"] .user-chip{padding-inline-end:14px}
html[data-device="desktop"] .profile-menu{width:300px}

/* Comfortable dialogs on iPad / desktop. */
html[data-layout="medium"] .cy-onboarding,
html[data-layout="wide"] .cy-onboarding{width:min(760px,calc(100vw - 48px))}
html[data-layout="wide"] .cy-support-dialog{width:min(720px,calc(100vw - 56px))}
html[data-layout="medium"] .iptv-dialog,
html[data-layout="wide"] .iptv-dialog{width:min(900px,calc(100vw - 48px))}

/* Drawer stays usable on touch tablets, but doesn't dominate the desktop. */
html[data-device="tablet"] .drawer{width:min(430px,72vw)}
html[data-device="desktop"] .drawer{width:420px}

/* Touch targets vs mouse targets are selected by input capability, not browser name. */
html[data-input="coarse"] button,
html[data-input="coarse"] a,
html[data-input="coarse"] summary,
html[data-input="coarse"] input,
html[data-input="coarse"] select{min-height:44px}
html[data-input="fine"] .menu-btn,
html[data-input="fine"] .icon-btn{cursor:pointer}

/* YouTube: tablet gets a denser but still touch-friendly grid; desktop uses more columns. */
html[data-device="tablet"] .yt-grid:not(.rows){grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 16px}
html[data-device="tablet"] .yt-main{padding-inline:24px}
html[data-device="tablet"][data-orientation="portrait"] .yt-view{
  grid-template-columns:1fr;
  grid-template-rows:1fr;
}
html[data-device="tablet"][data-orientation="portrait"] .yt-side{display:none}
html[data-device="tablet"][data-orientation="portrait"] .yt-bottom{display:flex}
html[data-device="tablet"][data-orientation="portrait"] .yt-main{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
html[data-device="tablet"][data-orientation="landscape"] .yt-view{grid-template-columns:88px 1fr}
html[data-device="tablet"][data-orientation="landscape"] .yt-side{display:flex}
html[data-device="tablet"][data-orientation="landscape"] .yt-bottom{display:none}
html[data-device="tablet"][data-orientation="landscape"] .yt-side a,
html[data-device="tablet"][data-orientation="landscape"] .yt-side button{min-height:64px}
html[data-device="desktop"][data-layout="wide"] .yt-main{padding-inline:32px}
html[data-device="desktop"][data-layout="wide"] .yt-grid:not(.rows){grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 20px}
html[data-device="desktop"][data-layout="wide"] .yt-searchbox{max-width:860px}

/* Landscape phones: preserve vertical space and avoid oversized chrome. */
html[data-device="phone"][data-orientation="landscape"] .topbar{position:relative;top:auto}
html[data-device="phone"][data-orientation="landscape"] .brand small{display:none}
html[data-device="phone"][data-orientation="landscape"] #appView>.card{scroll-margin-top:20px}

/* Admin page: responsive in the same automatic device system. */
.cy-admin-page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html[data-layout="medium"] .cy-admin-page .wrap{max-width:1180px}
html[data-layout="wide"] .cy-admin-page .wrap{max-width:1440px}
html[data-device="tablet"] .cy-admin-page .toolbar{position:sticky;top:0;z-index:20;padding:10px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
html[data-device="desktop"] .cy-admin-page .toolbar{position:sticky;top:0;z-index:20;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
html[data-layout="wide"] .cy-admin-page .gh-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page table,
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page thead,
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page tbody,
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page tr,
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page td{display:block;width:100%}
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page thead{display:none}
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page tbody tr{border:1px solid var(--border);border-radius:14px;margin-bottom:12px;padding:10px 12px;background:rgba(0,0,0,.15)}
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page tbody td{border:none;padding:7px 0}
html[data-device="tablet"][data-orientation="portrait"] .cy-admin-page tbody td:not(:first-child)::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}

@media (prefers-reduced-motion:reduce){
  html[data-device] *{scroll-behavior:auto}
}

html[data-input="coarse"] .footer-support-link{min-height:0!important}