/* ============================================================
   GEORGE reskin - full design overlay for the REAL clone app (/).
   Loaded last; keeps all functionality, restyles every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Abril+Fatface&family=Open+Sans:wght@400;500;600;700&display=swap');

:root{
  --gn:#092b51; --gnd:#061d38; --gr:#d80314; --grd:#b00210;
  --gg:#c9a84c; --gcream:#f6f6f7; --gmut:#7a7a7a; --gline:#e6e7eb; --gink:#141414;
  --gtext:#092b51;   /* heading/body text; --gn stays the navy SURFACE colour */
}

/* ---------- Typography ---------- */
body,.fe,p,span,div,li,td,th,label,input,button,select,textarea,a,small{font-family:'Open Sans',system-ui,-apple-system,sans-serif;}
h1,h2,h3,h4,h5,
.vs-column h3,.vs-column h3 a,.caption h3,.nav-title,.section-title,.page-title,.channel-title,
.title,.video-title,.entry-title,.block-title,.widget-title,.panel-title,.box-title,.modal-title{
  font-family:'Playfair Display',Georgia,serif !important;letter-spacing:-.01em;}
body{background:#fff;color:var(--gink);-webkit-font-smoothing:antialiased;}

/* ---------- Links & accents ---------- */
a{color:var(--gink);}
a:hover{color:var(--gr);}
.text-primary,.text-danger,.red,.link-red{color:var(--gr) !important;}

/* ---------- Buttons ---------- */
.btn,button,input[type="submit"],input[type="button"],.button,.vs-btn{
  border-radius:2px !important;font-family:'Open Sans',sans-serif !important;
  font-weight:700 !important;letter-spacing:.05em;text-transform:uppercase;}
.btn-primary,.btn-danger,.btn-red,.btn.red,.btn-subscribe,.subscribe,.subscribe-btn,.follow-btn,
.btn-success,.bg-primary,.uploadbtn,.btn-upload,.vs-btn-red{
  background:var(--gr) !important;border-color:var(--gr) !important;color:#fff !important;}
.btn-primary:hover,.btn-danger:hover,.subscribe:hover,.btn-success:hover{background:var(--grd) !important;}
.btn-default,.btn-outline,.btn-secondary,.btn-light{
  border:1.5px solid var(--gn) !important;color:var(--gtext) !important;background:#fff !important;}
.btn-default:hover,.btn-secondary:hover{background:var(--gn) !important;color:#fff !important;}
.btn-navy,.btn-info{background:var(--gn) !important;border-color:var(--gn) !important;color:#fff !important;}

/* ---------- Forms / inputs (auth, upload, account, search) ---------- */
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"],
input[type="url"],textarea,select,.form-control,.input,.vs-input{
  border:1px solid var(--gline) !important;border-radius:3px !important;background:#fff !important;
  color:var(--gink) !important;font-family:'Open Sans',sans-serif !important;}
input:focus,textarea:focus,select:focus,.form-control:focus{
  border-color:var(--gn) !important;box-shadow:0 0 0 3px rgba(9,43,81,.08) !important;outline:none;}
label,.control-label,.field-label{font-weight:600;color:var(--gtext);}

/* ---------- Header / masthead ---------- */
#main_header{background:#fff !important;border-bottom:none !important;box-shadow:0 1px 0 rgba(9,43,81,.06);position:relative;}
#main_header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gn) 0 33%,var(--gr) 33% 66%,var(--gg) 66% 100%);}
#ct-header-top,#ct-header-bottom{background:#fff !important;}
#logo_container{text-align:center;}

/* top / category nav */
#sub-nav-bar,#main-menu,.main-nav,#ct-header-bottom ul,.top-nav{background:transparent !important;}
#sub-nav-bar li a,#main-menu>li>a,.main-nav a,.menu-item a,#ct-header-bottom a,.top-nav a{
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gtext) !important;font-size:12.5px !important;}
#sub-nav-bar li a:hover,#main-menu>li>a:hover,#sub-nav-bar li.active a,#main-menu>li.active>a,.top-nav a.active{color:var(--gr) !important;}

/* search */
.top-search-form-wrap input,.sb-search-input,input.search,.search-input{border-radius:24px !important;}
.top-search-form-wrap button,.search-btn,.sb-icon-search{background:var(--gr) !important;color:#fff !important;}

/* ---------- Left sidebar (member menu) ---------- */
.nav-title,.sidebar h4,.widget-title,.block-title,.side-title{color:var(--gtext) !important;font-family:'Playfair Display',serif !important;}
.sidebar a,.side-menu a,.accordion a,.leftnav a{color:var(--gink) !important;}
.sidebar .active>a,.accordion .active>a,.side-menu .active a,.leftnav .active a{color:var(--gr) !important;font-weight:700;}
.sidebar li:hover>a{color:var(--gr) !important;}

/* ---------- Video / channel cards ---------- */
.thumbs-wrapper figure,.mediaThumb,.thumbs-wrapper img,figure.effect-smallT,.thumb img,.thumbnail img{border-radius:4px !important;}
.vs-column h3,.vs-column h3 a,.file-title,.file-title a,.caption h3 a{
  font-family:'Playfair Display',serif !important;font-weight:800 !important;
  color:var(--gtext) !important;font-size:16px !important;line-height:1.25 !important;}
.vs-column h3 a:hover,.file-title a:hover{color:var(--gr) !important;}
.channel_name,.channel_name a,.caption .by,.uploader,.author,.username{color:var(--gmut) !important;font-weight:600;}
.views-number,.caption span,.time-ago,.date,.meta,.file-meta{color:var(--gmut) !important;}
.caption-more .time-lenght,.duration,.time-lenght,.video-time{background:rgba(6,20,40,.85) !important;border-radius:3px !important;color:#fff !important;}

/* ---------- Watch page ---------- */
.viewpage-title h1,.video-detail h1,.watch-title,.file-view-title{font-family:'Playfair Display',serif !important;color:var(--gtext) !important;}
.video-actions .btn,.viewpage-actions a,.action-buttons a{color:var(--gtext) !important;}
.subscribe-count,.subscriber-count,.view-count{color:var(--gmut) !important;}
.up-next-title,.related-title,.suggested-title{font-family:'Playfair Display',serif !important;color:var(--gtext) !important;}

/* ---------- Tabs / active indicators -> red ---------- */
.tabs-style-topline .tab-current a::after,.nav-tabs .active a,.active-tab,.tab.active,.ui-tabs-active a,.tab-current a{
  border-color:var(--gr) !important;color:var(--gr) !important;}
.nav-tabs>li.active>a{border-top:3px solid var(--gr) !important;color:var(--gr) !important;}

/* ---------- Tables / panels / boxes ---------- */
.panel,.box,.widget,.card,.well,.dashboard-box,.vs-box{border-radius:4px !important;border-color:var(--gline) !important;}
.panel-heading,.box-header,.widget-header{background:#fff !important;border-bottom:1px solid var(--gline) !important;}
table th{color:var(--gtext) !important;}
.table>thead>tr>th{border-bottom:2px solid var(--gn) !important;}

/* ---------- Pagination ---------- */
.pagination>li>a,.pagination>li>span,.pager a,.paging a{color:var(--gtext) !important;border-color:var(--gline) !important;border-radius:2px !important;}
.pagination>.active>a,.pager .active a,.paging .current{background:var(--gr) !important;border-color:var(--gr) !important;color:#fff !important;}

/* ---------- Footer ---------- */
#footer,footer,.footer,#ct-footer,.site-footer,.footer-wrap{background:var(--gn) !important;color:#c7d3e4 !important;}
#footer a,footer a,.footer a{color:#c7d3e4 !important;}
#footer a:hover,footer a:hover{color:#fff !important;}
#footer h4,footer h4,.footer h4{color:var(--gg) !important;font-family:'Playfair Display',serif !important;}

/* ---------- Misc accents ---------- */
.badge,.label-primary,.tag,.pill{background:var(--gr) !important;color:#fff !important;}
.progress-bar,.bar-fill{background:var(--gr) !important;}
::selection{background:var(--gr);color:#fff;}

/* ============================================================
   G3 - deep reskin of the REAL app pages that fall through to
   ViewShark's own templates (register, signin, recovery,
   my-account, upload, messages, tokens). Structure classes:
   #main_header / #ct-header-top / #ct-header-bottom /
   .outer-border-wrapper / .inner-wrapper / .user-form / .row /
   .label-signin / .input-signin / .search-button / #membership-wrapper
   ============================================================ */

/* ---- page ground ---- */
body.fe{background:var(--gcream) !important;color:var(--gink) !important;}
#wrapper,.container.container_wrapper,.inner-block,#siteContent,.content-wrap{background:transparent !important;}

/* ---- masthead: centered logo + tricolor rule (matches magazine header) ---- */
#main_header{background:#fff !important;box-shadow:0 1px 0 rgba(9,43,81,.06) !important;}
#ct-header-top{background:#fff !important;padding:14px 0 10px !important;border:none !important;}
#logo_container{float:none !important;text-align:center !important;margin:0 auto !important;display:block !important;}
#logo_container img{height:64px !important;width:auto !important;display:inline-block !important;}
#ct-header-bottom{background:#fff !important;border-top:1px solid var(--gline) !important;border-bottom:none !important;}
#main_header::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--gn) 0 33.33%,var(--gr) 33.33% 66.66%,var(--gg) 66.66% 100%);}
#ct-header-bottom nav a,#ct-header-bottom .menu a,#ct-header-bottom li a{
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;letter-spacing:.11em !important;
  text-transform:uppercase !important;font-size:12px !important;color:var(--gtext) !important;}
#ct-header-bottom a:hover{color:var(--gr) !important;}

/* ---- centered content card (auth / promo / generic panels) ---- */
.content-wrap{max-width:1180px;margin:26px auto !important;padding:0 20px !important;}
.outer-border-wrapper{background:#fff !important;border:1px solid var(--gline) !important;
  border-radius:6px !important;box-shadow:0 10px 40px rgba(9,43,81,.07) !important;
  padding:0 !important;margin:0 0 26px !important;overflow:hidden;}
.outer-border-wrapper .inner-wrapper{padding:30px 34px !important;}
section.content-current{max-width:560px;margin:0 auto !important;}
.tpl_files section.content-current,.tpl_upload section.content-current,
.tpl_account section.content-current,.tpl_messages section.content-current{max-width:none;}

/* section / card titles -> Playfair with red underline */
.content-title{font-family:'Playfair Display',Georgia,serif !important;font-weight:800 !important;
  font-size:26px !important;color:var(--gtext) !important;letter-spacing:-.01em !important;
  margin:0 0 4px !important;padding:0 !important;}
.content-title i{color:var(--gr) !important;}
.outer-border-wrapper .line{height:3px !important;width:52px !important;background:var(--gr) !important;
  border:none !important;margin:8px 0 22px !important;border-radius:2px;}

/* ---- form rows ---- */
.user-form .row,.entry-form-class .row{display:block;margin-bottom:16px !important;}
.user-form .row.no-top-padding{margin-bottom:6px !important;}
.label-signin,.label-signup{display:block !important;float:none !important;width:auto !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;font-size:11px !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--gtext) !important;
  margin-bottom:7px !important;text-align:left !important;}
.input-signin,.input-signup{display:block !important;float:none !important;width:100% !important;}
.user-form input.text-input,.user-form input.login-input,.entry-form-class input.text-input,
.input-signin input,.input-signup input{
  width:100% !important;box-sizing:border-box !important;height:46px !important;
  padding:0 14px !important;font-size:15px !important;border:1px solid var(--gline) !important;
  border-radius:4px !important;background:#fff !important;}
.user-form input:focus,.input-signin input:focus{border-color:var(--gn) !important;
  box-shadow:0 0 0 3px rgba(9,43,81,.08) !important;}
#check-response{font-size:12px;margin-left:8px;}

/* password strength meter */
#pass_meter{height:6px !important;border-radius:3px !important;background:var(--gline) !important;overflow:hidden;}
#pass_meter .pass_meter_base{background:var(--gr) !important;}

/* ---- primary submit ---- */
.row.form-buttons{margin-top:22px !important;}
.search-button.form-button,button.form-button,.apply-button{
  width:100% !important;height:48px !important;background:var(--gr) !important;border:none !important;
  color:#fff !important;font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  letter-spacing:.09em !important;text-transform:uppercase !important;font-size:13px !important;
  border-radius:4px !important;cursor:pointer !important;}
.search-button.form-button:hover,button.form-button:hover{background:var(--grd) !important;}
.hr{position:relative;text-align:center;margin:20px 0 16px;border-top:1px solid var(--gline);}
.hr .inner{position:relative;top:-11px;background:#fff;padding:0 12px;color:var(--gmut);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;}

/* ---- social auth buttons (fb / google) ---- */
.fb-login,.gp-login,.fb-register,.gp-register,a.facebook,a.google,.btn-facebook,.btn-google{
  display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
  height:44px;border-radius:4px !important;font-weight:700 !important;margin:5px 0 !important;width:100%;}

/* ---- membership packages (paid signup) as cards ---- */
#membership-wrapper{display:flex !important;flex-wrap:wrap;gap:12px;margin:6px 0 4px;}
#membership-wrapper label,.membership-pack,.pack-item{flex:1 1 150px;border:1px solid var(--gline) !important;
  border-radius:6px !important;padding:14px !important;background:#fff !important;cursor:pointer;transition:.15s;}
#membership-wrapper label:hover,.membership-pack:hover{border-color:var(--gn) !important;box-shadow:0 6px 20px rgba(9,43,81,.08);}
.membership-pack .price,.pack-price{font-family:'Playfair Display',serif !important;color:var(--gr) !important;font-weight:800;}

/* ---- captcha centered ---- */
.captcha-row{margin:14px 0 !important;}
.captcha-row .input-signin,.g-recaptcha{margin:0 auto;}

/* ---- right promo / info box ---- */
.outer-border-wrapper.info-promo{background:var(--gn) !important;color:#dbe4f1 !important;border:none !important;}
.info-promo .content-title,.info-promo h1,.info-promo h2,.info-promo h3{color:#fff !important;}
.info-promo a{color:var(--gg) !important;}

/* ---- account / dashboard panels & tables (my-account, tokens, upload) ---- */
.tpl_account .outer-border-wrapper,.tpl_upload .outer-border-wrapper,.tpl_messages .outer-border-wrapper{max-width:none;}
.dynamic_container .box,.panel,.widget,.dashboard-box{border:1px solid var(--gline) !important;border-radius:6px !important;background:#fff !important;}
.settings-menu a,.account-menu a,.tab-menu a{font-weight:600 !important;color:var(--gtext) !important;}
.settings-menu .active a,.tab-menu .active a{color:var(--gr) !important;}

/* ---- left/right sidebar categories on app pages ---- */
.sidebar-container .categories-container{background:#fff !important;border:1px solid var(--gline) !important;
  border-radius:6px !important;margin-bottom:14px;}
.sidebar-container .categories-container .title,.categories-container h4{
  font-family:'Playfair Display',serif !important;color:var(--gtext) !important;}
.sidebar-container a{color:var(--gink) !important;}
.sidebar-container a:hover{color:var(--gr) !important;}

/* ---- upload dropzone ---- */
.upload-area,.dropzone,#dropzone,.uploader-box,.file-drop{border:2px dashed var(--gn) !important;
  border-radius:8px !important;background:var(--gcream) !important;}
.upload-area:hover,.dropzone:hover{border-color:var(--gr) !important;}

/* ---- notices / errors on app forms ---- */
.notice,.notification,.alert-success,.success-message{background:#eaf5ec !important;border:1px solid #bfe0c6 !important;
  color:#1e6b34 !important;border-radius:4px !important;padding:11px 14px !important;}
.error,.alert-danger,.error-message,.warning{background:#fdecec !important;border:1px solid #f3c2c2 !important;
  color:#a11 !important;border-radius:4px !important;padding:11px 14px !important;}

/* ============================================================
   G11 - Account & member-area content (My Account, Upload, Messages,
   Tokens): restyle ViewShark's own account templates so the pages
   match the new design while keeping every form/handler intact.
   Classes: .categories-container/.accordion/.menu-panel-entry (left tabs),
   #ct-wrapper/.entry-form-class/.overview-form, .vs-column, .statsBox,
   .user-thumb-xlarge, generate_html outputs, .save-entry-button etc.
   ============================================================ */

/* ---- left account/member tab menu ---- */
.categories-container{background:#fff !important;border:1px solid var(--gline) !important;border-radius:6px !important;
  overflow:hidden;margin-bottom:16px}
.categories-container h4,.categories-container .nav-title,.blue .categories-menu-title,.categories-container .categories-menu-title{
  background:var(--gn) !important;color:#fff !important;
  font-family:'Playfair Display',serif !important;font-size:16px !important;font-weight:800 !important;
  margin:0 !important;padding:14px 16px !important;display:flex;align-items:center;gap:8px}
.categories-container h4 i,.categories-container .nav-title i,.categories-container .categories-menu-title i{color:var(--gg) !important;float:none !important}
.categories-container .accordion{margin:0 !important;padding:6px 0 !important;list-style:none}
.menu-panel-entry{list-style:none}
.menu-panel-entry>a{display:flex !important;align-items:center;gap:10px;padding:12px 18px !important;
  font-family:'Open Sans',sans-serif !important;font-weight:600 !important;font-size:13.5px !important;
  color:var(--gink) !important;border-left:3px solid transparent !important;text-decoration:none !important}
.menu-panel-entry>a i{color:var(--gtext) !important;font-size:15px}
.menu-panel-entry>a:hover{background:var(--gcream) !important;color:var(--gr) !important}
.menu-panel-entry-active>a,.menu-panel-entry.active>a{background:#fbeced !important;color:var(--gr) !important;
  border-left-color:var(--gr) !important}
.menu-panel-entry-active>a i,.menu-panel-entry.active>a i{color:var(--gr) !important}

/* ---- content card wrapper ---- */
#ct-wrapper,#siteContent .entry-form-class,.overview-form{background:#fff !important;border:1px solid var(--gline) !important;
  border-radius:6px !important;padding:26px 28px !important;box-shadow:0 6px 24px rgba(9,43,81,.05) !important;margin-bottom:20px}
#ct-wrapper .content-title,.overview-form .content-title{margin-top:0 !important}

/* ---- generated form columns ---- */
.vs-column{box-sizing:border-box}
.vs-column.half{width:50% !important;float:left;padding-right:22px}
.vs-column.half.fit{padding-right:0;padding-left:22px}
.vs-column.fourths{width:26% !important;float:left;padding-right:22px}
.vs-column.three_fourths{width:74% !important;float:left}
.vs-column.full{width:100% !important;float:none}
@media(max-width:760px){.vs-column,.vs-column.half,.vs-column.fourths,.vs-column.three_fourths{width:100% !important;float:none;padding:0}}

/* form rows inside account/settings */
#ct-wrapper .row,.entry-form-class .row{margin-bottom:14px !important}
#ct-wrapper label,.entry-form-class label{font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--gtext) !important}
.login-input,.ta-input,#ct-wrapper input[type="text"],#ct-wrapper input[type="password"],#ct-wrapper input[type="email"],
#ct-wrapper textarea,.entry-form-class input,.entry-form-class textarea{
  border:1px solid var(--gline) !important;border-radius:4px !important;padding:10px 12px !important;
  font-size:14px !important;background:#fff !important;max-width:100% !important;box-sizing:border-box}
.ta-input,#ct-wrapper textarea{min-height:90px !important;width:100% !important}
.grayText{color:var(--gmut) !important;font-weight:600}
.pinfo{background:var(--gcream) !important;border:1px solid var(--gline) !important;border-left:3px solid var(--gg) !important;
  border-radius:4px !important;padding:12px 14px !important;margin:8px 0 !important}
.pinfo p{font-size:13px !important;color:var(--gmut) !important;line-height:1.6}

/* ---- account buttons ---- */
.save-entry-button,.change-button,.purge-button,.new-image,.usr-delete,.new-upload,.new-contact,.new-message-button,.rename-label{
  background:var(--gr) !important;border:none !important;color:#fff !important;border-radius:4px !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;font-size:12px !important;padding:11px 20px !important;cursor:pointer !important}
.save-entry-button:hover,.change-button:hover{background:var(--grd) !important}
.purge-button,.usr-delete{background:#8a1a2a !important}
.purge-button:hover,.usr-delete:hover{background:#6f1522 !important}

/* ---- overview profile card ---- */
.statsBox,#overview-userinfo{background:var(--gcream) !important;border:1px solid var(--gline) !important;
  border-radius:6px !important;padding:16px 18px !important}
.statsBox li,#overview-userinfo li{color:var(--gink) !important}
.user-thumb-xlarge,#own-profile-image img{border-radius:8px !important;border:1px solid var(--gline) !important;
  box-shadow:0 6px 20px rgba(9,43,81,.08) !important}
.imageChange a,.new-image{margin-top:10px !important}

/* ---- accordion open/close chevrons cleanup ---- */
.dcjq-icon{filter:none !important}

/* ============================================================
   G12 - Upload (plupload widget) + Message Center reskin.
   Keeps the working plupload chunked uploader and messaging
   handlers intact; only restyles them to the new design.
   ============================================================ */

/* ---- Upload: page wrapper + drop area ---- */
#upload-wrapper,#dobrowse{margin-top:6px}
.plupload_wrapper{font-family:'Open Sans',sans-serif !important;max-width:100% !important}
.plupload_container{background:#fff !important;border:1px solid var(--gline) !important;border-radius:8px !important;
  padding:0 !important;box-shadow:0 6px 24px rgba(9,43,81,.05) !important;overflow:hidden}
.plupload_header{background:var(--gn) !important;border:none !important;border-radius:0 !important;position:relative}
.plupload_header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gn) 0 33.33%,var(--gr) 33.33% 66.66%,var(--gg) 66.66% 100%)}
.plupload_header_content{background:none !important;color:#fff !important;padding:16px 20px !important}
.plupload_header_title{font-family:'Playfair Display',serif !important;color:#fff !important;font-size:20px !important;font-weight:800 !important}
.plupload_header_text{color:#c7d3e4 !important}
.plupload_filelist_header,.plupload_filelist_footer{background:var(--gcream) !important;
  border-color:var(--gline) !important;color:var(--gtext) !important;font-weight:700 !important;font-size:12px !important;
  text-transform:uppercase;letter-spacing:.06em}
.plupload_filelist,.plupload_scroll .plupload_filelist{background:#fff !important}
.plupload_filelist li{border-color:var(--gline) !important}
.plupload_file_name{color:var(--gink) !important}
.plupload_file_size,.plupload_total_file_size,.plupload_total_status{color:var(--gmut) !important}

/* drop hint = dashed magazine dropzone */
.plupload_droptext{background:var(--gcream) !important;color:var(--gmut) !important;
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-size:17px !important;
  border:2px dashed var(--gn) !important;border-radius:8px !important;margin:14px !important;
  display:flex !important;align-items:center;justify-content:center}

/* buttons: Add files / Start upload */
.plupload_button,.plupload_add,.plupload_start{background:var(--gr) !important;color:#fff !important;
  border:none !important;border-radius:4px !important;font-family:'Open Sans',sans-serif !important;
  font-weight:700 !important;letter-spacing:.06em !important;text-transform:uppercase !important;
  font-size:12px !important;padding:9px 18px !important;text-shadow:none !important;background-image:none !important}
.plupload_button:hover{background:var(--grd) !important}
.plupload_start,a.plupload_start{background:var(--gn) !important}
.plupload_start:hover{background:var(--gnd) !important}
.plupload_disabled,.plupload_add.plupload_disabled{background:#b9bec7 !important;color:#fff !important}

/* progress bars in red */
.plupload_progress_container{background:var(--gline) !important;border-radius:4px !important}
.plupload_progress_bar{background:var(--gr) !important}
.plupload_file_status .plupload_progress_bar{background:var(--gr) !important}

/* per-file metadata form (title / desc / tags / category after upload) */
.c-entry-form-edit .row,.c-entry-form-edit label{margin-bottom:8px}
.c-entry-form-edit .login-input,.c-entry-form-edit textarea,.c-entry-form-edit input[type="text"]{
  border:1px solid var(--gline) !important;border-radius:4px !important;padding:9px 12px !important;width:100% !important;box-sizing:border-box}

/* upload media-type icons row */
.icon.icon-video,.icon.icon-image,.icon.icon-audio,.icon.icon-file{color:var(--gtext) !important}

/* ---- Message Center ---- */
.entry-list.tpl-messages{background:#fff !important;border:1px solid var(--gline) !important;border-radius:8px !important;overflow:hidden}
.entry-list.tpl-messages li,.entry-list.tpl-messages .entry-row{border-bottom:1px solid var(--gline) !important;
  padding:12px 16px !important;transition:background .12s}
.entry-list.tpl-messages li:hover{background:var(--gcream) !important}
.entry-list.tpl-messages .unread,.entry-list.tpl-messages li.unread{font-weight:700 !important;background:#fbfbfd !important}
.section-top-bar.button-actions{background:var(--gcream) !important;border:1px solid var(--gline) !important;
  border-radius:6px !important;padding:10px 14px !important;margin-bottom:14px}
.compose-right-label,.compose-right-reply{color:var(--gtext) !important;font-weight:600 !important}
.new-message-button{background:var(--gr) !important}
.new-message-button:hover{background:var(--grd) !important}

/* ============================================================
   G13 - Tokens dashboard (buy / donate / earnings). Payment flow
   (PayPal/Stripe handlers) untouched; only the visuals restyled.
   ============================================================ */
.icon-coin{color:var(--gg) !important}
.vs-column.thirds{width:33.33% !important;float:left;padding-right:20px;box-sizing:border-box}
.vs-column.thirds:last-child{padding-right:0}
@media(max-width:760px){.vs-column.thirds{width:100% !important;float:none;padding-right:0}}
/* token amount / coin figures */
.coin,.token-amount,.tk-amount,.state-text{font-family:'Playfair Display',serif !important;color:var(--gtext) !important}
.coin .icon-coin,.token-amount .icon-coin{color:var(--gg) !important}
.stats,.statsBox{background:var(--gcream) !important;border:1px solid var(--gline) !important;border-radius:6px !important;padding:16px 18px !important}
.stats .label,.statsBox .label{font-size:11px !important;letter-spacing:.07em !important;text-transform:uppercase !important;color:var(--gmut) !important;font-weight:700}
/* token level bars / graph legend */
.dm-wrap{border:1px solid var(--gline) !important;border-radius:6px !important;background:#fff !important;padding:14px !important}
.l1{color:var(--gr) !important}.l2{color:var(--gg) !important}.l3{color:var(--gtext) !important}
/* buy / donate buttons + paypal/stripe submit */
.buy-tokens,.donate-tokens,.token-buy,.token-donate,input[type="image"][name="submit"],
.paypal-button,.stripe-button,button.buy,button.donate{
  background:var(--gr) !important;color:#fff !important;border:none !important;border-radius:4px !important;
  font-weight:700 !important;letter-spacing:.06em !important;text-transform:uppercase !important;padding:11px 20px !important}
.buy-tokens:hover,.donate-tokens:hover{background:var(--grd) !important}
/* token graphs container */
#tokengraph,.tokengraph,.token-graph,.chart-wrap{background:#fff !important;border:1px solid var(--gline) !important;border-radius:6px !important;padding:14px !important}

/* ============================================================
   G16 - Edit Video (owner) + Import / "Grab Videos" polish.
   Uses the app's own working save/thumbnail/import handlers;
   only the edit-specific visuals are restyled.
   ============================================================ */
/* back link */
.edit-back{display:inline-flex;align-items:center;gap:6px;color:var(--gr) !important;font-weight:700 !important;
  font-size:12px !important;letter-spacing:.06em;text-transform:uppercase;margin:4px 0 10px}
/* custom select dropdowns (privacy / category) */
.selector,.selector.fe{border:1px solid var(--gline) !important;border-radius:4px !important;background:#fff !important}
.selector .selector-title,.selector .current{color:var(--gink) !important}
/* thumbnail chooser grid */
.mediaThumb{border-radius:4px !important;border:2px solid transparent !important;overflow:hidden;transition:.12s}
.mediaThumb:hover{border-color:var(--gn) !important}
.mediaThumb.active,.mediaThumb.selected,.thumb-selected .mediaThumb{border-color:var(--gr) !important}
.thumb-popup,.thumb-preview{border:1px solid var(--gline) !important;border-radius:6px !important;background:#fff !important}
.save-button.button-blue,.thumb-popup.save-button{background:var(--gn) !important;color:#fff !important;border:none !important}
.save-button.button-blue:hover{background:var(--gnd) !important}
.icon-thumbs,.icon-thumbs-up{color:var(--gg) !important}
/* privacy / toggle switches on edit page */
.on-off-switch .switch-on,.toggle.on{background:var(--gr) !important}
/* ---- Import / Grab Videos feed list ---- */
.import-feed,.feed-list,.yt-feed,.import-results{background:#fff !important;border:1px solid var(--gline) !important;border-radius:6px !important}
.import-feed li,.feed-list li{border-bottom:1px solid var(--gline) !important;padding:10px 14px !important}
.import-button,.grab-button,.feed-import,.btn-import{background:var(--gr) !important;color:#fff !important;border:none !important;
  border-radius:4px !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.05em !important;padding:9px 16px !important}
.import-button:hover,.grab-button:hover{background:var(--grd) !important}

/* ============================================================
   G42 - App-header parity: make fall-through app pages (Upload,
   Messages, and any other ViewShark template) wear the American
   Pulse masthead instead of the leftover cyan ViewShark logo, and
   drop the app-only header clutter so the chrome matches the
   redesigned custom pages. Cosmetic only; all handlers untouched.
   ============================================================ */

/* American Pulse logo in the app header (override every theme's cyan #logo) */
#logo,
header#main_header a#logo,
header#main_header.smaller a#logo,
a.navbar-brand#logo{
  background:url("../img/logo-header.png") no-repeat center center transparent !important;
  background-size:contain !important;
  width:210px !important;height:54px !important;
  float:none !important;display:inline-block !important;margin:4px auto !important;}
#logo_container{display:flex !important;align-items:center;justify-content:center;gap:10px;}
#logo_container .menu-trigger{color:var(--gtext) !important;}

/* drop app-only header widgets that don't exist in the magazine header */
.theme-switch,.switch.switch-light,.switch-label,.top-notif,.top-icon.top-notif{display:none !important;}

/* keep the header search compact + on-brand when present */
.top-search-form-wrap{margin:0 !important;}
.top-search-form-wrap input{border:1px solid var(--gline) !important;}

/* generic safety: any remaining app panel/well on fall-through pages */
.well,.dynamic_container,.this-inner{background:#fff !important;border-radius:6px !important;}

/* ============================================================
   G43 - Upload page "Membership Details" + quota bars. This page
   uses the app's custom stats widget (#the-stats / .account-sub /
   .pl / .uProgress / .uBar / .uLabel), NOT plupload, so it was
   unstyled. Restyle it to a clean magazine card with real progress
   bars. (The plupload dropzone itself is styled in G12.)
   ============================================================ */

/* uploader loading placeholder (only while empty / "Loading Upload Panel...") */
#uploader.frontend:empty,#uploader.frontend.loading{min-height:60px;color:var(--gmut) !important;
  font-family:'Playfair Display',serif !important;font-style:italic;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gcream) !important;border:2px dashed var(--gn) !important;border-radius:8px !important;margin-bottom:16px}
/* once the widget has loaded, no wrapping border/box */
#uploader.frontend{border:none !important;background:transparent !important;padding:0 !important;display:block !important}

/* category chooser row */
#upload-category,#options-wrapper{margin:6px 0 14px !important}

/* membership + stats wrapper as one card */
#the-stats{background:#fff !important;border:1px solid var(--gline) !important;border-radius:8px !important;
  padding:22px 24px !important;box-shadow:0 6px 24px rgba(9,43,81,.05) !important;margin-bottom:20px;overflow:hidden}
#the-stats .content-title{margin-top:0 !important}

/* membership headline block */
.account-sub{background:var(--gcream) !important;border:1px solid var(--gline) !important;
  border-left:4px solid var(--gg) !important;border-radius:6px !important;padding:16px 18px !important;margin-bottom:20px !important}
.account-sub>div:first-child{font-family:'Playfair Display',serif !important;font-weight:800 !important;
  font-size:22px !important;color:var(--gtext) !important;letter-spacing:-.01em}
.account-date{margin:8px 0 4px !important;color:var(--gmut) !important;font-size:13px}
.account-date .label{font-weight:700 !important;color:var(--gtext) !important;text-transform:none !important;letter-spacing:0 !important}
.sub-renew,button.sub-renew{background:var(--gn) !important;color:#fff !important;border:none !important;
  border-radius:4px !important;font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;font-size:12px !important;padding:11px 20px !important;cursor:pointer}
.sub-renew:hover{background:var(--gnd) !important}

/* quota bars: label + track */
.pl{font-family:'Open Sans',sans-serif !important;font-weight:700 !important;font-size:11px !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--gtext) !important;margin:0 0 8px !important;
  display:flex;align-items:center;gap:7px}
.pl i{color:var(--gg) !important;font-size:14px}
.uProgress{position:relative;height:22px !important;background:var(--gline) !important;border-radius:6px !important;
  overflow:hidden;margin-bottom:18px}
.uBar{height:100% !important;background:linear-gradient(90deg,var(--gn),var(--gr)) !important;
  border-radius:6px 0 0 6px !important;min-width:2px;transition:width .4s ease}
.uLabel{position:absolute !important;inset:0;display:flex !important;align-items:center;justify-content:center;
  font-family:'Open Sans',sans-serif !important;font-size:11px !important;font-weight:700 !important;
  color:var(--gink) !important;letter-spacing:.02em;z-index:2}

/* collapse the app's empty spacer half-columns so bars sit together */
.tpl_upload .vs-column.half:empty{display:none !important}

/* "subscription limit reached" notice already covered by .notice/.error; keep it tidy */
#cb-response .notice-message,#notice-message{border-radius:6px !important}

/* ============================================================
   G44 - Upload widget (plupload.queue) full relayout. The stock
   widget is a cramped floated icon-only button column next to a
   small filelist. Stack it full-width: a clean labeled button row
   on top, a progress bar, then a large drop area below.
   ============================================================ */

/* stack every piece full width: kill the .left-float / fixed-width classes inside upload */
.tpl_upload #upload-wrapper,.tpl_upload #upload-wrapper *,
#upload-wrapper .left-float,#upload-wrapper.left-float{float:none !important}
#upload-wrapper,#upload-wrapper.wd960,#upload-wrapper.left-float.wd960{
  width:100% !important;max-width:840px !important;margin:0 auto !important;float:none !important}
#upload-wrapper .left-float.wdmax,.left-float.wdmax{width:100% !important;max-width:100% !important;float:none !important}
.upload-buttons,.upload-buttons.no-categ{float:none !important;margin:0 0 14px !important;
  display:flex !important;gap:10px !important;flex-wrap:wrap;align-items:center;width:100% !important}
#dobrowse{float:none !important;display:flex !important;gap:10px !important;width:auto !important}
.vs-column.half.fit.upload-right-fix,.upload-right-fix,.vs-column.full{width:100% !important;float:none !important;padding:0 !important}
.plupload_wrapper,.plupload_wrapper.plupload_scroll{width:100% !important;float:none !important;clear:both !important}

/* labeled buttons: Add files (red) + Start upload (navy) */
.plupload_button.browse,.plupload_button.plupload_start,a.plupload_button{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  width:auto !important;min-width:150px !important;height:48px !important;padding:0 22px !important;
  border:none !important;border-radius:6px !important;background-image:none !important;text-shadow:none !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;letter-spacing:.05em !important;
  text-transform:uppercase !important;font-size:12.5px !important;color:#fff !important;text-decoration:none !important;cursor:pointer !important}
.plupload_button.browse{background:var(--gr) !important}
.plupload_button.browse:hover{background:var(--grd) !important}
.plupload_button.plupload_start{background:var(--gn) !important}
.plupload_button.plupload_start:hover{background:var(--gnd) !important}
.plupload_button.plupload_start.plupload_disabled,.plupload_button.plupload_disabled{
  background:#c3c8d0 !important;color:#fff !important;cursor:not-allowed !important}
.plupload_button i,.plupload_button.browse i,.plupload_button.plupload_start i{
  font-size:16px !important;color:#fff !important;margin:0 !important}
.plupload_button.browse::after{content:"Add files"}
.plupload_button.plupload_start::after{content:"Start upload"}

/* progress bar row */
.plupload_progress,.plupload_progress.left-float{width:100% !important;float:none !important;margin:0 0 16px !important}
.plupload_progress_container{position:relative;height:24px !important;background:var(--gline) !important;
  border-radius:7px !important;overflow:hidden !important;border:none !important}
.plupload_progress_bar{background:linear-gradient(90deg,var(--gn),var(--gr)) !important;height:100% !important;border-radius:7px 0 0 7px !important}
.plupload_total_status,.plupload_total_file_size{position:relative;z-index:2;font-family:'Open Sans',sans-serif !important;
  font-weight:700 !important;font-size:12px !important;color:var(--gtext) !important}

/* container as one clean card */
#uploader_container.plupload_container,.plupload_container{background:#fff !important;padding:0 !important;
  border:1px solid var(--gline) !important;border-radius:10px !important;overflow:hidden !important;
  box-shadow:0 6px 24px rgba(9,43,81,.06) !important}
.plupload,.plupload_view_list{border:none !important;background:#fff !important}

/* filelist header + rows: force a clean horizontal row (float:none above broke it) */
.plupload_filelist_header,.plupload_filelist li,.plupload_scroll .plupload_filelist li{
  display:flex !important;align-items:center !important;gap:14px !important}
.plupload_filelist_header{background:var(--gcream) !important;border-bottom:1px solid var(--gline) !important;
  padding:12px 18px !important;font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--gtext) !important}
.plupload_filelist li{padding:11px 18px !important}
.plupload_file_name{flex:1 1 auto !important;float:none !important;text-align:left !important}
.plupload_file_size,.plupload_file_status,.plupload_file_action{
  flex:0 0 auto !important;float:none !important;min-width:64px !important;text-align:right !important}
.plupload_content{padding:0 !important}

/* kill stray divider lines inside the upload widget */
#upload-wrapper .line,#uploader.frontend .line,.plupload_container .line{display:none !important}
/* the section-top-bar carries a leftover 3px theme accent line; flatten it
   (the .button-actions variant used on Messages keeps its own card styling) */
#ct-wrapper .section-top-bar,.tpl_upload .section-top-bar:not(.button-actions){
  background:transparent !important;border:none !important;padding:0 !important;margin:0 !important;min-height:0 !important}

/* big, inviting drop area */
.plupload_droptext{min-height:170px !important;margin:18px !important;border:2px dashed var(--gn) !important;
  border-radius:10px !important;background:var(--gcream) !important;color:var(--gtext) !important;
  font-family:'Playfair Display',serif !important;font-style:italic !important;font-size:19px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;text-align:center;line-height:1.4}
.plupload_filelist_content,.plupload_scroll .plupload_filelist{min-height:60px}

/* hide the stock dark (#2a2c2e) ViewShark header bar wherever it appears */
.plupload_header,.plupload_header_content,.plupload_container .plupload_header{display:none !important}

/* ============================================================
   G49 - Real magazine footer on app fall-through pages. The app
   crammed the footer menu + disclaimer + copyright into the narrow
   left sidebar (.sidebar-nav-footer). Hide that and render the same
   full-width navy footer the redesigned custom pages use (injected
   into tpl_footer.tpl as .aptv-footer).
   ============================================================ */

/* hide the old sidebar-crammed footer */
.sidebar-nav-footer,.sidebar-nav-disclaimer,.footer_menu,.copybar{display:none !important}

/* the left sidebar is taller than short pages; give the content block a
   min-height so the full-width footer always clears the sidebar (no overlap) */
.inner-block,.inner-block.with-menu{min-height:780px}

/* footer spans full width below the sidebar + content (theme offsets it left:250px) */
footer,footer.with-menu{clear:both !important;position:relative !important;left:0 !important;right:0 !important;
  width:100% !important;margin:0 !important;padding:0 !important;
  background:transparent !important;float:none !important;display:block !important}
.aptv-footer .wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* disclaimer band */
.foot-disclaimer.aptv-footer{margin-top:50px !important;background:var(--gnd) !important;
  border-top:3px solid var(--gg) !important;position:relative;overflow:hidden}
.foot-disclaimer.aptv-footer::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 50% -20%, rgba(201,168,76,.10), transparent 60%);pointer-events:none}
.foot-disclaimer.aptv-footer .fd-inner{max-width:820px;margin:0 auto;padding:38px 20px 40px;text-align:center;position:relative}
.foot-disclaimer.aptv-footer .fd-kicker{display:inline-block;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gg) !important;margin-bottom:16px}
.foot-disclaimer.aptv-footer .fd-text{font-family:'Playfair Display',serif !important;font-style:italic;font-size:15.5px;line-height:1.85;color:#c7d3e4 !important}
.foot-disclaimer.aptv-footer .fd-text b{font-style:normal;font-weight:700;color:#fff !important;text-transform:uppercase;letter-spacing:.03em}

/* navy footer body */
.foot.aptv-footer{background:var(--gn) !important;color:#c7d3e4 !important;margin:0 !important;padding:44px 0 30px !important}
.foot.aptv-footer .top{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;justify-content:space-between;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot.aptv-footer .cols{display:flex;gap:50px;flex-wrap:wrap}
.foot.aptv-footer .cols h5{font-family:'Open Sans',sans-serif !important;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gg) !important;margin-bottom:12px}
.foot.aptv-footer .cols a{display:block;color:#c7d3e4 !important;font-size:13.5px;margin-bottom:9px;font-family:'Open Sans',sans-serif !important;font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important}
.foot.aptv-footer .cols a:hover{color:#fff !important}
.foot.aptv-footer .rule{height:3px;background:linear-gradient(90deg,var(--gr) 0 50%,var(--gg) 50% 100%);margin:18px 0;border-radius:2px}
.foot.aptv-footer .bottom{font-size:12.5px;color:#9fb0c9 !important;letter-spacing:.03em;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot.aptv-footer .bottom .legal{display:flex;align-items:center;flex-wrap:wrap}
.foot.aptv-footer .bottom .legal a{color:#9fb0c9 !important;font-family:'Open Sans',sans-serif !important;font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important}
.foot.aptv-footer .bottom .legal a:hover{color:#fff !important}
.foot.aptv-footer .bottom .legal a+a{margin-left:22px;position:relative}
.foot.aptv-footer .bottom .legal a+a::before{content:"\00B7";position:absolute;left:-13px;color:#5c6f8a}
@media(max-width:760px){
  .foot.aptv-footer .top{flex-direction:column;gap:22px}
  .foot.aptv-footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;width:100%}
  .foot.aptv-footer .bottom{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .foot.aptv-footer .bottom .legal{justify-content:center}
}

/* ============================================================
   G52 - App left sidebar re-matched to the custom .msidebar.
   The reskin previously used heavy navy header bars + red circle
   category icons (read as "old"). Replace with the magazine
   sidebar: subtle grey uppercase captions, flat menu rows, cream
   hover, red left-bar active state. Overrides G11.
   ============================================================ */

/* sidebar shell = white column with a hairline right border */
.fixed-width.sidebar-container,.sidebar-container{
  background:#fff !important;border-right:1px solid var(--gline) !important;padding:8px 0 30px !important}

/* each section is a plain group, not a bordered card */
.sidebar-container .categories-container,.categories-container{
  background:transparent !important;border:none !important;border-radius:0 !important;
  box-shadow:none !important;margin:0 !important;overflow:visible !important}
.categories-container + .categories-container{border-top:1px solid var(--gline) !important;margin-top:8px !important;padding-top:2px !important}

/* section headers -> small subtle grey captions (like .msidebar .cap) */
.categories-container h4,.categories-container .nav-title,
.categories-container .categories-menu-title,.blue .categories-menu-title{
  background:transparent !important;color:var(--gmut) !important;
  font-family:'Open Sans',sans-serif !important;font-size:10.5px !important;font-weight:800 !important;
  letter-spacing:.13em !important;text-transform:uppercase !important;line-height:1.4 !important;
  padding:16px 22px 8px !important;margin:0 !important;display:flex !important;align-items:center !important;gap:9px !important}
.categories-container h4 i,.categories-container .nav-title i,.categories-container .categories-menu-title i{
  color:var(--gmut) !important;font-size:13px !important;float:none !important;
  background:none !important;background-color:transparent !important;border-radius:0 !important}

/* menu rows */
.categories-container .accordion{margin:0 !important;padding:0 !important;list-style:none !important}
.menu-panel-entry{list-style:none !important}
.menu-panel-entry>a,.menu-panel-entry a.dcjq-parent{
  display:flex !important;align-items:center !important;gap:14px !important;padding:11px 22px !important;
  font-family:'Open Sans',sans-serif !important;font-size:14px !important;font-weight:600 !important;
  color:var(--gink) !important;background:transparent !important;text-decoration:none !important;
  border-left:3px solid transparent !important}
.menu-panel-entry>a i,.menu-panel-entry a.dcjq-parent i{
  color:var(--gtext) !important;font-size:16px !important;opacity:.85 !important;width:20px !important;
  text-align:center !important;background:none !important;background-color:transparent !important;
  border-radius:0 !important;margin:0 !important}
.menu-panel-entry>a:hover,.menu-panel-entry a.dcjq-parent:hover{background:var(--gcream) !important;color:var(--gink) !important}
.menu-panel-entry>a:hover i{color:var(--gr) !important;opacity:1 !important}
.menu-panel-entry-active>a,.menu-panel-entry.active>a,.menu-panel-entry-active a.dcjq-parent.active{
  background:var(--gcream) !important;color:var(--gr) !important;font-weight:700 !important;border-left-color:var(--gr) !important}
.menu-panel-entry-active>a i,.menu-panel-entry.active>a i,.menu-panel-entry-active a.dcjq-parent.active i{color:var(--gr) !important;opacity:1 !important}

/* right-aligned count chips (Message Center) subtle */
.mm-count,.right-float.mm-count{color:var(--gmut) !important;font-weight:600 !important;font-size:12px !important;background:none !important}

/* kill the red/grey circle category icons + expand chevrons */
#categories-accordion li a i,#session-accordion li a i,#top-session-accordion li a i,
#no-session-accordion li a i,#no-session-accordion2 li a i{
  border-radius:0 !important;background:none !important;background-color:transparent !important;
  color:var(--gtext) !important;width:20px !important;height:auto !important;line-height:normal !important;text-align:center !important}
#categories-accordion a.active i{background:none !important;background-color:transparent !important}
.dcjq-icon,.menu-panel-entry .iconBe-chevron-right,.categories-container .iconBe-chevron-right{display:none !important}

/* ============================================================
   G53 - Embed mode. When an app page (e.g. the uploader) is loaded
   inside an iframe on a custom page, strip ALL app chrome so only
   the working widget shows. The custom page supplies the header,
   sidebar and footer. Triggered by html.aptv-embed (set in head
   when window is framed).
   ============================================================ */
html.aptv-embed,html.aptv-embed body,html.aptv-embed body.fe{
  background:transparent !important;min-height:0 !important;height:auto !important;overflow:visible !important}
html.aptv-embed #main_header,
html.aptv-embed .fixed-width.sidebar-container,
html.aptv-embed .sidebar-container,
html.aptv-embed footer,
html.aptv-embed .aptv-footer,
html.aptv-embed .foot-disclaimer,
html.aptv-embed .tabs,
html.aptv-embed .sp-container > .tabs,
html.aptv-embed #the-stats,
html.aptv-embed .push,
html.aptv-embed .copybar{display:none !important}
/* content goes full width, flush, transparent */
html.aptv-embed .container,html.aptv-embed .container_wrapper,
html.aptv-embed .fluid,html.aptv-embed .inner-spacer,
html.aptv-embed .inner-block,html.aptv-embed .inner-block.with-menu,
html.aptv-embed .sp-container,html.aptv-embed #siteContent,
html.aptv-embed .dynamic_container{
  margin:0 !important;padding:0 !important;width:100% !important;min-height:0 !important;
  left:0 !important;background:transparent !important;box-shadow:none !important;border:none !important}
html.aptv-embed #ct-wrapper,html.aptv-embed #upload-wrapper{margin:0 !important}

/* G54 - embed uploader: collapse the ~130px of stacked top padding/margins
   (container/section/sp-container/upload-wrapper) so the uploader card sits
   at the top of the iframe. No display:none (buttons live in .section-top-bar). */
html.aptv-embed body,html.aptv-embed #wrapper,
html.aptv-embed .container,html.aptv-embed .container_wrapper,
html.aptv-embed .fluid,html.aptv-embed .inner-spacer,
html.aptv-embed .inner-block,html.aptv-embed .inner-block.with-menu,
html.aptv-embed section,html.aptv-embed article,
html.aptv-embed #siteContent,html.aptv-embed .sp-container,
html.aptv-embed #upload-wrapper,html.aptv-embed #uploader.frontend,html.aptv-embed #upload-form{
  padding-top:0 !important;margin-top:0 !important}
/* trim the uploader card's top padding in embed */
html.aptv-embed #ct-wrapper{padding-top:8px !important}
html.aptv-embed .section-top-bar{min-height:0 !important;padding-top:0 !important;margin-top:0 !important}

/* G59 - clickable tabs (edit-video, etc.) get a pointer cursor */
.tabs a,.tabs-style-topline a,.tabs-style-topline li,.tab,.nav-tabs a,
.tabs li,.tabs-style-topline nav a{cursor:pointer !important}

/* G60 - Message Center action buttons: compact inline row (were full-width stacked bars) */
.compose-button{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  width:auto !important;min-width:0 !important;height:auto !important;padding:12px 22px !important;
  margin:0 10px 16px 0 !important;border-radius:6px !important;font-family:'Open Sans',sans-serif !important;
  font-weight:700 !important;letter-spacing:.05em !important;text-transform:uppercase !important;font-size:12.5px !important;
  background:var(--gr) !important;color:#fff !important;border:none !important;cursor:pointer !important;vertical-align:top}
.compose-button:hover{background:var(--grd) !important}
.compose-button.label-form-message-menu-entry,.label-form .compose-button,a[onclick*="label"].compose-button{
  background:#fff !important;color:var(--gtext) !important;border:1.5px solid var(--gn) !important}
.compose-button.label-form-message-menu-entry:hover{background:var(--gn) !important;color:#fff !important}

/* G61 - Message Center: the New Private Message / New Label buttons carry
   .search-button.form-button (full-width). Override by id to a compact row. */
#compose-button,#new-label,.new-message-button,.new-label{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  width:auto !important;min-width:0 !important;max-width:none !important;height:auto !important;
  padding:12px 22px !important;margin:0 10px 16px 0 !important;border-radius:6px !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;letter-spacing:.05em !important;
  text-transform:uppercase !important;font-size:12.5px !important;cursor:pointer !important;vertical-align:top}
#compose-button,.new-message-button{background:var(--gr) !important;color:#fff !important;border:none !important}
#compose-button:hover,.new-message-button:hover{background:var(--grd) !important}
#new-label,.new-label,#new-label *,.new-label *{background-color:transparent;color:#fff !important}
#new-label,.new-label{background:var(--gn) !important;border:none !important}
#new-label:hover,.new-label:hover{background:var(--gnd) !important}

/* ============================================================
   G63 - Custom member sidebar (.msidebar) for app pages. The app's
   left sidebar is replaced (JS in tpl_footer) with the same emoji
   member sidebar the custom pages use; these styles render it.
   ============================================================ */
.sidebar-container:has(.msidebar),.fixed-width.sidebar-container:has(.msidebar){
  padding:0 !important;border-right:none !important;background:transparent !important}
.msidebar{border-right:1px solid var(--gline);padding:16px 0 40px;background:#fff}
.msidebar .cap{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gmut) !important;padding:16px 22px 8px;display:flex;align-items:center;gap:10px;
  font-family:'Open Sans',sans-serif !important;background:transparent !important}
.msidebar a.mi{display:flex !important;align-items:center;gap:14px;padding:11px 22px !important;
  font-size:14px !important;color:var(--gink) !important;font-weight:600 !important;
  font-family:'Open Sans',sans-serif !important;text-decoration:none !important;border:none !important;
  border-left:3px solid transparent !important;background:transparent !important;text-transform:none !important;letter-spacing:0 !important}
.msidebar a.mi .i{width:20px;text-align:center;font-size:16px;opacity:.95;color:inherit !important}
.msidebar a.mi.on{background:var(--gcream) !important;color:var(--gr) !important;border-left-color:var(--gr) !important}
.msidebar a.mi:hover:not(.on){background:var(--gcream) !important;color:var(--gr) !important}
.msidebar .sep{height:1px;background:var(--gline);margin:10px 0}
.msidebar .flinks{padding:16px 22px;display:flex;flex-wrap:wrap;gap:6px 14px;border-top:1px solid var(--gline);margin-top:8px}
.msidebar .flinks a{font-size:12px !important;color:var(--gmut) !important;text-decoration:none !important;
  font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important}
.msidebar .flinks a:hover{color:var(--gr) !important}

/* G64 - emoji icon spans injected into the app member sidebar */
.categories-container li > a .i,.categories-container a .i{width:20px !important;text-align:center;font-size:16px !important;line-height:1;
  display:inline-block;flex:0 0 20px;opacity:1 !important;margin-right:2px}
.categories-container .categories-menu-title .i{font-size:13px !important;line-height:1;display:inline-block;margin-right:2px}
.aptv-mylib .menu-panel-entry > a{display:flex !important;align-items:center;gap:14px}

/* ============================================================
   G66 - Center app pages like the custom pages: max-width 1240
   container with left/right gutters (was full-width edge-to-edge).
   Header background stays full-width; its inner rows center.
   ============================================================ */
html:not(.aptv-embed) #ct-header-top,
html:not(.aptv-embed) #ct-header-bottom,
html:not(.aptv-embed) .container.container_wrapper{
  max-width:1240px !important;margin-left:auto !important;margin-right:auto !important;float:none !important}
html:not(.aptv-embed) #ct-header-top,html:not(.aptv-embed) #ct-header-bottom{padding-left:24px !important;padding-right:24px !important;box-sizing:border-box}

/* ============================================================
   G67 - Full custom header on app pages (vars + header CSS from
   app.css). Injected header is wrapped in <header class="aptv-hdr">.
   ============================================================ */
:root{--navy:#092b51;--navy-d:#061d38;--red:#d80314;--red-d:#b00210;--gold:#c9a84c;
  --ink:#141414;--mut:#7a7a7a;--paper:#ffffff;--cream:#f6f6f7;--head:#092b51;--line:#e3e3e6;
  --serif:'Playfair Display',Georgia,serif;--display:'Abril Fatface',Georgia,serif;--sans:'Open Sans',system-ui,sans-serif;}
.aptv-hdr .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.aptv-hdr .util{background:var(--navy);color:#cdd7e6;font-size:12px}
.aptv-hdr .util .wrap{display:flex;align-items:center;gap:18px;height:36px}
.aptv-hdr .date{letter-spacing:.04em}
.aptv-hdr .grow{flex:1}
.aptv-hdr .util a{color:#e9eef6;font-weight:600;letter-spacing:.03em;text-decoration:none}
.aptv-hdr .sep{width:1px;height:14px;background:rgba(255,255,255,.25);display:inline-block}
.aptv-hdr .gold{color:var(--gold)}
.aptv-hdr .masthead{background:var(--paper);border-bottom:1px solid var(--line);text-align:center;padding:22px 24px 0}
.aptv-hdr .masthead .logo{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.aptv-hdr .masthead .rule{height:3px;background:linear-gradient(90deg,var(--navy) 0 33%,var(--red) 33% 66%,var(--gold) 66% 100%);margin-top:16px;border-radius:2px}
.aptv-hdr .topnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(9,43,81,.04)}
.aptv-hdr .topnav .wrap{display:flex;align-items:center;gap:4px;height:52px}
.aptv-hdr .topnav a{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--head);padding:16px 14px;white-space:nowrap;border-bottom:3px solid transparent;text-decoration:none}
.aptv-hdr .topnav a:hover{color:var(--red)}
.aptv-hdr .topnav a.on{color:var(--red);border-color:var(--red)}
.aptv-hdr .topnav .navlinks{display:contents}
.aptv-hdr .m-auth{display:none !important}
.aptv-hdr .topnav .grow{flex:1}
.aptv-hdr .topnav .mini-logo{display:none}
.aptv-hdr .topnav .u-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--navy);color:#fff;font-weight:700;font-size:15px;line-height:1;text-transform:uppercase;text-decoration:none}
.aptv-hdr .topsearch{display:flex;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:2px;overflow:hidden;height:36px;margin-right:10px}
.aptv-hdr .topsearch:focus-within{border-color:var(--navy)}
.aptv-hdr .topsearch input{border:none !important;background:none !important;border-radius:0 !important;outline:none;padding:0 12px;font-size:13px;width:180px;color:var(--ink);box-shadow:none !important;height:auto !important}
.aptv-hdr .topsearch button{border:none;background:var(--navy);color:#fff;width:40px;height:36px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.aptv-hdr .theme-toggle{display:inline-flex;align-items:center;cursor:pointer;margin-right:12px;flex:none}
.aptv-hdr .theme-toggle input{position:absolute;opacity:0;width:0;height:0}
.aptv-hdr .theme-toggle .tt-track{width:50px;height:26px;border-radius:20px;background:var(--line);position:relative;display:block}
.aptv-hdr .theme-toggle .tt-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4);display:grid;place-items:center}
.aptv-hdr .theme-toggle .tt-thumb::after{content:'\2600';font-size:12px;color:#d97706}
.aptv-hdr .theme-toggle input:checked + .tt-track{background:var(--navy)}
.aptv-hdr .theme-toggle input:checked + .tt-track .tt-thumb{left:27px}
.aptv-hdr .hamb,.aptv-hdr .msearch-btn{display:none}
.aptv-hdr .search-overlay{display:none}

/* G68 - grid layout: sidebar (col1) + content (col2), like the custom .member grid */
html:not(.aptv-embed) .container.container_wrapper{
  max-width:1240px !important;margin:0 auto !important;display:grid !important;
  grid-template-columns:266px minmax(0,1fr) !important;align-items:start !important}
html:not(.aptv-embed) .container.container_wrapper > .sidebar-container{
  grid-column:1 !important;grid-row:1 !important;position:static !important;top:auto !important;left:auto !important;
  float:none !important;width:auto !important;min-width:0 !important;max-width:none !important;margin:0 !important}
html:not(.aptv-embed) .container.container_wrapper > .fluid{
  grid-column:2 !important;grid-row:1 !important;float:none !important;width:auto !important;min-width:0 !important;margin:0 !important}
html:not(.aptv-embed) .inner-block.with-menu{margin-left:0 !important;margin-right:0 !important}
html:not(.aptv-embed) #siteContent{margin-left:0 !important;margin-right:0 !important;width:auto !important}

/* G69 - neutralize the JS scrollbar plugin so the sidebar flows in-place
   (keeps the original menu elements + their click handlers) */
html:not(.aptv-embed) .sidebar-container .scroll-bar{display:none !important}
html:not(.aptv-embed) .sidebar-container .viewport{height:auto !important;max-height:none !important;overflow:visible !important;position:static !important;width:auto !important}
html:not(.aptv-embed) .sidebar-container .overview{position:static !important;top:auto !important;left:auto !important;width:auto !important;height:auto !important}
html:not(.aptv-embed) .container_wrapper > .sidebar-container{height:auto !important;overflow:visible !important}

/* G70 - safe fixes: brighter util date + readable active menu text */
.aptv-hdr .util .date{color:#cdd7e6 !important}
html:not(.aptv-embed) .menu-panel-entry-active > a,
html:not(.aptv-embed) .menu-panel-entry-active > a .mm,
html:not(.aptv-embed) .menu-panel-entry.menu-panel-entry-active > a,
html:not(.aptv-embed) .menu-panel-entry.menu-panel-entry-active > a .mm,
html:not(.aptv-embed) .menu-panel-entry-active a.dcjq-parent.active,
html:not(.aptv-embed) .menu-panel-entry-active a.dcjq-parent.active .mm{color:var(--gr) !important;font-weight:700 !important}

/* G71 - header nav: left-align (was right-aligned, leaving a left gap) */
.aptv-hdr .topnav .wrap{justify-content:flex-start !important}
.aptv-hdr .topnav .grow,.aptv-hdr .grow{flex:1 1 auto !important;display:block !important}
.aptv-hdr .util .grow{flex:1 1 auto !important}

/* G72 - force header nav to the left: navlinks as a flex item with margin-right:auto */
.aptv-hdr .topnav .navlinks{display:flex !important;align-items:center !important;flex-wrap:nowrap !important;margin-right:auto !important}
.aptv-hdr .topnav .grow{display:none !important}

/* G73 - topnav bar was rendering at left:494/width:931; force full width */
.aptv-hdr .topnav{width:100% !important;max-width:none !important;margin:0 !important;left:0 !important;right:0 !important;box-sizing:border-box !important;float:none !important}
.aptv-hdr .util,.aptv-hdr .masthead,.aptv-hdr .search-overlay{width:100% !important;max-width:none !important;margin:0 !important;left:0 !important}

/* G74 - sidebar menu text navy (#092b51) like the custom .msidebar; active stays red */
html:not(.aptv-embed) .categories-container li > a:not(.active),
html:not(.aptv-embed) .categories-container li > a:not(.active) .mm,
html:not(.aptv-embed) .menu-panel-entry:not(.menu-panel-entry-active) > a,
html:not(.aptv-embed) .menu-panel-entry:not(.menu-panel-entry-active) > a .mm,
html:not(.aptv-embed) .aptv-mylib .menu-panel-entry > a{color:var(--gtext) !important;font-weight:600 !important}

/* G75 - header avatar profile photo on app pages */
.aptv-hdr .u-btn{overflow:hidden !important;padding:0 !important}
.aptv-hdr .u-btn .u-av,.aptv-hdr .u-btn img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;display:block !important}
/* signed-in user dropdown menu */
.aptv-hdr .u-wrap{position:relative;display:inline-flex}
.aptv-hdr .umenu{position:absolute;top:calc(100% + 12px);right:0;width:300px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 44px rgba(9,43,81,.20);z-index:300;overflow:hidden;padding:0 0 6px}
.aptv-hdr .umenu[hidden]{display:none}
.aptv-hdr .umenu .um-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line);background:var(--cream)}
.aptv-hdr .umenu .um-av{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;background-color:#fff;border:2px solid var(--red);flex:none}
.aptv-hdr .umenu .um-htxt{display:flex;flex-direction:column;min-width:0}
.aptv-hdr .umenu .um-htxt b{font-family:var(--serif);color:var(--red);font-size:15.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aptv-hdr .umenu .um-htxt small{color:var(--mut);font-size:12px;margin-top:3px}
.aptv-hdr .umenu .um-list{padding:6px 0}
.aptv-hdr .umenu a.um-i{display:flex;align-items:center;gap:13px;padding:11px 16px;color:var(--head);font-size:14px;font-weight:600;text-decoration:none}
.aptv-hdr .umenu a.um-i .i{width:20px;text-align:center;font-size:16px;flex:none}
.aptv-hdr .umenu a.um-i:hover{background:var(--cream);color:var(--red)}
.aptv-hdr .umenu .um-sep{height:1px;background:var(--line);margin:6px 0}

/* G76 - let user dropdown escape nav overflow (app pages) */
.aptv-hdr .topnav .wrap,.aptv-hdr .util .wrap{overflow:visible !important}

/* G77 - dropdown title-case on app pages */
.aptv-hdr .umenu a,.aptv-hdr .umenu .um-i,.aptv-hdr .umenu .um-head,.aptv-hdr .umenu .um-htxt b{text-transform:none !important;letter-spacing:normal !important}
.aptv-hdr .umenu .um-htxt b{white-space:normal !important;font-weight:800 !important}

/* ============================================================
   G78 - Videos/Browse page: full-width (no sidebar) + category chips,
   matching the GEORGE mockup. Uses the app's VBrowse grid + data.
   ============================================================ */
html:not(.aptv-embed) .tpl_browse .container.container_wrapper{display:block !important;max-width:1240px !important;margin:0 auto !important}
html:not(.aptv-embed) .tpl_browse .container.container_wrapper > .sidebar-container{display:none !important}
html:not(.aptv-embed) .tpl_browse .container.container_wrapper > .fluid{width:100% !important;max-width:none !important}
.aptv-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0 2px}
.aptv-chips .chip{padding:9px 17px;border:1px solid var(--gline);border-radius:24px;font-family:'Open Sans',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gtext);background:#fff;text-decoration:none;transition:.15s;white-space:nowrap}
.aptv-chips .chip:hover{border-color:var(--gn)}
.aptv-chips .chip.on{background:var(--gr);border-color:var(--gr);color:#fff}

/* G79 - Browse: hide VBrowse's duplicate "Media Library" h3 + single "Recent" tab
   (chips + "Recent Videos" header + grid remain, matching the mockup) */
html:not(.aptv-embed) .tpl_browse:not(.tpl_search) h3.content-title{display:none !important}
html:not(.aptv-embed) .tpl_browse .tabs > nav{display:none !important}
html:not(.aptv-embed) .tpl_browse .haiii{margin-top:0 !important}

/* G80 - video card title: was clipped (h3 height:32px overflow:hidden). Clean 2-line clamp. */
.thumbs-wrapper h3,.vs-column h3:not(.content-title),.caption h3{
  height:auto !important;max-height:none !important;min-height:2.6em !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;
  overflow:hidden !important;line-height:1.3 !important;margin:8px 0 4px !important;white-space:normal !important}
.thumbs-wrapper h3 a,.vs-column h3 a,.caption h3 a{display:inline !important;line-height:1.3 !important}

/* G81 - Browse video grid: clean responsive grid that fills the width
   (cards were .fourths=26% leaving a 4th-column gap). */
html:not(.aptv-embed) .tpl_browse ul.fileThumbs{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;
  gap:30px 24px !important;list-style:none !important;margin:0 !important;padding:0 !important;width:100% !important}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs > li{
  width:auto !important;max-width:none !important;min-width:0 !important;float:none !important;margin:0 !important;padding:0 !important;display:block !important}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs > li .thumbs-wrapper,
html:not(.aptv-embed) .tpl_browse ul.fileThumbs > li figure,
html:not(.aptv-embed) .tpl_browse ul.fileThumbs > li img{width:100% !important}

/* G82 - remove clearfix ::before/::after so they don't occupy a grid cell (empty first card) */
html:not(.aptv-embed) .tpl_browse ul.fileThumbs::before,
html:not(.aptv-embed) .tpl_browse ul.fileThumbs::after{display:none !important;content:none !important}

/* G83 - Watch/View page: full-width (no left sidebar), like the browse page */
html:not(.aptv-embed) .tpl_view .container.container_wrapper{display:block !important;max-width:1240px !important;margin:0 auto !important}
html:not(.aptv-embed) .tpl_view .container.container_wrapper > .sidebar-container{display:none !important}
html:not(.aptv-embed) .tpl_view .container.container_wrapper > .fluid{width:100% !important;max-width:none !important}

/* G84 channels page -> product cards matching mockup (test1/channels.html) */
.tpl_channels ul.ch-grid:not(.columns){display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;list-style:none;margin:0;padding:0}
.tpl_channels ul.ch-grid:not(.columns)::before,.tpl_channels ul.ch-grid:not(.columns)::after{display:none!important;content:none!important}
.tpl_channels ul.ch-grid:not(.columns) .vs-column{width:auto!important;max-width:none!important;min-width:0!important;float:none!important;margin:0!important;padding:0!important;background:#fff;border:1px solid var(--gline);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,48,.06);transition:box-shadow .15s,transform .15s}
.tpl_channels ul.ch-grid:not(.columns) .vs-column:hover{box-shadow:0 8px 24px rgba(15,23,48,.12);transform:translateY(-2px)}
.tpl_channels ul.ch-grid:not(.columns) .vs-column li{list-style:none;display:block;margin:0;padding:0;border:0;background:none}
.tpl_channels .chc-thumb{display:block;width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f2f4f8}
.tpl_channels .ch-info{padding:16px 18px 18px;text-align:center}
.tpl_channels .ch-info h3{font-family:var(--serif),Georgia,serif;font-size:18px;line-height:1.25;margin:0 0 14px;height:auto!important;overflow:visible!important}
.tpl_channels .ch-info h3 a{color:var(--gtext);text-decoration:none}
.tpl_channels .ch-info h3 a:hover{color:var(--gr)}
.tpl_channels .chc-sub{display:block;background:var(--gr);color:#fff!important;padding:11px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;text-decoration:none;margin-bottom:9px;border:1.5px solid var(--gr);cursor:pointer;text-align:center}
.tpl_channels .chc-sub:hover{filter:brightness(.92)}
.tpl_channels .chc-view{display:block;background:#fff;border:1.5px solid var(--gn);color:var(--gtext)!important;padding:10px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;text-decoration:none;text-align:center}
.tpl_channels .chc-view:hover{background:var(--gn);color:#fff!important}

/* G85 videos: keep grid ONLY for the card view-mode; real rows for the list view-mode */
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list){display:block!important}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) > li.full-thumbs{width:100%!important;max-width:none!important;min-width:0!important;float:none!important;margin:0 0 18px!important;padding:0!important;display:block}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .thumbs-wrapper{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--gline);border-radius:10px;padding:12px;box-shadow:0 1px 3px rgba(15,23,48,.05)}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) figure.effect-fullT{flex:0 0 340px;max-width:340px;width:340px;margin:0;border-radius:8px;overflow:hidden}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) figure.effect-fullT img.mediaThumb{width:100%;height:auto;display:block}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .full-details-holder{flex:1 1 auto;min-width:0;padding:2px 6px 0 0}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .full-details-holder h2{font-size:18px;line-height:1.3;margin:2px 0 8px;height:auto!important;max-height:none!important;overflow:visible!important;white-space:normal!important;display:block!important}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .full-details-holder h2 a{color:var(--gtext);text-decoration:none}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .full-details-holder h2 a:hover{color:var(--gr)}
html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .full-details-holder p{font-size:13.5px;color:var(--gmut);line-height:1.55;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) .thumbs-wrapper{flex-direction:column}html:not(.aptv-embed) .tpl_browse ul.fileThumbs:not(.view-list) figure.effect-fullT{flex:none;width:100%;max-width:none}}

/* G86 channels card structural overrides (defeat theme .ch-item/.ch-info overlay + li width) */
.tpl_channels ul.ch-grid:not(.columns) .vs-column > li{width:100%!important;max-width:none!important;min-width:0!important;display:block!important;float:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important;height:auto!important}
.tpl_channels a.chc-thumb{width:100%!important;max-width:none!important;height:auto!important;border-radius:0!important;box-shadow:none!important}
.tpl_channels .ch-info{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;background:none!important;transform:none!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;color:var(--gtext)!important}
.tpl_channels .ch-info h3{position:static!important;opacity:1!important}

/* G87 channels LIST view (viewMode2 -> ul.ch-grid.columns): clean full-width rows */
.tpl_channels ul.ch-grid.columns{display:block!important;grid-template-columns:none!important;list-style:none;margin:0;padding:0}
.tpl_channels ul.ch-grid.columns::before,.tpl_channels ul.ch-grid.columns::after{display:none!important;content:none!important}
.tpl_channels ul.ch-grid.columns .vs-column{width:100%!important;max-width:none!important;min-width:0!important;float:none!important;margin:0 0 18px!important;padding:16px!important;display:flex!important;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--gline);border-radius:12px;box-shadow:0 1px 3px rgba(15,23,48,.06);overflow:hidden}
.tpl_channels ul.ch-grid.columns .list-view-thumb{flex:0 0 200px;max-width:200px;margin:0!important;padding:0!important}
.tpl_channels ul.ch-grid.columns .list-view-thumb .chc-thumb{width:100%!important;aspect-ratio:1/1;border-radius:8px!important;overflow:hidden;margin:0!important;display:block}
.tpl_channels ul.ch-grid.columns .list-view-details{flex:1 1 auto;min-width:0;margin:0!important;padding:0!important;text-align:left!important}
.tpl_channels ul.ch-grid.columns .list-view-details .chc-name{font-family:var(--serif),Georgia,serif;font-size:22px;line-height:1.25;margin:0 0 4px!important;height:auto!important;overflow:visible!important;text-align:left!important}
.tpl_channels ul.ch-grid.columns .list-view-details .chc-name a{color:var(--gtext);text-decoration:none}
.tpl_channels ul.ch-grid.columns .list-view-details .chc-name a:hover{color:var(--gr)}
.tpl_channels ul.ch-grid.columns .list-view-details .ch-views-nr{display:block;font-size:12.5px;color:var(--gmut);margin:0 0 10px}
.tpl_channels ul.ch-grid.columns .list-view-details .ch-descr{font-size:14px;color:var(--gmut);line-height:1.6;margin:0 0 14px;white-space:normal}
.tpl_channels ul.ch-grid.columns .chc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tpl_channels ul.ch-grid.columns .chc-actions .chc-sub,.tpl_channels ul.ch-grid.columns .chc-actions .chc-view{display:inline-block!important;width:auto!important;margin:0!important;padding:9px 22px!important}
@media(max-width:640px){.tpl_channels ul.ch-grid.columns .vs-column{flex-direction:column}.tpl_channels ul.ch-grid.columns .list-view-thumb{flex:none;max-width:200px;width:200px!important}}

/* ============================================================
   G88 - /videos listing brought in line with browse.html.
   Section header, chips, card title/category/meta use the same
   values as assets/app.css so the two pages read identically.
   The Grid/List toggle and the "Recent Videos" heading are gone
   (removed in VBrowse, not just hidden).
   ============================================================ */

/* section header: title + rule, exactly like app.css .sec-h */
.aptv-sec-h{display:flex !important;align-items:center;gap:16px;margin:0 0 22px !important;padding:0 !important;border:0 !important;background:none !important}
.aptv-sec-h h2{font-family:'Playfair Display',Georgia,serif !important;font-size:26px !important;line-height:1.2 !important;
  color:var(--gtext) !important;white-space:nowrap;margin:0 !important;padding:0 !important;border:0 !important;text-transform:none !important;letter-spacing:-.01em !important}
.aptv-sec-h h2 i{display:none !important}
.aptv-sec-h .line{flex:1;height:2px;background:var(--gline);display:block !important;margin:0 !important;padding:0 !important;border:0 !important}
.tpl_browse section.filter{min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important}

/* chips: app.css .chip - square, uppercase, red when active */
.aptv-chips{gap:8px;margin:24px 0 22px;overflow-x:auto;padding-bottom:6px;flex-wrap:nowrap}
.aptv-chips::-webkit-scrollbar{display:none}
.aptv-chips .chip{border-radius:2px;padding:8px 16px;font-size:11.5px;letter-spacing:.08em;color:var(--gtext);border-color:var(--gline)}
.aptv-chips .chip.on{background:var(--gr);border-color:var(--gr);color:#fff}

/* card body: title, then category, then channel · views · age */
.aptv-body{padding-top:14px}
.tpl_browse ul.fileThumbs .aptv-body h3{font-family:'Playfair Display',Georgia,serif !important;font-size:19px !important;font-weight:800 !important;
  color:var(--gtext) !important;line-height:1.22 !important;margin:0 0 7px !important;min-height:0 !important;
  -webkit-line-clamp:3 !important;display:-webkit-box !important}
.tpl_browse ul.fileThumbs .aptv-body h3 a{color:inherit !important}
.tpl_browse ul.fileThumbs .aptv-body h3 a:hover{color:var(--gr) !important}
.aptv-kicker{display:block;font-family:'Open Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gr) !important;margin:0 0 4px}
.aptv-meta{font-size:12.5px !important;color:var(--gmut) !important;margin-top:10px !important;padding-top:10px !important;
  border-top:1px solid var(--gline);display:flex !important;flex-wrap:wrap;gap:8px;align-items:center;float:none !important;width:auto !important}
.aptv-meta .profile_image,.aptv-meta .profile_wrap{display:inline !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;width:auto !important;height:auto !important;float:none !important}
.aptv-meta .channel_name{color:var(--gtext) !important;font-weight:700 !important;cursor:pointer;font-size:12.5px !important}
.aptv-meta .channel_name:hover{color:var(--gr) !important}
.aptv-meta .views-number{color:var(--gmut) !important;font-size:12.5px !important}
.aptv-meta .i-bullet{width:3px;height:3px;border-radius:50%;background:var(--gmut);display:inline-block;flex:none;opacity:.7}

/* ============================================================
   G89 - Dark mode. The app swaps its #fe-color theme stylesheet, but this
   overlay loads last and painted everything light regardless, so the switch
   appeared to do nothing. f_scripts/fe/js/george.js mirrors that stylesheet
   onto <html class="dark"> - the same hook assets/app.css uses - and the
   palette below is app.css's dark palette, so both halves of the site match.
   ============================================================ */
html.dark{
  /* --gn / --gnd stay the brand navy: they paint the footer, disclaimer, buttons
     and badges, which must not turn pale in dark mode. Only text flips. */
  --gtext:#f2f5fb;
  --gcream:#161c26;
  --gmut:#8b96a8;
  --gline:#242c3a;
  --gink:#e8ebf1;
  --gpaper:#0d1117;
  /* the injected header/footer come from assets/ui.js and are written against
     app.css's token names, so those need the same dark values app.css gives them */
  --paper:#0d1117; --cream:#161c26; --ink:#e8ebf1; --ink-2:#b9c2d0; --mut:#8b96a8;
  --line:#242c3a; --line-2:#1c232f; --head:#f2f5fb; --shadow:0 14px 40px rgba(0,0,0,.6);
}
html.dark body,html.dark .fe{background:#0d1117 !important;color:var(--gink) !important}
html.dark a{color:var(--gink)}
html.dark a:hover{color:var(--gr)}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5{color:var(--gtext) !important}
html.dark p,html.dark span,html.dark li,html.dark td,html.dark label,html.dark small{color:var(--gink)}

/* surfaces */
html.dark .container,html.dark .container_wrapper,html.dark .fluid,html.dark .content-wrap,
html.dark section,html.dark article,html.dark .panel,html.dark .box,html.dark .well{background-color:transparent !important}
html.dark .header,html.dark .navbar,html.dark .topbar,html.dark .main-nav,html.dark .nav-wrap,
html.dark .footer,html.dark .foot,html.dark .sidebar,html.dark .sidebar-container{
  background:#0d1117 !important;border-color:var(--gline) !important;color:var(--gink) !important}
html.dark .dropdown-menu,html.dark .popup,html.dark .modal-content,html.dark .tooltip-inner,
html.dark .dm-wrap,html.dark .headernav-pop{background:var(--gcream) !important;border-color:var(--gline) !important;color:var(--gink) !important}

/* inputs & buttons */
html.dark input[type="text"],html.dark input[type="email"],html.dark input[type="password"],
html.dark input[type="search"],html.dark textarea,html.dark select,html.dark .form-control{
  background:var(--gcream) !important;color:var(--gink) !important;border-color:var(--gline) !important}
html.dark .btn-default,html.dark .btn-outline,html.dark .btn-secondary,html.dark .btn-light{
  border-color:var(--gn) !important;color:var(--gtext) !important;background:transparent !important}

/* the /videos listing */
html.dark .aptv-sec-h h2{color:var(--gtext) !important}
html.dark .aptv-sec-h .line{background:var(--gline)}
html.dark .aptv-chips .chip{background:var(--gcream);border-color:var(--gline);color:var(--gtext)}
html.dark .aptv-chips .chip.on{background:var(--gr);border-color:var(--gr);color:#fff}
html.dark .tpl_browse ul.fileThumbs .aptv-body h3,
html.dark .tpl_browse ul.fileThumbs .aptv-body h3 a{color:var(--gtext) !important}
html.dark .tpl_browse ul.fileThumbs .aptv-body h3 a:hover{color:var(--gr) !important}
html.dark .aptv-meta{border-top-color:var(--gline);color:var(--gmut) !important}
html.dark .aptv-meta .channel_name{color:var(--gtext) !important}
html.dark .aptv-meta .views-number{color:var(--gmut) !important}
html.dark .thumbs-wrapper{background:transparent !important}
html.dark .thumbs-wrapper figure{background:#0c111b !important}
html.dark .caption-more .time-lenght{background:rgba(6,20,40,.9) !important;color:#fff !important}

/* channels/list cards reuse these surfaces */
html.dark .tpl_channels ul.ch-grid.columns .vs-column{background:var(--gcream) !important;border-color:var(--gline) !important;box-shadow:none !important}
html.dark .tpl_channels .ch-info,html.dark .tpl_channels .ch-info h3{color:var(--gtext) !important}

/* ============================================================
   G90 - /videos follow-ups: white page surface in light mode, the card's
   play badge restyled to app.css's .play-ic, and the card body order
   pinned to title -> category -> meta so no legacy rule can flip it.
   ============================================================ */

/* light mode: the page surface is white like app.css --paper (#fff).
   G28's body.fe used --gcream (#f6f6f7), which read as a grey container. */
body.fe{background:#fff !important}
html.dark body.fe{background:#0d1117 !important}

/* card body order - the markup is already title, category, meta; this makes it
   explicit so nothing in the legacy sheets can reorder or float it. */
.aptv-body{display:flex !important;flex-direction:column !important;align-items:stretch}
.tpl_browse ul.fileThumbs .aptv-body h3{order:1 !important;float:none !important}
.aptv-body .aptv-kicker{order:2 !important}
.aptv-body .aptv-meta{order:3 !important}

/* play badge: app.css .acard .thumb .play-ic - 54px red disc, white triangle,
   lifts slightly on card hover. Overrides the legacy 40px disc whose hover
   blew the triangle up (scale(20)) and painted a cyan one underneath. */
.tpl_browse ul.fileThumbs .play-btn{
  width:54px !important;height:54px !important;border-radius:50% !important;
  background:rgba(216,3,20,.92) !important;box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
  transition:transform .18s,background .18s !important;cursor:pointer}
.tpl_browse ul.fileThumbs .play-btn::after{
  border-top:9px solid transparent !important;border-bottom:9px solid transparent !important;
  border-left:16px solid #fff !important;border-right:0 !important;
  transform:translateX(-40%) translateY(-50%) !important;width:0 !important;height:0 !important}
.tpl_browse ul.fileThumbs .play-btn::before{content:none !important;display:none !important}
.tpl_browse ul.fileThumbs .play-btn:hover::after{
  transform:translateX(-40%) translateY(-50%) !important;border-left:16px solid #fff !important}
.tpl_browse ul.fileThumbs li:hover .play-btn{
  transform:scale(1.1);background:var(--gr) !important}

/* G88 channel names: cancel the global 2-line min-height/clamp reserved for video-card titles */
.tpl_channels .ch-info h3,.tpl_channels .list-view-details .chc-name{min-height:0!important;max-height:none!important;height:auto!important;display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;padding:0!important;width:auto!important;white-space:normal!important;text-shadow:none!important;letter-spacing:normal!important}

/* ============================================================
   G91 - /channels brought in line with test1/channels.html:
   one sec-h title + count line, and the product-card grid
   (square image, centred body, stacked full-width actions).
   The Grid/List controls are hidden, not removed - channels.init.js
   reads the active one to know which list it is paging.
   ============================================================ */

/* one heading, like channels.html - the page-level title is redundant */
.tpl_channels #channel-h3{display:none !important}
.tpl_channels #ct-wrapper > .aptv-sec-h:first-of-type{display:none !important}
.tpl_channels .tabs > nav{display:none !important}
.aptv-subtitle{font-family:var(--serif),Georgia,serif;font-style:italic;color:var(--gmut);
  font-size:16px;margin:-6px 0 26px !important;padding:0}

/* .pcards - three across, collapsing the way channels.html does */
.tpl_channels ul.ch-grid:not(.columns){grid-template-columns:repeat(3,1fr) !important;gap:26px !important}
@media(max-width:820px){.tpl_channels ul.ch-grid:not(.columns){grid-template-columns:1fr 1fr !important}}
@media(max-width:560px){.tpl_channels ul.ch-grid:not(.columns){grid-template-columns:1fr !important}}

/* .pcard - bordered white card that lifts on hover */
.tpl_channels ul.ch-grid:not(.columns) .vs-column{
  border:1px solid var(--gline) !important;border-radius:4px !important;overflow:hidden !important;
  background:#fff !important;display:flex !important;flex-direction:column !important;
  box-shadow:none !important;transition:box-shadow .15s,transform .15s !important}
.tpl_channels ul.ch-grid:not(.columns) .vs-column:hover{
  box-shadow:0 12px 34px rgba(9,43,81,.10) !important;transform:translateY(-3px) !important}

/* .pcard .img - square cover */
.tpl_channels ul.ch-grid:not(.columns) a.chc-thumb{
  display:block !important;aspect-ratio:1/1 !important;height:auto !important;
  background-color:#0b1b3a !important;background-size:cover !important;background-position:center !important;
  margin:0 !important;border:0 !important}

/* .pcard .body - centred, title pinned to the top, actions to the bottom */
.tpl_channels ul.ch-grid:not(.columns) .ch-info{
  padding:18px 16px 20px !important;text-align:center !important;display:flex !important;
  flex-direction:column !important;flex:1 1 auto !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info h3{
  font-family:'Playfair Display',Georgia,serif !important;font-size:18px !important;font-weight:700 !important;
  color:var(--gtext) !important;line-height:1.3 !important;margin:0 0 auto !important;height:auto !important;overflow:visible !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info h3 a{color:inherit !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info h3 a:hover{color:var(--gr) !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info .cnt,
.tpl_channels ul.ch-grid:not(.columns) .ch-views-nr{color:var(--gmut) !important;font-weight:600 !important;font-size:12.5px !important}

/* .pcard .btns - stacked, full width */
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-view,
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-sub{
  display:flex !important;align-items:center;justify-content:center !important;width:100% !important;
  margin:9px 0 0 !important;padding:11px 18px !important;border-radius:2px !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;font-size:12.5px !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;text-decoration:none !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-view{
  border:1.5px solid var(--gn) !important;color:var(--gtext) !important;background:#fff !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-view:hover{background:var(--gn) !important;color:#fff !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-sub{
  background:var(--gr) !important;border:1.5px solid var(--gr) !important;color:#fff !important}
.tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-sub:hover{background:var(--grd) !important;border-color:var(--grd) !important}

/* dark mode for the card surfaces */
html.dark .tpl_channels ul.ch-grid:not(.columns) .vs-column{background:var(--gcream) !important;border-color:var(--gline) !important}
html.dark .tpl_channels ul.ch-grid:not(.columns) .ch-info h3,
html.dark .tpl_channels ul.ch-grid:not(.columns) .ch-info h3 a{color:var(--gtext) !important}
html.dark .tpl_channels ul.ch-grid:not(.columns) .ch-info .chc-view{background:transparent !important;border-color:var(--gn) !important;color:var(--gtext) !important}

/* ============================================================
   G92 - /channels follow-ups: drop the boxed border around the page
   content, match channels.html's heading type and top spacing, and
   style the video count beside the channel name.
   ============================================================ */

/* no outer box - channels.html puts the grid straight on the page */
.tpl_channels #ct-wrapper,.tpl_channel #ct-wrapper{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;box-shadow:none !important;margin-bottom:0 !important}

/* heading: channels.html sets margin-top:32px on the .sec-h and 26px serif type */
.tpl_channels #main-content{margin-top:32px !important}
.tpl_channels .aptv-sec-h{margin:0 0 22px !important}
.tpl_channels .aptv-sec-h h2{
  font-family:'Playfair Display',Georgia,serif !important;font-size:26px !important;
  font-weight:700 !important;line-height:1.2 !important;letter-spacing:-.01em !important;
  color:var(--gtext) !important;text-transform:none !important}
.tpl_channels .aptv-subtitle{margin:-6px 0 26px !important}
.tpl_channels .haiii,.tpl_channels .content-wrap > section > article{margin-top:0 !important}

/* video count beside the name, as channels.html shows it */
.tpl_channels ul.ch-grid:not(.columns) .ch-info h3 .cnt{
  color:var(--gmut) !important;font-weight:600 !important;font-family:'Open Sans',sans-serif !important;
  font-size:14px !important}
html.dark .tpl_channels ul.ch-grid:not(.columns) .ch-info h3 .cnt{color:var(--gmut) !important}

/* ============================================================
   G93 - /broadcasts brought in line with test2/broadcasts.php:
   the off-air banner, the "Live Broadcasts" heading with its
   section link, and the latest-uploads fallback underneath.
   ============================================================ */
.live-banner{margin-top:26px;border:1px solid var(--gline);border-radius:6px;background:var(--gcream);
  padding:38px 30px;text-align:center;box-shadow:0 6px 24px rgba(9,43,81,.05)}
.live-banner .dot{display:inline-flex;align-items:center;gap:9px;background:var(--gn);color:#fff;
  font-family:'Open Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 14px;border-radius:3px}
.live-banner .dot .d{width:8px;height:8px;border-radius:50%;background:var(--gg)}
.live-banner h1{font-family:'Playfair Display',Georgia,serif !important;color:var(--gtext) !important;
  font-size:28px !important;margin:16px 0 8px !important;line-height:1.2}
.live-banner p{font-family:var(--serif),Georgia,serif;font-style:italic;color:var(--gmut) !important;
  font-size:16px;max-width:520px;margin:0 auto !important}

/* the section link sits at the right-hand end of the rule, as in the mockup */
.aptv-sec-h a{font-family:'Open Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gr) !important;white-space:nowrap;text-decoration:none}
.aptv-sec-h a:hover{color:var(--grd) !important}

html.dark .live-banner{background:var(--gcream);border-color:var(--gline)}
html.dark .live-banner h1{color:var(--gtext) !important}
html.dark .live-banner .dot{background:#1b2536;color:#fff}


/* ============================================================
   G94 - the single-channel page (#wrapper.tpl_channel) now runs on the
   real app like the listing pages, so it gets the same treatment: no
   boxed content wrapper and the same heading spacing.
   ============================================================ */
.tpl_channel #main-content{margin-top:32px !important}
.tpl_channel .aptv-sec-h{margin:0 0 22px !important}
.tpl_channel .haiii{margin-top:0 !important}

/* ============================================================
   G95 - single-channel hero in the new format, mapping the app's
   #channel-header / #channel-subscribe markup onto test1/channel.html's
   .chero: cover strip, overlapping round avatar, name + stats, actions.
   ============================================================ */

/* cover strip */
.tpl_channel #channel-header{margin:14px 0 0 !important}
.tpl_channel #channel-header figure{margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
.tpl_channel .crop-height.bg-channel-image{
  height:230px !important;max-height:230px !important;min-height:0 !important;
  border-radius:4px !important;overflow:visible !important;position:relative !important;
  background-color:var(--gn) !important;background-size:cover !important;
  background-position:center !important;background-repeat:no-repeat !important}
.tpl_channel .bg-channel-image > img.transparent{display:none !important}
.tpl_channel .channel-links{display:none !important}

/* avatar, overlapping the bottom-left of the cover */
.tpl_channel .channel-logo{position:absolute !important;left:8px !important;bottom:-60px !important;
  margin:0 !important;padding:0 !important;z-index:3}
.tpl_channel .channel-logo img{
  width:120px !important;height:120px !important;max-width:none !important;max-height:none !important;
  border-radius:50% !important;border:5px solid #fff !important;background:#fff !important;
  object-fit:cover !important;margin:0 !important;display:block !important;
  box-shadow:0 6px 20px rgba(9,43,81,.18) !important}

/* name + stats on the left, subscribe on the right, clearing the avatar */
.tpl_channel #channel-subscribe{
  display:flex !important;align-items:flex-end !important;gap:22px !important;
  padding:0 8px 0 150px !important;margin:-52px 0 0 !important;
  position:relative !important;z-index:2 !important;min-height:78px !important;
  background:none !important;border:0 !important;float:none !important}
.tpl_channel #channel-subscribe::after{content:"";display:block;clear:both}
.tpl_channel .channel-heading{float:none !important;flex:1 1 auto !important;min-width:0 !important;
  margin:0 !important;padding:0 !important;text-align:left !important}
.tpl_channel .channel-heading h1{
  font-family:'Playfair Display',Georgia,serif !important;font-size:32px !important;font-weight:700 !important;
  line-height:1.15 !important;color:var(--gtext) !important;margin:0 !important;padding:0 !important;
  text-transform:none !important;letter-spacing:-.01em !important}
.tpl_channel .chero-st{font-family:'Open Sans',sans-serif !important;color:var(--gmut) !important;
  font-size:13.5px !important;margin-top:5px !important;letter-spacing:.03em !important;
  font-weight:600;text-transform:uppercase}
.tpl_channel .channel-subscribe-button{float:none !important;flex:none !important;margin:0 !important}

/* the channel tab strip (#channel-tabs), styled like .tabs in channel.html */
.tpl_channel #main-content > nav{display:block !important;border-bottom:2px solid var(--gn) !important;margin:22px 0 26px !important}
.tpl_channel #main-content > nav ul{display:flex !important;gap:2px !important;list-style:none !important;margin:0 !important;padding:0 !important}
.tpl_channel #main-content > nav ul li{margin:0 !important;padding:0 !important;background:none !important;border:0 !important}
.tpl_channel #main-content > nav ul li a{
  display:block !important;font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  font-size:12px !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  color:var(--gmut) !important;padding:13px 18px !important;border-bottom:3px solid transparent !important;
  margin-bottom:-2px !important;background:none !important}
.tpl_channel #main-content > nav ul li a:hover{color:var(--gtext) !important}
.tpl_channel #main-content > nav ul li.tab-current a{color:var(--gr) !important;border-bottom-color:var(--gr) !important}

@media(max-width:640px){
  .tpl_channel .crop-height.bg-channel-image{height:150px !important;max-height:150px !important}
  .tpl_channel .channel-logo{left:50% !important;transform:translateX(-50%) !important;bottom:-52px !important}
  .tpl_channel .channel-logo img{width:104px !important;height:104px !important}
  .tpl_channel #channel-subscribe{flex-direction:column !important;align-items:center !important;
    text-align:center !important;padding:0 !important;margin-top:60px !important}
  .tpl_channel .channel-heading{text-align:center !important}
}

html.dark .tpl_channel .channel-heading h1{color:var(--gtext) !important}
html.dark .tpl_channel .channel-logo img{border-color:var(--gcream) !important;background:var(--gcream) !important}

/* G89 unify header font across app + standalone pages (app pages' theme CSS forces Roboto; the header has no serif, so pin the magazine sans everywhere) */
.aptv-hdr,.aptv-hdr *{font-family:var(--sans) !important}

/* G90 search results page -> clean test1-style layout (full-width grid via tpl_browse; hide filter/tab clutter, keep heading) */
.tpl_search .filter-link,.tpl_search #search-filters-wrap,.tpl_search .top-search-type,.tpl_search select.search-type,.tpl_search .filters-wrapper{display:none !important}
.tpl_search h3.content-title{display:block !important;font-family:var(--serif),Georgia,serif !important;font-size:26px !important;color:var(--gtext) !important;margin:6px 0 4px !important;font-weight:700 !important}
.tpl_search h3.content-title i,.tpl_search h3.content-title .icon-search{color:var(--gr) !important}

/* G91 unify footer spacing across app + standalone pages (app pages' theme CSS inflates line-height); leave the serif disclaimer alone */
.aptv-footer .cols a,.aptv-footer .cols h5,.aptv-footer .top p,.aptv-footer .bottom,.aptv-footer .bottom span,.aptv-footer .bottom a,.aptv-footer .legal a{line-height:1.4 !important}

/* ============================================================
   G96 - dark mode for the injected chrome (assets/ui.js header + footer).
   Most of it follows automatically now that --paper/--line/--head flip,
   so this only covers the places that hard-code a light colour, plus the
   disclaimer/footer, which must STAY navy rather than follow the text tokens.
   ============================================================ */

/* sticky nav bar: light rule hard-codes rgba(255,255,255,.97) */
html.dark .aptv-hdr .topnav{background:rgba(13,17,23,.94) !important;border-bottom-color:var(--line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) !important}
html.dark .aptv-hdr .topnav a{color:var(--head) !important}
html.dark .aptv-hdr .topnav a:hover,html.dark .aptv-hdr .topnav a.on{color:var(--gr) !important}
html.dark .aptv-hdr .masthead{background:var(--paper) !important;border-bottom-color:var(--line) !important}
html.dark .aptv-hdr .masthead .logo img{content:url('https://americanpulsetv.hyperbig.com/f_scripts/fe/img/AmPTV_light_logo.png?v=1') !important;filter:none !important}
html.dark .aptv-hdr .umenu{background:var(--cream) !important;border-color:var(--line) !important;color:var(--ink) !important}
html.dark .aptv-hdr .umenu a{color:var(--ink) !important}
html.dark .aptv-hdr .topsearch input,html.dark .aptv-hdr .search-overlay input{
  background:var(--cream) !important;color:var(--ink) !important;border-color:var(--line) !important}
html.dark .aptv-hdr .search-overlay{background:rgba(13,17,23,.97) !important}
html.dark .aptv-hdr .hamb span{background:var(--head)}

/* Disclaimer + footer keep the deep navy in both modes - they are already dark
   surfaces, so following the text tokens would wash them out. */
html.dark .foot-disclaimer.aptv-footer{background:var(--gnd) !important}
html.dark .foot-disclaimer.aptv-footer .fd-text{color:#c7d3e4 !important}
html.dark .foot-disclaimer.aptv-footer .fd-text b{color:#fff !important}
html.dark .foot.aptv-footer{background:var(--gn) !important;color:#c7d3e4 !important}
html.dark .foot.aptv-footer .cols h5{color:#fff !important}
html.dark .foot.aptv-footer .cols a{color:#c7d3e4 !important}
html.dark .foot.aptv-footer .cols a:hover{color:#fff !important}
html.dark .foot.aptv-footer .bottom,html.dark .foot.aptv-footer .bottom .legal a{color:#9fb0c9 !important}

/* G97 - same dark-mode correction as app.css, so the disclaimer/footer band
   matches on the app pages too (G96 pinned them navy, which inverted against
   the darker page background). */
html.dark .foot-disclaimer.aptv-footer{background:#05090f !important}
html.dark .foot-disclaimer.aptv-footer .fd-text{color:#b9c6d8 !important}
html.dark .foot-disclaimer.aptv-footer .fd-text b{color:#fff !important}
html.dark .foot.aptv-footer{background:#080d14 !important}
html.dark .foot.aptv-footer .cols a,html.dark .foot.aptv-footer .bottom{color:#aab7c9 !important}
html.dark .foot.aptv-footer .cols a:hover{color:#fff !important}

/* ============================================================
   G98 - channel page: the real tab strip is #channel-tabs (.channel-tab-list),
   not the browse nav G95 targeted. Styled as channel.html's .tabs, plus the
   "All channels" back link above the hero.
   ============================================================ */
.aptv-backlink{display:inline-block;margin:24px 0 0;color:var(--gr) !important;font-family:'Open Sans',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.aptv-backlink:hover{color:var(--grd) !important}
#channel-tabs .content-wrap{max-width:100% !important; margin: 0px!important; padding: 0px!important;}
.tpl_channel #channel-tabs{margin:22px 0 26px !important;padding:0 !important;background:none !important;border:0 !important}
.tpl_channel #channel-tabs nav{margin:0 !important;padding:0 !important;background:none !important;border:0 !important}
.tpl_channel ul.channel-tab-list{
  display:flex !important;gap:2px !important;list-style:none !important;
  margin:0 !important;padding:0 !important;border-bottom:1px solid var(--gn) !important;
  flex-wrap:wrap;background:none !important}
.tpl_channel ul.channel-tab-list li{margin:0 !important;padding:0 !important;background:none !important;border:0 !important;float:none !important}
.tpl_channel ul.channel-tab-list li a{
  display:block !important;font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  font-size:12px !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  color:var(--gmut) !important;padding:13px 18px !important;
  border:0 !important;border-bottom:3px solid transparent !important;margin-bottom:-2px !important;
  background:none !important;text-decoration:none !important}
.tpl_channel ul.channel-tab-list li a:hover{color:var(--gtext) !important}
.tpl_channel ul.channel-tab-list li.tab-current a,
.tpl_channel ul.channel-tab-list li.active a{color:var(--gr) !important;border-bottom-color:var(--gr) !important}
/* the app prefixes each tab with an icon font glyph; channel.html has none */
.tpl_channel ul.channel-tab-list li a[class*="icon"]::before{display:none !important}

html.dark .tpl_channel ul.channel-tab-list{border-bottom-color:var(--gline) !important}
html.dark .tpl_channel ul.channel-tab-list li a{color:var(--gmut) !important}
html.dark .tpl_channel ul.channel-tab-list li.tab-current a{color:var(--gr) !important}

/* ============================================================
   G99 - Channel page: full-width, no left sidebar, matching the treatment
   the browse (G78) and watch (G83) pages already get.
   ============================================================ */
html:not(.aptv-embed) .tpl_channel .container.container_wrapper{display:block !important;max-width:1240px !important;margin:0 auto !important}
html:not(.aptv-embed) .tpl_channel .container.container_wrapper > .sidebar-container{display:none !important}
html:not(.aptv-embed) .tpl_channel .container.container_wrapper > .fluid{width:100% !important;max-width:none !important}

/* ============================================================
   G100 - channel page corrections.
   ============================================================ */

/* 1. hero: name/stats row sits directly under the avatar */
.tpl_channel #channel-subscribe{margin-top:0 !important}

/* 2. tab labels were mangled because the anchors carry a bare `icon` class and
   the legacy sheet sets `.icon{width:14%}`, stretching every tab to a
   percentage of the strip. Reset the box and keep the label in the page font. */
.tpl_channel ul.channel-tab-list li a.icon,
.tpl_channel ul.channel-tab-list li a{
  width:auto !important;max-width:none !important;min-width:0 !important;
  float:none !important;height:auto !important;line-height:1.2 !important;
  font-family:'Open Sans',sans-serif !important;speak:normal !important}
.tpl_channel ul.channel-tab-list li a span{
  font-family:'Open Sans',sans-serif !important;font-size:12px !important;
  font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  line-height:1.2 !important;display:inline !important; padding:0px}
/* the icon-font glyph itself */
.tpl_channel ul.channel-tab-list li a::before,
.tpl_channel ul.channel-tab-list li a::after{content:none !important;display:none !important}

/* 3. Videos tab: just the grid - no "Media Library", no "Recent" strip, no "Videos" heading */
.tpl_channel .ch-mod-videos h3.content-title,
.tpl_channel .ch-mod-videos #main-content > nav,
.tpl_channel .ch-mod-videos .aptv-sec-h{display:none !important}
.tpl_channel .ch-mod-videos #main-content{margin-top:0 !important}
.tpl_channel .ch-mod-videos .haiii{margin-top:0 !important}

/* 4. About tab: the about panel only, like the Live tab */
.tpl_channel .ch-mod-about h2.content-title,
.tpl_channel .ch-mod-about h3.content-title,
.tpl_channel .ch-mod-about > .line,
.tpl_channel .ch-mod-about .content-wrap > section > .vs-column > .line{display:none !important}

/* ============================================================
   G101 - channel page video grid. The browse grid (G81) is scoped to
   .tpl_browse, so the channel page never got it and fell back to the legacy
   .vs-column.fourths{width:26%;padding-right:22px}, which only fits three
   across. Same grid treatment here, pinned to four.
   ============================================================ */
html:not(.aptv-embed) .tpl_channel ul.fileThumbs{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:30px 24px !important;list-style:none !important;margin:0 !important;padding:0 !important;width:100% !important}
html:not(.aptv-embed) .tpl_channel ul.fileThumbs::before,
html:not(.aptv-embed) .tpl_channel ul.fileThumbs::after{display:none !important;content:none !important}
html:not(.aptv-embed) .tpl_channel ul.fileThumbs > li{
  width:auto !important;max-width:none !important;min-width:0 !important;
  float:none !important;margin:0 !important;padding:0 !important;display:block !important}
html:not(.aptv-embed) .tpl_channel ul.fileThumbs > li .thumbs-wrapper,
html:not(.aptv-embed) .tpl_channel ul.fileThumbs > li figure,
html:not(.aptv-embed) .tpl_channel ul.fileThumbs > li img{width:100% !important}
@media(max-width:1100px){html:not(.aptv-embed) .tpl_channel ul.fileThumbs{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:820px) {html:not(.aptv-embed) .tpl_channel ul.fileThumbs{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px) {html:not(.aptv-embed) .tpl_channel ul.fileThumbs{grid-template-columns:1fr !important}}

/* Live tab: the broadcast list only - no "Media Library", no "Recent" strip,
   no section headings (the "Latest Videos" fallback is suppressed in VBrowse). */
.tpl_channel .ch-mod-broadcasts h3.content-title,
.tpl_channel .ch-mod-broadcasts #main-content > nav,
.tpl_channel .ch-mod-broadcasts .aptv-sec-h{display:none !important}
.tpl_channel .ch-mod-broadcasts #main-content{margin-top:0 !important}
.tpl_channel .ch-mod-broadcasts .haiii{margin-top:0 !important}

/* ============================================================
   G102 - video details page: title type, and a description clamp the
   show more/less toggle can actually drive.
   ============================================================ */

/* title: app.css's article title (34px Playfair) rather than the legacy bold sans */
.tpl_view #title-wrapper{font-weight:400 !important;margin-top:0 !important}
.tpl_view #title-wrapper h1.title-text{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:34px !important;font-weight:800 !important;line-height:1.14 !important;
  letter-spacing:-.01em !important;color:var(--gtext) !important;
  margin:4px 0 14px !important;padding:0 !important;text-transform:none !important}
@media(max-width:640px){.tpl_view #title-wrapper h1.title-text{font-size:25px !important}}

/* description clamp driven by a class, so the toggle is a class flip rather than
   an inline height animation that the stylesheet can fight */
.tpl_view #div-info .more{max-height:260px;overflow:hidden}
.tpl_view #div-info .more.aptv-info-open{max-height:none !important;height:auto !important}
.tpl_view .info-toggle{font-family:'Open Sans',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gr) !important;cursor:pointer}
.tpl_view .info-toggle.no-display{display:none !important}

/* ============================================================
   G103 - video details header, per the reference: a category · age kicker
   above the title, and outlined Subscribe / Share controls.
   Like, dislike and the view counter are deliberately left alone.
   ============================================================ */

/* kicker above the title */
.tpl_view #title-wrapper .aptv-kicker-line{
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;
  color:var(--gr) !important;margin:20px 0 10px !important;padding:0 !important;line-height:1.4}
.tpl_view #title-wrapper .aptv-kicker-line .sep{color:var(--gmut) !important;margin:0 4px}

/* rule under the title, as in the reference */
.tpl_view #title-wrapper h1.title-text{padding-bottom:18px !important}

/* Share: outlined pill with uppercase label (leaves .like-wrap untouched) */
.tpl_view .act-btn .sh_button.btn_auto[target="share"]{
  width:auto !important;height:auto !important;
  border:1px solid var(--gline) !important;border-radius:3px !important;background:#fff !important;
  padding:10px 16px !important;margin-left:8px !important;
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;font-size:11.5px !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--gtext) !important;
  display:inline-flex !important;align-items:center;gap:7px;box-shadow:none !important}
.tpl_view .act-btn .sh_button.btn_auto[target="share"]:hover{border-color:var(--gn) !important;color:var(--gn) !important}

/* the other icon buttons keep their compact shape but pick up the same border */
.tpl_view .act-btn .sh_button.btn_auto:not([target="share"]){
  border:1px solid var(--gline) !important;border-radius:3px !important;background:#fff !important;
  width:38px !important;height:38px !important;line-height:36px !important;
  color:var(--gtext) !important;box-shadow:none !important;margin-left:8px !important}
.tpl_view .act-btn .sh_button.btn_auto:not([target="share"]):hover{border-color:var(--gn) !important;color:var(--gn) !important}

/* Subscribe control, styled like the reference's outlined button */
.tpl_view .channel_owner .subscribers .count_link{
  display:inline-flex !important;align-items:center;gap:7px;
  border:1px solid var(--gline) !important;border-radius:3px !important;background:#fff !important;
  padding:10px 16px !important;margin-left:8px !important;text-decoration:none !important}
.tpl_view .channel_owner .subscribers .count_link:hover{border-color:var(--gn) !important}
.tpl_view .channel_owner .subscribers .sub-txt,
.tpl_view .channel_owner .subscribers .follow-txt{
  font-family:'Open Sans',sans-serif !important;font-weight:700 !important;font-size:11.5px !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--gtext) !important;margin:0 !important}

/* channel name + avatar in the description block, in the reference's type */
.tpl_view #div-info .more .channel_image img{
  width:46px !important;height:46px !important;border-radius:50% !important;object-fit:cover !important}
.tpl_view #div-info .more .p-info > a.place-left{
  font-family:'Playfair Display',Georgia,serif !important;font-weight:700 !important;
  font-size:17px !important;color:var(--gtext) !important;text-decoration:none !important;letter-spacing:-.01em}
.tpl_view #div-info .more .p-info > a.place-left:hover{color:var(--gr) !important}
.tpl_view #div-info .more .p-date{font-size:12.5px !important;color:var(--gmut) !important}

html.dark .tpl_view .act-btn .sh_button.btn_auto,
html.dark .tpl_view .channel_owner .subscribers .count_link{background:var(--gcream) !important;border-color:var(--gline) !important}

/* ============================================================
   G104 - video description header: avatar, channel name and date read as
   one block instead of a full-width floated link with the date stranded
   beside it (.place-left{width:100%} was doing that). Description text and
   the show-more link tidied to match.
   ============================================================ */

/* avatar on the left of the name/date pair */
.tpl_view #div-info .more .channel_image{
  display:block !important;float:left !important;margin:0 14px 0 0 !important;width:46px !important}
.tpl_view #div-info .more .channel_image img{
  width:46px !important;height:46px !important;max-width:46px !important;
  border-radius:50% !important;object-fit:cover !important;display:block !important;background:#fff}

/* name and date stacked, not floated across the row */
.tpl_view #div-info .more .p-info{margin:0 !important;overflow:hidden}
.tpl_view #div-info .more .p-info > a.place-left{
  float:none !important;width:auto !important;display:block !important;
  font-family:'Playfair Display',Georgia,serif !important;font-weight:700 !important;
  font-size:17px !important;line-height:1.3 !important;letter-spacing:-.01em !important;
  color:var(--gtext) !important;text-decoration:none !important;margin:0 !important}
.tpl_view #div-info .more .p-info > a.place-left:hover{color:var(--gr) !important}
.tpl_view #div-info .more .p-date{
  display:block !important;margin:2px 0 0 !important;
  font-family:'Open Sans',sans-serif !important;font-size:12.5px !important;font-weight:400 !important;
  color:var(--gmut) !important;text-align:left !important}

/* description: full width under the byline, comfortable measure */
.tpl_view #div-info .more .p-d-txt{
  display:block !important;margin:18px 0 0 0 !important;clear:both !important;
  font-family:'Open Sans',sans-serif !important;font-size:14.5px !important;
  line-height:1.75 !important;color:var(--gink) !important}
.tpl_view #div-info .more .p-d-txt a{color:var(--gr) !important;text-decoration:none !important;word-break:break-word}
.tpl_view #div-info .more .p-d-txt a:hover{text-decoration:underline !important}

/* rule above the byline + breathing room */
.tpl_view #div-info .more > .line{margin:0 0 18px !important;border-top:1px solid var(--gline) !important;height:0 !important;background:none !important}
.tpl_view #div-info .more{padding-bottom:6px}

/* the FOLLOWERS / SUBSCRIBERS controls sit on the byline's baseline */
.tpl_view .channel_owner{margin-top:0 !important}
.tpl_view .channel_owner .subscribers.profile_count > center{display:flex !important;gap:10px;justify-content:flex-end}

html.dark .tpl_view #div-info .more .p-d-txt{color:var(--gink) !important}
html.dark .tpl_view #div-info .more .channel_image img{background:var(--gcream)}
/* the block carries two .line dividers: the first sits between the avatar and
   the name and should not draw; the second separates byline from description */
.tpl_view #div-info .more .channel_image + .line{display:none !important}
.tpl_view #div-info .more .p-info + .line{
  display:block !important;clear:both !important;margin:16px 0 0 !important;
  border-top:1px solid var(--gline) !important;height:0 !important;background:none !important}

/* ============================================================
   G92 — COMPREHENSIVE DARK MODE: darken every remaining light
   surface / form / dropdown / panel so no white areas or
   unreadable text remain on any page. (design overlay only)
   ============================================================ */
html.dark{--d-surf:#161b22;--d-surf2:#1b232d;--d-line:#2a333f;--d-text:#e6edf3;--d-mut:#9aa7b4}

/* --- content panels / boxes / cards hardcoded white in light mode --- */
html.dark .outer-border-wrapper,
html.dark .dynamic_container,html.dark .dynamic_container .box,
html.dark .widget,html.dark .dashboard-box,
html.dark .categories-container,html.dark .sidebar-container .categories-container,
html.dark #ct-wrapper,html.dark #siteContent .entry-form-class,html.dark .overview-form,
html.dark .plupload_container,html.dark #uploader_container.plupload_container,
html.dark .plupload,html.dark .plupload_view_list,html.dark .plupload_filelist,
html.dark .entry-list.tpl-messages,
html.dark #tokengraph,html.dark .tokengraph,html.dark .token-graph,html.dark .chart-wrap,
html.dark .selector,html.dark .selector.fe,html.dark .thumb-popup,html.dark .thumb-preview,
html.dark .import-feed,html.dark .feed-list,html.dark .yt-feed,html.dark .import-results,
html.dark .this-inner,html.dark #the-stats,
html.dark .lb-margins,html.dark .content,html.dark .comment_h,
html.dark .panel-heading,html.dark .box-header,html.dark .widget-header{
  background:var(--d-surf) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}

/* --- sidebars --- */
html.dark .msidebar,html.dark .sidebar-container,
html.dark .sidebar-container .categories-container{background:var(--d-surf) !important;border-color:var(--d-line) !important}

/* --- headings / titles / text inside panels stay readable --- */
html.dark .content-title,html.dark h3.content-title,
html.dark .lb-margins h1,html.dark .lb-margins h2,html.dark .lb-margins h3,html.dark .lb-margins h4,html.dark .lb-margins h5,
html.dark .dynamic_container h1,html.dark .dynamic_container h2,html.dark .dynamic_container h3,html.dark .dynamic_container h4,
html.dark .dashboard-box h1,html.dark .dashboard-box h2,html.dark .dashboard-box .num,html.dark .dashboard-box span,
html.dark .box h3,html.dark .widget h3,html.dark .comment_h,html.dark .comment_h p,html.dark .comment_h a{color:var(--d-text) !important}

/* --- forms: all inputs / textarea / select --- */
html.dark input[type="text"],html.dark input[type="email"],html.dark input[type="password"],
html.dark input[type="number"],html.dark input[type="url"],html.dark input[type="tel"],
html.dark input[type="date"],html.dark input[type="search"],html.dark textarea,html.dark select,
html.dark .form-control,html.dark .input,html.dark .vs-input,html.dark .field input{
  background:var(--d-surf2) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}
html.dark input::placeholder,html.dark textarea::placeholder{color:var(--d-mut) !important}
html.dark .field input:focus,html.dark input:focus,html.dark textarea:focus{border-color:#3d78c9 !important}

/* --- secondary / outline / grey buttons --- */
html.dark .btn-default,html.dark .btn-outline,html.dark .btn-secondary,html.dark .btn-grey,
html.dark .button-grey,html.dark .search-button.button-grey,html.dark .selector .dnn{
  background:var(--d-surf2) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}

/* --- sidebar active menu item (was pink) --- */
html.dark .menu-panel-entry-active>a,html.dark .menu-panel-entry.active>a{background:rgba(230,20,40,.18) !important;color:#ff6b78 !important}

/* --- dropdowns / modals / fancybox / tooltips --- */
html.dark .fancybox-skin,html.dark .fancybox-inner,html.dark .modal,html.dark .modal-content,
html.dark .dropdown-menu,html.dark .headernav-pop,html.dark .tooltip-inner,
html.dark .uu.arrow_box,html.dark ul.uu,html.dark .arrow_box,html.dark .thumb-popup{
  background:var(--d-surf) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}

/* --- pagination / load-more --- */
html.dark .pagination a,html.dark .pagination span,html.dark .more-button,
html.dark .load-more,html.dark span.load-more{
  background:var(--d-surf2) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}

/* --- rules / dividers --- */
html.dark .hr,html.dark hr{border-color:var(--d-line) !important;background:transparent !important}
html.dark .hr .inner{background:var(--d-surf) !important;color:var(--d-mut) !important}

/* --- alerts --- */
html.dark .error,html.dark .alert-danger,html.dark .error-message,html.dark .warning{
  background:#3a1618 !important;border-color:#5c2327 !important;color:#ffb4b4 !important}

/* --- generic: any icon/border using navy on dark stays visible --- */
html.dark .util-date,html.dark .date{color:var(--d-mut) !important}

/* G93 dark mode — video/single (tpl_view) panels + any bordered wrapper */
html.dark .border-wrapper,html.dark .targetDiv,html.dark .targetDiv.border-wrapper,
html.dark .page_holder_left,html.dark .page_holder_right,
html.dark .page_holder_left.border-wrapper,html.dark .page_holder_right.border-wrapper,
html.dark .related-column,html.dark .playlist_holder,
html.dark .comments-holder,html.dark .comment-list,html.dark .respond-wrap,
html.dark .full-details-holder,html.dark .this-inner{
  background:var(--d-surf) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}

/* tpl_view text: title, meta, description, up-next titles */
html.dark .tpl_view h1,html.dark .tpl_view h1 a,
html.dark .p-d-txt,html.dark .p-info,html.dark .more .p-d-txt,html.dark #div-info,
html.dark .suggested-list h3,html.dark .suggested-list h3 a,
html.dark .related-carousel h3,html.dark .related-carousel h3 a,
html.dark .suggested-list .views-number,html.dark .suggested-list .channel_name,
html.dark .up-next-title,html.dark .related-title{color:var(--d-text) !important}
html.dark .suggested-list .views-number{color:var(--d-mut) !important}

/* G94 watch page: readable tag pills (theme sets line-height:10px causing overlap) */
html:not(.aptv-embed) .tpl_view .tags_h{line-height:1.9 !important}
html:not(.aptv-embed) .tpl_view .tags_h .p-date{display:inline-block;margin-right:6px;vertical-align:middle}
html:not(.aptv-embed) .tpl_view .tags_h a{display:inline-block;margin:0 6px 7px 0;padding:3px 11px;background:var(--gcream);border:1px solid var(--gline);border-radius:14px;font-size:12.5px;line-height:1.5;color:var(--gn);text-decoration:none}
html:not(.aptv-embed) .tpl_view .tags_h a:hover{background:var(--gn);color:#fff}
html.dark .tpl_view .tags_h a{background:var(--d-surf2);border-color:var(--d-line);color:var(--d-text)}
html.dark .tpl_view .tags_h a:hover{background:var(--gr);color:#fff;border-color:var(--gr)}

/* G95 watch page: subscription-management popup was opening off-screen left
   (theme anchors it right:0/left:-400px for a right-side button; our button is on the left) */
html:not(.aptv-embed) .tpl_view .uu.arrow_box,
html:not(.aptv-embed) .tpl_view ul.uu{left:0 !important;right:auto !important;top:calc(100% + 10px) !important}
html:not(.aptv-embed) .tpl_view .uu.arrow_box:before,
html:not(.aptv-embed) .tpl_view .uu.arrow_box:after{left:28px !important;right:auto !important}

/* G96 watch page: align Category / Tags rows (label + content columns) */
html:not(.aptv-embed) .tpl_view .category_h,
html:not(.aptv-embed) .tpl_view .tags_h{display:flex !important;align-items:flex-start;margin:0 0 10px !important;line-height:1.9 !important}
html:not(.aptv-embed) .tpl_view .category_h > .vs-column,
html:not(.aptv-embed) .tpl_view .tags_h > .vs-column{float:none !important;width:auto !important;margin:0 !important;padding:0 !important}
html:not(.aptv-embed) .tpl_view .category_h > .vs-column.sixths,
html:not(.aptv-embed) .tpl_view .tags_h > .vs-column.sixths{flex:0 0 84px;width:84px !important;color:var(--gmut)}
html:not(.aptv-embed) .tpl_view .category_h > .vs-column:not(.sixths),
html:not(.aptv-embed) .tpl_view .tags_h > .vs-column:not(.sixths){flex:1 1 auto;min-width:0}
html:not(.aptv-embed) .tpl_view .category_h .clearfix,
html:not(.aptv-embed) .tpl_view .tags_h .clearfix{display:none !important}
html:not(.aptv-embed) .tpl_view .category_h .p-date,
html:not(.aptv-embed) .tpl_view .tags_h .p-date{line-height:1.9;font-weight:600}

/* G97 subscription tier popup: tab labels (Tier 1/2/3) unreadable in dark (theme uses white/#f9f9f9 tab bg) */
html.dark .tabs-style-topline nav a{background:var(--d-surf2) !important;color:var(--d-mut) !important}
html.dark .tabs-style-topline nav a:hover,html.dark .tabs-style-topline nav a:focus{color:#fff !important}
html.dark .tabs-style-topline nav li.tab-current a{background:var(--d-surf) !important;color:#fff !important;box-shadow:inset 0 3px 0 var(--gr) !important}
html.dark .tabs-style-topline nav li.tab-current{border-top-color:var(--gr) !important}
/* subscription option cards inside popup */
html.dark #sub-wrap .profile_count a,html.dark .sub-plan,html.dark .sub-type,
html.dark .subscription-option,html.dark .sub-price-box{background:var(--d-surf2) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}

/* G98 comment buttons: secondary (Post a video response / Cancel) had light bg; html.dark a made text light -> invisible */
html.dark .comm-cancel-action,
html.dark .js-textareacopybtn,html.dark .js-textareacopybtn-p1,html.dark .js-textareacopybtn-p2,
html.dark a.comm-cancel-action{background:var(--d-surf2) !important;color:var(--d-text) !important;border:1px solid var(--d-line) !important}
html.dark .comm-cancel-action:hover{background:var(--d-line) !important;color:#fff !important}
/* keep light-mode secondary comment buttons legible too (dark text on light bg) */
html:not(.dark) .comm-cancel-action{color:#333 !important}

/* G99 video detail page only: category_h top spacing + flat (transparent) dark panels (per request) */
html:not(.aptv-embed) .tpl_view .category_h{margin-top:32px !important}
html.dark .tpl_view .border-wrapper,
html.dark .tpl_view .targetDiv,
html.dark .tpl_view .targetDiv.border-wrapper,
html.dark .tpl_view .page_holder_left,
html.dark .tpl_view .page_holder_right,
html.dark .tpl_view .page_holder_left.border-wrapper,
html.dark .tpl_view .page_holder_right.border-wrapper,
html.dark .tpl_view .related-column,
html.dark .tpl_view .playlist_holder,
html.dark .tpl_view .comments-holder,
html.dark .tpl_view .comment-list,
html.dark .tpl_view .respond-wrap,
html.dark .tpl_view .full-details-holder,
html.dark .tpl_view .this-inner{background:transparent !important}

/* ============================================================
   G105 - responsive header + footer for the injected chrome.
   .aptv-hdr had 83 rules and no media query at all: the hamburger,
   the mobile nav panel and the mini logo had no styling, so the header
   never collapsed on a phone. This mirrors app.css's mobile header,
   scoped to the injected markup, and tightens the footer further down.
   ============================================================ */

/* desktop defaults for the pieces that only exist for mobile */
.aptv-hdr .hamb{display:none}
.aptv-hdr .mini-logo{display:none}
.aptv-hdr .navlinks{display:contents}

@media(max-width:760px){
  .aptv-hdr .wrap{padding:0 16px}

  /* the date/auth utility strip is desktop-only; its links live in the menu */
  .aptv-hdr .util{display:none !important}

  .aptv-hdr .masthead{padding:16px 16px 0 !important}
  .aptv-hdr .masthead .logo img{height:50px !important}
  .aptv-hdr .masthead .rule{margin-top:12px}

  .aptv-hdr .topnav .wrap{height:52px;gap:0;position:relative;overflow:visible}
  .aptv-hdr .mini-logo{display:inline-block;font-family:'Playfair Display',Georgia,serif;
    font-weight:800;font-size:16px;letter-spacing:.04em;color:var(--gtext);margin-right:auto}
  .aptv-hdr .topsearch{display:none !important}
  .aptv-hdr .msearch-btn{display:inline-flex !important;align-items:center;justify-content:center}
  .aptv-hdr .theme-toggle{margin-right:4px}
  .aptv-hdr .topnav .u-btn{width:34px !important;height:34px !important;font-size:14px !important}

  /* hamburger */
  .aptv-hdr .hamb{display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:42px;height:42px;padding:0;margin-left:4px;background:none;border:none;cursor:pointer;flex:none}
  .aptv-hdr .hamb span{width:23px;height:2px;background:var(--gtext);border-radius:2px;
    transition:transform .22s,opacity .22s;display:block}
  .aptv-hdr .hamb.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .aptv-hdr .hamb.on span:nth-child(2){opacity:0}
  .aptv-hdr .hamb.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* nav becomes a drop-down panel (APTV_toggleMenu adds .open) */
  .aptv-hdr .topnav .navlinks{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);flex-direction:column;align-items:stretch;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(9,43,81,.12);z-index:60;max-height:calc(100vh - 100px);overflow-y:auto}
  .aptv-hdr .topnav .navlinks.open{display:flex}
  .aptv-hdr .topnav .navlinks a{width:100%;padding:15px 40px !important;font-size:12.5px !important;
    letter-spacing:.09em !important;border:0 !important;border-bottom:1px solid var(--line) !important;
    margin:0 !important; line-height: 20px!important;text-align: center;}
  .aptv-hdr .topnav .navlinks a.on{color:var(--gr) !important}
  

  /* the auth links that the utility strip normally carries */
  .aptv-hdr .m-auth{display:flex !important;flex-direction:column;border-top:1px solid var(--line)}
  .aptv-hdr .m-auth a{width:100%;padding:15px 20px !important;font-size:12.5px !important;
    border-bottom:1px solid var(--line) !important}

  /* full-screen search sheet (APTV_toggleSearch adds .open) */
  .aptv-hdr .search-overlay{display:none;position:fixed;inset:0;z-index:120;
    background:rgba(255,255,255,.98);padding:18px 16px}
  .aptv-hdr .search-overlay.open{display:block}
  .aptv-hdr .search-overlay input{width:100%;font-size:16px;padding:14px;border:1px solid var(--line);
    border-radius:4px;background:var(--cream);color:var(--ink)}

  /* footer: comfortable on a phone */
  .foot.aptv-footer{padding:34px 0 26px !important}
  .foot.aptv-footer .top{gap:20px}
  .foot.aptv-footer .cols{gap:16px 14px}
  .foot-disclaimer.aptv-footer .fd-inner{padding:28px 16px 30px}
  .foot-disclaimer.aptv-footer .fd-text{font-size:14.5px;line-height:1.75}
}

@media(max-width:440px){
  .aptv-hdr .masthead .logo img{height:42px !important}
  .aptv-hdr .mini-logo{font-size:15px}
  .foot.aptv-footer .cols{grid-template-columns:1fr !important}
  .foot.aptv-footer .bottom{flex-direction:column;gap:10px;text-align:center}
  .foot.aptv-footer .bottom .legal{justify-content:center;flex-wrap:wrap;gap:6px 0}
}

html.dark .aptv-hdr .search-overlay{background:rgba(13,17,23,.98)}
html.dark .aptv-hdr .hamb span{background:var(--head)}

/* ============================================================
   G106 - two fixes on the mobile chrome.

   1. The hamburger did nothing because G72 (line ~902) sets
      .aptv-hdr .topnav .navlinks{display:flex !important} at the same
      specificity as the mobile rule, so the panel could never be hidden
      and .open had nothing to reveal. The mobile rules now carry
      !important and also undo G72's nowrap / margin-right:auto.

   2. The search sheet had markup (.so-inner/.so-ic/.so-close) but no
      styling whatsoever. It is now a proper search card.
   ============================================================ */

@media(max-width:760px){
  /* --- hamburger panel, overriding G72 --- */
  .aptv-hdr .topnav .navlinks{
    display:none !important;flex-direction:column !important;flex-wrap:wrap !important;
    margin-right:0 !important;align-items:stretch !important;
    position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
    background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(9,43,81,.12);z-index:60;
    max-height:calc(100vh - 100px);overflow-y:auto}
  .aptv-hdr .topnav .navlinks.open{display:flex !important}

  /* --- search sheet --- */
  .aptv-hdr .search-overlay{
    display:none;position:fixed !important;inset:0 !important;z-index:120;
    background:rgba(6,20,40,.55) !important;backdrop-filter:blur(3px);
    padding:0 !important;width:100% !important;height:100%}
  .aptv-hdr .search-overlay.open{display:block !important}
}

/* the search card itself - same at every width, the sheet only positions it */
.aptv-hdr .search-overlay .so-inner{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);margin:0;padding:12px 14px;
  border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(9,43,81,.18)}
.aptv-hdr .search-overlay .so-ic{display:inline-flex;align-items:center;flex:none;opacity:.75}
.aptv-hdr .search-overlay input{
  flex:1 1 auto;min-width:0;width:auto !important;
  font-family:'Open Sans',sans-serif;font-size:16px;   /* 16px keeps iOS from zooming */
  padding:12px 4px !important;border:0 !important;outline:none;background:transparent !important;
  color:var(--gink) !important}
.aptv-hdr .search-overlay input::placeholder{color:var(--gmut)}
.aptv-hdr .search-overlay button[type="submit"],
.aptv-hdr .search-overlay .so-inner > button:not(.so-close){
  flex:none;border:0;border-radius:3px;background:var(--gr);color:#fff;cursor:pointer;
  font-family:'Open Sans',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:11px 16px}
.aptv-hdr .search-overlay .so-inner > button:not(.so-close):hover{background:var(--grd)}
.aptv-hdr .search-overlay .so-close{
  flex:none;width:38px;height:38px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--gmut);padding:0}
.aptv-hdr .search-overlay .so-close:hover{color:var(--gtext)}

html.dark .aptv-hdr .search-overlay{background:rgba(0,0,0,.6) !important}
html.dark .aptv-hdr .search-overlay .so-inner{background:var(--gcream);border-bottom-color:var(--gline)}
html.dark .aptv-hdr .search-overlay input{color:var(--gink) !important}

/* ============================================================
   G107 - mobile header control cluster (logo · theme · avatar · search · menu).
   The search button had display rules only - no size, colour or hit area - and
   the avatar's 30px glyph was crammed into a 34px circle. Everything in the row
   now shares one 38px touch target, one icon size and even spacing.
   ============================================================ */

/* search button: proper target, inherits the header text colour via currentColor */
.aptv-hdr .msearch-btn{
  width:38px;height:38px;padding:0;flex:none;border:0;background:none;cursor:pointer;
  border-radius:50%;color:var(--gtext) !important;
  transition:background .15s,color .15s}
.aptv-hdr .msearch-btn svg{width:20px;height:20px;display:block;stroke:currentColor}
.aptv-hdr .msearch-btn:hover,.aptv-hdr .msearch-btn:focus-visible{background:var(--gcream);color:var(--gr) !important}

/* avatar: glyph sized to sit inside the circle rather than fill it */
.aptv-hdr .topnav .u-btn svg{width:18px !important;height:18px !important;display:block}
.aptv-hdr .topnav .u-btn{overflow:hidden}
.aptv-hdr .topnav .u-btn img{width:100% !important;height:100% !important;object-fit:cover;border-radius:50%}

@media(max-width:760px){
  /* even spacing and a common 38px target across the cluster */
  .aptv-hdr .topnav .wrap{gap:2px !important}
  .aptv-hdr .topnav .u-btn{width:36px !important;height:36px !important}
  .aptv-hdr .topnav .u-btn svg{width:17px !important;height:17px !important}
  .aptv-hdr .msearch-btn{width:38px;height:38px}
  .aptv-hdr .hamb{width:38px;height:38px;margin-left:0}

  /* the 50px pill switch is heavy next to three round controls - scale it down */
  .aptv-hdr .theme-toggle{margin:0 2px 0 0 !important}
  .aptv-hdr .theme-toggle .tt-track{width:40px !important;height:22px !important}
  .aptv-hdr .theme-toggle .tt-thumb{width:16px !important;height:16px !important;top:3px !important;left:3px !important}
  .aptv-hdr .theme-toggle .tt-thumb::after{font-size:10px !important}
  .aptv-hdr .theme-toggle input:checked + .tt-track .tt-thumb{left:21px !important}

  /* keep the mini logo from crowding the controls */
  .aptv-hdr .mini-logo{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
}

@media(max-width:380px){
  /* G114 - the toggle used to be hidden below 380px because the bar also
     carried the search button and the avatar and there was no room. G109
     removed both, so the 40x22 mobile switch fits again all the way down to
     320px - and the menu entry alone was too easy to miss. */
  .aptv-hdr .mini-logo{max-width:38vw}
}

html.dark .aptv-hdr .msearch-btn{color:var(--head) !important}
html.dark .aptv-hdr .msearch-btn:hover{background:rgba(255,255,255,.06)}

/* ============================================================
   G108 - mobile bottom tab bar on the app pages. The custom pages get it
   from UI.mount(); the app pages now call UI.mountBottomNav() from the
   chrome script, and george.css had no .botnav rules at all, so these
   mirror app.css's.
   ============================================================ */
.botnav{display:none}

@media(max-width:760px){
  .botnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(9,43,81,.08)}
  .botnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 2px calc(7px + env(safe-area-inset-bottom,0px));
    font-family:'Open Sans',sans-serif;font-weight:700;font-size:10px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gmut) !important;text-decoration:none !important;
    min-width:0}
  .botnav a svg{width:23px;height:23px;display:block;stroke:currentColor}
  .botnav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .botnav a.on{color:var(--gr) !important}
  .botnav a:active{background:var(--gcream)}

  /* keep the bar from covering the end of the page / the footer */
  .has-botnav{padding-bottom:58px}
  body.has-botnav .foot.aptv-footer{margin-bottom:0}
}

html.dark .botnav{background:#0f141f;border-top-color:rgba(255,255,255,.10)}
html.dark .botnav a{color:var(--gmut) !important}
html.dark .botnav a.on{color:var(--gr) !important}

/* ============================================================
   G109 - mobile top bar simplified: burger on the left, dark/light switch
   on the right, search and avatar removed. Done with flex `order` so the
   markup (and the JS that drives the burger) stays untouched.
   DOM order in .topnav .wrap is: mini-logo, navlinks, grow, theme-toggle,
   u-btn, msearch-btn, hamb.
   ============================================================ */
@media(max-width:760px){
  .aptv-hdr .topnav .wrap{display:flex !important;align-items:center;gap:8px !important}

  /* burger first */
  .aptv-hdr .hamb{order:1 !important;margin:0 !important}
  /* then the wordmark, then the spacer that pushes the rest right */
  .aptv-hdr .mini-logo{order:2 !important;margin:0 !important}
  .aptv-hdr .topnav .grow{order:3 !important;flex:1 1 auto !important;display:block !important}
  /* and the theme switch on the right */
  .aptv-hdr .theme-toggle{order:4 !important;margin:0 !important}

  /* removed from the bar */
  .aptv-hdr .topnav .u-btn{display:none !important}
  .aptv-hdr .msearch-btn{display:none !important}

  /* the nav panel is absolutely positioned, so its order is irrelevant,
     but keep it out of the flex line */
  .aptv-hdr .topnav .navlinks{order:5 !important}
}

/* The search sheet stays available: the bottom tab bar's Search item opens it
   via APTV_toggleSearch(). Only the header icon was removed, not search. */

/* G100 video detail: description text in the editorial serif (matches the title) */
html:not(.aptv-embed) .tpl_view .p-d-txt,
html:not(.aptv-embed) .tpl_view #div-info .p-d-txt,
html:not(.aptv-embed) .tpl_view .full-details-holder .p-d-txt{
  font-family:var(--serif) !important;font-size:16.5px !important;line-height:1.8 !important}

/* ============================================================
   G110 - burger panel: match the custom pages exactly.
   app.css anchors it with left/right:-16px so it bleeds past the wrap's
   16px gutter to the screen edges; george.css used left/right:0, leaving
   a gap down both sides - which is why the panel looked different on the
   live / channel / videos pages. Same geometry and finish on both now.
   ============================================================ */
@media(max-width:760px){
  .aptv-hdr .topnav .wrap{position:relative !important;overflow:visible !important}

  .aptv-hdr .topnav .navlinks{
    left:-16px !important;right:-16px !important;top:100% !important;
    padding:4px 0 !important;
    border-top:1px solid var(--gline) !important;
    border-bottom:1px solid var(--gline) !important;
    box-shadow:0 16px 32px rgba(9,43,81,.14) !important;
    background:var(--paper) !important;
    max-height:calc(100vh - 110px) !important;overflow-y:auto !important;
    -webkit-overflow-scrolling:touch}

  /* rows: full-width targets, hairline between, no rule under the last one */
  .aptv-hdr .topnav .navlinks > a{
    display:block !important;width:100% !important;
    padding:14px 40px !important;margin:0 !important;
    font-family:'Open Sans',sans-serif !important;font-weight:700 !important;
    font-size:12.5px !important;letter-spacing:.09em !important;text-transform:uppercase !important;
    color:var(--gtext) !important;text-decoration:none !important;
    border:0 !important;border-bottom:1px solid var(--gline) !important; line-height: 20px!important;text-align: center;}
  .aptv-hdr .topnav .navlinks > a:last-child{border-bottom:0 !important}
  .aptv-hdr .topnav .navlinks > a:active{background:var(--gcream) !important}
  .aptv-hdr .topnav .navlinks > a.on{color:var(--gr) !important}

  /* the auth block that sits at the foot of the panel */
  .aptv-hdr .m-auth{display:flex !important;flex-direction:column !important;
    border-top:1px solid var(--gline) !important;margin-top:4px !important}
  .aptv-hdr .m-auth a{padding:14px 20px !important;font-size:12.5px !important;
    letter-spacing:.09em !important;text-transform:uppercase !important;font-weight:700 !important;
    color:var(--gtext) !important;border-bottom:1px solid var(--gline) !important}
  .aptv-hdr .m-auth a:last-child{border-bottom:0 !important}
}

/*
html.dark .aptv-hdr .topnav .navlinks{border-color:var(--gline) !important;box-shadow:0 16px 32px rgba(0,0,0,.5) !important}
html.dark .aptv-hdr .topnav .navlinks > a{color:var(--head) !important;border-bottom-color:var(--gline) !important}
*/
/* G101 dark mode: inline navy-colored links (e.g. media-library "View") are invisible on dark -> light blue */
html.dark [style*="color:var(--navy)"]{color:#7fb0ff !important}
html.dark .dtable .row-media img{border:1px solid var(--d-line, #2a333f)}

/* ===== G102 message center (tpl_messages) + accordion sidebar dark mode ===== */
/* sidebar accordion parent links had light (#f5f5f5) bg */
html.dark .dcjq-parent,html.dark a.dcjq-parent,
html.dark .sidebar-container .accordion a,html.dark .categories-container .accordion a{background:transparent !important;color:var(--d-text) !important}
html.dark .dcjq-parent:hover,html.dark .sidebar-container .accordion a:hover{background:rgba(255,255,255,.04) !important}
html.dark .menu-panel-entry.active>a,html.dark .menu-panel-entry-active>a{background:rgba(230,20,40,.16) !important;color:#ff6b78 !important}

/* message rows / accordion */
html.dark .responsive-accordion-head,
html.dark .responsive-accordion-title,
html.dark .responsive-accordion-content,
html.dark .responsive-accordion-body{background:var(--d-surf) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}
html.dark .responsive-accordion-head:hover{background:var(--d-surf2) !important}
html.dark .responsive-accordion-head b,html.dark .responsive-accordion-title b,
html.dark .responsive-accordion-head a,html.dark .ct-entry b{color:var(--d-text) !important}
html.dark .responsive-accordion-head .greyed-out,
html.dark .entry-type.greyed-out,html.dark .greyed-out,
html.dark .responsive-accordion-title span,html.dark .responsive-accordion-head span,
html.dark .entry-date,html.dark .msg-date{color:var(--d-mut) !important}

/* pagination bar */
html.dark .paging-bg,html.dark .paging-top-border,
html.dark .left-float.paging-top-border,html.dark .paging-bg a,html.dark .pagination-wrap{
  background:var(--d-surf) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}
html.dark .paging-bg a,html.dark .paging-numbers a{color:var(--d-text) !important}

/* label / action dropdown menus */
html.dark .dl-menu,html.dark ul.dl-menu,html.dark .dl-menuwrapper ul,
html.dark .dl-menu li,html.dark .dl-menu li a{background:var(--d-surf) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}
html.dark .dl-menu li a:hover{background:var(--d-surf2) !important}

/* compose / message body panels + toolbar */
html.dark .responsive-accordion,html.dark .entry-list.tpl-messages,
html.dark .message-content,html.dark .msg-body,html.dark .compose-wrap,
html.dark .cke_chrome,html.dark .cke_inner,html.dark .cke_contents{background:var(--d-surf) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}

/* ============================================================
   G111 - mobile footer: keep the group headings, but lay each group's
   links out inline underneath instead of one per row. Stacking every
   link made the footer ~450px tall on a phone; this keeps the labels
   and the grouping while cutting most of that height.

      BROWSE
      Videos · Live · Channels · Playlists
      ACCOUNT
      Dashboard · My Account · Upload · Media Library
      …
   ============================================================ */
@media(max-width:760px){
  .foot.aptv-footer .cols{
    display:flex !important;flex-direction:column !important;
    grid-template-columns:none !important;gap:16px !important;width:100% !important}

  /* one group per block, heading then its links */
  /* plain block, so the links below the heading flow inline.
     A column flex container would put each link on its own line. */
  .foot.aptv-footer .cols > div{
    display:block !important;width:100% !important;margin:0 !important}

  .foot.aptv-footer .cols h5{
    display:block !important;margin:0 0 6px !important;
    font-size:10.5px !important;letter-spacing:.16em !important}

  /* the links of a group, inline and wrapping */
  .foot.aptv-footer .cols > div > a{
    display:inline-block !important;margin:0 !important;padding:4px 0 !important;
    font-size:13px !important;line-height:1.4 !important;white-space:nowrap}
  .foot.aptv-footer .cols > div > a + a{margin-left:14px !important;position:relative}
  .foot.aptv-footer .cols > div > a + a::before{
    content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
    width:1px;height:11px;background:rgba(255,255,255,.18)}
}
@media(max-width:440px){
  .foot.aptv-footer .cols{grid-template-columns:none !important;gap:14px !important}
  .foot.aptv-footer .cols > div > a{font-size:12.5px !important}
  .foot.aptv-footer .cols > div > a + a{margin-left:12px !important}
}

/* ============================================================
   G112 - mobile footer centred: logo, tagline, group headings, links
   and the bottom bar all centre-aligned. The logo and tagline carry
   inline styles (display:block / max-width:320px), so those are
   overridden here rather than left half-aligned.
   ============================================================ */
@media(max-width:760px){
  .foot.aptv-footer .top{align-items:center !important;text-align:center !important}
  .foot.aptv-footer .top > div:first-child{display:flex !important;flex-direction:column !important;
    align-items:center !important;width:100%}
  .foot.aptv-footer .top img{margin-left:auto !important;margin-right:auto !important}
  .foot.aptv-footer .top p{max-width:320px !important;margin-left:auto !important;margin-right:auto !important;
    text-align:center !important}

  .foot.aptv-footer .cols{align-items:center !important;text-align:center !important}
  .foot.aptv-footer .cols > div{text-align:center !important}
  .foot.aptv-footer .cols h5{text-align:center !important}

  .foot.aptv-footer .bottom{flex-direction:column !important;align-items:center !important;
    justify-content:center !important;text-align:center !important;gap:10px !important}
  .foot.aptv-footer .bottom .legal{justify-content:center !important;flex-wrap:wrap}

  .foot-disclaimer.aptv-footer .fd-inner{text-align:center !important}
}

/* G103 message center: cancel/trigger buttons + label triggers dark */
html.dark .trigger,html.dark .link.trigger,html.dark .cancel-trigger,
html.dark a.link.cancel-trigger,html.dark .dl-trigger,html.dark .add-label-trigger{
  background:var(--d-surf2) !important;color:var(--d-text) !important;border-color:var(--d-line) !important}
html.dark .trigger:hover,html.dark .cancel-trigger:hover{background:var(--d-line) !important;color:#fff !important}

/* ============================================================
   G113 - the bottom tab bar was merging into the footer's copyright row.
   Two causes. (1) The bar had no height of its own: it came out as the sum
   of border + padding + icon + gap + an INHERITED label line-height, which
   landed on exactly 58px - the same number G108 reserved - so the copyright
   line ended up flush against the bar with nothing between them. (2) That
   bar padding adds env(safe-area-inset-bottom) but the reserve did not, so
   on a notched phone the bar grew ~34px while the page still held back 58px
   and the bar covered the copyright outright.
   Pin the bar to a known height, reserve exactly that (inset included), and
   leave some air under the copyright line.
   ============================================================ */
@media(max-width:760px){
  :root{--botnav-h:56px}

  .botnav{
    height:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-sizing:border-box}
  /* the inset now lives on the bar, so the links keep a plain fixed box */
  .botnav a{padding:0 2px;line-height:1}
  .botnav a span{line-height:13px}

  /* Reserving the space on <body> only works where <body> can grow. The app
     pages set html,body{height:100%} and scroll on <html>, so there the body
     box stays 844px tall, its content overflows it, and a padding-bottom on
     that short box is buried inside the overflow - the page still ended at
     the footer and the bar covered the copyright. So reserve the space on the
     footer instead: it is the last in-flow block on every page, so its
     padding always lengthens the scroll. Body padding goes to 0 or the two
     would stack and leave a navy strip above the bar on the custom pages. */
  .has-botnav{padding-bottom:0 !important}
  body.has-botnav .foot.aptv-footer{
    padding-bottom:calc(26px + var(--botnav-h) + env(safe-area-inset-bottom,0px)) !important}
}

/* G104 message action buttons (Reply / Delete / Block User): even horizontal spacing
   (each button sits in its own .place-left, so .msg-buttons is the flex row) */
html:not(.aptv-embed) .tpl_messages .msg-buttons{display:flex !important;flex-wrap:wrap;gap:14px;align-items:center;padding-top:10px !important;float:none !important}
html:not(.aptv-embed) .tpl_messages .msg-buttons .place-left{display:inline-flex !important;float:none !important;margin:0 !important;padding:0 !important;width:auto !important}
html:not(.aptv-embed) .tpl_messages .msg-buttons .place-left .left-align{margin:0 !important;padding:0 !important}
html:not(.aptv-embed) .tpl_messages .msg-buttons .reply-msg,
html:not(.aptv-embed) .tpl_messages .msg-buttons .delete-msg,
html:not(.aptv-embed) .tpl_messages .msg-buttons .block-user{margin:0 !important;width:auto !important;flex:0 0 auto !important;white-space:nowrap}

/* G105 dark mode: class-based navy text (my-account stat numbers, 404 code) -> light blue */
html.dark .acct-stats .s b{color:#7fb0ff !important}
html.dark .err-code{color:#7fb0ff !important}

/* ============================================================
   G115 - small-mobile (<=400px) horizontal overflow. Three separate causes,
   all of them in rules added here earlier:
   1. the browse grid's minmax(300px,1fr) floor is wider than the content box
      of a 320px viewport, so every card pushed the page 10px sideways;
   2. .aptv-sec-h is a nowrap flex row, so its trailing link could not fit
      beside the heading and its rule and hung 23px off the edge;
   3. reCAPTCHA is a fixed 304px widget and .auth-wrap is a grid, so the
      card's min-width:auto pinned it at 350px - wider than a 360px phone
      once the gutters are counted. That put a horizontal scroll on login,
      register and recovery at the most common Android width.
   ============================================================ */
html:not(.aptv-embed) .tpl_browse ul.fileThumbs{
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)) !important}

@media(max-width:400px){
  /* let the trailing link drop to its own line instead of overhanging */
  .aptv-sec-h{flex-wrap:wrap}
  .aptv-sec-h h2{min-width:0}
  .aptv-sec-h a{margin-left:auto}

  /* tighter gutters, and a card that is allowed to shrink at all */
  .auth-wrap{padding-left:12px !important;padding-right:12px !important}
  .auth-card{min-width:0;padding-left:16px !important;padding-right:16px !important}
  .auth-card form{min-width:0}
  /* scale the fixed 304x78 widget down and pull its layout box in to match,
     so it stops forcing the card wider than the screen */
  .g-recaptcha{min-width:0;overflow:hidden}
  .g-recaptcha > div{transform:scale(.82);transform-origin:50% 0;margin:0 -27px -14px}
}

/* ===== G106 mobile member sidebar -> clean horizontal pill menu =====
   (G63 .msidebar rules use !important with no media query and were breaking
   the mobile layout: cramped items, visible captions, stray red left-border) */
@media(max-width:900px){
  html:not(.aptv-embed) .member{grid-template-columns:1fr !important}
  html:not(.aptv-embed) .msidebar{display:flex !important;flex-direction:row !important;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-right:none !important;border-bottom:1px solid var(--gline) !important;padding:9px 10px !important;gap:8px !important;
    white-space:nowrap;background:var(--paper) !important;align-items:center}
  html:not(.aptv-embed) .msidebar .cap,
  html:not(.aptv-embed) .msidebar .sep,
  html:not(.aptv-embed) .msidebar .flinks,
  html:not(.aptv-embed) .msidebar .mchan{display:none !important}
  html:not(.aptv-embed) .msidebar a.mi{flex:0 0 auto !important;display:inline-flex !important;align-items:center;gap:8px;
    padding:8px 14px !important;border-radius:20px !important;background:var(--gcream) !important;border:1px solid var(--gline) !important;
    font-size:13px;font-weight:700;box-shadow:none !important;color:var(--gn) !important}
  html:not(.aptv-embed) .msidebar a.mi.on{background:var(--gr) !important;color:#fff !important;border-color:var(--gr) !important;box-shadow:none !important}
  html:not(.aptv-embed) .msidebar a.mi .i{font-size:14px;opacity:1}
  /* dark mode pills */
  html.dark .msidebar{background:var(--d-surf) !important;border-bottom-color:var(--d-line) !important}
  html.dark .msidebar a.mi{background:var(--d-surf2) !important;border-color:var(--d-line) !important;color:var(--d-text) !important}
  html.dark .msidebar a.mi.on{background:var(--gr) !important;color:#fff !important;border-color:var(--gr) !important}
}

/* G107 header avatar: red circle border on all pages + image fully fills the circle
   (image was 3px shorter than the navy button, leaving a blue arc at the bottom) */
.aptv-hdr .u-btn,.aptv-hdr .topnav .u-btn{border:2px solid var(--gr) !important;box-sizing:border-box !important;position:relative !important;overflow:hidden !important}
.aptv-hdr .u-btn:has(img){background:transparent !important}
.aptv-hdr .u-btn img,.aptv-hdr .u-btn img.u-av,.aptv-hdr .topnav .u-btn img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;display:block !important}