/* ============================================================
   FLIX2WATCH V16 — SUPPORT / PROFILE / ROLES / THEMES / BRAND
   ============================================================ */

/* ---------- No visual account preflight ---------- */
#f2w-auth-checking,
.f2w-auth-checking,
#flix2watch-account-check,
.flix2watch-account-check,
.account-checking-overlay,
.checking-account-overlay{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ---------- New theme set ---------- */
html[data-flix2watch-theme="theme-cyan"],
body.theme-cyan{
  --accent:#06b6d4 !important;
  --f2w-red:#06b6d4 !important;
  --accent-glow:rgba(6,182,212,.34) !important;
  --f2w-accent-rgb:6,182,212 !important;
}
html[data-flix2watch-theme="theme-pink"],
body.theme-pink{
  --accent:#ec4899 !important;
  --f2w-red:#ec4899 !important;
  --accent-glow:rgba(236,72,153,.34) !important;
  --f2w-accent-rgb:236,72,153 !important;
}
html[data-flix2watch-theme="theme-orange"],
body.theme-orange{
  --accent:#f97316 !important;
  --f2w-red:#f97316 !important;
  --accent-glow:rgba(249,115,22,.34) !important;
  --f2w-accent-rgb:249,115,22 !important;
}
html[data-flix2watch-theme="theme-ice"],
body.theme-ice{
  --accent:#7dd3fc !important;
  --f2w-red:#7dd3fc !important;
  --accent-glow:rgba(125,211,252,.32) !important;
  --f2w-accent-rgb:125,211,252 !important;
}
html[data-flix2watch-theme="theme-gold"],
body.theme-gold{
  --accent:#eab308 !important;
  --f2w-red:#eab308 !important;
  --accent-glow:rgba(234,179,8,.34) !important;
  --f2w-accent-rgb:234,179,8 !important;
}
html[data-flix2watch-theme="theme-midnight"],
body.theme-midnight{
  --accent:#6366f1 !important;
  --f2w-red:#6366f1 !important;
  --accent-glow:rgba(99,102,241,.34) !important;
  --f2w-accent-rgb:99,102,241 !important;
}

.dot.cyan{background:#06b6d4}
.dot.pink{background:#ec4899}
.dot.orange{background:#f97316}
.dot.ice{background:#7dd3fc}
.dot.gold{background:#eab308}
.dot.midnight{background:#6366f1}

/* New theme logo tint. */
html[data-flix2watch-theme="theme-cyan"] .logo-image,
html[data-flix2watch-theme="theme-cyan"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-cyan"] .f2w-account-brand img{
  filter:hue-rotate(175deg) saturate(1.40) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-pink"] .logo-image,
html[data-flix2watch-theme="theme-pink"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-pink"] .f2w-account-brand img{
  filter:hue-rotate(315deg) saturate(1.38) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-orange"] .logo-image,
html[data-flix2watch-theme="theme-orange"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-orange"] .f2w-account-brand img{
  filter:hue-rotate(24deg) saturate(1.34) brightness(1.05) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-ice"] .logo-image,
html[data-flix2watch-theme="theme-ice"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-ice"] .f2w-account-brand img{
  filter:hue-rotate(192deg) saturate(.82) brightness(1.10) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-gold"] .logo-image,
html[data-flix2watch-theme="theme-gold"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-gold"] .f2w-account-brand img{
  filter:hue-rotate(45deg) saturate(1.55) brightness(1.08) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-midnight"] .logo-image,
html[data-flix2watch-theme="theme-midnight"] .f2w-guest-brand img,
html[data-flix2watch-theme="theme-midnight"] .f2w-account-brand img{
  filter:hue-rotate(235deg) saturate(1.25) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}

/* ---------- More promotional brand lockup ---------- */
body.f2w-main-page > header > .logo{
  position:relative !important;
  padding:2px 0 7px !important;
}
body.f2w-main-page > header > .logo::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  bottom:2px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),rgba(var(--f2w-accent-rgb),.16),transparent);
  box-shadow:0 0 12px var(--accent-glow);
}
body.f2w-main-page > header > .logo::after{
  content:"WATCH • CHILL • REPEAT";
  position:absolute;
  left:2px;
  bottom:-5px;
  color:#748196;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:.36rem;
  font-weight:800;
  letter-spacing:1.15px;
  white-space:nowrap;
}
body.f2w-main-page > header > .logo .logo-image{
  filter:drop-shadow(0 5px 16px var(--accent-glow));
}

/* ---------- Genre dropdown: larger but tidy ---------- */
.f2w-genre-menu.show{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:330px !important;
  max-height:min(440px,70vh);
  overflow:auto;
}
.f2w-genre-menu a{
  font-size:.64rem !important;
}

/* ---------- Better common dialog treatment ---------- */
.modal-card,
.account-card,
.report-card,
.social-modal,
.staff-dialog-card{
  border-color:color-mix(in srgb,var(--accent) 23%,#2b4059) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--f2w-accent-rgb),.075),transparent 30%),
    linear-gradient(180deg,#081321,#06101c) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.68),0 0 30px rgba(var(--f2w-accent-rgb),.06) !important;
}

/* ============================================================
   SUPPORT
   ============================================================ */
body.f2w-support-page main{
  width:min(100% - 28px,1180px) !important;
  max-width:none !important;
  margin:18px auto 55px !important;
  padding:0 !important;
}
.support-v16-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:18px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,#263a53);
  border-radius:11px;
  background:
    radial-gradient(circle at 84% 16%,rgba(var(--f2w-accent-rgb),.11),transparent 28%),
    linear-gradient(180deg,#081321,#06101c);
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.support-v16-kicker{
  color:var(--accent);
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.85px;
}
.support-v16-hero h1{
  margin:5px 0 5px;
  font-size:1.65rem;
  line-height:1.08;
}
.support-v16-hero p{
  max-width:650px;
  margin:0;
  color:#93a0b3;
  font-size:.69rem;
  line-height:1.6;
}
.support-v16-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:118px;
  padding:14px;
  border:1px solid #263a53;
  border-radius:9px;
  background:#06101c;
}
.support-v16-brand img{
  width:205px;
  max-width:92%;
}
.support-v16-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:11px;
}
.support-v16-quick{
  min-height:108px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding:13px;
  border:1px solid #263a53;
  border-radius:9px;
  background:#07111d;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.support-v16-quick:hover{
  border-color:color-mix(in srgb,var(--accent) 48%,#4c607a);
  background:#0a1523;
}
.support-v16-quick i{
  color:var(--accent);
  font-size:1rem;
}
.support-v16-quick strong{
  font-size:.72rem;
}
.support-v16-quick span{
  color:#7f8da1;
  font-size:.58rem;
  line-height:1.45;
}
.support-v16-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:11px;
  margin-top:11px;
}
.support-v16-card{
  padding:16px;
  border:1px solid #263a53;
  border-radius:10px;
  background:#07111d;
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}
.support-v16-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.support-v16-card-head strong{
  font-size:.82rem;
}
.support-v16-card-head span{
  color:#7f8da1;
  font-size:.56rem;
}
.support-v16-card label{
  margin:10px 0 5px;
  color:#7f8da1 !important;
  font-size:.55rem !important;
  font-weight:700 !important;
}
.support-v16-card input,
.support-v16-card textarea,
.support-v16-card select{
  width:100%;
  border:1px solid #2a3e56 !important;
  border-radius:8px !important;
  background:#06101c !important;
  color:#fff !important;
  font-size:.68rem !important;
}
.support-v16-card textarea{
  min-height:130px !important;
  resize:vertical;
}
.support-v16-primary,
.support-v16-secondary{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:10px;
  padding:6px 10px;
  border:1px solid #2a3e56;
  border-radius:7px;
  font-size:.62rem;
  font-weight:720;
  cursor:pointer;
}
.support-v16-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.support-v16-secondary{
  background:#0a1523;
  color:#cbd4df;
}
.support-v16-status{
  min-height:17px;
  margin-top:7px;
  color:#8b98aa;
  font-size:.58rem;
}
.support-v16-status.error{color:#fb7185}
.support-v16-ticket{
  margin-top:9px;
  border:1px solid #263a53;
  border-radius:9px;
  overflow:hidden;
  background:#06101c;
}
.support-v16-ticket-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:11px;
  border-bottom:1px solid #22354b;
}
.support-v16-ticket-head strong{
  display:block;
  font-size:.69rem;
}
.support-v16-ticket-meta{
  margin-top:3px;
  color:#77859a;
  font-size:.52rem;
}
.support-v16-ticket-status{
  padding:3px 6px;
  border:1px solid #2b4059;
  border-radius:999px;
  color:#aab5c4;
  font-size:.50rem;
  white-space:nowrap;
}
.support-v16-messages{
  padding:8px 10px;
}
.support-v16-msg{
  max-width:88%;
  margin:6px 0;
  padding:8px 9px;
  border:1px solid #263a53;
  border-radius:8px;
  background:#081321;
}
.support-v16-msg.staff,
.support-v16-msg.owner{
  margin-left:auto;
  border-color:color-mix(in srgb,var(--accent) 28%,#263a53);
}
.support-v16-msg small{
  display:block;
  margin-bottom:3px;
  color:#78869a;
  font-size:.48rem;
}
.support-v16-msg div{
  color:#d6dde7;
  font-size:.59rem;
  line-height:1.5;
  white-space:pre-wrap;
}
.support-v16-reply{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  padding:0 10px 10px;
}
.support-v16-reply textarea{
  min-height:60px !important;
  margin:0 !important;
}
.support-v16-reply button{
  min-width:72px;
  margin:0 !important;
  border-color:var(--accent) !important;
  background:var(--accent) !important;
  color:#fff !important;
}
.support-v16-empty{
  padding:28px 16px;
  color:#7f8da1;
  text-align:center;
  font-size:.65rem;
}

/* ============================================================
   PROFILE ENRICHMENT
   ============================================================ */
.profile-v16-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.profile-v16-tile{
  min-height:88px;
  padding:11px;
  border:1px solid #263a53;
  border-radius:9px;
  background:#07111d;
}
.profile-v16-tile i{
  color:var(--accent);
  font-size:.78rem;
}
.profile-v16-tile strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:.85rem;
}
.profile-v16-tile span{
  display:block;
  margin-top:2px;
  color:#7f8da1;
  font-size:.54rem;
  line-height:1.35;
}
.profile-v16-panel{
  margin-top:13px;
  padding:14px;
  border:1px solid #263a53;
  border-radius:10px;
  background:#07111d;
}
.profile-v16-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.profile-v16-panel-head h2{
  margin:0;
  font-size:.98rem;
}
.profile-v16-panel-head span{
  color:#7c899c;
  font-size:.56rem;
}
.profile-v16-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.profile-v16-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:29px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--badge-color,#94a3b8) 42%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--badge-color,#94a3b8) 10%,transparent);
  color:var(--badge-color,#94a3b8);
  font-size:.58rem;
  font-weight:800;
}
.profile-v16-badge i{
  color:inherit;
}
.profile-v16-none{
  color:#748196;
  font-size:.61rem;
}
.profile-v16-activity{
  display:grid;
  gap:7px;
}
.profile-v16-activity-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:7px 9px;
  border:1px solid #22354b;
  border-radius:8px;
  background:#06101c;
}
.profile-v16-activity-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(var(--f2w-accent-rgb),.09);
  color:var(--accent);
}
.profile-v16-activity-copy strong{
  display:block;
  overflow:hidden;
  color:#dce3ed;
  font-size:.62rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-v16-activity-copy span{
  display:block;
  margin-top:2px;
  color:#748196;
  font-size:.50rem;
}
.profile-v16-activity-time{
  color:#657388;
  font-size:.49rem;
  white-space:nowrap;
}

/* Public role badge variants; Owner/Staff semantic colors stay unchanged. */
.profile-v16-badge.admin{--badge-color:#fb923c}
.profile-v16-badge.moderator{--badge-color:#38bdf8}
.profile-v16-badge.curator{--badge-color:#f472b6}
.profile-v16-badge.support{--badge-color:#22d3ee}
.profile-v16-badge.developer{--badge-color:#4ade80}
.profile-v16-badge.verified{--badge-color:#facc15}
.profile-v16-badge.contributor{--badge-color:#818cf8}

/* More capable profile report modal. */
.profile-report-context{
  margin-bottom:10px;
  padding:9px 10px;
  border:1px solid #22354b;
  border-radius:8px;
  background:#06101c;
  color:#91a0b4;
  font-size:.60rem;
  line-height:1.5;
}
.profile-report-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.report-card input,
.report-card select,
.report-card textarea{
  width:100%;
  border:1px solid #2a3e56 !important;
  border-radius:7px !important;
  background:#06101c !important;
  color:#fff !important;
}
.report-card input{
  min-height:38px;
  padding:8px 9px;
}
.report-card .report-help{
  margin-top:4px;
  color:#6f7d91;
  font-size:.52rem;
  line-height:1.4;
}

/* ============================================================
   STAFF PROFILE MANAGEMENT / PUBLIC ROLES
   ============================================================ */
.staff-profile-manager{
  display:grid;
  gap:10px;
}
.staff-profile-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.staff-profile-edit-grid .full{
  grid-column:1 / -1;
}
.staff-profile-manager label{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:.62rem;
  font-weight:750;
}
.staff-profile-manager input,
.staff-profile-manager textarea,
.staff-profile-manager select{
  width:100%;
  border:1px solid #2a3e56;
  border-radius:7px;
  background:#06101c;
  color:#fff;
  padding:8px 9px;
  font-size:.72rem;
}
.staff-profile-manager textarea{
  min-height:100px;
  resize:vertical;
}
.staff-profile-avatar-preview{
  width:72px;
  height:72px;
  overflow:hidden;
  border:1px solid #2b4059;
  border-radius:50%;
  background:#081321;
}
.staff-profile-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.staff-role-picker{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.staff-role-toggle{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid #2a3e56;
  border-radius:8px;
  background:#081321;
  color:#c9d2df;
  font-size:.63rem;
  font-weight:720;
  cursor:pointer;
}
.staff-role-toggle.active{
  border-color:var(--role-color,var(--accent));
  background:color-mix(in srgb,var(--role-color,var(--accent)) 12%,transparent);
  color:var(--role-color,var(--accent));
}
.staff-role-toggle[data-role="admin"]{--role-color:#fb923c}
.staff-role-toggle[data-role="moderator"]{--role-color:#38bdf8}
.staff-role-toggle[data-role="curator"]{--role-color:#f472b6}
.staff-role-toggle[data-role="support"]{--role-color:#22d3ee}
.staff-role-toggle[data-role="developer"]{--role-color:#4ade80}
.staff-role-toggle[data-role="verified"]{--role-color:#facc15}
.staff-role-toggle[data-role="contributor"]{--role-color:#818cf8}
.staff-profile-help{
  color:#738095;
  font-size:.59rem;
  line-height:1.45;
}

/* Better Staff access preflight: no full-screen black checking card. */
#gate{
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
}
#gate > div{
  display:none !important;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .support-v16-hero{grid-template-columns:1fr}
  .support-v16-brand{display:none}
  .support-v16-grid{grid-template-columns:1fr 1fr}
  .support-v16-layout{grid-template-columns:1fr}
  .profile-v16-overview{grid-template-columns:1fr 1fr}
}
@media(max-width:820px), (max-width:1366px) and (pointer:coarse){
  body.f2w-main-page > header > .logo::after{
    display:none;
  }
  body.f2w-main-page > header > .logo::before{
    bottom:1px;
  }
  .f2w-genre-menu.show{
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .support-v16-grid{grid-template-columns:1fr}
  .profile-v16-overview{grid-template-columns:1fr 1fr}
  .profile-report-grid{grid-template-columns:1fr}
  .staff-profile-edit-grid{grid-template-columns:1fr}
  .staff-profile-edit-grid .full{grid-column:1}
  .support-v16-reply{grid-template-columns:1fr}
  .support-v16-reply button{width:100%}
}

#staff-access-screen{display:none !important;}


/* Theme the promotional/logo panels too. */
html[data-flix2watch-theme="theme-red"] .support-v16-brand img,
html[data-flix2watch-theme="theme-red"] .staff-page-toolbar .logo img{
  filter:drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-blue"] .support-v16-brand img,
html[data-flix2watch-theme="theme-blue"] .staff-page-toolbar .logo img{
  filter:hue-rotate(210deg) saturate(1.30) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-green"] .support-v16-brand img,
html[data-flix2watch-theme="theme-green"] .staff-page-toolbar .logo img{
  filter:hue-rotate(105deg) saturate(1.40) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-purple"] .support-v16-brand img,
html[data-flix2watch-theme="theme-purple"] .staff-page-toolbar .logo img{
  filter:hue-rotate(265deg) saturate(1.32) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-amber"] .support-v16-brand img,
html[data-flix2watch-theme="theme-amber"] .staff-page-toolbar .logo img{
  filter:hue-rotate(42deg) saturate(1.35) brightness(1.04) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-matrix"] .support-v16-brand img,
html[data-flix2watch-theme="theme-matrix"] .staff-page-toolbar .logo img{
  filter:hue-rotate(108deg) saturate(1.70) brightness(1.06) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-cyan"] .support-v16-brand img,
html[data-flix2watch-theme="theme-cyan"] .staff-page-toolbar .logo img{
  filter:hue-rotate(175deg) saturate(1.40) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-pink"] .support-v16-brand img,
html[data-flix2watch-theme="theme-pink"] .staff-page-toolbar .logo img{
  filter:hue-rotate(315deg) saturate(1.38) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-orange"] .support-v16-brand img,
html[data-flix2watch-theme="theme-orange"] .staff-page-toolbar .logo img{
  filter:hue-rotate(24deg) saturate(1.34) brightness(1.05) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-ice"] .support-v16-brand img,
html[data-flix2watch-theme="theme-ice"] .staff-page-toolbar .logo img{
  filter:hue-rotate(192deg) saturate(.82) brightness(1.10) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-gold"] .support-v16-brand img,
html[data-flix2watch-theme="theme-gold"] .staff-page-toolbar .logo img{
  filter:hue-rotate(45deg) saturate(1.55) brightness(1.08) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}
html[data-flix2watch-theme="theme-midnight"] .support-v16-brand img,
html[data-flix2watch-theme="theme-midnight"] .staff-page-toolbar .logo img{
  filter:hue-rotate(235deg) saturate(1.25) drop-shadow(0 4px 16px var(--accent-glow)) !important;
}

#staff-access-screen{display:none !important;}

/* V16 wordmark already contains its own underline/tagline. */
body.f2w-main-page > header > .logo::before,body.f2w-main-page > header > .logo::after{display:none !important;}

.profile-v16-inline-roles{
  margin-top:8px;
}
.profile-v16-inline-roles .profile-v16-badge{
  min-height:25px;
  padding:4px 7px;
  font-size:.53rem;
}