/* FreedomTube V0.3.3 — original responsive interface. No external fonts or trackers. */
:root{
  --ft-topbar-height:72px;
  --ft-sidebar-width:234px;
  --ft-collapsed-width:78px;
  --ft-purple:#ab8dff;
  --ft-cyan:#70e7df;
}
html{scroll-padding-top:90px}
body{
  background:radial-gradient(ellipse 65% 42% at 94% 2%,#34264b55,transparent 75%),#10121b;
}
.ft-topbar{
  position:sticky;top:0;z-index:6;flex-wrap:nowrap;
  height:var(--ft-topbar-height);min-height:var(--ft-topbar-height);
  padding:0 24px 0 17px;gap:16px;
  background:#171924f2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid #323549;box-shadow:0 6px 28px #05050b44;
}
.ft-topbar .brand{font-size:20px;letter-spacing:-.035em;gap:10px;min-width:max-content}
.ft-topbar .logo{width:36px;height:36px;border-radius:12px;box-shadow:0 4px 16px #8659ff35}
.ft-topbar .brand .badge{font-size:10px;color:#c9c6f3;letter-spacing:0}
.icon-action{display:grid;place-items:center;width:42px;height:42px;min-height:42px;flex-shrink:0;padding:0;
  color:#e9e4f6;border-color:transparent;background:transparent;font-size:24px}
.icon-action:hover{background:#292d40}
#quickSearchForm{display:flex;align-items:center;flex:1;min-width:140px;max-width:570px;margin:0 auto;
  border:1px solid #50516b;border-radius:24px;background:#0f111a;overflow:hidden;transition:border-color .15s}
#quickSearchForm:focus-within{border-color:#ad94fc;box-shadow:0 0 0 2px #9275e227}
#quickSearchForm #quickSearch{height:43px;min-height:43px;padding:10px 8px 10px 19px;border:0;background:transparent;border-radius:0;outline:none;box-shadow:none}
#quickSearchForm button{width:53px;height:43px;min-height:43px;padding:0;border:0;border-left:1px solid #383c50;border-radius:0;background:#292d41;font-size:27px}
.header-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.ft-sidebar{position:fixed;z-index:4;top:var(--ft-topbar-height);left:0;bottom:0;width:var(--ft-sidebar-width);
  padding:19px 12px 22px;overflow-y:auto;overscroll-behavior:contain;
  background:#171a26;border-right:1px solid #303346;scrollbar-width:thin;scrollbar-color:#494258 transparent;
  transition:width .18s ease,transform .18s ease}
.ft-sidebar nav{display:flex;flex-direction:column;gap:3px}
.ft-sidebar nav button{display:flex;align-items:center;gap:14px;width:100%;min-height:45px;padding:10px 13px;
  text-align:left;border-radius:12px;color:#cdd0df;font-size:14px;font-weight:580;white-space:nowrap}
.ft-sidebar nav button:hover{background:#252a3b;color:white}
.ft-sidebar nav button.current{background:linear-gradient(100deg,#514075,#382f55);color:white;border:1px solid #615182}
.nav-glyph{display:inline-flex;justify-content:center;align-items:center;flex:none;width:24px;font-size:22px;line-height:1}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.nav-group-name{margin:4px 13px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#958da9}
.nav-group-inline{display:block;margin:7px 13px}
.nav-rule{display:block;height:1px;background:#323649;margin:13px 11px}
.sidebar-footnote{font-size:11px;color:#8b8fa6;padding:10px 15px}
body main,body footer{max-width:none;margin-left:var(--ft-sidebar-width);margin-right:0;
  padding-left:clamp(19px,2.5vw,42px);padding-right:clamp(19px,2.5vw,42px);
  transition:margin-left .18s ease}
body main{min-height:calc(100vh - var(--ft-topbar-height))}
body.nav-collapsed .ft-sidebar{width:var(--ft-collapsed-width);padding-left:9px;padding-right:9px}
body.nav-collapsed .ft-sidebar nav button{justify-content:center;padding:9px}
body.nav-collapsed .nav-label,body.nav-collapsed .nav-group-name,body.nav-collapsed .nav-rule,body.nav-collapsed .sidebar-footnote{display:none}
body.nav-collapsed main,body.nav-collapsed footer{margin-left:var(--ft-collapsed-width)}
.ft-mobile-nav,#mobileNavBackdrop{display:none}
main section h1{letter-spacing:-.04em}
main section h2{letter-spacing:-.025em}
.grid{grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:17px}
.tile{border-radius:16px;background:linear-gradient(145deg,#222638,#1e2232);border:1px solid #3b3e54;
  padding:12px;box-shadow:0 7px 24px #00000024;transition:border-color .15s,transform .15s}
.tile:hover{border-color:#5e527b}
.tile .poster{border-radius:11px}
.tile .titleline{font-size:14px;min-height:0;margin:11px 1px 6px}
.tile .muted.small{font-size:11px}
.tile .buttons{gap:6px}
.tile .buttons button{padding:6px 9px;min-height:32px;font-size:11px;border-radius:8px;background:#292e43}
.tile .buttons button:hover{background:#413554;border-color:#ac90ef}
.panel{box-shadow:0 10px 30px #0505111c}
.explore-topics{gap:7px}
.explore-topics button{background:#292638;border-color:#514666}
.explore-topics button:hover{background:#49385e}
.watch-layout{grid-template-columns:minmax(0,1.8fr) minmax(245px,.8fr)}
#watchTitle{font-size:clamp(24px,3vw,35px);line-height:1.2}
#watchChannel{box-shadow:0 4px 18px #9670ff14}
#persistentPlayer.full{z-index:2}
#toast{z-index:12}
/* Appearance presets change density, not the saved video collection. */
body[data-layout="cinema"] .grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
body[data-layout="cinema"] .tile{padding:14px}
body[data-layout="cinema"] .watch-layout{grid-template-columns:minmax(0,1fr)}
body[data-layout="cinema"] #watchRelated{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
body[data-layout="cinema"] .watch-player{max-height:82vh}
body[data-layout="compact"] .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
body[data-layout="compact"] .tile{padding:9px;border-radius:12px}
body[data-layout="compact"] .tile .titleline{font-size:13px;margin-top:7px}
body[data-layout="compact"] .tile .buttons{gap:4px}
body[data-layout="compact"] .tile .buttons button{padding:4px 7px;min-height:29px;font-size:10px}
.appearance-panel .appearance-intro{margin:0 0 15px;color:#b8bad1}
.appearance-panel .appearance-preview{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}
.appearance-panel .appearance-card{flex:1 1 170px;min-width:145px;padding:12px;border:1px solid #42455a;
  border-radius:12px;background:#222637;color:#d0d0e0}
.appearance-panel .appearance-card strong{display:block;color:#eee8ff;margin-bottom:5px}
.appearance-panel .appearance-card span{font-size:12px;line-height:1.45}
.appearance-panel .appearance-card.current{border-color:#ad94fc;background:#352b4a}
@media(min-width:901px){
 #mobileNavBackdrop[hidden]{display:none}
}
@media(max-width:900px){
 :root{--ft-topbar-height:64px}
 .ft-topbar{height:64px;min-height:64px;padding:0 13px;gap:8px}
 .ft-topbar .brand{font-size:18px}
 .ft-topbar .brand .badge{display:none}
 .ft-sidebar{top:0;bottom:0;width:min(290px,83vw);padding-top:24px;z-index:10;transform:translateX(-105%);
   box-shadow:15px 0 45px #02030b80}
 body.nav-collapsed .ft-sidebar{width:min(290px,83vw);padding:24px 12px}
 body.nav-collapsed .ft-sidebar nav button{justify-content:flex-start;padding:10px 13px}
 body.nav-collapsed .nav-label,body.nav-collapsed .nav-group-name,body.nav-collapsed .nav-rule,body.nav-collapsed .sidebar-footnote{display:block}
 body.drawer-open .ft-sidebar{transform:translateX(0)}
 #mobileNavBackdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:9;background:#02030bc2;backdrop-filter:blur(3px)}
 body main,body.nav-collapsed main,body footer,body.nav-collapsed footer{max-width:none;margin-left:0;padding-left:18px;padding-right:18px}
 body main{padding-bottom:115px}
 .ft-mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:8;display:grid;grid-template-columns:repeat(4,1fr);
   min-height:65px;padding:7px 7px max(8px,env(safe-area-inset-bottom));border-top:1px solid #3c3a54;
   background:#181b2af5;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
 .ft-mobile-nav button{border:0;border-radius:10px;min-height:50px;padding:3px 4px;background:transparent;
   color:#c5bfd5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
 .ft-mobile-nav button span{font-size:22px;line-height:1.15}
 .ft-mobile-nav button small{font-size:10px}
 .ft-mobile-nav button.current{background:#39304e;color:#f5ebff}
 #persistentPlayer.mini{bottom:82px;right:11px}
 body[data-layout="cinema"] .watch-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
 .ft-topbar .brand{font-size:16px;gap:6px}
 .ft-topbar .logo{width:32px;height:32px}
 #quickSearchForm{display:none}
 .header-actions{margin-left:auto}
 main section h1{font-size:26px}
 .grid,body[data-layout="cinema"] .grid,body[data-layout="compact"] .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
 .watch-layout{grid-template-columns:1fr}
 .tile .buttons button{min-height:36px}
}
@media(max-width:360px){.ft-topbar .brand{font-size:14px}.ft-topbar{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.ft-sidebar,body main,body footer,.tile{transition:none}}