/* =========================================================
   Randka Londyn — motyw kosmiczny „space”
   Paleta zgodna z martinezz-studio.co.uk (motyw .space).
   Wystarczy klasa `space` na <body> — reszta arkusza zostaje bez zmian.
   ========================================================= */

body.space{
  /* --- paleta przejęta z martinezz-studio.co.uk --- */
  --sp-primary: #6d5cf0;
  --sp-accent:  #ffc46b;
  --sp-bg:      #05060f;
  --sp-bg-2:    #0a0e21;
  --sp-bg-3:    #161d40;
  --sp-card:    rgba(20,26,58,.62);
  --sp-head:    rgba(6,8,22,.78);
  --sp-foot:    #04050d;
  --sp-line:    rgba(150,168,255,.22);
  --glow:       0 0 0 1px rgba(150,168,255,.16), 0 18px 50px -18px rgba(109,92,240,.65);

  /* --- nadpisanie zmiennych portalu, żeby wszystkie komponenty poszły za motywem --- */
  --ink:    #f1f3ff;
  --ink-2:  #cdd4ff;
  --muted:  #aab4e0;
  --line:   var(--sp-line);
  --bg:     var(--sp-bg);
  --card:   var(--sp-card);
  --violet:    #7c6cff;
  --violet-dk: #a99cff;
  --pink:      hsl(var(--hue) 92% 70%);
  --pink-dark: hsl(var(--hue) 92% 76%);

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5);
  --sh-3: 0 24px 70px -20px rgba(109,92,240,.75);

  color: var(--ink);
  background: var(--sp-bg);
  position: relative;
}

/* ---------------------------------------------------- mgławice */
body.space::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(120,86,255,.55), transparent 70%),
    radial-gradient(34% 26% at 84% 22%, rgba(0,190,215,.34), transparent 70%),
    radial-gradient(42% 34% at 70% 72%, rgba(226,70,160,.30), transparent 72%),
    radial-gradient(40% 32% at 24% 86%, rgba(60,110,255,.30), transparent 72%),
    radial-gradient(70% 60% at 50% 40%, rgba(12,16,44,.9), #05060f 78%);
  animation: rl-neb 42s ease-in-out infinite alternate;
}
@keyframes rl-neb{
  from{ transform: scale(1) translate(0,0); }
  to  { transform: scale(1.09) translate(-1.5%, 1.5%); }
}

/* ---------------------------------------------------- gwiazdy (trzy warstwy) */
body.space::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='760'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='60' cy='90' r='1.3' opacity='.75'/%3E%3Ccircle cx='230' cy='40' r='.9' opacity='.45'/%3E%3Ccircle cx='410' cy='150' r='1.5' opacity='.85'/%3E%3Ccircle cx='620' cy='70' r='1' opacity='.5'/%3E%3Ccircle cx='800' cy='190' r='1.2' opacity='.7'/%3E%3Ccircle cx='140' cy='300' r='1.1' opacity='.6'/%3E%3Ccircle cx='330' cy='420' r='.8' opacity='.4'/%3E%3Ccircle cx='560' cy='350' r='1.4' opacity='.8'/%3E%3Ccircle cx='740' cy='470' r='1' opacity='.55'/%3E%3Ccircle cx='80' cy='560' r='1.3' opacity='.7'/%3E%3Ccircle cx='280' cy='660' r='.9' opacity='.45'/%3E%3Ccircle cx='500' cy='600' r='1.2' opacity='.65'/%3E%3Ccircle cx='690' cy='720' r='1' opacity='.5'/%3E%3Ccircle cx='870' cy='620' r='1.4' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='560'%3E%3Cg fill='%23dfe6ff'%3E%3Ccircle cx='40' cy='200' r='.7' opacity='.55'/%3E%3Ccircle cx='190' cy='110' r='.6' opacity='.35'/%3E%3Ccircle cx='350' cy='260' r='.8' opacity='.6'/%3E%3Ccircle cx='520' cy='60' r='.7' opacity='.4'/%3E%3Ccircle cx='600' cy='330' r='.6' opacity='.5'/%3E%3Ccircle cx='120' cy='430' r='.8' opacity='.45'/%3E%3Ccircle cx='300' cy='520' r='.6' opacity='.35'/%3E%3Ccircle cx='470' cy='450' r='.7' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 0 0, 120px 60px;
  animation: rl-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes rl-twinkle{ from{opacity:.35} to{opacity:1} }

/* ---------------------------------------------------- górny pasek */
body.space .topbar{
  background: var(--sp-head);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sp-line);
}
body.space .mainnav>a,
body.space .nav-more-btn{ color: var(--ink-2); }
body.space .mainnav>a:hover,
body.space .nav-more-btn:hover{ background: rgba(109,92,240,.20); color:#fff; }
body.space .nav-more-panel{
  background: #0d1230; border:1px solid var(--sp-line); box-shadow: var(--sh-2);
}
body.space .nav-more-panel a{ color: var(--ink-2); }
body.space .nav-more-panel a:hover{ background: rgba(109,92,240,.22); color:#fff; }
body.space .langsw{ background: rgba(255,255,255,.06); border-color: var(--sp-line); }
body.space .langsw a{ color: var(--muted); }
body.space .pbtn{ background: rgba(255,255,255,.06); border-color: var(--sp-line); color:#fff; }
body.space .burger span{ background:#fff; }
body.space .usermenu-btn{
  background: rgba(255,255,255,.07); border-color: var(--sp-line); color: var(--ink);
}
body.space .usermenu-btn:hover{ background: rgba(255,255,255,.14); }
body.space .usermenu-panel{ background:#0d1230; border-color: var(--sp-line); }
body.space .usermenu-panel a{ color: var(--ink-2); }
body.space .usermenu-panel a:hover{ background: rgba(109,92,240,.22); color:#fff; }
body.space .usermenu-panel a.danger{ color:#ff9aa8; }

/* menu na telefonie — arkusz bazowy daje mu białe tło, przez co w ciemnym
   motywie wychodził jasny tekst na białym i nic nie było widać */
@media (max-width:1200px){
  body.space .mainnav{
    background: #0b1029;
    border-top: 1px solid var(--sp-line);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
  }
  body.space .mainnav>a,
  body.space .nav-more-btn,
  body.space .nav-more-panel a{ color: var(--ink); }
  body.space .nav-more-panel{ background: transparent; box-shadow: none; border: 0; }
}

/* ---------------------------------------------------- hero */
body.space .hero{
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(109,92,240,.55), transparent 62%),
    radial-gradient(110% 130% at 88% 10%, rgba(226,70,160,.38), transparent 60%),
    linear-gradient(160deg, #141a3e 0%, #0a0e21 100%);
  border: 1px solid var(--sp-line);
  box-shadow: var(--glow);
}
body.space .hero::before{ background: rgba(124,108,255,.16); }
body.space .hero::after{  background: rgba(255,196,107,.10); }
body.space .hero h1{ text-shadow: 0 2px 30px rgba(0,0,0,.5); }
body.space .pill-free{
  background: rgba(255,196,107,.14); border-color: rgba(255,196,107,.45); color: var(--sp-accent);
}

/* meteor przelatujący raz na kilkanaście sekund */
body.space .hero .meteor{
  position:absolute; top:-10%; left:-10%; width:160px; height:2px; z-index:1;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
  transform: rotate(22deg); opacity:0;
  animation: rl-meteor 17s linear infinite;
}
@keyframes rl-meteor{
  0%,88%  { opacity:0; transform: translate(0,0) rotate(22deg); }
  89%     { opacity:1; }
  100%    { opacity:0; transform: translate(130vw, 60vh) rotate(22deg); }
}

/* ---------------------------------------------------- karty i sekcje */
body.space .card,
body.space .launch-box,
body.space .stat,
body.space .pcard,
body.space .kpi,
body.space .art-card{
  background: var(--sp-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sp-line);
  color: var(--ink);
}
body.space .card:hover,
body.space .pcard:hover{ box-shadow: var(--glow); }
body.space .pcard-photo{ background:#0a0e21; }
body.space h1, body.space h2, body.space h3, body.space h4{ color: var(--ink); }
body.space .muted, body.space .hint{ color: var(--muted); }
body.space hr{ border-color: var(--sp-line); }

body.space .stat b,
body.space .launch-nums b{
  background: linear-gradient(135deg, var(--sp-accent) 0%, #ff8fd0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* pasek postępu startowego */
body.space .launch-bar{ background: rgba(255,255,255,.08); }
body.space .launch-bar i{ background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent)); }

/* ---------------------------------------------------- przyciski */
body.space .btn-primary{
  background: linear-gradient(135deg, var(--sp-primary) 0%, #b06cff 100%);
  color:#fff; box-shadow: 0 10px 30px -8px rgba(109,92,240,.8);
}
body.space .btn-primary:hover{ box-shadow: 0 14px 38px -8px rgba(109,92,240,.95); }
body.space .btn-ghost{
  background: rgba(255,255,255,.06); color: var(--ink); border-color: var(--sp-line);
}
body.space .btn-ghost:hover{ background: rgba(255,255,255,.13); color:#fff; border-color: rgba(150,168,255,.5); }
body.space .btn-2{ background: rgba(255,196,107,.14); color: var(--sp-accent); border-color: rgba(255,196,107,.4); }
body.space .hero .btn-ghost{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); }

/* ---------------------------------------------------- pozostałe białe powierzchnie
   Arkusz bazowy ma w wielu miejscach twarde background:#fff. Tu przykrywamy je
   wszystkie na raz, żeby motyw działał także w trybie „cały portal”. */
body.space .how-item,
body.space .why li,
body.space .profile-card,
body.space .thread-list,
body.space .chat-box,
body.space .msg-in .bubble,
body.space .uitem,
body.space .table,
body.space .tabs a,
body.space .zsign,
body.space .answer,
body.space .admin-nav,
body.space .emoji-bar button,
body.space .geo-list,
body.space .diet-tile,
body.space .memo-card.open,
body.space .memo-card.done,
body.space .ipbox code{
  background: var(--sp-card);
  border-color: var(--sp-line);
  color: var(--ink);
}
body.space .table th{ background: rgba(255,255,255,.05); color: var(--ink-2); }
body.space .table td{ border-color: var(--sp-line); }
body.space .tabs a.on{ background: linear-gradient(135deg, var(--sp-primary), #b06cff); color:#fff; border-color:transparent; }
body.space .msg-out .bubble{ background: linear-gradient(135deg, var(--sp-primary), #b06cff); color:#fff; }
body.space .compat-ring::after{ background:#0a0e21; }
body.space .chip-amber{ background: rgba(255,196,107,.16); color: var(--sp-accent); border-color: rgba(255,196,107,.35); }
body.space .rules-ban, body.space .rules-ban-compact li,
body.space .rules-reminder{
  background: rgba(255,90,120,.10); border-color: rgba(255,90,120,.3); color: var(--ink-2);
}
body.space .lb-close{ background:#151a3a; color:#fff; }
body.space .skip:focus{ background:#151a3a; color:#fff; }

/* ---------------------------------------------------- notki i wyjaśnienia */
body.space .note{
  background: rgba(124,108,255,.12);
  border-left-color: var(--sp-primary);
  color: var(--ink-2);
}
body.space .note-info{ background: rgba(60,110,255,.14); border-left-color:#7ba4ff; }
body.space .note-warn{ background: rgba(255,196,107,.12); border-left-color: var(--sp-accent); }
body.space .note b, body.space .note strong{ color: var(--ink); }

/* biały przycisk w hero — na ciemnym tle świeci zbyt mocno */
body.space .btn-white{
  background:#fff; color:#151a3a;
  box-shadow: 0 10px 34px -10px rgba(255,255,255,.55);
}
body.space .btn-white:hover{ background:#f2f2ff; }

/* ---------------------------------------------------- drobiazgi */
body.space .tag, body.space .chip{
  background: rgba(124,108,255,.16); color: var(--ink-2); border:1px solid var(--sp-line);
}
body.space .ribbon-demo{ background: rgba(6,8,22,.78); border:1px solid var(--sp-line); color: var(--ink-2); }
body.space .flash-info{ background: rgba(60,110,255,.16); border-color: rgba(150,168,255,.35); color:#cdd9ff; }
body.space .flash-ok{   background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.35); color:#a7f3d0; }
body.space .flash-warn{ background: rgba(255,196,107,.14); border-color: rgba(255,196,107,.35); color:#ffe0ad; }
body.space .flash-err{  background: rgba(255,90,120,.14);  border-color: rgba(255,90,120,.4);  color:#ffc4cd; }
body.space a{ color: var(--violet-dk); }

body.space input, body.space select, body.space textarea{
  background: rgba(8,11,28,.75); color: var(--ink); border-color: var(--sp-line);
}
body.space input::placeholder, body.space textarea::placeholder{ color: rgba(170,180,224,.6); }
body.space input:focus, body.space select:focus, body.space textarea:focus{
  border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(109,92,240,.25);
}
body.space label{ color: var(--ink-2); }

/* ---------------------------------------------------- stopka */
body.space .footer{ background: var(--sp-foot); border-top:1px solid var(--sp-line); }
body.space .footer-bar{ border-top-color: var(--sp-line); }

/* reklamy nie mają udawać treści portalu */
body.space .ad{ background: rgba(255,255,255,.04); border-color: var(--sp-line); }

/* ---------------------------------------------------- dostępność */
@media (prefers-reduced-motion: reduce){
  body.space::before, body.space::after, body.space .hero .meteor{ animation: none; }
}

/* status konta na profilu — w ciemnym motywie */
body.space .status-ok{
  background: rgba(52,211,153,.12); border-color: var(--sp-line); border-left:4px solid #34d399;
}
body.space .status-ok h3{ color:#6ee7b7 }
body.space .status-wait{
  background: rgba(255,196,107,.12); border-color: var(--sp-line); border-left:4px solid var(--sp-accent);
}
body.space .status-wait h3{ color: var(--sp-accent) }