:root {
  --hub-bg:#070907; --hub-green:#165c45; --hub-gold:#cba55a;
  --hub-gold-light:#e6d3a1; --hub-text:#f5f0e4; --hub-header-height:76px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; }
body.flow-hub {
  overflow:hidden; color:var(--hub-text); font-family:"Montserrat","Segoe UI",sans-serif;
  background:radial-gradient(circle at 12% 20%,rgba(22,92,69,.2),transparent 31rem),
    radial-gradient(circle at 88% 65%,rgba(203,165,90,.075),transparent 34rem),
    linear-gradient(145deg,#121412,var(--hub-bg) 55%,#040504);
}
/* ★ 16.08.2026 — Grid auf grid-template-areas umgestellt (statt Spalten-Indizes), damit
   Sidebar (.has-sidebar) und rechte Spalte (.has-rightrail) unabhaengig voneinander an-/
   abwesend sein koennen, ohne dass sich grid-column-Zahlen verschieben. */
.hub-shell {
  min-height:100dvh; display:grid; isolation:isolate;
  grid-template-rows:var(--hub-header-height) minmax(0,1fr) 2px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"header" "stage" "status";
}
.hub-shell.has-sidebar {
  grid-template-columns:264px minmax(0,1fr);
  grid-template-areas:"header header" "sidebar stage" "status status";
}
.hub-shell.has-rightrail {
  grid-template-columns:minmax(0,1fr) 230px;
  grid-template-areas:"header header" "stage rightrail" "status status";
}
.hub-shell.has-sidebar.has-rightrail {
  grid-template-columns:264px minmax(0,1fr) 230px;
  grid-template-areas:"header header header" "sidebar stage rightrail" "status status status";
}
.hub-header { grid-area:header; }
.hub-sidebar { grid-area:sidebar; }
.hub-stage { grid-area:stage; }
.hub-rightrail { grid-area:rightrail; }
.hub-status { grid-area:status; }
.hub-header {
  position:relative; z-index:20; display:grid; grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr);
  align-items:center; gap:22px; padding:10px clamp(18px,3vw,46px);
  border-bottom:1px solid rgba(203,165,90,.28); background:rgba(7,10,8,.9);
  box-shadow:0 10px 34px rgba(0,0,0,.34); backdrop-filter:blur(20px);
}
/* ★ 17.08.2026 (Dieter: "oben links viel zu klein, kann kein Mensch erkennen") — die flache
   Wortmarken-Bilddatei (Icon+Schrift+Unterzeile in einem Bild) wurde auf Header-Hoehe gequetscht,
   dabei wurden die duennen Serifen unlesbar. Jetzt: nur das scharfe Emblem-Icon als Bild + echter
   HTML-Text in der ohnehin geladenen Playfair-Display-Schrift daneben — skaliert verlustfrei in
   jeder Groesse, kein Bild-Detail geht verloren. */
.hub-brand { width:max-content; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.hub-brand-emblem { display:block; height:38px; width:auto; }
.hub-brand-text {
  font-family:"Playfair Display",Georgia,serif; font-size:19px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  background:linear-gradient(180deg,var(--hub-gold-light),var(--hub-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 15px rgba(203,165,90,.15);
}
.hub-brand-text small { display:block; margin-top:1px; font-family:"Montserrat",sans-serif; font-size:8px; font-weight:600; letter-spacing:.22em; -webkit-text-fill-color:#7f837c; color:#7f837c; text-transform:uppercase; }
.hub-switcher {
  display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); padding:4px;
  border:1px solid rgba(203,165,90,.2); border-radius:9px; background:rgba(4,8,6,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.2);
}
.hub-switch {
  position:relative; min-height:43px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px; overflow:hidden; border:1px solid transparent; border-radius:6px;
  color:#92978f; text-decoration:none; font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; transition:color .2s,border-color .2s,background .2s,transform .14s;
}
.hub-switch::after {
  content:""; position:absolute; right:18%; bottom:3px; left:18%; height:1px; opacity:0;
  transform:scaleX(.3); background:linear-gradient(90deg,transparent,var(--hub-gold),transparent);
  transition:opacity .2s,transform .3s;
}
.hub-switch:hover { color:var(--hub-gold-light); background:rgba(203,165,90,.055); }
.hub-switch:active { transform:translateY(1px); }
.hub-switch:focus-visible { outline:2px solid rgba(230,211,161,.7); outline-offset:2px; }
.hub-switch.is-active {
  border-color:rgba(203,165,90,.26); color:var(--hub-gold-light);
  background:linear-gradient(180deg,rgba(22,92,69,.38),rgba(15,59,46,.18));
}
.hub-switch.is-active::after { opacity:1; transform:scaleX(1); }
.hub-switch-icon { color:var(--hub-gold); font-size:12px; }
.hub-presence { width:7px; height:7px; border-radius:50%; background:#58b989; box-shadow:0 0 0 3px rgba(88,185,137,.1),0 0 12px rgba(88,185,137,.45); }

/* ★ 16.08.2026 — Login/Signup ersetzt die "Private room"-Pille (Dieter: "kann weg"). */
.hub-auth { justify-self:end; display:inline-flex; align-items:center; gap:8px; }
.hub-auth-status { color:#7f837c; font-size:10px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.hub-auth-btn {
  padding:8px 13px; border:1px solid rgba(203,165,90,.28); border-radius:6px; background:rgba(15,59,46,.2);
  color:var(--hub-gold-light); font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; transition:background .15s,border-color .15s;
}
.hub-auth-btn:hover { background:rgba(203,165,90,.12); border-color:rgba(203,165,90,.5); }
.hub-auth-btn.primary { background:linear-gradient(180deg,rgba(22,92,69,.55),rgba(15,59,46,.4)); border-color:rgba(203,165,90,.4); }
.hub-auth-btn.full { width:100%; padding:11px 13px; margin-top:4px; }

/* Login/Signup-Modal (auth.js steuert .show/aria-hidden, Markup/IDs 1:1 wie flow/frontend/). */
.hub-modal { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(3,5,4,.72); backdrop-filter:blur(6px); }
.hub-modal.show { display:flex; }
.hub-modal-dialog {
  width:100%; max-width:340px; border:1px solid rgba(203,165,90,.28); border-radius:12px;
  background:linear-gradient(165deg,#121412,#070907); box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;
}
.hub-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(203,165,90,.18); }
.hub-modal-head h3 { margin:0; color:var(--hub-gold-light); font-family:"Playfair Display",Georgia,serif; font-size:16px; }
.hub-modal-close { border:0; background:none; color:#7f837c; font-size:18px; line-height:1; cursor:pointer; }
.hub-modal-close:hover { color:var(--hub-gold-light); }
.hub-modal-form { display:flex; flex-direction:column; gap:6px; padding:16px; }
.hub-modal-form label { color:#9da098; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
.hub-modal-form input {
  padding:9px 11px; border:1px solid rgba(203,165,90,.22); border-radius:7px; background:rgba(4,8,6,.72);
  color:var(--hub-text); font-family:inherit; font-size:13px;
}
.hub-modal-form input:focus { outline:none; border-color:rgba(203,165,90,.55); }
.hub-modal-note { margin-top:6px; color:#9da098; font-size:11px; text-align:center; }

/* ★ 15.08.2026 — Companions-Sidebar. Nur sichtbar, wenn .hub-shell.has-sidebar aktiv ist
   (>1 Girl mit echtem Content); auf schmalen Screens komplett ausgeblendet (s. Breakpoints
   unten) — die Spiel-/Chat-Flaeche behaelt dort Vorrang. */
.hub-sidebar {
  position:relative; z-index:15; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid rgba(203,165,90,.2); background:rgba(6,9,7,.7); backdrop-filter:blur(14px);
}
.hub-sb-head { padding:16px 16px 4px; }
.hub-sb-ttl { font-family:"Playfair Display",Georgia,serif; font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--hub-gold-light); text-transform:uppercase; }
.hub-sb-search { padding:8px 14px 12px; }
.hub-sb-search input {
  width:100%; padding:8px 11px; font-size:12px; color:var(--hub-text); background:rgba(4,8,6,.72);
  border:1px solid rgba(203,165,90,.2); border-radius:7px; font-family:inherit;
}
.hub-sb-search input::placeholder { color:#6c716a; }
.hub-sb-search input:focus { outline:none; border-color:rgba(203,165,90,.5); }
.hub-sb-list { flex:1; min-height:0; overflow-y:auto; padding:0 10px 14px; display:flex; flex-direction:column; gap:6px; }
.hub-sb-card {
  display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:1px solid transparent;
  border-radius:9px; background:transparent; cursor:pointer; text-align:left; font-family:inherit;
  color:inherit; transition:background .15s,border-color .15s;
}
.hub-sb-card:hover { background:rgba(203,165,90,.06); }
.hub-sb-card.is-active { border-color:rgba(203,165,90,.3); background:linear-gradient(180deg,rgba(22,92,69,.32),rgba(15,59,46,.16)); }
/* ★ 16.08.2026 (Dieter: "kein rundes Thumbnail, nen Frame nehmen") — Hochformat statt Kreis,
   Frame-PNG liegt als zweite Ebene ueber dem Video (object-fit:fill deckt sich exakt mit dem
   gezeichneten Rahmen, da beide dasselbe Seitenverhaeltnis 4:5 haben). */
.hub-sb-thumb { position:relative; width:52px; height:65px; flex:0 0 52px; background:#0b0d10; border-radius:8px; overflow:hidden; }
.hub-sb-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.hub-sb-thumb-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.hub-sb-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hub-sb-name { font-size:13px; font-weight:600; color:var(--hub-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-sb-sub { font-size:10px; color:#7f837c; }
.hub-sb-dot { width:7px; height:7px; border-radius:50%; background:#58b989; box-shadow:0 0 8px rgba(88,185,137,.5); flex:0 0 auto; }

/* ★ 17.08.2026 (Dieter: "unten links wie auf der Frontpage — TOS/About, KI-Kennzeichnung,
   X.com + Discord-Platzhalter") — fester Fuss unter der Companions-Liste, .hub-sb-list hat
   flex:1 und schiebt ihn automatisch ans untere Ende der Sidebar. */
.hub-sb-foot { flex:0 0 auto; padding:12px 14px 14px; border-top:1px solid rgba(203,165,90,.14); display:flex; flex-direction:column; gap:8px; }
.hub-sb-about {
  padding:8px 10px; border:1px solid rgba(203,165,90,.22); border-radius:7px; background:rgba(203,165,90,.05);
  color:var(--hub-gold-light); font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; text-align:center; transition:background .15s,border-color .15s;
}
.hub-sb-about:hover { background:rgba(203,165,90,.12); border-color:rgba(203,165,90,.4); }
/* Pflichtkennzeichnung nach EU AI Act Art. 50 Abs. 4 — dieselbe Formulierung wie
   flow/frontend/explore.php's .ki-hinweis, dauerhaft sichtbar, nicht versteckbar. */
.hub-sb-ki {
  padding:5px 8px; border:1px solid rgba(255,255,255,.1); border-radius:6px;
  color:#8b8f87; font-size:9px; letter-spacing:.03em; line-height:1.3; text-align:center;
}
.hub-sb-social { display:flex; align-items:center; justify-content:center; gap:10px; }
.hub-sb-social-link {
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid rgba(203,165,90,.2); border-radius:50%; color:#9da098; transition:color .15s,border-color .15s,background .15s;
}
.hub-sb-social-link:hover { color:var(--hub-gold-light); border-color:rgba(203,165,90,.5); background:rgba(203,165,90,.08); }
.hub-about-dialog { max-width:640px; width:92vw; }
.hub-about-frame { width:100%; height:min(72vh,560px); border:0; display:block; background:#0b0d10; }
/* ★ 16.08.2026 — rechte Spalte: Video Library + Live Stream (Dieter: "die restlichen Sachen
   rechts vom Game/Chat-Feld"). V1 nur verlinkte Karten mit den GPT-Frames, kein eingebetteter
   Player (siehe Kommentar in index.php). */
.hub-rightrail {
  position:relative; z-index:15; display:flex; flex-direction:column; gap:14px; min-height:0;
  padding:16px 14px; overflow-y:auto; border-left:1px solid rgba(203,165,90,.2);
  background:rgba(6,9,7,.7); backdrop-filter:blur(14px);
}
.hub-rr-card { display:block; text-decoration:none; color:inherit; }
.hub-rr-frame { position:relative; display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#121412,#070907); transition:transform .15s; }
.hub-rr-card:hover .hub-rr-frame { transform:translateY(-2px); }
.hub-rr-frame-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.hub-rr-body { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:10px; text-align:center; }
.hub-rr-icon { width:22px; height:22px; opacity:.92; }
.hub-rr-ttl { display:flex; align-items:center; gap:6px; color:var(--hub-gold-light); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.hub-rr-sub { color:#7f837c; font-size:10px; }
.hub-rr-live-dot { width:6px; height:6px; border-radius:50%; background:#e2544a; box-shadow:0 0 8px rgba(226,84,74,.7); animation:hubLivePulse 1.6s ease-in-out infinite; }
@keyframes hubLivePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ★ 17.08.2026 — Live-Vorschau in der rechten Spalte: echtes iframe (stumm, /life/?dock=1)
   statt der statischen Icon-Karte, plus Klickflaeche+Modal (s. hub_live.js). */
.hub-rr-live { cursor:pointer; }
.hub-rr-live-frame { position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; display:block; background:#000; }
.hub-rr-live-tag {
  position:absolute; z-index:3; top:8px; left:8px; display:flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px; background:rgba(4,8,6,.72); backdrop-filter:blur(6px);
  color:var(--hub-text); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
/* Das eingebettete iframe schluckt Klicks -> eine unsichtbare Flaeche darueber oeffnet das Modal. */
.hub-rr-live-click { position:absolute; inset:0; z-index:2; border:0; padding:0; background:transparent; cursor:pointer; }

/* Grosses Live-Modal, Ton an bei Oeffnen (Nutzergeste-Regel s. hub_live.js). */
.hub-live-modal {
  position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(3,5,4,.86); backdrop-filter:blur(6px);
}
.hub-live-modal.is-open { display:flex; }
.hub-live-modal-box {
  position:relative; width:min(94vw,1100px); aspect-ratio:16/9; background:#000;
  border:1px solid rgba(203,165,90,.32); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.hub-live-modal-box iframe { width:100%; height:100%; border:0; display:block; }
.hub-live-modal-close {
  position:absolute; z-index:2; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(203,165,90,.3); background:rgba(7,10,8,.78); color:var(--hub-gold-light);
  font-size:19px; line-height:1; cursor:pointer;
}
.hub-live-modal-close:hover { background:rgba(203,165,90,.18); }
@media(max-width:640px) { .hub-live-modal-box { width:100vw; border-radius:0; border:0; } }

.hub-stage { position:relative; min-width:0; min-height:0; overflow:hidden; background:rgba(3,6,4,.22); }
.hub-ambient { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.hub-ambient::before {
  content:""; position:absolute; width:min(72vw,980px); aspect-ratio:1; border:1px solid rgba(203,165,90,.055);
  border-radius:50%; box-shadow:0 0 0 60px rgba(203,165,90,.014),0 0 0 180px rgba(22,92,69,.018);
}
.hub-ambient-suit { color:rgba(203,165,90,.028); font-family:Georgia,serif; font-size:min(48vw,620px); line-height:1; transform:translateY(5%); }
.hub-frame {
  position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; opacity:0;
  transform:scale(1.012); filter:blur(4px) brightness(.72); background:transparent; pointer-events:none;
  transition:opacity .46s,transform .62s cubic-bezier(.2,.72,.2,1),filter .46s;
}
.hub-frame.is-current { z-index:5; opacity:1; transform:scale(1); filter:none; pointer-events:auto; }
.hub-frame.is-leaving { z-index:4; opacity:0; transform:scale(.994); filter:blur(3px) brightness(.78); pointer-events:none; }
.hub-loader {
  position:absolute; z-index:8; top:50%; left:50%; display:flex; align-items:center; gap:10px;
  padding:10px 14px; opacity:0; transform:translate(-50%,-42%); border:1px solid rgba(203,165,90,.2);
  border-radius:7px; color:#9da098; background:rgba(7,11,8,.74); font-size:9px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; pointer-events:none; backdrop-filter:blur(12px);
  transition:opacity .2s,transform .25s;
}
.hub-stage.is-loading .hub-loader { opacity:1; transform:translate(-50%,-50%); }
.hub-loader-mark { color:var(--hub-gold); animation:hubPulse 1s ease-in-out infinite alternate; }
.hub-status { position:relative; z-index:22; overflow:hidden; background:#060806; }
.hub-status-line { display:block; width:0; height:100%; opacity:0; background:linear-gradient(90deg,transparent,var(--hub-gold),var(--hub-gold-light)); box-shadow:0 0 12px rgba(203,165,90,.55); }
.hub-shell.is-switching .hub-status-line { animation:hubProgress 1.5s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes hubPulse { from { opacity:.38; transform:scale(.8); } to { opacity:1; transform:scale(1.1); } }
@keyframes hubProgress { 0% { width:0; opacity:0; } 12% { opacity:1; } 72% { width:78%; } 100% { width:100%; opacity:0; } }
/* ★ 13.09.2026 — Mobile-Companion-Drawer (schliesst die Luecke aus dem UX-Ticket vom 09.09.:
   auf Handy war die Sidebar bisher ersatzlos verschwunden, kein Weg zu einer anderen Dame ausser
   manuell die URL zu aendern). Auf Desktop unsichtbar/wirkungslos, greift nur in der
   ≤900px-Media-Query unten. */
.hub-mobile-companion-btn { display:none; }
.hub-sidebar-backdrop { display:none; }

@media(max-width:900px) {
  :root { --hub-header-height:70px; }
  .hub-header { grid-template-columns:auto 1fr; gap:14px; padding-inline:16px; }
  .hub-switcher { justify-self:end; }
  .hub-auth-status { display:none; }
  .hub-switch { min-width:74px; padding-inline:10px; }
  /* ★ 15./16.08.2026 — rechte Spalte (Video Library/Live) weicht auf Tablet/Handy weiterhin
     der Spielflaeche, eigene URLs bleiben erreichbar. Sidebar NICHT mehr ausgeblendet (war
     bis 13.09.2026 so) -- jetzt Off-Canvas-Drawer statt display:none, s.u. */
  .hub-shell.has-sidebar,
  .hub-shell.has-rightrail,
  .hub-shell.has-sidebar.has-rightrail {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"header" "stage" "status";
  }
  .hub-rightrail { display:none; }
  .hub-brand-emblem { height:32px; }
  .hub-brand-text { font-size:16px; }

  /* ★ 13.09.2026 — Umschalt-Knopf sichtbar, Sidebar wird zum Off-Canvas-Drawer. */
  .hub-mobile-companion-btn {
    display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:8px;
    border:1px solid rgba(203,165,90,.32); background:rgba(255,255,255,.04);
    color:var(--hub-gold-light); font-family:inherit; font-size:12px; font-weight:600;
    cursor:pointer; white-space:nowrap; max-width:38vw; overflow:hidden; text-overflow:ellipsis;
  }
  .hub-mobile-companion-caret { font-size:10px; opacity:.75; }
  .hub-sidebar-backdrop {
    display:block; position:fixed; inset:0; z-index:2400; background:rgba(3,5,4,.6);
    opacity:0; pointer-events:none; transition:opacity 220ms ease;
  }
  .hub-sidebar-backdrop.is-open { opacity:1; pointer-events:auto; }
  .hub-sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:2500; width:min(320px,84vw);
    transform:translateX(-100%); transition:transform 240ms cubic-bezier(.2,.7,.2,1);
    box-shadow:12px 0 40px rgba(0,0,0,.5); border-right:1px solid rgba(203,165,90,.3);
  }
  .hub-sidebar.is-open { transform:translateX(0); }
}
@media(max-width:620px) {
  :root { --hub-header-height:118px; }
  .hub-header { grid-template-columns:1fr auto; grid-template-rows:48px 54px; gap:3px 10px; padding:7px 10px 8px; }
  .hub-brand { padding-left:4px; }
  .hub-brand-emblem { height:26px; }
  .hub-brand-text { font-size:13px; }
  .hub-auth { gap:5px; }
  .hub-auth-btn { padding:7px 9px; font-size:9px; }
  .hub-switcher { grid-column:1/-1; width:100%; }
  .hub-switch { min-width:0; min-height:44px; padding:7px 5px; font-size:8px; letter-spacing:.04em; }
  .hub-switch-icon { font-size:10px; }
  .hub-loader { white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) {
  .hub-frame,.hub-loader,.hub-switch { transition:none!important; }
  .hub-loader-mark,.hub-shell.is-switching .hub-status-line { animation:none!important; }
}

/* Age gate (30.08.2026 -- gleicher Mechanismus wie flow/frontend/index.html) */
.agebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3000; background: rgba(10, 12, 18, 0.96); border-top: 1px solid rgba(255,255,255,0.08); }
.agebar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; color: #cfe7ff; }
.agebar-text { font-size: 14px; color: #a8b3c7; }
.agebar button { background: linear-gradient(135deg, #ff4d67, #8a2be2); color: #fff; border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 700; }
.agebar button:hover { opacity: 0.92; }

/* Girl-Gating (30.08.2026) */
.hub-sb-card.is-locked { opacity: 0.45; filter: grayscale(0.6); cursor: pointer; }
.hub-sb-card.is-locked:hover { opacity: 0.65; }
.hub-sb-lock { font-size: 14px; opacity: 0.85; }