/* ======================================================================
   4 FORCES DIGITAL — PREMIUM FACELIFT 2026
   Shared presentation layer. No backend behaviour is changed here.
   ====================================================================== */
:root{
  --fd-bg:#050610;
  --fd-bg-2:#090b18;
  --fd-surface:rgba(14,18,34,.78);
  --fd-surface-strong:rgba(17,22,42,.92);
  --fd-surface-soft:rgba(255,255,255,.045);
  --fd-line:rgba(177,211,255,.14);
  --fd-line-hot:rgba(92,220,255,.36);
  --fd-text:#f7f9ff;
  --fd-muted:#a9b4ca;
  --fd-cyan:#51dcff;
  --fd-blue:#5d7cff;
  --fd-purple:#9b6cff;
  --fd-pink:#ff4bb5;
  --fd-radius-sm:12px;
  --fd-radius:20px;
  --fd-radius-lg:30px;
  --fd-shadow:0 24px 70px rgba(0,0,0,.38);
  --fd-shadow-soft:0 14px 40px rgba(0,0,0,.22);
  --fd-max:1420px;
}

html{scroll-behavior:smooth;background:var(--fd-bg)}
body{
  color:var(--fd-text);
  background:
    radial-gradient(circle at 12% -5%,rgba(81,220,255,.14),transparent 30rem),
    radial-gradient(circle at 92% 8%,rgba(255,75,181,.12),transparent 30rem),
    radial-gradient(circle at 58% 76%,rgba(155,108,255,.08),transparent 34rem),
    linear-gradient(180deg,#050610 0%,#080a15 42%,#050610 100%) !important;
  font-family:"Rubik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:dark;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.34;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 82%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 35%,rgba(81,220,255,.025) 48%,transparent 62%);
}
::selection{background:rgba(81,220,255,.28);color:#fff}
a{color:inherit;text-underline-offset:3px}
a:hover{color:#fff}

/* Header / brand */
.site-header{
  width:min(calc(100% - 40px),var(--fd-max)) !important;
  margin:18px auto 0 !important;padding:14px 16px !important;
  border:1px solid var(--fd-line) !important;border-radius:22px !important;
  background:rgba(7,9,20,.74) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05) !important;
  backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);
  position:relative;z-index:100;
}
.brand{gap:13px !important;align-items:center !important}
.logo-circle{
  width:66px !important;height:66px !important;flex:0 0 66px !important;
  border-radius:18px !important;border:1px solid rgba(111,223,255,.28) !important;
  background:linear-gradient(145deg,rgba(81,220,255,.12),rgba(155,108,255,.1)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.28),0 0 28px rgba(81,220,255,.1) !important;
  overflow:hidden;
}
.logo-circle img{width:100%;height:100%;object-fit:contain;padding:5px}
.logo-circle span{font-family:"Orbitron",sans-serif;font-size:1rem;font-weight:800;letter-spacing:.04em}
.brand .eyebrow{margin:0 0 3px;color:var(--fd-cyan);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.brand h1{margin:0;font-size:clamp(1rem,2vw,1.45rem)!important;line-height:1.15;letter-spacing:-.025em;font-weight:700}
.main-nav{gap:5px !important;padding:5px !important;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(255,255,255,.025)}
.main-nav a,.main-nav .nav-button{
  min-height:42px !important;padding:9px 13px !important;border-radius:11px !important;border:1px solid transparent !important;
  color:#bac4d8 !important;font-size:.84rem !important;font-weight:650 !important;text-decoration:none;letter-spacing:.005em;
  background:transparent !important;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.main-nav a:hover,.main-nav .nav-button:hover{color:#fff !important;background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.08) !important;transform:translateY(-1px)}
.main-nav a.active,.main-nav [aria-current="page"]{color:#fff !important;background:linear-gradient(135deg,rgba(81,220,255,.16),rgba(155,108,255,.14)) !important;border-color:rgba(81,220,255,.24) !important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 18px rgba(0,0,0,.18)}

/* Global typography and spacing */
main{position:relative}
.section-large,.section-dark,.live-shell,.admin-shell,.support-shell,.shop-shell,.member-layout{width:min(calc(100% - 40px),var(--fd-max));margin-inline:auto}
.section-large{padding:clamp(58px,7vw,96px) 0 !important}
.section-dark{padding:clamp(52px,6vw,82px) clamp(20px,4vw,48px) !important;border:1px solid var(--fd-line);border-radius:var(--fd-radius-lg);background:linear-gradient(145deg,rgba(12,15,29,.86),rgba(7,9,18,.72)) !important;box-shadow:var(--fd-shadow)}
.section-intro{max-width:760px;margin-bottom:32px}
.section-intro.centered{margin-inline:auto;text-align:center}
.label,.eyebrow,.kicker{color:var(--fd-cyan) !important;font-size:.72rem !important;font-weight:800 !important;letter-spacing:.18em !important;text-transform:uppercase}
h1,h2,h3,h4,.hologram-title{color:#fff;letter-spacing:-.028em}
h2,.hologram-title{font-size:clamp(2.25rem,5vw,5rem);line-height:.98}
h3{font-size:clamp(1.55rem,3vw,2.45rem);line-height:1.08}
h4{font-size:1.1rem;line-height:1.25}
p{color:var(--fd-muted);line-height:1.72}
.section-intro>p:last-child,.hero-copy>p{font-size:clamp(1rem,1.3vw,1.14rem)}

/* Hero */
.hero{
  min-height:min(690px,76vh);display:grid !important;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr) !important;align-items:center;gap:clamp(32px,7vw,100px) !important;
  padding-top:clamp(70px,8vw,120px) !important;padding-bottom:clamp(70px,8vw,110px) !important;
}
.hero-copy{max-width:760px}
.hero-copy h2{margin:.5rem 0 1.15rem;font-family:"Orbitron",sans-serif;font-weight:700;text-wrap:balance;text-shadow:0 0 42px rgba(81,220,255,.08)}
.hero-copy>p:not(.label){max-width:660px}
.hero-actions,.section-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-visual{min-height:390px;display:grid;place-items:center;position:relative}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero-visual::before{width:320px;height:320px;border:1px solid rgba(81,220,255,.18);box-shadow:0 0 100px rgba(81,220,255,.12),inset 0 0 80px rgba(155,108,255,.08)}
.hero-visual::after{width:245px;height:245px;border:1px dashed rgba(255,75,181,.19);animation:fdSpin 28s linear infinite}
.wave-block{position:relative;z-index:2;width:min(100%,360px);padding:38px !important;border:1px solid rgba(81,220,255,.22) !important;border-radius:30px !important;background:linear-gradient(145deg,rgba(16,22,42,.88),rgba(8,10,22,.82)) !important;box-shadow:0 28px 80px rgba(0,0,0,.4),0 0 45px rgba(81,220,255,.08) !important;text-align:center;backdrop-filter:blur(22px)}
.wave-block h3{font-family:"Orbitron",sans-serif;font-size:1.55rem;margin-bottom:.5rem}
@keyframes fdSpin{to{transform:rotate(360deg)}}

/* Buttons */
.btn,button:not(.twofa-close){
  border-radius:12px !important;font-weight:750 !important;letter-spacing:.015em;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease !important;
}
.btn{min-height:46px;padding:11px 18px !important;text-decoration:none !important}
.btn:hover,button:not(.twofa-close):hover{transform:translateY(-2px)}
.btn-primary{color:#061018 !important;border:1px solid rgba(139,239,255,.68) !important;background:linear-gradient(135deg,#6ee8ff,#70a8ff 54%,#a783ff) !important;box-shadow:0 12px 30px rgba(81,220,255,.18),inset 0 1px rgba(255,255,255,.45) !important}
.btn-primary:hover{box-shadow:0 16px 38px rgba(81,220,255,.26),0 0 24px rgba(81,220,255,.14) !important}
.btn-outline{color:#e9efff !important;border:1px solid rgba(170,200,255,.22) !important;background:rgba(255,255,255,.035) !important;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.btn-outline:hover{border-color:rgba(81,220,255,.42) !important;background:rgba(81,220,255,.08) !important}

/* Shared premium cards */
.promo-card,.event-card,.schedule-card,.artist-card,.about-card,.feature-card,.player-card,.admin-card,.support-card,.platform-card,.shop-card,.product-card,.merch-card,.mix-week-card,.auth-panel,.member-sidebar,.member-content,.live-card,.hologram-panel{
  border:1px solid var(--fd-line) !important;border-radius:var(--fd-radius) !important;
  background:linear-gradient(145deg,rgba(17,22,40,.8),rgba(8,11,22,.72)) !important;
  box-shadow:var(--fd-shadow-soft),inset 0 1px rgba(255,255,255,.045) !important;
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
}
.promo-card,.event-card,.schedule-card,.artist-card,.about-card,.feature-card,.admin-card,.support-card,.platform-card,.live-card{position:relative;overflow:hidden}
.promo-card::before,.event-card::before,.schedule-card::before,.artist-card::before,.about-card::before,.admin-card::before,.support-card::before,.live-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(81,220,255,.48),rgba(255,75,181,.25),transparent);opacity:.65;pointer-events:none}
.promo-card:hover,.event-card:hover,.schedule-card:hover,.artist-card:hover,.about-card:hover{transform:translateY(-5px);border-color:rgba(81,220,255,.28) !important;box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 30px rgba(81,220,255,.06) !important}
.promo-card,.event-card,.schedule-card,.artist-card,.about-card{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}

/* Public grids */
.promo-grid,.schedule-grid,.artist-grid,.feature-grid,.event-list{gap:20px !important}
.promo-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.promo-card{padding:26px !important;min-height:225px}
.promo-card img{border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.28)}
.event-list,.schedule-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important}
.event-card,.schedule-card{padding:24px !important}
.event-date{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid rgba(81,220,255,.2);border-radius:999px;background:rgba(81,220,255,.08);color:var(--fd-cyan) !important;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.artist-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) !important}
.artist-card{padding:0 !important}
.artist-card>img,.artist-card .artist-image{width:100%;aspect-ratio:4/3;object-fit:cover;background:#090b13}
.artist-copy{padding:24px !important}
.social-list{display:flex;flex-wrap:wrap;gap:8px}
.social-list a{padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);text-decoration:none;font-size:.82rem}
.about-grid{gap:20px !important}.about-card{padding:28px !important}

/* Stream/player */
.section-player{margin-top:10px;margin-bottom:10px}
.player-card{padding:10px !important;overflow:hidden}
.player-card iframe,.twitch-player iframe{border-radius:14px !important;display:block}
.embed-note{margin:16px 0 0;font-size:.82rem;color:#7f8aa1}

/* Forms */
input,select,textarea{
  color:#f5f8ff !important;border:1px solid rgba(164,195,244,.18) !important;border-radius:12px !important;
  background:rgba(3,6,15,.62) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,select:focus,textarea:focus{border-color:rgba(81,220,255,.52) !important;background:rgba(6,11,24,.82) !important;box-shadow:0 0 0 3px rgba(81,220,255,.09) !important}
label{color:#dce4f5;font-weight:650}

/* Member area */
.member-layout{gap:18px !important;padding-top:28px !important;padding-bottom:60px !important}
.member-sidebar{padding:14px !important;box-shadow:var(--fd-shadow-soft) !important}
.member-mini{padding:10px 8px 16px !important;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:9px}
.member-nav{gap:5px !important}
.member-nav button,.member-nav .member-nav-link{min-height:44px !important;padding:10px 12px !important;border-radius:10px !important;color:#b7c2d7 !important;font-weight:650;transition:all .18s ease !important}
.member-nav button:hover,.member-nav .member-nav-link:hover{transform:none !important;color:#fff !important;background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.08) !important}
.member-nav button.active,.member-nav .member-nav-link.active{color:#fff !important;background:linear-gradient(135deg,rgba(81,220,255,.13),rgba(155,108,255,.12)) !important;border-color:rgba(81,220,255,.25) !important;box-shadow:inset 3px 0 var(--fd-cyan)}
.member-content{padding:clamp(18px,3vw,34px) !important}
.member-view{animation:fdPanel .3s ease both}
@keyframes fdPanel{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.platform-kpis article,.stat-grid article,.quick-grid article{border-radius:16px !important;background:rgba(255,255,255,.035) !important;border:1px solid rgba(255,255,255,.08) !important}
.platform-kpis strong,.stat-grid strong{font-family:"Orbitron",sans-serif;letter-spacing:-.03em}

/* Auth */
.members-auth-shell{padding-top:clamp(36px,6vw,80px) !important;padding-bottom:80px !important}
.members-auth-panel,.auth-panel{width:min(100%,640px);margin-inline:auto;padding:clamp(24px,4vw,44px) !important}
.members-auth-panel::before,.auth-panel::before{content:"4FD";display:grid;place-items:center;width:70px;height:70px;margin:0 auto 22px;border-radius:20px;border:1px solid rgba(81,220,255,.28);background:linear-gradient(145deg,rgba(81,220,255,.13),rgba(155,108,255,.1));font-family:"Orbitron",sans-serif;font-weight:800;color:#fff;box-shadow:0 16px 35px rgba(0,0,0,.28),0 0 28px rgba(81,220,255,.08)}
.member-form{gap:15px !important}
.member-notice{border-radius:12px !important;padding:12px 14px !important}

/* Shop */
.shop-shell{padding-top:34px !important;padding-bottom:70px !important}
.shop-hero{padding:clamp(24px,4vw,46px) !important;gap:30px !important;border-radius:var(--fd-radius-lg) !important}
.product-grid,.merch-product-grid{gap:18px !important}
.product-card,.merch-card{overflow:hidden !important}
.product-card>img,.merch-card>img,.merch-placeholder,.mix-week-card>img,.mix-week-art{height:auto !important;aspect-ratio:1/1 !important;object-fit:cover !important}
.product-card>div:last-child,.merch-card>div:last-child,.mix-week-card>div:last-child{padding:20px !important}
.product-card:hover,.merch-card:hover{border-color:rgba(81,220,255,.28) !important;transform:translateY(-3px);box-shadow:0 22px 52px rgba(0,0,0,.32) !important}
.product-card,.merch-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.checkout-panel{gap:18px !important}

/* Live / admin */
.live-shell,.admin-shell,.support-shell{padding-top:28px !important;padding-bottom:68px !important}
.live-hero{padding:clamp(24px,4vw,46px) !important;border-radius:var(--fd-radius-lg) !important;gap:32px !important}
.live-status{border:1px solid rgba(81,220,255,.18);border-radius:999px;padding:6px 10px;background:rgba(81,220,255,.07);font-size:.72rem;font-weight:800;letter-spacing:.06em}
.live-status i{box-shadow:0 0 12px currentColor}
.live-grid,.admin-grid{gap:16px !important}
.live-card,.admin-card{padding:22px !important}
.admin-card.metric strong{font-family:"Orbitron",sans-serif;font-size:clamp(1.45rem,3vw,2.4rem);letter-spacing:-.04em}
.admin-card.metric span{color:#95a2b9}
.data-bar i{border-radius:999px !important;background:linear-gradient(90deg,var(--fd-cyan),var(--fd-purple),var(--fd-pink)) !important;box-shadow:0 0 16px rgba(81,220,255,.15)}
.stream-stage{border-radius:16px !important;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#02040a}
.stream-placeholder{padding:clamp(28px,6vw,64px) !important;text-align:center}

/* Support / tables */
.support-card{padding:24px !important;margin-top:16px}
table{font-size:.9rem}
thead th{position:sticky;top:0;z-index:1;padding:12px !important;color:#aebbd1;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:#0d1120 !important;border-bottom:1px solid rgba(255,255,255,.1)}
tbody td{padding:13px 12px !important;border-bottom:1px solid rgba(255,255,255,.055) !important;color:#d8e0ef}
tbody tr{transition:background .15s ease}tbody tr:hover{background:rgba(81,220,255,.035)}
.table-scroll{border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:auto}
.conversation{gap:12px !important}.message{border-radius:14px !important;border:1px solid rgba(255,255,255,.08) !important;background:rgba(255,255,255,.035) !important}.message.internal-note{border-color:rgba(255,75,181,.2) !important;background:rgba(255,75,181,.05) !important}

/* Gallery */
.photo-book{padding:clamp(24px,4vw,44px) !important}
.photo-book-grid{gap:12px !important}
.photo-book-tile{border-radius:14px !important;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.22);transition:transform .2s ease,border-color .2s ease}
.photo-book-tile:hover{transform:translateY(-3px);border-color:rgba(81,220,255,.3)}
.photo-book-tile img{transition:transform .35s ease}.photo-book-tile:hover img{transform:scale(1.025)}

/* Footer */
.site-footer{width:min(calc(100% - 40px),var(--fd-max));margin:10px auto 26px !important;padding:24px !important;border-top:1px solid rgba(255,255,255,.08) !important;color:#7f8ba2;text-align:center}
.site-footer p{margin:0;font-size:.84rem;color:#7f8ba2}

/* Fine detail */
hr{border:0;border-top:1px solid rgba(255,255,255,.08)}
code{border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(0,0,0,.28);color:#8cecff;padding:.15em .38em}
.badge,.pill{border-radius:999px !important}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr .72fr !important;gap:40px !important}
  .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:900px){
  .site-header{width:min(calc(100% - 24px),var(--fd-max)) !important;margin-top:12px !important}
  .hero{grid-template-columns:1fr !important;min-height:0}.hero-visual{min-height:280px}.hero-visual::before{width:250px;height:250px}.hero-visual::after{width:190px;height:190px}
  .section-large,.section-dark,.live-shell,.admin-shell,.support-shell,.shop-shell,.member-layout{width:min(calc(100% - 24px),var(--fd-max))}
}
@media(max-width:720px){
  body{background:radial-gradient(circle at 20% 0,rgba(81,220,255,.1),transparent 24rem),linear-gradient(180deg,#050610,#080a15 55%,#050610) !important}
  .site-header{width:calc(100% - 16px) !important;margin:8px auto 0 !important;padding:10px !important;border-radius:17px !important}
  .brand{width:100%}.logo-circle{width:50px !important;height:50px !important;flex-basis:50px !important;border-radius:14px !important}.brand h1{font-size:1.05rem !important}
  .main-nav{background:rgba(7,9,20,.92) !important;border:1px solid rgba(81,220,255,.16) !important;box-shadow:0 18px 50px rgba(0,0,0,.5) !important;backdrop-filter:blur(22px)}
  .main-nav a,.main-nav .nav-button{min-height:46px !important;padding:10px 13px !important}
  .section-large,.section-dark,.live-shell,.admin-shell,.support-shell,.shop-shell,.member-layout{width:calc(100% - 16px) !important}
  .section-large{padding:48px 0 !important}.section-dark{padding:26px 16px !important;border-radius:22px}
  .hero{padding-top:54px !important;padding-bottom:55px !important;gap:24px !important}.hero-copy h2{font-size:clamp(2.05rem,11.5vw,3.4rem) !important}.hero-visual{min-height:250px}.wave-block{padding:26px !important;border-radius:22px !important}
  .promo-grid{grid-template-columns:1fr !important}.promo-card,.event-card,.schedule-card,.about-card{padding:20px !important}
  .member-content{padding:14px !important}.member-sidebar{border-radius:15px !important}.member-nav button.active,.member-nav .member-nav-link.active{box-shadow:inset 0 -3px var(--fd-cyan) !important}
  .members-auth-panel,.auth-panel{padding:24px 18px !important}.members-auth-panel::before,.auth-panel::before{width:58px;height:58px;border-radius:16px}
  .product-grid,.merch-product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}.product-card>div:last-child,.merch-card>div:last-child{padding:13px !important}
  .live-card,.admin-card,.support-card{padding:16px !important}.live-hero{padding:22px 16px !important}
  .site-footer{width:calc(100% - 16px);padding:18px 12px !important;margin-bottom:92px !important}
}
@media(max-width:460px){
  .product-grid,.merch-product-grid{grid-template-columns:1fr !important}
  .hero-actions,.section-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn,.section-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.hero-visual::after{animation:none}.promo-card,.event-card,.schedule-card,.artist-card,.about-card,.product-card,.merch-card{transition:none}.member-view{animation:none}}