:root{
  --bg:#090A16;
  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.11);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --line: rgba(255,255,255,.12);
  --accent:#ff7bd8;
  --accent2:#7cf7ff;
  --danger:#ff4b6e;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Glow nur oben in den ersten ~700px */
.main::before{
  content:"";
  position: fixed;
  inset: 0;
  height: 700px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1400px 900px at 20% 10%, rgba(255,123,216,.16), transparent 50%),
    radial-gradient(1400px 900px at 80% 20%, rgba(124,247,255,.12), transparent 52%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.main{ position:relative; z-index:1; }


a{color:inherit}

#fxCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

.wrap{max-width:1150px;margin:0 auto;padding:0 16px}
.main{position:relative;z-index:1;padding:28px 0 60px}

.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,8,18,.82), rgba(7,8,18,.55));
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
}

.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text)}
.brand-mark{
  font-weight:900;letter-spacing:.5px;
  padding:6px 10px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(120deg, rgba(255,123,216,.18), rgba(124,247,255,.12));
}
.brand-name{font-weight:700;opacity:.95}

.nav{display:flex;gap:14px;margin-left:8px;flex:1}
.nav-link{
  color:var(--muted);text-decoration:none;font-weight:650;
  padding:8px 10px;border-radius:12px;
  transition: .2s ease;
}
.nav-link:hover{color:var(--text);background:var(--panel)}

.auth{display:flex;gap:10px;align-items:center}

.btn{
  text-decoration:none;color:var(--bg);
  background:linear-gradient(120deg, rgba(255,123,216,1), rgba(124,247,255,1));
  padding:9px 12px;border-radius:14px;font-weight:800;
  box-shadow: var(--shadow);
  border:none;
  cursor:pointer;
  display:inline-block;
}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.danger{
  background:transparent;color:var(--danger);
  border:1px solid rgba(255,75,110,.35);
  box-shadow:none;
}
.btn:hover{filter:brightness(1.05)}

.burger{
  display:none;
  background:transparent;border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:8px 10px;
}

.mobile-nav{
  display:none;
  padding:10px 16px 16px;
  border-top:1px solid var(--line);
}
.mobile-nav .nav-link{display:block}
.mobile-auth{display:flex;gap:10px;margin-top:10px}

.game-switcher{position:relative}
.game-pill{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:14px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
}
.game-pill .chev{opacity:.8;margin-left:6px}
.game-menu{
  position:absolute;left:0;top:46px;
  min-width:210px;
  background:rgba(10,12,24,.92);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
}
.game-item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}
.game-item:hover{background:var(--panel);color:var(--text)}

.user-menu{position:relative}
.user-btn{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,123,216,.35);
  color:var(--text);
  border-radius:14px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.user-btn .chev{opacity:.8}
.user-dd{
  position:absolute;right:0;top:46px;
  min-width:220px;
  background:rgba(10,12,24,.92);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
}
.user-dd a{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
}
.user-dd a:hover{background:var(--panel);color:var(--text)}
.user-dd .sep{height:1px;background:var(--line);margin:6px 0}

.hero{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(135deg, rgba(255,123,216,.10), rgba(124,247,255,.07));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

/* Full-width landing hero (video/background) */
.hero.hero-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  border-left:0;
  border-right:0;
}
.hero-inner{padding:34px}
.kicker{color:var(--muted);font-weight:900;letter-spacing:.55px;font-size:14px;text-transform:uppercase}
.h1{font-size:46px;line-height:1.02;margin:10px 0 12px;font-weight:950;letter-spacing:.3px}
.sub{max-width:720px;color:var(--muted);font-size:18px;line-height:1.55;font-weight:800;letter-spacing:.25px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.card{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--panel);
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  transform: translateY(14px);
  opacity:0;
  transition: .55s ease;
}
.card.reveal{transform:none;opacity:1}
/* Scroll reveal helpers (left / right / up) */
.reveal-item{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-item.left{ transform: translateX(-28px); }
.reveal-item.right{ transform: translateX(28px); }
.reveal-item.reveal{ opacity:1; transform: translateX(0) translateY(0); }

.section{
  margin-top: 26px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 12px 0;
}
.section-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}
.section-sub{
  color: var(--muted);
  font-size: 13px;
}
.card.span6{ grid-column: span 6; }
.card.span4{ grid-column: span 4; }

@media (max-width: 880px){
  .card.span6, .card.span4 { grid-column: span 12; }
}
.card h3{margin:8px 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.45}
.pill{
  display:inline-block;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.section-title{margin:30px 0 10px;font-size:18px;color:var(--muted);font-weight:900}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow: var(--shadow);
  padding:18px;
}

.form{
  display:grid;
  gap:10px;
  max-width:420px;
}
.input{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(255,123,216,.45)}

/* Keep browser autofill from turning inputs "gold" */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.04) inset !important;
  border:1px solid var(--line) !important;
}
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0 1000px rgba(255,255,255,.04) inset !important;
  border:1px solid var(--line) !important;
}
.small{font-size:13px;color:var(--muted)}
.err{color: #ff9bb1; font-weight:900}

.footer{
  position:relative;z-index:1;
  border-top:1px solid var(--line);
  padding:18px 0;
  background:rgba(7,8,18,.55);
  backdrop-filter: blur(12px);
}
.footer-inner{display:flex;justify-content:space-between;gap:10px;align-items:center}
.footer a{color:var(--muted);text-decoration:none;font-weight:800}
.footer a:hover{color:var(--text)}
.muted{color:var(--muted)}

.game-switcher.mobile{ display:none; }
@media (max-width: 840px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-nav.open{display:block}
  .card{grid-column: span 6}
  .h1{font-size:38px}
  .sub{font-size:16px}
  .hero-video .hero-inner > .kicker{
    max-width:340px !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:left !important;
  }
  .topbar-inner > .game-switcher{ display:none; }
  .mobile-nav .game-switcher.mobile{ display:block; margin-bottom:10px; }

  .mobile-nav .game-menu{
    position: static;
    display: none;
    width: 100%;
    margin-top: 10px;
  }
}
@media (max-width: 620px){
  .card{grid-column: span 12}
  .hero-inner{padding:22px}
  .h1{font-size:32px}
  .sub{font-size:15px}
  .hero-video .hero-inner > .kicker{
    max-width:290px !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:left !important;
  }
}



.hero-video{ min-height: 460px; }
.hero-video .hero-inner{
  min-height: 460px;
  max-width: 980px;
  margin: 0 auto;
  padding: 58px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


.hero-video{
  position:relative;
}
.hero-bgvideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter: brightness(.72) contrast(1.05) saturate(1.05);
  opacity:.95;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  background: radial-gradient(800px 380px at 20% 20%, rgba(255,123,216,.18), transparent 60%),
              radial-gradient(800px 380px at 80% 25%, rgba(124,247,255,.14), transparent 60%),
              linear-gradient(to bottom, rgba(7,8,18,.35), rgba(7,8,18,.65));
}
.hero-inner{
  position:relative;
  z-index:1;
}

/* Centered pages like Login */
.center-wrap{
  min-height: calc(100vh - 170px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.center-wrap .panel{
  width:100%;
  max-width:520px;
}

#form1{min-height:100vh;display:flex;flex-direction:column}
.main{flex:1}
.footer{margin-top:auto}


.shop-pack-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;          /* wichtig */
}
.shop-pack-ico{
  width:34px;
  height:34px;
  opacity:.95;
}
.shop-pack-amount{
  font-size:26px;
  font-weight:950;
  letter-spacing:.2px;
  min-width:0;             /* DAS ist der Gamechanger gegen Überlappen */
  line-height:1.1;
}
.shop-pack-prices{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:12px;
}
.shop-shell{
  width:100%;
  max-width:none;
}
.shop-info-card{
  cursor: default;
}
.shop-info-card a{
  text-decoration: none;
}
.shop-info-card a:hover{
  text-decoration: underline;
}

.shop-pack-grid > .card{
  height: 100%;
}
.paypal-wrap{
  background: transparent !important;
  padding: 0;
  border: 0;
  box-shadow: none;
}
/* Span-Klassen für ALLE Grid-Items, nicht nur .card */
.grid .span12{ grid-column: 1 / -1; }
.grid .span6{ grid-column: span 6; }
.grid .span4{ grid-column: span 4; }

/* Shop: eigenes Grid in 12 Spalten (3 oben, 2 unten breit) */
.shop-pack-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:10px;
}

/* Eigene Pack-Card, damit .card nicht alles beeinflusst */
.pack-card{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--panel);
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  text-decoration:none;
  display:block;
}

/* Breite Packs */
.pack-card.span6{ grid-column: span 6; }
.pack-card.span4{ grid-column: span 4; }

/* Responsive */
@media (max-width: 980px){
  .pack-card, .pack-card.span4, .pack-card.span6{ grid-column: span 12; }
}

.shop-pack-price .old{
  color:rgba(234,240,255,.55);
  text-decoration: line-through;
  margin-right:10px;
  font-weight:800;
  font-size: 20px;
}
.shop-pack-price .new{ 
   font-weight:950; 
   font-size: 22px; 
   color: lightgreen; 
}

.balance_info{
  display:inline-block;
  padding:6px 22px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:900;
  font-size:14px;
  min-width: 10em;
  max-width: 14em;
}

.product_item{ 
   font-weight:400; 
   font-size: 16px;
}
.product_bonus{ 
   font-weight:400; 
   font-size: 16px;
}

.old_price{
  color:rgba(234,240,255,.55);
  text-decoration: line-through;
  margin-right:10px;
  font-weight:400;
  font-size: 16px;
}
.new_price{ 
   font-weight:400; 
   font-size: 16px;
}

.total_item{ 
   font-size: 18px;
}
.total_price{ 
   font-size: 18px;
}

@media (max-width: 980px){
  .shop-pack-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .shop-pack-grid{ grid-template-columns: 1fr; }
}

/* Footer like screenshot */
.footer{ padding:34px 0 22px; }
.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  padding:10px 0 22px;
}
.footer h4{ margin:0 0 10px; font-weight:950; letter-spacing:.2px; }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-list a{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
}
.footer-list a:hover{ color:var(--text); }
.footer-sep{ height:1px; background:rgba(255,255,255,.10); margin:12px 0 14px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-bottom .links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom .links a{ color:var(--muted); text-decoration:none; font-weight:900; }
.footer-bottom .links a:hover{ color:var(--text); }
.ico{ width:16px; height:16px; display:inline-block; }
@media (max-width: 920px){ .footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .footer-grid{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }


/* v12: wide admin forms (fill content width) */
.form.wide{max-width:none;}



/* --- PATCH v15: Better dropdown readability + disable bg-video UI --- */
:root { color-scheme: dark; }

select.input{
  color-scheme: dark;
  background: rgba(18,22,34,.75);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
}

select.input option{
  background-color: #0b0f18;
  color: #e8ecf7;
}

select.input option:checked{
  background-color: #1a2440;
  color: #ffffff;
}

.hero-bgvideo{
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --- PATCH v18: Hero wieder sauber (kein Row-Layout) + Homefeed-Grids + Login-Form full width --- */

/* Hero: höher, Inhalt vertikal zentriert, aber als Column (wie vorher) */


/* Section-Head nicht von der "Kategorien"-section-title-Regel kaputt machen */
.section-head .section-title{ margin: 0; color: var(--text); }

/* Homefeed-Wrapper: die Repeater-Cards brauchen wieder ein echtes Grid */
.grid.section .section-head{ grid-column: 1 / -1; }
.grid.section .cards{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* Login: Inputs sollen die Panel-Breite nutzen */
.center-wrap .form{ max-width: none; }

/* --- v24: Hero CTAs (bigger + custom inline icons) --- */

.hero-video .sub{
  margin-left: auto;
  margin-right: auto;
}
.hero-actions{
  justify-content: center;  /* Buttons mittig */
}
.hero-actions{ gap: 12px; }
.hero-actions .btn.btn-cta{
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  letter-spacing: .15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-ico{ width: 18px; height: 18px; display:inline-block; }
.btn-ico svg{ width: 18px; height: 18px; display:block; }
.btn-ico svg *{ stroke: currentColor; }
.btn.btn-cta:not(.ghost){ color: #0b0f18; }

/* --- v24: Quick Links cards --- */
.section-subtitle{
  margin: -6px 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.quicklinks .card{
  cursor: pointer;
  text-decoration: none;
}
.quicklinks .card:hover{
  background: var(--panel2);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mini-ico{ width: 18px; height: 18px; opacity: .85; }
.mini-ico svg{ width: 18px; height: 18px; display:block; }
.mini-ico svg *{ stroke: rgba(234,240,255,.78); }

/* Avoid underlines in cards/tiles */
a.card, a.card *{ text-decoration: none !important; }


/* v25: Maintenance wide list + shared cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.legal{
  font-feature-settings: "kern" 1, "liga" 1;
}

.legal h3{
  margin: 18px 0 8px;
  letter-spacing: .15px;
}

.legal p{
  margin: 10px 0;
  color: var(--muted);
  line-height: 1.75;
}

.legal b, .legal strong{
  color: rgba(234,240,255,.92);
  font-weight: 900;
}

.legal ol, .legal ul{
  margin: 10px 0 14px;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.75;
}

.legal li{
  margin: 6px 0;
}

.legal ol li::marker{
  color: rgba(234,240,255,.75);
  font-weight: 900;
}

.legal ul li::marker{
  color: rgba(255,123,216,.75);
}

.legal a{
  color: rgba(234,240,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 1px;
}

.legal a:hover{
  border-bottom-color: rgba(255,123,216,.45);
}

.legal .panel{
  border-color: rgba(255,255,255,.14);
}

.maint-list{
  /* When used inside a 12-col .grid section (Home), span the full section width */
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}

.maint-row{
  grid-column: span 12;
  display:flex;
  gap:16px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--panel);
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  text-decoration:none;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.maint-row:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}

.maint-thumb{
  flex: 0 0 240px;
  max-width:240px;
  height:160px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.maint-thumb img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  display:block;
  filter: brightness(.92) contrast(1.05) saturate(.95);
}

.maint-body{ flex:1; min-width:0; }
.maint-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.maint-body h3{ font-size:20px; letter-spacing:.2px; }

.maint-view-head{
  display:flex;
  gap:18px;
  align-items:stretch;
}
.maint-view-media{ flex:0 0 320px; max-width:320px; }
.maint-view-img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

@media (max-width: 880px){
  .maint-row{ flex-direction:column; }
  .maint-thumb{ flex:0 0 auto; max-width:none; width: 100%; height:220px; }
  .maint-thumb img{ height:100%; min-height:0; }
  .maint-view-head{ flex-direction:column; }
  .maint-view-media{ max-width:none; }
  .maint-view-img{ height:200px; }
}

.hero-video .hero-inner{
  align-items: center;
  text-align: center;
}




.hero-video .hero-inner > .kicker,
.hero-video .hero-inner > .h1,
.hero-video .hero-inner > .sub{
  text-shadow: 0px 0px 5px black, 0 0 1.2em black, 0 0 1.2em black, 0 0 0.2em black;
}

.hero-video .hero-inner > .kicker,
.hero-video .hero-inner > .h1,
.hero-video .hero-inner > .sub,
.hero-video .hero-inner > .hero-actions{
  width: 100%;
  max-width: 760px;
}


.hero-bgvideo{
  filter: brightness(.92) contrast(1.05) saturate(1.08);
  opacity: 1;
}


.hero-overlay{
  background:
    radial-gradient(800px 380px at 20% 20%, rgba(255,123,216,.18), transparent 60%),
    radial-gradient(800px 380px at 80% 25%, rgba(124,247,255,.14), transparent 60%),
    linear-gradient(to bottom, rgba(7,8,18,.14), rgba(7,8,18,.48));
}

.hero-video .hero-inner > .kicker{
  width: 100%;
  max-width: 410px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Download page helpers */
.download-meta{
  margin-top: 10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.download-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


.card.span6{ grid-column: span 6; }
@media (max-width: 880px){
  .card.span6{ grid-column: span 12; }
}
.paypal-button-tagline{
  background: transparent !important;
  padding: 0;
  border: 0;
  box-shadow: none;
}
#paypal-button-container{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0;           
  display: inline-block;    
  overflow: hidden;         
  border-radius: 25px;      
  width: 100%;
  height: 40px;
}

/* --- Web Panel: Sidebar Layout --- */
.panel-shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
  align-items:start;
}

.panel-side .panel{ padding:16px; }

.balance_box{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:900;
  line-height:1.35;
}
.balance_box b{ color:var(--text); font-weight:950; }

.side-menu{
  display:grid;
  gap:10px;
}

.side-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  letter-spacing:.2px;
}
.side-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

.side-link.active{
  background: linear-gradient(90deg, rgba(255,0,200,.18), rgba(0,255,255,.10));
  border-color:rgba(255,255,255,.22);
}

@media (max-width: 980px){
  .panel-shell{
    grid-template-columns: 1fr;
  }
}

.bill-list{ display:grid; gap:14px; }

.bill-card{ padding:16px; }

.bill-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.bill-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bill-date{ color:var(--muted); font-weight:800; font-size:13px; }

.bill-right{ text-align:right; }
.bill-eur{ font-weight:950; font-size:18px; color:var(--text); }
.bill-sapp{ color:var(--muted); font-weight:900; font-size:13px; }

.bill-title{ font-weight:950; font-size:16px; margin-bottom:6px; }

.bill-ids b{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; }

@media (max-width: 620px){
  .bill-top{ flex-direction:column; }
  .bill-right{ text-align:left; }
}
.bill-status{
  border:1px solid rgba(255,255,255,.14);
}

.bill-status.is-ok{
  background: rgba(60, 255, 190, .10);
  border-color: rgba(60, 255, 190, .28);
  color: rgba(190, 255, 235, .95);
}

.bill-status.is-warn{
  background: rgba(120, 200, 255, .10);
  border-color: rgba(120, 200, 255, .28);
  color: rgba(210, 240, 255, .95);
}

.bill-status.is-bad{
  background: rgba(255, 120, 160, .10);
  border-color: rgba(255, 120, 160, .30);
  color: rgba(255, 210, 225, .95);
}

.bill-status.is-neutral{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}

.small.ok{ color: rgba(120, 255, 210, .95); font-weight:900; }
.small.err{ color: rgba(255, 140, 170, .95); font-weight:900; }

.pm-trap{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.pm-trap input{ width:1px; height:1px; }

.invite-code{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:900;
  letter-spacing:.06em;
}
.invite-box{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.invite-empty{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.invite-empty-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  opacity:.9;
}

.ref-track{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.ref-fill{
  height:100%;
  border-radius:999px;
  background: rgba(255,255,255,.20);
}

.ref-fill.done{
  background: rgba(120,255,170,.32);
}

.ref-steps{
  display:flex;
  justify-content:space-between;
  opacity:.85;
}

/* optional pill colors (falls du noch keine hast) */
.pill-ok{ background: rgba(120,255,170,.16); border:1px solid rgba(120,255,170,.28); }
.pill-warn{ background: rgba(255,210,120,.14); border:1px solid rgba(255,210,120,.26); }
.pill-bad{ background: rgba(255,120,120,.12); border:1px solid rgba(255,120,120,.24); }
















/* =========================
   Early Access Countdown
   ========================= */

.ea-countdown-wrap{
  margin-top:14px;
  display:inline-flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,24,.32);
  backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
  max-width: 760px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  animation: eaFloat 7.5s ease-in-out infinite;
}

.ea-countdown-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,123,216,.22), transparent 60%),
    radial-gradient(700px 240px at 85% 35%, rgba(124,247,255,.16), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.9;
}

.ea-countdown-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--ea-bg, none);
  background-repeat:no-repeat;
  background-position: 110% 10%;
  background-size: 320px auto;
  opacity:.18;
  pointer-events:none;
  filter: saturate(1.15) contrast(1.05);
  mix-blend-mode: screen;
}

.ea-countdown-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ea-headline{
  font-weight:950;
  letter-spacing:.35px;
  color: rgba(234,240,255,.92);
  text-transform:uppercase;
  font-size:12px;
  opacity:.92;
}

.ea-countdown{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}

.ea-unit{
  --p: 1;
  position:relative;
  min-width: 0;
  padding:12px 12px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  transform: translateZ(0);
}

.ea-unit::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,123,216,.16) 35%,
    rgba(124,247,255,.12) 55%,
    transparent 75%);
  transform: rotate(12deg);
  animation: eaShimmer 3.6s linear infinite;
  pointer-events:none;
  opacity:.65;
}

.ea-num{
  font-size:34px;
  line-height:1.05;
  font-weight:980;
  letter-spacing:.6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,123,216,.12), 0 0 22px rgba(124,247,255,.10);
}

.ea-label{
  margin-top:6px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: rgba(234,240,255,.72);
}

.ea-bar{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}

.ea-bar i{
  display:block;
  height:100%;
  width: calc(var(--p) * 100%);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,123,216,1), rgba(124,247,255,1));
  box-shadow: 0 0 22px rgba(255,123,216,.18), 0 0 22px rgba(124,247,255,.14);
  transition: width .15s linear;
}

.ea-unit.pop{
  animation: eaPop .22s ease-out;
}

.ea-foot{
  position:relative;
  z-index:1;
  padding-top:2px;
}

.ea-countdown-wrap.launched{
  border-color: rgba(124,247,255,.25);
}

@keyframes eaShimmer{
  0%{ transform: translateX(-30%) rotate(12deg); opacity:.15; }
  30%{ opacity:.65; }
  100%{ transform: translateX(30%) rotate(12deg); opacity:.12; }
}

@keyframes eaPop{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}

@keyframes eaFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}

@media (max-width: 520px){
  .ea-countdown-wrap{
    padding:12px 12px 10px;
    border-radius:16px;
    max-width: 92vw;
  }

  .ea-countdown{
    gap:8px;
  }

  .ea-unit{
    padding:10px 10px 9px;
    border-radius:14px;
  }

  .ea-num{
    font-size:26px;
  }

  .ea-label{
    font-size:10px;
    margin-top:4px;
  }

  .ea-bar{
    left:10px;
    right:10px;
    bottom:9px;
    height:3px;
  }

  .ea-countdown-wrap::after{
    background-position: 140% 20%;
    background-size: 230px auto;
    opacity:.14;
  }
}