/* DOOFREE desktop app shell
 * Shared visual language with Google TV, tuned for keyboard + mouse at desktop distance.
 * Mobile/tablet web does not load this file.
 */
:root{
  --web-app-bg:#141414;
  --web-app-card:#1b1b1b;
  --web-app-text:#fff;
  --web-app-muted:#a9a9a9;
  --web-app-side:clamp(24px,4vw,68px);
  --web-app-header-h:68px;
}
html.doofree-desktop-app{background:var(--web-app-bg);color-scheme:dark;font-family:var(--doofree-system-font,Prompt,"Noto Sans Thai",system-ui,sans-serif)}
html.doofree-desktop-app body{background:var(--web-app-bg);color:var(--web-app-text);overflow-x:hidden}
html.doofree-desktop-app .mobile-nav{display:none!important}

/* App-style desktop topbar. */
html.doofree-desktop-app .site-header{
  position:sticky;top:0;z-index:1000;height:var(--web-app-header-h);display:flex;align-items:center;gap:10px;
  padding:0 var(--web-app-side);border:0;background:rgba(20,20,20,.94);backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,.18)
}
html.doofree-desktop-app .brand{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 8px;border-radius:7px;color:#e8e8e8}
html.doofree-desktop-app .brand-image img{display:block;max-width:124px;max-height:36px;object-fit:contain}
html.doofree-desktop-app .brand .tv-home-label{color:#e8e8e8;font-size:13px;font-weight:500;white-space:nowrap}
html.doofree-desktop-app .brand.tv-home-nav:not(.is-active):not([aria-current="page"]) .tv-home-label{color:#e8e8e8!important;font-weight:500!important}
html.doofree-desktop-app .desktop-nav{display:flex;align-items:center;gap:4px;min-width:0;margin:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:13px}
html.doofree-desktop-app .desktop-nav::-webkit-scrollbar{display:none}
html.doofree-desktop-app .desktop-nav>a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border:0!important;border-radius:7px;color:#d7d7d7;background:transparent;font-weight:500}
html.doofree-desktop-app .desktop-nav>a:hover{background:rgba(255,255,255,.08);color:#fff}
html.doofree-desktop-app .desktop-nav .platform-nav-link.active{color:var(--accent);font-weight:800}
html.doofree-desktop-app .tv-header-right{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
html.doofree-desktop-app .tv-header-search{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;min-width:40px;max-width:320px;margin:0}
html.doofree-desktop-app .tv-search-trigger{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:#ddd;cursor:pointer}
html.doofree-desktop-app .tv-search-trigger>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.doofree-desktop-app .tv-search-icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.doofree-desktop-app .tv-search-entry[hidden]{display:none!important}
html.doofree-desktop-app .tv-header-search.is-open{width:min(320px,30vw);flex-basis:min(320px,30vw)}
html.doofree-desktop-app .tv-header-search.is-open .tv-search-trigger{display:none}
html.doofree-desktop-app .tv-header-search.is-open .tv-search-entry{display:block;width:100%}
html.doofree-desktop-app .tv-header-search.is-open input{width:100%;height:40px;padding:0 13px;border:1px solid rgba(255,255,255,.5);border-radius:6px;background:#090909;color:#fff;outline:0}
html.doofree-desktop-app .tv-login-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:13px;font-weight:750}
html.doofree-desktop-app .tv-account-link{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 8px;border-radius:7px;color:#e0e0e0;font-weight:500}
html.doofree-desktop-app .profile-avatar-nav{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border:2px solid var(--accent)!important;border-radius:50%!important;overflow:hidden!important;clip-path:circle(50% at 50% 50%)}
html.doofree-desktop-app .profile-avatar-nav>img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
html.doofree-desktop-app .member-nav-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Current page/selection uses the same red active language as Google TV. */
html.doofree-desktop-app .site-header .tv-home-nav.is-active .tv-home-label,
html.doofree-desktop-app .site-header .tv-home-nav[aria-current="page"] .tv-home-label,
html.doofree-desktop-app .site-header .tv-account-link.is-active .member-nav-name,
html.doofree-desktop-app .site-header .tv-account-link[aria-current="page"] .member-nav-name{color:var(--accent)!important;font-weight:800!important}
html.doofree-desktop-app .site-header .platform-nav-link.active,
html.doofree-desktop-app .site-header .platform-nav-link[aria-current="page"],
html.doofree-desktop-app .site-header .tv-search-trigger.is-active,
html.doofree-desktop-app .site-header .tv-search-trigger[aria-current="page"]{color:var(--accent)!important;font-weight:800!important}
html.doofree-desktop-app .site-header .tv-login-link.is-active,
html.doofree-desktop-app .site-header .tv-login-link[aria-current="page"]{background:rgba(255,255,255,.08)!important;color:var(--accent)!important;font-weight:800!important;box-shadow:none!important}

/* Keyboard focus uses the same quiet app language: fill/scale, never a thick ring. */
html.doofree-desktop-app [data-app-header-item]:focus-visible,
html.doofree-desktop-app [data-app-header-item].is-keyboard-focus{outline:0!important;background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:none!important}
html.doofree-desktop-app .tv-login-link:focus-visible{background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),linear-gradient(135deg,var(--accent),var(--accent2))!important}

/* Focus must not overwrite the active page color. */
html.doofree-desktop-app .site-header .tv-home-nav.is-active:focus-visible .tv-home-label,
html.doofree-desktop-app .site-header .tv-home-nav[aria-current="page"]:focus-visible .tv-home-label,
html.doofree-desktop-app .site-header .tv-account-link.is-active:focus-visible .member-nav-name,
html.doofree-desktop-app .site-header .tv-account-link[aria-current="page"]:focus-visible .member-nav-name{color:var(--accent)!important;font-weight:800!important}
html.doofree-desktop-app .site-header .platform-nav-link.active:focus-visible,
html.doofree-desktop-app .site-header .platform-nav-link[aria-current="page"]:focus-visible,
html.doofree-desktop-app .site-header .tv-search-trigger.is-active:focus-visible,
html.doofree-desktop-app .site-header .tv-search-trigger[aria-current="page"]:focus-visible{color:var(--accent)!important;font-weight:800!important}
html.doofree-desktop-app .site-header .tv-login-link.is-active:focus-visible,
html.doofree-desktop-app .site-header .tv-login-link[aria-current="page"]:focus-visible{background:rgba(255,255,255,.18)!important;color:var(--accent)!important;box-shadow:none!important}

/* Shared App Home DOM, compact for desktop viewing distance. */
html.doofree-desktop-app .tv-home{position:relative;background:var(--web-app-bg);min-height:100vh}
html.doofree-desktop-app .tv-hero{position:relative;height:clamp(500px,70vh,760px);overflow:hidden;background:#101010}
html.doofree-desktop-app .tv-hero-slide{position:absolute;inset:0;display:none}
html.doofree-desktop-app .tv-hero-slide.is-active{display:block}
html.doofree-desktop-app .tv-hero-slide[aria-hidden="true"]{display:none!important}
html.doofree-desktop-app .tv-hero-art{position:absolute;inset:0;background-size:cover;background-position:center 20%;transform:scale(1.006)}
html.doofree-desktop-app .tv-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.98) 0%,rgba(20,20,20,.86) 24%,rgba(20,20,20,.35) 58%,rgba(20,20,20,.05) 78%),linear-gradient(0deg,var(--web-app-bg) 0%,rgba(20,20,20,.7) 11%,transparent 44%)}
html.doofree-desktop-app .tv-hero-content{position:relative;z-index:2;width:min(650px,46vw);margin-left:var(--web-app-side);padding-top:clamp(105px,16vh,150px)}
html.doofree-desktop-app .tv-hero h1{margin:0 0 12px;max-width:650px;color:#fff;font-size:clamp(34px,3.7vw,58px);line-height:1.04;letter-spacing:-.025em}
html.doofree-desktop-app .tv-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px;color:#ddd;font-size:13px;font-weight:600}
html.doofree-desktop-app .tv-hero-meta span+span:before{content:"•";margin-right:10px;color:#888}
html.doofree-desktop-app .tv-hero p{display:-webkit-box;max-width:610px;margin:0;color:#ddd;font-size:15px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html.doofree-desktop-app .tv-hero-actions{display:flex;align-items:center;gap:10px;margin-top:20px}
html.doofree-desktop-app .tv-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:7px;font-size:15px;font-weight:750;transition:transform .14s ease,background .14s ease}
html.doofree-desktop-app .tv-action svg{width:20px;height:20px;fill:currentColor}
html.doofree-desktop-app .tv-action-primary{background:#fff;color:#111}
html.doofree-desktop-app .tv-action-secondary{background:rgba(109,109,110,.72);color:#fff}
html.doofree-desktop-app .tv-action:hover,html.doofree-desktop-app .tv-action:focus-visible{transform:scale(1.045);outline:0;box-shadow:0 12px 26px rgba(0,0,0,.32)}
html.doofree-desktop-app .tv-hero-dots{position:absolute;left:50%;bottom:18px;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
html.doofree-desktop-app .tv-hero-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.4);cursor:pointer}
html.doofree-desktop-app .tv-hero-dot.is-active,html.doofree-desktop-app .tv-hero-dot:focus-visible{width:28px;height:7px;background:#fff;outline:0}

html.doofree-desktop-app .tv-home-rows{padding:18px 0 42px}
html.doofree-desktop-app .tv-row{position:relative;margin:0;padding:24px 0 18px;background:var(--web-app-bg);overflow:hidden}
html.doofree-desktop-app .tv-row-head{display:flex;align-items:center;padding:0 var(--web-app-side)}
html.doofree-desktop-app .tv-row-title{margin:0;color:#e8e8e8;font-size:clamp(19px,1.55vw,25px);font-weight:750}
html.doofree-desktop-app .tv-row-viewport{overflow-x:auto;overflow-y:visible;padding:16px var(--web-app-side) 20px;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
html.doofree-desktop-app .tv-row-viewport::-webkit-scrollbar{display:none}
html.doofree-desktop-app .tv-row-track{display:flex;align-items:flex-start;gap:clamp(12px,1vw,18px);width:max-content;min-width:100%}
html.doofree-desktop-app .tv-card{display:block;position:relative;color:#fff;min-width:0;border-radius:8px;transform-origin:center center;transition:transform .15s ease,filter .15s ease;scroll-snap-align:center}
html.doofree-desktop-app .tv-card-landscape,html.doofree-desktop-app .tv-card[data-platform-cover-layout="landscape"]{flex:0 0 clamp(235px,18vw,320px)}
html.doofree-desktop-app .tv-card-portrait,html.doofree-desktop-app .tv-card[data-platform-cover-layout="portrait"]{flex:0 0 clamp(145px,10.5vw,188px)}
html.doofree-desktop-app .tv-card-art{position:relative;width:100%;overflow:hidden;border-radius:8px;background:var(--web-app-card);box-shadow:0 8px 20px rgba(0,0,0,.25)}
html.doofree-desktop-app .tv-card-landscape .tv-card-art,html.doofree-desktop-app .tv-card[data-platform-cover-layout="landscape"] .tv-card-art{aspect-ratio:16/9}
html.doofree-desktop-app .tv-card-portrait .tv-card-art,html.doofree-desktop-app .tv-card[data-platform-cover-layout="portrait"] .tv-card-art{aspect-ratio:2/3}
html.doofree-desktop-app .tv-card-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .15s ease}
html.doofree-desktop-app .tv-card-gradient{position:absolute;inset:50% 0 0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent);pointer-events:none}
html.doofree-desktop-app .tv-card-badges{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;pointer-events:none}
html.doofree-desktop-app .tv-card-badges span{padding:3px 6px;border-radius:4px;background:rgba(0,0,0,.72);font-size:10px;font-weight:650}
html.doofree-desktop-app .tv-card-copy{padding:8px 3px 0}
html.doofree-desktop-app .tv-card-copy strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
html.doofree-desktop-app .tv-card-copy span{display:block;margin-top:2px;color:var(--web-app-muted);font-size:11px}
html.doofree-desktop-app .tv-card:hover,html.doofree-desktop-app .tv-card:focus-visible{z-index:4;transform:scale(1.055);outline:0;filter:brightness(1.05)}
html.doofree-desktop-app .tv-card:focus-visible .tv-card-art{box-shadow:0 14px 30px rgba(0,0,0,.48)}

/* Generic desktop keyboard focus for non-Home pages. */
html.doofree-desktop-app main a:focus-visible,
html.doofree-desktop-app main button:focus-visible,
html.doofree-desktop-app main [tabindex]:focus-visible{outline:0!important;box-shadow:0 0 0 2px rgba(255,255,255,.15);filter:brightness(1.06)}
html.doofree-desktop-app main input:focus-visible,
html.doofree-desktop-app main select:focus-visible,
html.doofree-desktop-app main textarea:focus-visible{outline:0!important;border-color:rgba(255,255,255,.72)!important;box-shadow:0 0 0 2px rgba(255,255,255,.10)!important}

@media(max-width:1180px){
  html.doofree-desktop-app .member-nav-name{display:none}
  html.doofree-desktop-app .tv-home-label{display:none}
  html.doofree-desktop-app .desktop-nav>a{padding:0 8px}
  html.doofree-desktop-app .tv-hero-content{width:min(620px,52vw)}
}

/* Desktop App result surfaces — Search / Tag / Category share the same row
 * language as Home/Platform while mobile and Google TV keep their own CSS. */
html.doofree-desktop-app .app-result-mode{min-height:calc(100vh - var(--web-app-header-h));padding-top:0}
html.doofree-desktop-app .app-result-summary{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  min-height:180px;padding:44px var(--web-app-side) 28px;
  background:linear-gradient(180deg,#1b1b1b 0%,var(--web-app-bg) 100%)
}
html.doofree-desktop-app .app-result-summary>div{min-width:0}
html.doofree-desktop-app .app-result-eyebrow{display:block;margin-bottom:7px;color:#8d8d8d;font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
html.doofree-desktop-app .app-result-summary h1{margin:0;color:#fff;font-size:clamp(28px,2.7vw,44px);line-height:1.12;overflow-wrap:anywhere}
html.doofree-desktop-app .app-result-summary p{margin:9px 0 0;color:var(--web-app-muted);font-size:13px}
html.doofree-desktop-app .app-result-clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:7px;background:rgba(255,255,255,.09);color:#eee;font-size:13px;font-weight:650}
html.doofree-desktop-app .app-result-clear:hover,html.doofree-desktop-app .app-result-clear:focus-visible{outline:0;background:rgba(255,255,255,.17);color:#fff}
html.doofree-desktop-app .app-result-mode .tv-home-rows{padding-top:0}
html.doofree-desktop-app .app-result-mode .tv-row:first-of-type{padding-top:18px}
html.doofree-desktop-app .app-result-empty{margin:28px var(--web-app-side);padding:42px 24px;border-radius:10px;background:#1b1b1b;color:#aaa;text-align:center}

/* Desktop movie detail — same visual hierarchy as the App, compacted for a
 * monitor viewing distance. The TV and mobile rules are not changed. */
html.doofree-desktop-app .detail-hero{
  min-height:calc(100vh - var(--web-app-header-h));
  height:auto;
  overflow:hidden;
  background:var(--web-app-bg)
}
html.doofree-desktop-app .detail-hero .detail-bg,
html.doofree-desktop-app .detail-hero .detail-bg-video{
  top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center center
}
html.doofree-desktop-app .detail-hero:after{
  background:
    linear-gradient(90deg,rgba(20,20,20,.98) 0%,rgba(20,20,20,.90) 24%,rgba(20,20,20,.40) 62%,rgba(20,20,20,.08) 82%),
    linear-gradient(0deg,var(--web-app-bg) 0%,rgba(20,20,20,.84) 8%,rgba(20,20,20,.08) 55%)
}
html.doofree-desktop-app .detail-hero .detail-wrap{
  min-height:calc(100vh - var(--web-app-header-h));
  width:min(1260px,calc(100% - 48px));
  grid-template-columns:clamp(160px,14vw,205px) minmax(0,760px);
  grid-template-areas:"poster info" "poster synopsis";
  align-content:end;align-items:end;column-gap:28px;row-gap:15px;
  padding:70px 0 44px
}
html.doofree-desktop-app .detail-poster-column{gap:10px;align-self:end}
html.doofree-desktop-app .detail-poster{border-radius:9px;box-shadow:0 14px 36px rgba(0,0,0,.42)}
html.doofree-desktop-app .detail-watch-button{
  min-height:44px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:14px;font-weight:800;
  transition:transform .14s ease,filter .14s ease
}
html.doofree-desktop-app .detail-watch-button:hover,
html.doofree-desktop-app .detail-watch-button:focus-visible{outline:0!important;transform:scale(1.035);filter:brightness(.95);box-shadow:0 12px 28px rgba(0,0,0,.34)}
html.doofree-desktop-app .detail-info-main{align-self:end;padding-top:0}
html.doofree-desktop-app .detail-info-main h1{margin:0 0 8px;font-size:clamp(36px,4vw,60px);line-height:1.05;letter-spacing:-.025em;text-shadow:0 3px 24px rgba(0,0,0,.38)}
html.doofree-desktop-app .detail-alt-title{color:#c8c8c8;font-size:14px}
html.doofree-desktop-app .detail-labels{gap:7px;margin-top:13px}
html.doofree-desktop-app .detail-label{padding:6px 9px;border:0;border-radius:5px;background:rgba(109,109,110,.58);color:#f2f2f2;font-size:11px}
html.doofree-desktop-app a.detail-label:hover,
html.doofree-desktop-app a.detail-label:focus-visible{outline:0!important;background:rgba(255,255,255,.21);box-shadow:none!important;filter:none}
html.doofree-desktop-app .detail-synopsis-block{align-self:start}
html.doofree-desktop-app .detail-synopsis{display:-webkit-box;max-width:760px;margin:0;color:#d0d0d0;font-size:14px;line-height:1.65;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
html.doofree-desktop-app .movie-banner-section{padding:26px var(--web-app-side) 10px;background:var(--web-app-bg)}
html.doofree-desktop-app .movie-banner-section>.container{width:min(1180px,100%)}
html.doofree-desktop-app .movie-banner-frame{border-radius:9px!important}
html.doofree-desktop-app .movie-banner-link:focus-visible{outline:0!important;transform:scale(1.012);box-shadow:0 14px 34px rgba(0,0,0,.4)!important}
html.doofree-desktop-app .movie-episodes-section{padding:30px var(--web-app-side) 54px;background:var(--web-app-bg)}
html.doofree-desktop-app .movie-episodes-section>.container{width:min(1260px,100%)}
html.doofree-desktop-app .movie-episodes-head{margin-bottom:16px}
html.doofree-desktop-app .movie-episodes-head h2{font-size:clamp(22px,2vw,30px);font-weight:760}
html.doofree-desktop-app .movie-episodes-section .episode-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html.doofree-desktop-app .movie-episodes-section .episode-item{border:0;border-radius:8px;background:#181818;padding:13px 14px;transition:transform .13s ease,background .13s ease}
html.doofree-desktop-app .movie-episodes-section .episode-item:hover,
html.doofree-desktop-app .movie-episodes-section .episode-item:focus-visible{outline:0!important;transform:scale(1.012);background:#2f2f2f;box-shadow:none!important;filter:none}
html.doofree-desktop-app .movie-episodes-section .episode-watch-button{border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}

@media(max-width:1100px){
  html.doofree-desktop-app .detail-hero .detail-wrap{grid-template-columns:150px minmax(0,1fr);width:min(calc(100% - 48px),1040px)}
  html.doofree-desktop-app .detail-info-main h1{font-size:clamp(32px,4.5vw,48px)}
  html.doofree-desktop-app .movie-episodes-section .episode-list{grid-template-columns:1fr}
}

/* Desktop App Phase 3 — Account / Login / Packages / Payment.
 * Desktop-only presentation. Mobile web and Google TV do not load this file. */
html.doofree-desktop-app [data-app-login-page],
html.doofree-desktop-app [data-app-account-page],
html.doofree-desktop-app [data-app-packages-page]{
  --app-surface:#1b1b1b;
  --app-surface-soft:#222;
  --app-focus:rgba(255,255,255,.16);
}

/* Login — centered App card, with a deterministic vertical keyboard path. */
html.doofree-desktop-app [data-app-login-page]{
  width:min(560px,calc(100% - 48px));
  min-height:calc(100vh - var(--web-app-header-h));
  margin:0 auto;
  padding:34px 0 46px;
  display:grid;
  align-items:center;
}
html.doofree-desktop-app [data-app-login-page] .tv-login-panel{
  width:100%;
  padding:32px;
  border:0;
  border-radius:12px;
  background:var(--app-surface);
  box-shadow:0 24px 70px rgba(0,0,0,.26);
}
html.doofree-desktop-app [data-app-login-page] .tv-login-panel h1{
  margin:0 0 6px;
  font-size:clamp(30px,3vw,42px);
  line-height:1.08;
  letter-spacing:-.02em;
}
html.doofree-desktop-app [data-app-login-page] .tv-login-subtitle{margin:0 0 22px;font-size:14px}
html.doofree-desktop-app [data-app-login-page] .tv-login-google{
  min-height:48px;border-radius:8px;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease
}
html.doofree-desktop-app [data-app-login-page] .tv-login-google:hover,
html.doofree-desktop-app [data-app-login-page] .tv-login-google:focus-visible{
  outline:0;transform:scale(1.012);box-shadow:0 12px 28px rgba(0,0,0,.25)
}
html.doofree-desktop-app [data-app-login-page] .tv-login-divider{margin:20px 0}
html.doofree-desktop-app [data-app-login-page] .tv-login-form{display:grid;gap:15px}
html.doofree-desktop-app [data-app-login-page] .field{gap:7px}
html.doofree-desktop-app [data-app-login-page] .field input{
  min-height:48px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#111;color:#fff
}
html.doofree-desktop-app [data-app-login-page] .field input:hover{border-color:rgba(255,255,255,.28)}
html.doofree-desktop-app [data-app-login-page] .field input:focus{
  border-color:rgba(255,255,255,.62);box-shadow:0 0 0 2px rgba(255,255,255,.06);outline:0
}
html.doofree-desktop-app [data-app-login-page] .tv-login-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
html.doofree-desktop-app [data-app-login-page] .tv-login-actions .button{min-height:46px;border-radius:8px}
html.doofree-desktop-app [data-app-login-page] .tv-login-actions .button:focus-visible{
  outline:0!important;transform:scale(1.018);box-shadow:0 12px 26px rgba(0,0,0,.26)
}

/* Account — App-style overview followed by a separate subscriptions surface. */
html.doofree-desktop-app [data-app-account-page]{padding:24px 0 52px;background:var(--web-app-bg)}
html.doofree-desktop-app [data-app-account-page] .account-layout{width:min(1180px,calc(100% - 48px));margin:0 auto}
html.doofree-desktop-app [data-app-account-page] .account-overview-section{min-height:calc(100vh - var(--web-app-header-h) - 48px);display:flex;align-items:center}
html.doofree-desktop-app [data-app-account-page] .account-overview-grid{
  width:100%;grid-template-columns:minmax(0,1.45fr) minmax(290px,.7fr);gap:18px;align-items:stretch
}
html.doofree-desktop-app [data-app-account-page] .account-profile-panel,
html.doofree-desktop-app [data-app-account-page] .account-google-panel{
  border:0;border-radius:12px;background:var(--app-surface);box-shadow:0 16px 46px rgba(0,0,0,.16)
}
html.doofree-desktop-app [data-app-account-page] .account-profile-panel{padding:26px}
html.doofree-desktop-app [data-app-account-page] .account-profile-head{gap:18px;margin-bottom:20px}
html.doofree-desktop-app [data-app-account-page] .profile-avatar-large{width:92px;height:92px;border-width:2px}
html.doofree-desktop-app [data-app-account-page] .account-profile-head h1{font-size:clamp(27px,2.4vw,36px)}
html.doofree-desktop-app [data-app-account-page] .account-profile-form{gap:15px}
html.doofree-desktop-app [data-app-account-page] .account-display-name-view,
html.doofree-desktop-app [data-app-account-page] .account-display-name-input{
  min-height:48px;border-radius:8px;background:#111;border:1px solid rgba(255,255,255,.12)
}
html.doofree-desktop-app [data-app-account-page] .account-display-name-view:hover,
html.doofree-desktop-app [data-app-account-page] .account-display-name-view:focus-visible{
  outline:0!important;border-color:rgba(255,255,255,.55);background:var(--app-focus);box-shadow:none
}
html.doofree-desktop-app [data-app-account-page] .account-form-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:4px}
html.doofree-desktop-app [data-app-account-page] .account-form-actions .button{min-height:44px;padding:0 12px;border-radius:8px;white-space:nowrap}
html.doofree-desktop-app [data-app-account-page] .account-form-actions .button:focus-visible,
html.doofree-desktop-app [data-app-account-page] .account-google-button:focus-visible{
  outline:0!important;transform:scale(1.015);box-shadow:0 12px 26px rgba(0,0,0,.24)
}
html.doofree-desktop-app [data-app-account-page] .account-google-panel{padding:24px;align-items:center}
html.doofree-desktop-app [data-app-account-page] .account-google-icon{width:52px;height:52px;flex-basis:52px;border-radius:50%}
html.doofree-desktop-app [data-app-account-page] .account-google-copy h2{font-size:21px}
html.doofree-desktop-app [data-app-account-page] .account-subscriptions-section{
  margin-top:34px;padding-top:26px;scroll-margin-top:calc(var(--web-app-header-h) + 18px)
}
html.doofree-desktop-app [data-app-account-page] .account-subscriptions-section>.section-head{margin-bottom:14px}
html.doofree-desktop-app [data-app-account-page] .account-subscriptions-section>.section-head h2{font-size:clamp(24px,2.2vw,32px)}
html.doofree-desktop-app [data-app-account-page] [data-account-subscriptions]:focus{
  outline:0!important
}
html.doofree-desktop-app [data-app-account-page] [data-account-subscriptions]:focus>.section-head h2{color:#fff}
html.doofree-desktop-app [data-app-account-page] .table-wrap{border:0;border-radius:10px;background:var(--app-surface);overflow:hidden}
html.doofree-desktop-app [data-app-account-page] .data-table{background:transparent;min-width:0}
html.doofree-desktop-app [data-app-account-page] .data-table th,
html.doofree-desktop-app [data-app-account-page] .data-table td{padding:14px 16px;border-color:rgba(255,255,255,.07)}
html.doofree-desktop-app [data-app-account-page] [data-account-subscription-row]{transition:background .12s ease,transform .12s ease}
html.doofree-desktop-app [data-app-account-page] [data-account-subscription-row]:hover,
html.doofree-desktop-app [data-app-account-page] [data-account-subscription-row]:focus{
  outline:0!important;background:rgba(255,255,255,.09)
}

/* Packages — horizontal plan choice + separate checkout section, same state model as TV. */
html.doofree-desktop-app [data-app-packages-page]{padding:26px 0 58px;background:var(--web-app-bg)}
html.doofree-desktop-app [data-app-packages-page]>.container{width:min(1220px,calc(100% - 48px))}
html.doofree-desktop-app [data-app-packages-page] .package-plans-section{min-height:calc(100vh - var(--web-app-header-h) - 52px);display:flex;flex-direction:column;justify-content:center}
html.doofree-desktop-app [data-app-packages-page] .package-page-head{margin-bottom:22px}
html.doofree-desktop-app [data-app-packages-page] .package-page-head h2{font-size:clamp(28px,2.8vw,42px);letter-spacing:-.02em}
html.doofree-desktop-app [data-app-packages-page] .package-plans-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html.doofree-desktop-app [data-app-packages-page] .package-plan-card{
  min-height:320px;padding:24px;border:0;border-radius:10px;background:var(--app-surface);transform-origin:center center;
  box-shadow:0 16px 42px rgba(0,0,0,.14);transition:transform .14s ease,background .14s ease,box-shadow .14s ease
}
html.doofree-desktop-app [data-app-packages-page] .package-plan-card:hover,
html.doofree-desktop-app [data-app-packages-page] .package-plan-card:focus-visible{
  outline:0!important;transform:scale(1.018);background:#262626;box-shadow:0 22px 52px rgba(0,0,0,.26)
}
html.doofree-desktop-app [data-app-packages-page] .package-plan-card.is-selected{background:#292929;box-shadow:inset 0 0 0 2px rgba(255,255,255,.24),0 20px 48px rgba(0,0,0,.22)}
html.doofree-desktop-app [data-app-packages-page] .package-plan-card .price{font-size:clamp(32px,3vw,42px)}
html.doofree-desktop-app [data-app-packages-page] .package-plan-card .button{min-height:44px;border-radius:7px}
html.doofree-desktop-app [data-app-packages-page] .package-payment-section{
  min-height:calc(100vh - var(--web-app-header-h));padding:30px 0 46px;scroll-margin-top:var(--web-app-header-h)
}
html.doofree-desktop-app [data-app-packages-page] .package-payment-section:focus{outline:0!important}
html.doofree-desktop-app [data-app-packages-page] .package-checkout-panel{
  margin:0;padding:26px;border:0;border-radius:12px;background:var(--app-surface);box-shadow:0 18px 52px rgba(0,0,0,.18)
}
html.doofree-desktop-app [data-app-packages-page] .package-checkout-head{border-color:rgba(255,255,255,.08)}
html.doofree-desktop-app [data-app-packages-page] .package-payment-account,
html.doofree-desktop-app [data-app-packages-page] .package-payment-qr-area,
html.doofree-desktop-app [data-app-packages-page] .package-slip-upload{
  border-color:rgba(255,255,255,.09);border-radius:10px;background:#151515
}
html.doofree-desktop-app [data-app-packages-page] .package-contact-field input{border-radius:8px;background:#111;border-color:rgba(255,255,255,.12)}
html.doofree-desktop-app [data-app-packages-page] .package-contact-field input:focus{border-color:rgba(255,255,255,.58);box-shadow:none}
html.doofree-desktop-app [data-app-packages-page] .package-slip-upload:focus-visible,
html.doofree-desktop-app [data-app-packages-page] .package-payment-download:focus-visible,
html.doofree-desktop-app [data-app-packages-page] .package-purchase-submit:focus-visible,
html.doofree-desktop-app [data-app-packages-page] .package-free-checkout-form .button:focus-visible{
  outline:0!important;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 12px 28px rgba(0,0,0,.22)
}

/* Keep desktop density useful on laptops without changing mobile-web breakpoints. */
@media(max-width:1120px){
  html.doofree-desktop-app [data-app-account-page] .account-overview-grid{grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)}
  html.doofree-desktop-app [data-app-account-page] .account-form-actions{grid-template-columns:1fr}
  html.doofree-desktop-app [data-app-packages-page] .package-plan-card{min-height:300px;padding:20px}
}

/* The TV handoff payment URL is normally opened on a phone, but if a desktop
 * browser opens it directly it should still inherit the App visual language. */
html.doofree-desktop-app .package-mobile-payment-page{padding:28px 0 54px;background:var(--web-app-bg)}
html.doofree-desktop-app .package-mobile-payment-container{width:min(980px,calc(100% - 48px));margin:0 auto}
html.doofree-desktop-app .package-mobile-checkout-panel,
html.doofree-desktop-app .package-mobile-payment-message{
  border:0;border-radius:12px;background:#1b1b1b;box-shadow:0 18px 52px rgba(0,0,0,.18)
}

/* Phase 4 audit — Register joins the same Desktop App auth system as Login. */
html.doofree-desktop-app [data-app-register-page]{
  width:min(560px,calc(100% - 48px));min-height:calc(100vh - var(--web-app-header-h));margin:0 auto;padding:34px 0 46px;display:grid;align-items:center
}
html.doofree-desktop-app [data-app-register-page]>.panel{
  width:100%;padding:32px;border:0;border-radius:12px;background:#1b1b1b;box-shadow:0 24px 70px rgba(0,0,0,.26)
}
html.doofree-desktop-app [data-app-register-page]>.panel h1{margin:0 0 6px;font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.02em}
html.doofree-desktop-app [data-app-register-page]>.panel>.meta{margin:0 0 22px;font-size:14px}
html.doofree-desktop-app [data-app-register-page] .google-button{min-height:48px;border-radius:8px;transition:transform .14s ease,box-shadow .14s ease}
html.doofree-desktop-app [data-app-register-page] .google-button:hover,
html.doofree-desktop-app [data-app-register-page] .google-button:focus-visible{outline:0;transform:scale(1.012);box-shadow:0 12px 28px rgba(0,0,0,.25)}
html.doofree-desktop-app [data-app-register-page] .divider{margin:20px 0}
html.doofree-desktop-app [data-app-register-page] form{display:grid;gap:15px}
html.doofree-desktop-app [data-app-register-page] form>br{display:none}
html.doofree-desktop-app [data-app-register-page] .field{gap:7px}
html.doofree-desktop-app [data-app-register-page] .field input{min-height:48px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#111;color:#fff}
html.doofree-desktop-app [data-app-register-page] .field input:focus{outline:0;border-color:rgba(255,255,255,.62);box-shadow:0 0 0 2px rgba(255,255,255,.06)}
html.doofree-desktop-app [data-app-register-page] .form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
html.doofree-desktop-app [data-app-register-page] .form-actions .button{min-height:46px;border-radius:8px}
html.doofree-desktop-app [data-app-register-page] .form-actions .button:focus-visible{outline:0!important;transform:scale(1.018);box-shadow:0 12px 26px rgba(0,0,0,.26)}

/* Phase 8: Desktop Player control parity.
 * Desktop reuses the same Player control DOM as Google TV, but remains a normal
 * web page with its own App topbar and mouse support. */
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage{position:relative;width:min(1180px,calc(100vw - 64px));margin:24px auto 0;background:#000;border:0;border-radius:12px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.42)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage:focus-visible{outline:0!important;box-shadow:0 18px 44px rgba(0,0,0,.42)!important}
html.doofree-desktop-app [data-watch-app] #watch-player{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;aspect-ratio:16/9!important;border:0!important;border-radius:0!important;background:#000!important;overflow:hidden!important}
html.doofree-desktop-app [data-watch-app] #watch-player>iframe,html.doofree-desktop-app [data-watch-app] #watch-player .secure-player-mount,html.doofree-desktop-app [data-watch-app] #watch-player .secure-player-mount>video,html.doofree-desktop-app [data-watch-app] #watch-player .secure-player-mount>iframe{width:100%!important;height:100%!important;min-height:100%!important;max-width:none!important;border:0!important;border-radius:0!important;object-fit:contain}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-freeze{position:absolute;z-index:60;inset:0;width:100%;height:100%;display:none;object-fit:contain;background:#000;pointer-events:none}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-freeze.is-visible{display:block}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay{position:absolute;z-index:65;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility .14s ease;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,.76) 100%)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-info{position:absolute;left:24px;top:20px;max-width:min(62%,720px);padding:10px 14px 9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(30,30,30,.62);box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-info-title{color:#fff;font-size:18px;line-height:1.25;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-info-meta{margin-top:4px;color:rgba(255,255,255,.82);font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-info-meta[hidden]{display:none!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 26px 20px}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:10px;color:rgba(255,255,255,.84);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.72)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress-track{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.3);overflow:visible;outline:0!important;transition:height .12s ease,background-color .12s ease}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress-track:focus-visible{height:7px;background:rgba(255,255,255,.52);box-shadow:none!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress-fill{position:absolute;inset:0 auto 0 0;width:0;background:#e50914;border-radius:999px}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress-fill::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translateY(-50%) scale(.72);opacity:0;transition:opacity .12s ease,transform .12s ease}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-progress-track:focus-visible .doofree-tv-player-progress-fill::after{opacity:1;transform:translateY(-50%) scale(1)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-preview{position:absolute;z-index:4;left:50%;bottom:22px;width:240px;transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-preview.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-preview-thumb{position:relative;width:240px;height:135px;background:#151515;border-radius:6px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.72)}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-preview-canvas{display:block;width:100%;height:100%;background:#151515}
html.doofree-desktop-app [data-watch-app] .doofree-tv-seek-preview-time{margin-top:7px;color:#fff;font-size:13px;font-weight:700;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-controls{display:flex;align-items:center;justify-content:flex-end;width:100%;gap:8px;padding:0;background:transparent;border:0}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-spacer{display:none!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.94);cursor:pointer;outline:0!important;box-shadow:none!important;transition:background-color .12s ease,color .12s ease,transform .12s ease}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control svg{width:21px;height:21px;display:block;fill:currentColor;pointer-events:none}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control:hover{background:rgba(255,255,255,.14);color:#fff}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control:focus-visible{background:#fff;color:#141414;transform:scale(1.06);outline:0!important;box-shadow:0 4px 14px rgba(0,0,0,.38)!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control[hidden]{display:none!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-control-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-provider-hint{display:none;margin-right:auto;color:rgba(255,255,255,.84);font-size:12px;font-weight:600}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay.is-provider .doofree-tv-player-provider-hint{display:block}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay.is-provider .doofree-tv-player-progress{display:none}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage:fullscreen,html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border-radius:0!important;background:#000!important}
html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage:fullscreen #watch-player,html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage:-webkit-full-screen #watch-player{width:100vw!important;height:100vh!important;min-height:100vh!important;aspect-ratio:auto!important}
@media(max-height:760px) and (min-width:761px){html.doofree-desktop-app [data-watch-app] .doofree-tv-player-stage{width:min(980px,calc(100vw - 48px));margin-top:16px}html.doofree-desktop-app [data-watch-app] .doofree-tv-player-overlay-bottom{padding:0 20px 14px}}

/* Doofree desktop low-latency navigation v1. */
html.doofree-desktop-app .site-header{
  background:#141414!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:none!important;
}
html.doofree-desktop-app .tv-row-viewport{
  scroll-snap-type:none!important;
}
html.doofree-desktop-app .tv-card,
html.doofree-desktop-app .tv-card-art img,
html.doofree-desktop-app .tv-action,
html.doofree-desktop-app .detail-watch-button,
html.doofree-desktop-app .movie-episodes-section .episode-item,
html.doofree-desktop-app [data-app-packages-page] .package-plan-card,
html.doofree-desktop-app [data-app-account-page] [data-account-subscription-row]{
  transition-duration:.06s!important;
}


/* Desktop app cover loading/broken-image fallback v1. */
html.doofree-desktop-app .tv-card-art{
  background-color:var(--web-app-card);
  background-image:url("../images/doofree-tv-loading-logo-256.webp"),radial-gradient(circle at center,#2a2a2a 0%,var(--web-app-card) 72%);
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-size:min(42%,128px) auto,100% 100%;
}
html.doofree-desktop-app .tv-card-art img{visibility:hidden;opacity:0}
html.doofree-desktop-app .tv-card-art.is-cover-loaded img{visibility:visible;opacity:1}