@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Press+Start+2P&display=swap");

:root {
  color-scheme: dark;
  --bg: #080808;
  --surface: #121212;
  --surface-2: #191919;
  --surface-3: #232323;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f8f8f3;
  --muted: #b7b4aa;
  --faint: #747168;
  --accent: #25d0ab;
  --accent-2: #ff4d6d;
  --accent-3: #f4c95d;
  --accent-4: #6fb7ff;
  --danger: #ff6b6b;
  --ok: #56e39f;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
  --radius: 8px;
  --radius-sm: 7px;
  --editor-accent-color: var(--accent);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(37, 208, 171, 0.16), transparent 32rem),
    linear-gradient(135deg, #080808 0%, #11110f 46%, #070707 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  /* Kolorowy kursor domyslnie w CALEJ aplikacji (dashboard, logowanie, edytor...), nie tylko
     wewnatrz samego edytora - patrz zmienne w :root wyzej. Wyjatek nizej: publiczna wizytowka ma
     WLASNY, oddzielny system kursorow (--profile-cursor, wybierany przez wlasciciela tej konkretnej
     wizytowki) i NIE ma dostawac kursora calej aplikacji. */
  cursor: var(--editor-cursor-default, auto);
}

body button,
body [class*="button"],
body label.toggle-line,
body a {
  cursor: var(--editor-cursor-default, pointer) !important;
}

body input,
body textarea {
  caret-color: var(--editor-accent-color, var(--accent));
}

/* Publiczna wizytowka (to, co widzi gosc pod /u/...) ma wlasny system kursorow wybierany przez
   wlasciciela (profile.cursorStyle/cursorColor -> --profile-cursor, patrz .profile-page nizej w
   tym pliku) - dwie regule wyzej by go przykryly swoim !important, stad reset z powrotem na
   dziedziczenie po .profile-page w jej wnetrzu (sama .profile-page NIE jest tu dotykana - jej
   istniejaca regula `cursor: var(--profile-cursor, auto)` dziala bez zmian). */
.profile-page button,
.profile-page [class*="button"],
.profile-page a {
  cursor: inherit !important;
}

.profile-page input,
.profile-page textarea {
  caret-color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
}

.dashboard {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  min-height: 100vh;
}

.owner-dashboard {
  grid-template-columns: 18.5rem minmax(0, 1fr);
}

.owner-dashboard .sidebar {
  gap: 1.25rem;
  min-width: 0;
  overflow: hidden;
}

.owner-dashboard .sidebar-footer {
  margin-top: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.25rem;
  border-right: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.84);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(37, 208, 171, 0.28), transparent 54%),
    linear-gradient(315deg, rgba(255, 77, 109, 0.3), transparent 58%),
    #141414;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
}

.brand-mark img,
.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-logo {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(37, 208, 171, 0.22);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 0 28px rgba(37, 208, 171, 0.12);
  overflow: hidden;
}

.topbar-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand h1 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.18rem;
}

.nav-tabs {
  display: grid;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}

.nav-tabs button,
.mini-button,
.primary-button,
.secondary-button,
.icon-button,
.chip-button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.nav-tabs button {
  width: 100%;
  min-height: 2.65rem;
  color: var(--muted);
  text-align: left;
  padding: 0.62rem 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.tab-icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  flex: 0 0 auto;
}

.nav-tabs button:hover,
.mini-button:hover,
.primary-button:hover,
.secondary-button:hover,
.icon-button:hover,
.chip-button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.075);
}

.nav-tabs button[aria-selected="true"] {
  color: var(--text);
  border-color: rgba(37, 208, 171, 0.52);
  background: rgba(37, 208, 171, 0.11);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 0.75rem;
}

.owner-access-box {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.owner-access-box span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.owner-access-box strong {
  font-size: 1rem;
}

.owner-access-box .secondary-button,
.owner-access-box .mini-button {
  width: 100%;
  min-width: 0;
  padding-inline: 0.6rem;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.owner-login-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 12%, rgba(37, 208, 171, 0.18), transparent 28rem),
    linear-gradient(135deg, #060606, #121210 54%, #070707);
}

.owner-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}

.owner-login-card {
  width: min(42rem, 100%);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid rgba(37, 208, 171, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(10, 10, 10, 0.9);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), 0 0 46px rgba(37, 208, 171, 0.08);
}

.owner-login-brand {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.owner-login-logo {
  width: 4.4rem;
  height: 4.4rem;
}

.owner-login-brand span,
.owner-login-status-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.owner-login-brand h1 {
  margin: 0.12rem 0 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.95;
}

.owner-login-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.owner-login-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.owner-login-status-grid div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.owner-login-status-grid strong {
  overflow-wrap: anywhere;
}

.owner-login-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.owner-login-actions button {
  min-height: 2.9rem;
}

.owner-login-note {
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.22);
}

.turnstile-gate-shell {
  min-height: 100vh;
  background: #050505;
}

.turnstile-gate-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background:
    radial-gradient(circle at 50% 12%, rgba(37, 208, 171, 0.2), transparent 25rem),
    radial-gradient(circle at 82% 76%, rgba(255, 77, 109, 0.1), transparent 22rem),
    linear-gradient(135deg, #050505, #10100f 58%, #050505);
}

.turnstile-gate-card {
  width: min(34rem, 100%);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid rgba(37, 208, 171, 0.26);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(8, 8, 8, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5), 0 0 48px rgba(37, 208, 171, 0.1);
}

.turnstile-gate-brand {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.turnstile-gate-logo {
  width: 4.2rem;
  height: 4.2rem;
}

.turnstile-gate-brand span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.turnstile-gate-brand h1 {
  margin: 0.12rem 0 0;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 0.95;
}

.turnstile-gate-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.totp-secret-key {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-family: "Space Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--text) !important;
  user-select: all;
}

.totp-qr {
  display: flex;
  justify-content: center;
  padding: 0.8rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.totp-qr svg {
  width: 11rem;
  height: 11rem;
}

.turnstile-gate-card .turnstile-card {
  width: 100%;
  margin: 0;
}

.turnstile-gate-card .primary-button {
  width: 100%;
  min-height: 3rem;
}

@media (max-width: 760px) {
  .owner-login-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .owner-login-status-grid {
    grid-template-columns: 1fr;
  }

  .owner-login-actions button {
    width: 100%;
  }
}

.profile-switcher {
  display: grid;
  gap: 0.45rem;
}

.profile-switcher label,
.field label,
.section-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.main {
  min-width: 0;
  padding: 1.25rem;
}

.user-main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0;
}

.user-topbar {
  padding-top: 0.5rem;
}

.search-control {
  width: min(26rem, 100%);
}

.user-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.user-profile-card {
  min-height: 9rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  grid-template-columns: 0.7rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.user-profile-card h3 {
  margin: 0;
  font-size: 1rem;
}

.user-profile-card p,
.user-profile-card span {
  display: block;
  margin: 0.2rem 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.user-profile-card .table-actions {
  grid-column: 2;
  justify-content: flex-start;
}

.user-editor-header {
  margin-bottom: 1rem;
}

.turnstile-card {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 0, rgba(37, 208, 171, 0.12), transparent 16rem),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

.owner-login-card .turnstile-card {
  width: 100%;
  margin: 0.85rem 0 0;
}

.turnstile-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.turnstile-copy strong {
  color: var(--text);
  font-size: 0.95rem;
}

.turnstile-copy span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.turnstile-widget {
  min-width: 18.75rem;
  min-height: 4.1rem;
  display: grid;
  align-items: center;
  justify-items: end;
}

.editing-shell {
  min-height: 100vh;
  background: #050505;
}

.editor-main {
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

.immersive-editor {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #050505;
  /* Kolorowy kursor edytora (patrz zmienne --editor-cursor-*/--editor-accent-color) - domyslnie
     (patrz :root/body na gorze pliku) to stale, markowe teal, ale .immersive-editor dostaje wlasny,
     inline ustawiony kolor PER PROFIL (patrz renderUserEditor w app.js) - nadpisuje wiec te same
     zmienne dla wszystkiego w swoim wnetrzu (podglad, panel "OPCJE", przyciski - ich regula siedzi
     przy `body button` wyzej i tak samo odczyta tu juz podmieniona wartosc zmiennej). */
  cursor: var(--editor-cursor-default, auto);
}

.immersive-preview {
  position: fixed;
  inset: 0 0 0 3.7rem;
  z-index: 0;
  /* Na waskim ekranie widzety z miejscem podstawowym ida pod karte (patrz layoutDefaultSlots w
     app.js), a strona sie wydluza - bez przewijania bylyby w edytorze nieosiagalne. */
  overflow-y: auto;
  overflow-x: hidden;
}

.immersive-preview .profile-page {
  width: calc(100vw - 3.7rem);
  height: 100vh;
  min-height: 100vh;
}

.immersive-preview .bio-card {
  width: min(24rem, calc(100vw - 2rem));
}

.immersive-actions {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.immersive-options {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 14;
  width: 3.7rem;
  pointer-events: auto;
}

.options-rail {
  width: 3.7rem;
  height: 100vh;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: rgba(6, 6, 6, 0.78);
  color: var(--accent);
  font-size: clamp(1.4rem, 4vh, 2.8rem);
  font-weight: 950;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  cursor: pointer;
  pointer-events: auto;
}

.options-drawer {
  position: absolute;
  inset: 0 auto 0 3.7rem;
  width: min(34rem, calc(100vw - 3.7rem));
  padding: 0.9rem;
  overflow: auto;
  border-right: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(19, 19, 19, 0.98), rgba(8, 8, 8, 0.98)),
    #0a0a0a;
  box-shadow: var(--shadow);
  transform: translateX(calc(-100% - 3.8rem));
  transition: transform 180ms ease;
  pointer-events: auto;
  visibility: hidden;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.options-drawer::-webkit-scrollbar {
  width: 0.55rem;
}

.options-drawer::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

.options-drawer::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 74%, #111);
}

.immersive-options.is-open .options-drawer {
  transform: translateX(0);
  visibility: visible;
}

.immersive-editor.options-dock-right .immersive-preview {
  inset: 0 3.7rem 0 0;
}

.immersive-editor.options-dock-right .immersive-preview .profile-page {
  width: calc(100vw - 3.7rem);
}

.immersive-editor.options-dock-top .immersive-preview {
  inset: 3.7rem 0 0 0;
}

.immersive-editor.options-dock-top .immersive-preview .profile-page,
.immersive-editor.options-dock-bottom .immersive-preview .profile-page {
  width: 100vw;
  height: calc(100vh - 3.7rem);
  min-height: calc(100vh - 3.7rem);
}

.immersive-editor.options-dock-bottom .immersive-preview {
  inset: 0 0 3.7rem 0;
}

.immersive-options.options-dock-right {
  inset: 0 0 0 auto;
}

.immersive-options.options-dock-right .options-rail {
  border-right: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
}

.immersive-options.options-dock-right .options-drawer {
  inset: 0 3.7rem 0 auto;
  border-right: 0;
  border-left: 1px solid var(--line-strong);
  transform: translateX(calc(100% + 3.8rem));
}

.immersive-options.options-dock-right.is-open .options-drawer {
  transform: translateX(0);
}

.immersive-options.options-dock-top,
.immersive-options.options-dock-bottom {
  left: 0;
  right: 0;
  width: 100%;
  height: 3.7rem;
}

.immersive-options.options-dock-top {
  inset: 0 0 auto 0;
}

.immersive-options.options-dock-bottom {
  inset: auto 0 0 0;
}

.immersive-options.options-dock-top .options-rail,
.immersive-options.options-dock-bottom .options-rail {
  width: 100%;
  height: 3.7rem;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0.35em;
  font-size: 1.08rem;
}

.immersive-options.options-dock-top .options-rail {
  border-right: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
}

.immersive-options.options-dock-bottom .options-rail {
  border-right: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
}

.immersive-options.options-dock-top .options-drawer,
.immersive-options.options-dock-bottom .options-drawer {
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(34rem, calc(100vh - 3.7rem));
  border-right: 0;
}

.immersive-options.options-dock-top .options-drawer {
  inset: 3.7rem 0 auto 0;
  border-bottom: 1px solid var(--line-strong);
  transform: translateY(calc(-100% - 3.8rem));
}

.immersive-options.options-dock-bottom .options-drawer {
  inset: auto 0 3.7rem 0;
  border-top: 1px solid var(--line-strong);
  transform: translateY(calc(100% + 3.8rem));
}

.immersive-options.options-dock-top.is-open .options-drawer,
.immersive-options.options-dock-bottom.is-open .options-drawer {
  transform: translateY(0);
}

.immersive-editor.options-dock-right .immersive-actions {
  right: 4.95rem;
}

.immersive-editor.options-dock-top .immersive-actions {
  top: 4.95rem;
}

.immersive-editor.options-dock-bottom .immersive-actions {
  bottom: 4.95rem;
  top: auto;
}

.options-rail[aria-expanded="true"] {
  background: rgba(8, 8, 8, 0.94);
}

.options-dock-controls {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.options-dock-controls > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.options-dock-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.options-dock-buttons button {
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.options-dock-buttons button.is-active {
  border-color: color-mix(in srgb, var(--accent) 68%, white);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}

.option-accordion {
  display: grid;
  gap: 0.55rem;
}

.option-accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.option-accordion-item.is-open {
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.16));
}

.option-accordion-trigger {
  width: 100%;
  min-height: 3.2rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.72rem;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-weight: 900;
}

.option-accordion-trigger:hover {
  background: rgba(255, 255, 255, 0.045);
}

.option-accordion-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.option-accordion-chevron {
  width: 0.64rem;
  height: 0.64rem;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.option-accordion-item.is-open .option-accordion-chevron {
  color: var(--accent);
  transform: rotate(225deg);
}

.option-accordion-body {
  padding: 0 0.72rem 0.78rem;
}

.option-accordion-body > .option-panel {
  gap: 0.65rem;
  padding-top: 0.68rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.option-accordion-body > .option-panel > h3 {
  display: none;
}

.option-panel {
  display: grid;
  gap: 0.75rem;
}

.option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.options-drawer .option-actions .mini-button,
.options-drawer .option-head .mini-button,
.options-drawer .secondary-button,
.options-drawer .primary-button {
  min-height: 2.65rem;
  border-color: rgba(255, 255, 255, 0.14);
}

.option-panel h3,
.option-panel p {
  margin: 0;
}

.option-panel > h3,
.option-head h3 {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.2;
}

.option-panel > h3 + p {
  margin-top: -0.28rem;
}

.option-panel p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.42;
}

.option-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.options-drawer .option-head {
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.selected-option-panel {
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(37, 208, 171, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.22);
}

.selected-live-preview {
  display: grid;
  gap: 0.5rem;
}

.selected-live-canvas {
  min-height: 10rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(37, 208, 171, 0.1), rgba(0, 0, 0, 0.68));
}

.selected-preview-text {
  max-width: 100%;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

.selected-preview-bio {
  max-width: 15rem;
  line-height: 1.35;
}

.selected-preview-card {
  width: min(12rem, 100%);
  min-height: 6.5rem;
  display: grid;
  place-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
}

.selected-preview-card span,
.selected-preview-link span,
.selected-preview-music span {
  color: var(--muted);
  font-size: 0.78rem;
}

.selected-preview-avatar-frame {
  width: var(--avatar-size, 5.6rem);
  height: var(--avatar-size, 5.6rem);
  margin: 0;
}

.selected-preview-avatar {
  width: 100%;
  height: 100%;
}

.avatar-crop-editor {
  display: grid;
  gap: 0.7rem;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.avatar-crop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.avatar-crop-head strong {
  color: var(--text);
}

.avatar-crop-head span {
  max-width: 16rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: right;
}

.avatar-crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 14rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111216;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.avatar-crop-stage.is-cropping {
  cursor: grabbing;
}

.avatar-crop-image {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  display: block;
  object-fit: var(--avatar-fit, cover);
  /* Kadr = punkt zaczepienia: object-position przesuwa okno zdjecia (gdy zdjecie nie jest kwadratem), a
     przyblizenie rosnie WOKOL tego samego punktu - dzieki temu da sie dojechac do kazdej czesci zdjecia
     i nigdzie nie pokazuje sie puste tlo (wczesniej przesuwalo sie cale pudelko z juz przycietym zdjeciem). */
  object-position: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  pointer-events: none;
}

.badge-crop-image {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  display: block;
  object-fit: var(--badge-image-fit, cover);
  object-position: var(--badge-image-position-x, 50%) var(--badge-image-position-y, 50%);
  transform: scale(var(--badge-image-zoom, 1));
  transform-origin: var(--badge-image-position-x, 50%) var(--badge-image-position-y, 50%);
  pointer-events: none;
}

.avatar-crop-circle {
  position: absolute;
  inset: 8%;
  border: 4px solid var(--avatar-ring-color, #fff);
  border-radius: 999px;
  box-shadow:
    0 0 0 999px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.avatar-crop-tools {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) 1.55rem auto;
  align-items: center;
  gap: 0.55rem;
}

.avatar-crop-icon {
  display: block;
  border: 2px solid var(--muted);
  border-radius: 3px;
  opacity: 0.92;
  position: relative;
}

.avatar-crop-icon::after {
  content: "";
  position: absolute;
  left: 0.18rem;
  right: 0.18rem;
  bottom: 0.17rem;
  height: 35%;
  background: var(--muted);
  clip-path: polygon(0 100%, 38% 30%, 58% 62%, 76% 18%, 100% 100%);
}

.avatar-crop-icon.is-small {
  width: 1rem;
  height: 1rem;
  justify-self: end;
}

.avatar-crop-icon.is-large {
  width: 1.45rem;
  height: 1.45rem;
}

.avatar-crop-range {
  width: 100%;
  accent-color: var(--accent);
}

.avatar-crop-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.avatar-crop-mode button {
  min-height: 2.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.avatar-crop-mode button.is-active {
  border-color: color-mix(in srgb, var(--accent) 68%, white);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}

.avatar-edit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.options-drawer .avatar-edit-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.options-drawer .avatar-edit-card > .secondary-button {
  grid-column: 1 / -1;
  width: 100%;
}

.avatar-edit-preview {
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.avatar-edit-card > div:not(.avatar-edit-preview) {
  display: grid;
  gap: 0.2rem;
}

.avatar-edit-card strong {
  color: var(--text);
}

.avatar-edit-card span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.avatar-edit-button {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, white);
  border-radius: 999px;
  background: #050505;
  color: var(--accent);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.avatar-crop-overlay,
.bg-crop-overlay,
.badge-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 2vw, 1.3rem);
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 208, 171, 0.12), transparent 30rem),
    rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(18px);
}

.avatar-crop-shell {
  width: min(74rem, 100%);
  max-height: min(48rem, calc(100vh - 1.4rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: clamp(0.8rem, 1.5vw, 1.15rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #101114;
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.58);
}

.badge-crop-shell {
  width: min(58rem, 100%);
}

.avatar-crop-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.avatar-crop-topbar div {
  display: grid;
  gap: 0.2rem;
}

.avatar-crop-topbar strong {
  color: var(--text);
  font-size: 1.15rem;
}

.avatar-crop-topbar span {
  color: var(--muted);
  line-height: 1.4;
}

.field-hint {
  margin: -0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.avatar-crop-full-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(17rem, 0.38fr);
  gap: 1rem;
  align-items: stretch;
}

.avatar-crop-stage-full {
  min-height: min(72vh, 42rem);
}

.avatar-crop-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.avatar-crop-final-preview {
  width: min(var(--avatar-size, 7rem), 9rem);
  height: min(var(--avatar-size, 7rem), 9rem);
  margin: 0 auto 0.35rem;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.badge-crop-preview-wrap {
  min-height: 5.2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.badge-crop-preview {
  min-height: 2.5rem;
}

.badge-size-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .avatar-edit-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .avatar-edit-card > button {
    grid-column: 1 / -1;
  }

  .avatar-crop-shell {
    max-height: calc(100vh - 1rem);
    overflow: auto;
  }

  .avatar-crop-full-grid {
    grid-template-columns: 1fr;
  }

  .avatar-crop-stage-full {
    min-height: min(68vh, 27rem);
  }
}

.selected-preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  font-weight: 900;
}

.selected-preview-pill .view-icon,
.selected-preview-pill .stat-icon-img {
  width: 1rem;
  height: 1rem;
}

.selected-preview-link,
.selected-preview-music {
  width: min(15rem, 100%);
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius);
  background: rgba(5, 55, 46, 0.72);
}

.selected-preview-link .link-icon-preview {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.selected-preview-link > span:last-child {
  margin-left: auto;
}

.selected-preview-music button {
  width: 2.4rem;
  height: 2.4rem;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
}

.premium-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.05rem;
  padding: 0 0.34rem;
  border: 1px solid color-mix(in srgb, var(--accent) 66%, white);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0;
}

.premium-preview-note {
  color: color-mix(in srgb, var(--accent) 72%, white) !important;
}

.drawer-form {
  grid-template-columns: 1fr;
  gap: 0.62rem;
}

.topbar {
  min-height: 4.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.topbar h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0;
}

.topbar p {
  margin: 0.42rem 0 0;
  color: var(--muted);
  max-width: 58rem;
  line-height: 1.5;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.owner-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.5rem 0 1.25rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--line);
}

.owner-dashboard-tabs button {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.owner-dashboard-tabs button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.owner-dashboard-tabs button.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(20rem, 0.96fr) minmax(22rem, 1.04fr);
  gap: 1rem;
  align-items: start;
}

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

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.panel-header h3,
.plan-card h3,
.saved-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.panel-header p,
.plan-card p,
.saved-card p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.92rem;
}

.panel-body {
  padding: 1rem;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.quick-actions-grid button {
  width: 100%;
  min-height: 3.1rem;
  justify-content: flex-start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.control,
.textarea,
.select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
  padding: 0.72rem 0.8rem;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  color: var(--text);
  background-color: #1a1a1a;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 1.05rem) 1.15rem / 0.42rem 0.42rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - 0.78rem) 1.15rem / 0.42rem 0.42rem no-repeat,
    rgba(255, 255, 255, 0.07);
  padding-right: 2.35rem;
}

.select option {
  color: #f8f8f3;
  background: #161616;
}

.textarea {
  min-height: 5.9rem;
  resize: vertical;
  line-height: 1.45;
}

.control:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(37, 208, 171, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 208, 171, 0.1);
}

.media-uploader {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.options-drawer .form-grid,
.options-drawer .drawer-form {
  gap: 0.62rem;
}

.options-drawer .field {
  min-width: 0;
  gap: 0.34rem;
}

.options-drawer .field > span,
.options-drawer .field > label,
.options-drawer .link-input-field span,
.options-drawer .link-field-caption {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.options-drawer .control,
.options-drawer .select,
.options-drawer .file-picker,
.options-drawer .toggle-line,
.options-drawer .range-line {
  min-height: 2.85rem;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
}

.options-drawer .control,
.options-drawer .select,
.options-drawer .textarea {
  padding: 0.68rem 0.76rem;
}

.options-drawer .textarea {
  min-height: 5.35rem;
}

.options-drawer .media-uploader {
  padding: 0.55rem;
  gap: 0.55rem;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.options-drawer .range-line {
  padding: 0 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
}

.options-drawer .range-line strong {
  min-width: 2.9rem;
  color: var(--text);
  text-align: right;
  font-size: 0.82rem;
}

.options-drawer .toggle-line {
  padding: 0.55rem 0.68rem;
}

.options-drawer .toggle-line span {
  color: var(--text);
  font-weight: 800;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.segmented button {
  min-height: 2.15rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-3);
}

.color-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.55rem;
}

.color-row input[type="color"] {
  width: 100%;
  height: 2.75rem;
  padding: 0.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.file-picker {
  min-width: 0;
  min-height: 2.75rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.file-picker:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, white);
  background: rgba(37, 208, 171, 0.08);
}

.file-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.file-picker span {
  min-width: 0;
  color: var(--text);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker em {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.file-picker strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.music-track-list {
  display: grid;
  gap: 0.55rem;
}

.music-track-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.music-track-row .control {
  grid-column: 2 / 3;
}

.music-track-row .music-track-icon-pick {
  grid-column: 1;
}

.music-track-row .file-picker,
.music-track-row .music-preview-audio {
  grid-column: 1 / -1;
}

.music-track-icon-pick {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--muted);
}

.music-track-icon-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-track-icon-pick i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.music-track-icon-pick i svg {
  width: 1.1rem;
  height: 1.1rem;
}

.music-track-icon-pick .file-picker {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.music-track-icon-pick .file-picker-icon {
  display: none;
}

.music-track-icon-clear {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: none;
  background: var(--danger, #ff6b6b);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.music-track-row .music-preview-audio {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 2.4rem;
  accent-color: var(--accent);
}

.options-drawer .music-track-list {
  gap: 0.6rem;
}

.options-drawer .music-track-row {
  grid-template-columns: 2.3rem minmax(0, 1fr) 2.6rem;
  gap: 0.55rem;
  padding: 0.68rem;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.12);
}

.options-drawer .music-track-row .icon-button {
  width: 3.2rem;
  min-height: 2.6rem;
  align-self: stretch;
}

.range-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem;
  gap: 0.75rem;
  align-items: center;
}

input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
}

.toggle-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.toggle-line span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

/* Przelacznik w siatce formularza (2 kolumny) - gdy ma byc na calym wierszu, zeby dlugi opis nie byl
   wciskany w pol szerokosci panelu i nie zachodzil na sam przelacznik. */
.toggle-line.full {
  grid-column: 1 / -1;
}

/* Etykieta pola (nick / nazwa / opis) z przyciskiem "Edytuj" po prawej - otwiera okno wygladu tego pola. */
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.options-drawer .field-head > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}

.field-edit-button {
  flex: 0 0 auto;
  padding: 0.22rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent, #25d0ab) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #25d0ab) 14%, transparent);
  color: var(--text, #fff);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.field-edit-button:hover {
  background: color-mix(in srgb, var(--accent, #25d0ab) 28%, transparent);
}

/* "✏️ Edytuj" w wierszach opcji (efekt tla, muzyka, karta, zegar, kolory linkow...) - zostaje malym przyciskiem, nie rozciaga sie
   na cala komorke siatki ani nie zawija napisu. */
.field-edit-button {
  white-space: nowrap;
  align-self: center;
}

.link-colors-open.field-edit-button,
.media-field > .field-edit-button {
  justify-self: start;
  width: fit-content;
}

/* Osobne przyciski edycji w panelu Profil: Pisanie i dzwiek. */
.profile-text-editors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.profile-text-editors .secondary-button {
  width: 100%;
  white-space: normal;
}

.key-sound-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.badge-visibility-list {
  display: grid;
  gap: 0.6rem;
}

.badge-visibility-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--line)) 30%, var(--line));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.badge-visibility-row {
  border-color: color-mix(in srgb, var(--badge-color, var(--line)) 40%, var(--line));
}

.badge-color-override-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem;
}

.badge-color-override-row span {
  color: var(--muted);
  font-size: 0.82rem;
  margin-right: 0.2rem;
}

.badge-color-override-row input[type="color"] {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  flex: 0 0 auto;
}

.badge-color-override-row input.control {
  flex: 1 1 auto;
  min-width: 0;
}

.badge-visibility-info {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--text) !important;
  font-weight: 700;
}

.badge-visibility-art {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 24%, transparent);
  color: var(--badge-color, var(--accent));
  overflow: hidden;
}

.badge-visibility-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-subhead {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(37, 208, 171, 0.08), rgba(255, 255, 255, 0.025));
}

.style-subhead.full {
  grid-column: 1 / -1;
}

.danger-zone-head {
  margin-top: 1.1rem;
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, transparent), rgba(255, 255, 255, 0.02));
}

.danger-zone-head strong {
  color: var(--danger);
}

.style-subhead strong {
  font-size: 0.96rem;
}

.style-subhead span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.color-field .color-row {
  min-width: 0;
}

.cursor-preview-box {
  display: grid;
  place-items: center;
  height: 6rem;
  margin: 0.6rem 0 0.9rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px);
  color: var(--muted);
  font-size: 0.82rem;
}

.cursor-preview-box-large {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  font-size: 1rem;
}

.cursor-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cursor-option-grid .bgfx-option {
  padding: 0.6rem 0.4rem;
}

.choice-chip-field {
  display: grid;
  gap: 0.4rem;
}

.choice-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.choice-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.choice-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
}

.choice-chip-icon {
  font-style: normal;
  line-height: 1;
}

.switch {
  appearance: none;
  width: 3.1rem;
  height: 1.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 74%, #151515);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.switch::before {
  content: "";
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  left: 0.21rem;
  top: 0.18rem;
  background: #fff;
  transition: transform 160ms ease;
}

.switch:checked {
  border-color: color-mix(in srgb, var(--accent) 76%, white);
  background: var(--accent);
}

.switch:checked::before {
  transform: translateX(1.42rem);
}

.links-list {
  display: grid;
  gap: 0.65rem;
}

.custom-text-list {
  display: grid;
  gap: 0.7rem;
}

.custom-text-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.options-drawer .custom-text-row {
  grid-template-columns: 1fr;
  gap: 0.58rem;
  padding: 0.68rem;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.12);
}

.custom-text-row-compact,
.options-drawer .custom-text-row-compact {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.custom-text-row-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.link-row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.95fr) minmax(7rem, 1fr) minmax(9rem, 1.25fr) 3.4rem;
  gap: 0.5rem;
  align-items: end;
}

.options-drawer .links-list {
  gap: 0.6rem;
}

.options-drawer .link-row {
  grid-template-columns: 1fr 3.2rem;
  gap: 0.58rem;
  align-items: stretch;
  padding: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.12);
}

.options-drawer .link-icon-field,
.options-drawer .link-input-field,
.options-drawer .link-colors-open {
  grid-column: 1 / -1;
}

.link-colors-open {
  text-align: left;
}

.options-drawer .link-row > .icon-button {
  grid-column: 2;
  grid-row: 1;
  width: 3.2rem;
  min-height: 2.6rem;
  align-self: start;
}

.link-icon-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}

.link-field-caption {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.link-input-field {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.link-input-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.link-icon-field .file-picker {
  min-height: 2.55rem;
  padding: 0.55rem 0.62rem;
}

.link-icon-field .danger-button {
  grid-column: 1 / -1;
  min-height: 2.2rem;
}

.options-drawer .link-icon-field {
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: end;
}

.options-drawer .link-icon-field .file-picker {
  min-height: 2.6rem;
}

.options-drawer .link-icon-field .danger-button {
  grid-column: 2;
  min-height: 2.35rem;
  width: fit-content;
}

.link-icon-preview {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.link-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.link-icon-preview span,
.link-icon-preview strong {
  max-width: 100%;
  padding: 0.2rem;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.link-icon-preview strong {
  color: var(--text);
  font-size: 0.8rem;
}

.emoji-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 1fr 1.4fr 2.75rem;
  gap: 0.5rem;
  align-items: center;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.metric-card {
  min-height: 5rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  align-content: center;
  gap: 0.15rem;
}

.metric-card strong {
  font-size: 1.65rem;
  line-height: 1;
}

.metric-card span,
.muted-cell {
  color: var(--muted);
}

.mini-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.mini-chart {
  padding: 0.8rem 0.9rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.mini-chart-title {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.mini-chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.mini-chart-baseline {
  stroke: var(--line);
  stroke-width: 1;
}

.mini-chart-value {
  fill: var(--text);
  font-size: 9px;
  font-weight: 700;
}

.mini-chart-axis {
  fill: var(--faint);
  font-size: 8px;
}

.owner-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.owner-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 68rem;
}

.owner-table th,
.owner-table td {
  padding: 0.78rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.owner-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.035);
}

.owner-table td span {
  display: block;
  color: var(--muted);
  margin-top: 0.15rem;
}

.owner-tools {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
}

.owner-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.badge-library {
  display: grid;
  gap: 0.5rem;
}

.badge-library-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.badge-auto-grant-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.badge-auto-grant-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.badge-auto-grant-row input[type="datetime-local"] {
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 0.82rem;
}

.badge-auto-grant-status {
  font-size: 0.78rem;
  color: var(--muted);
}

.badge-auto-grant-status.is-active {
  color: var(--accent);
}

.badge-builder {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(9rem, 1fr) minmax(7rem, 0.75fr) minmax(10rem, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.owner-badge-builder {
  grid-template-columns: minmax(11rem, 0.9fr) minmax(10rem, 0.85fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) minmax(9rem, 0.9fr) minmax(12rem, 1fr) auto;
}

.badge-builder > div {
  display: grid;
  gap: 0.2rem;
  align-self: center;
}

.badge-builder-copy span {
  color: var(--muted);
  font-size: 0.86rem;
}

.compact-field {
  gap: 0.35rem;
}

.badge-pill {
  position: relative;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--accent)) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--badge-color, var(--accent)) 72%, white);
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    width 0.18s ease,
    max-width 0.18s ease,
    padding 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.badge-pill.has-remove {
  padding-right: 0;
}

.badge-pill:hover,
.badge-pill:focus-within {
  width: auto;
  max-width: min(18rem, 100%);
  gap: 0.45rem;
  padding: 0 0.7rem;
  justify-content: flex-start;
}

.badge-pill.has-remove:hover,
.badge-pill.has-remove:focus-within {
  padding: 0 2.15rem 0 0.7rem;
}

.badge-pill-label {
  min-width: 0;
  max-width: 0;
  display: block;
  line-height: 1.2;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    max-width 0.18s ease,
    opacity 0.14s ease;
}

.badge-pill:hover .badge-pill-label,
.badge-pill:focus-within .badge-pill-label,
.badge-toggle:hover .badge-pill-label,
.badge-toggle:focus-within .badge-pill-label,
.profile-badge:hover .badge-pill-label,
.profile-badge:focus-within .badge-pill-label,
.profile-badge.badge-label-always .badge-pill-label,
.badge-labels-visible .profile-badge .badge-pill-label {
  max-width: 12rem;
  opacity: 1;
}

.badge-pill strong {
  color: var(--badge-color, var(--accent));
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  margin-inline: auto;
  font-size: 0.95rem;
  line-height: 1;
  transition: margin 0.18s ease;
}

.badge-pill:hover > strong,
.badge-pill:focus-within > strong,
.badge-pill:hover > .badge-art,
.badge-pill:focus-within > .badge-art {
  margin-inline: 0;
}

.badge-remove-button {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--accent)) 42%, transparent);
  color: var(--danger);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.badge-pill:hover .badge-remove-button,
.badge-pill:focus-within .badge-remove-button {
  opacity: 1;
  pointer-events: auto;
}

.badge-art {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  transition: margin 0.18s ease;
}

.badge-pill > .badge-art,
.profile-badge > .badge-art {
  margin-inline: auto;
}

.badge-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--badge-image-fit, cover);
  object-position: var(--badge-image-position-x, 50%) var(--badge-image-position-y, 50%);
  transform: scale(var(--badge-image-zoom, 1));
  transform-origin: var(--badge-image-position-x, 50%) var(--badge-image-position-y, 50%);
  pointer-events: none;
  user-select: none;
}

.badge-art.badge-icon-visual {
  color: var(--badge-color, var(--accent));
}

.badge-art.badge-icon-visual svg {
  width: 62%;
  height: 62%;
  display: block;
}

.badge-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.badge-icon-option {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.badge-icon-option svg {
  width: 1.1rem;
  height: 1.1rem;
}

.badge-icon-option:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--text);
}

.badge-icon-option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.badge-icon-option-wrap {
  position: relative;
}

.badge-icon-remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #1a1a1a;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.badge-icon-remove:hover {
  color: #ff6b6b;
  border-color: #ff6b6b;
}

.badge-icon-upload {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
}

.badge-icon-upload-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.badge-icon-upload-row .control {
  flex: 1 1 10rem;
}

.badge-icon-upload-button {
  cursor: pointer;
  white-space: nowrap;
}

.badge-draft-preview {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
  align-content: end;
}

.badge-draft-pill {
  justify-self: start;
  max-width: 100%;
}

.badge-file-field {
  min-width: 0;
}

.badge-file-field .file-picker {
  min-height: 2.6rem;
}

.badge-file-field .file-picker em {
  text-align: left;
}

.badge-draft-preview .mini-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.table-control {
  width: 6.8rem;
  min-height: 2.35rem;
  padding: 0 0.65rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

select.table-control {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 1rem) 1.18rem / 0.4rem 0.4rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - 0.74rem) 1.18rem / 0.4rem 0.4rem no-repeat,
    rgba(255, 255, 255, 0.055);
  padding-right: 2.1rem;
  cursor: pointer;
}

select.table-control option {
  color: #f8f8f3;
  background: #161616;
}

.table-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.table-switch span {
  margin: 0 !important;
}

.badge-check-list {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 14rem;
}

.owner-badge-check-list {
  min-width: 18rem;
}

.badge-toggle {
  cursor: pointer;
}

.badge-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.badge-toggle > span {
  box-sizing: border-box;
  width: 2rem;
  max-width: 2rem;
  height: 2rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted) !important;
  font-size: 0.84rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    max-width 0.18s ease,
    width 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.badge-toggle:hover > span,
.badge-toggle:focus-within > span {
  gap: 0.35rem;
  width: auto;
  max-width: 16rem;
  padding: 0 0.6rem;
  justify-content: flex-start;
}

.badge-art.badge-symbol-visual strong {
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 800;
  color: var(--badge-color, var(--accent));
}

.badge-toggle .badge-art {
  width: 1.05rem;
  height: 1.05rem;
  flex-basis: 1.05rem;
}

.badge-toggle input:checked + span {
  border-color: color-mix(in srgb, var(--badge-color, var(--accent)) 58%, transparent);
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 16%, transparent);
  color: color-mix(in srgb, var(--badge-color, var(--accent)) 74%, white) !important;
}

.owner-verified-toggle > span {
  min-width: 2rem;
  justify-content: center;
}

.owner-verified-toggle:hover > span,
.owner-verified-toggle:focus-within > span {
  min-width: 8.5rem;
}

.owner-table code {
  color: var(--accent-3);
  overflow-wrap: anywhere;
}

.plan-pill {
  display: inline-flex !important;
  width: fit-content;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(37, 208, 171, 0.34);
  border-radius: 999px;
  color: var(--accent) !important;
  background: rgba(37, 208, 171, 0.08);
  font-weight: 800;
}

.table-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.mini-button,
.icon-button,
.chip-button {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 800;
  white-space: nowrap;
}

.primary-button {
  border-color: rgba(37, 208, 171, 0.64);
  background: var(--accent);
  color: #061713;
}

.primary-button:hover {
  background: #36e3bd;
}

.secondary-button {
  color: var(--text);
}

.mini-button {
  min-height: 2.35rem;
  padding: 0 0.75rem;
  color: var(--muted);
}

/* Baza dla WSZYSTKICH malych przyciskow-ikon "x" (zarowno "Zamknij" jak i "Usun ...") - kolor
   czerwony i szersze tlo dotycza obu wariantow, nie tylko tych z .danger-button. Emoji w innych
   .icon-button (np. 🔗/🌍/🔒 przy udostepnianiu schematu) same w sobie sa kolorowe, wiec `color`
   ich wizualnie nie zmienia. */
.icon-button {
  width: 3.4rem;
  padding: 0;
  font-size: 1.3rem;
  color: var(--danger);
}

.danger-button {
  color: var(--danger);
}

.status-pill {
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(86, 227, 159, 0.32);
  color: var(--ok);
  background: rgba(86, 227, 159, 0.09);
  font-size: 0.82rem;
  font-weight: 800;
}

.status-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: currentColor;
}

.preview-shell {
  position: sticky;
  top: 1.25rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.profile-tool-drawer {
  width: 3.1rem;
  min-height: 18rem;
  position: sticky;
  top: 1.25rem;
  z-index: 8;
  overflow: visible;
}

.drawer-tab {
  width: 3.1rem;
  min-height: 8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(8, 8, 8, 0.86);
  color: var(--accent);
  font-weight: 900;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 2.85rem;
  width: min(18rem, calc(100vw - 5rem));
  max-height: calc(100vh - 3rem);
  overflow: auto;
  padding: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(10, 10, 10, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.6rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.profile-tool-drawer.is-open .drawer-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.drawer-close-actions,
.drawer-close-button {
  margin-top: 0.8rem;
  width: 100%;
}

.drawer-close-actions .secondary-button {
  width: 100%;
}

.drawer-panel h3 {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.9rem;
}

.drawer-toggles {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.options-drawer .drawer-toggles {
  gap: 0.5rem;
  margin-bottom: 0;
}

.layout-toggle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.options-drawer .layout-toggle-grid,
.options-drawer .drawer-toggles {
  grid-template-columns: 1fr;
}

.drawer-toggle-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.drawer-toggle {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.options-drawer .drawer-toggle {
  min-height: 2.85rem;
  padding: 0.55rem 0.68rem;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.drawer-toggle {
  justify-content: space-between;
  cursor: pointer;
}

.drawer-hint,
.readonly-box {
  color: var(--muted);
  line-height: 1.45;
}

.readonly-box {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.options-drawer .readonly-box {
  min-height: 3.1rem;
  padding: 0.75rem;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
}

.readonly-box.full {
  grid-column: 1 / -1;
}

.readonly-box strong {
  color: var(--text);
}

.compact-field {
  margin-bottom: 0.85rem;
}

.device {
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 2.5rem);
  min-height: 36rem;
  width: min(100%, 27rem);
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 2rem;
  background: #050505;
  box-shadow: var(--shadow);
  position: relative;
}

.profile-page {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  color: var(--profile-text-color, #fff);
  isolation: isolate;
}

.profile-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border: var(--page-frame-width, 0) solid var(--page-frame-color, transparent);
  box-shadow:
    inset 0 0 var(--page-frame-glow, 0) var(--page-frame-glow-color, transparent),
    0 0 var(--page-frame-outer-glow, 0) var(--page-frame-glow-color, transparent);
}

/* .profile-section.profile-udi (nie samo .profile-udi) - UID zawsze ma na sobie tez klase
   .profile-section, ktora dalej w tym pliku ustawia "position: relative" jako domyslny stan
   (przed przeciagnieciem). Przy rownej specyficznosci (jedna klasa) wygrywalaby kolejnosc w
   pliku - .profile-section jest NIZEJ, wiec zawsze kasowal "position: absolute" ustawiony tutaj,
   dopoki UID nie dostal wlasnej pozycji (.section-floating). Efekt: swiezy profil (bez zapisanej
   pozycji UID) pokazywal odznake rozciagnieta na cala szerokosc zamiast malej plakietki w rogu -
   znikalo to dopiero po przeciagnieciu/zapisaniu wlasnej pozycji, bo wtedy .section-floating
   (dwie klasy, wyzsza specyficznosc) przejmowal "position: absolute" niezaleznie od kolejnosci. */
.profile-section.profile-udi {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  max-width: calc(100% - 1.5rem);
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--uid-bg-color, #050505) 72%, transparent);
  color: var(--uid-text-color, color-mix(in srgb, var(--profile-accent) 68%, white));
  font-size: 0.72rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.profile-bg,
.profile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

.profile-bg {
  background:
    linear-gradient(140deg, rgba(37, 208, 171, 0.26), transparent 32%),
    linear-gradient(310deg, rgba(255, 77, 109, 0.32), transparent 36%),
    #101010;
}

.profile-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.34)),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.08), transparent 18rem);
}

.noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.profile-content {
  position: absolute;
  inset: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, 5vw, 2rem);
  pointer-events: none;
}

.bio-card {
  width: min(100%, 23.5rem);
  min-height: min(23.5rem, calc(100vh - 2.4rem));
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--card-border-color, #ffffff) 42%, transparent);
  background: color-mix(in srgb, var(--card-bg-color, #0c0c0c) var(--card-glass, 72%), transparent);
  backdrop-filter: blur(var(--blur));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.38),
    0 0 var(--card-glow, 0px) color-mix(in srgb, var(--card-border-color, #ffffff) 48%, transparent);
  color: var(--card-text-color, #fff);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: auto;
}

.bio-card.card-floating {
  position: absolute;
  margin: 0;
}

/* Karta zawsze na drugim planie wzgledem widzetow/tekstow ze strony - gdy sie powieksza i najezdza
   na jakis widzet, to widzet ma byc NA wierzchu, nie pod karta. Karta ma tez klasy section-floating +
   section-page (z-index 3-4), a w DOM stoi PO widzetach strony, wiec bez tego wygrywala z nimi. Zaznaczona
   karta (po rozciagnieciu uchwytami) tez zostaje na dole - regula "zaznaczony na wierzch" jej nie dotyczy. */
.profile-page .bio-card.card-floating,
.immersive-preview .profile-page .bio-card.card-floating.is-selected {
  z-index: 2;
}

.profile-section {
  position: relative;
  /* .bio-card jest flexem (column) - BEZ tego kazda "inline" (nie-floating) sekcja jest normalnym
     flex-itemem z DOMYSLNYM flex-shrink:1, wiec gdy margin-top (patrz avoidInlineFloatingOverlap w
     app.js) zrobi sie duzy, przegladarka POTRAFI zamiast urosnieciem calej karty (co jest calym
     sensem tego systemu) ZGNIESC jakas sekcje ponizej jej naturalnego rozmiaru, zeby zmiescic sie w
     (zbyt waskim) auto-height kontenera - zweryfikowane bezposrednio jako zgloszony bug: awatar
     (zawsze 106x106px) renderowal sie jako cienki, plaski pasek (106x11px) zamiast kola, bo flex go
     scisnal zamiast pozwolic karcie urosnac. flex-shrink:0 czyni to STRUKTURALNIE niemozliwe - sekcja
     zawsze dostaje swoj pelny, naturalny rozmiar, karta rosnie (lub, w ostatecznosci, strona przewija
     sie), nigdy odwrotnie. */
  flex-shrink: 0;
}

.profile-section.section-floating {
  position: absolute;
  z-index: 4;
  margin: 0;
}

.profile-section.section-page {
  z-index: 3;
}

/* Widzet na swoim miejscu podstawowym (patrz layoutDefaultSlots w app.js) dostaje max-width
   szerokosci kolumny obok karty - dlugi tekst bez spacji musi sie wtedy zawinac, nie wystawac. */
.profile-section.section-floating.is-at-default {
  overflow-wrap: anywhere;
}

.profile-section.section-card {
  z-index: 4;
}

.profile-section.section-floating.profile-links {
  width: min(18rem, calc(100% - 1.3rem));
}

.profile-section.section-floating.profile-bio {
  width: min(18rem, calc(100% - 1.3rem));
  max-width: none;
}

.profile-section.section-floating.profile-handle {
  width: max-content;
  max-width: min(18rem, calc(100% - 1.3rem));
}

/* Nazwa (i wlasny tekst nizej) bez tego dostaje "shrink-to-fit" liczone od `left` do prawej krawedzi
   kontenera - translate(-50%) dziala tylko wizualnie - wiec przy prawej stronie karty/strony miala
   dostepna szerokosc ~0 i lamala sie w srodku slowa ("Prof / ilo"), mimo ze obok bylo mnostwo miejsca.
   max-content = naturalna szerokosc tekstu, zawija sie dopiero przy szerokosci calego kontenera. */
.profile-section.section-floating.name-section {
  width: max-content;
  max-width: calc(100% - 1.3rem);
}

.profile-section.section-floating.music-stack {
  width: min(20rem, calc(100% - 1.3rem));
}

/* Bez tego karta Discorda ma width:auto - przy przeciaganiu w prawa strone karty (left > ~50%),
   "shrink-to-fit" liczy dostepna szerokosc od "left" do prawej krawedzi karty (transform:
   translate(-50%,-50%) uzywany do wycentrowania na punkcie przeciagniecia dziala TYLKO wizualnie,
   po ukladzie - przegladarka i tak liczy dostepna przestrzen tak, jakby lewa krawedz zaczynala sie
   w punkcie "left"), wiec przy lewym %> 50 dostepne miejsce bywa wezsze niz potrzeba, a status/opis
   aktywnosci obcinaja sie wielokropkiem mimo ze "wizualnie" jest mnostwo wolnego miejsca obok. */
.profile-section.section-floating.discord-block {
  width: min(16.5rem, calc(100% - 1.3rem));
}

.profile-custom-text {
  width: max-content;
  max-width: min(92%, 28rem);
  padding: 0.08rem 0.18rem;
  color: var(--custom-text-color, #fff);
  font-family: var(--custom-text-font, Inter, Arial, sans-serif);
  font-size: var(--custom-text-size, 2rem);
  font-weight: var(--custom-text-weight, 900);
  line-height: 1;
  text-align: center;
  white-space: pre-wrap;
  /* "anywhere" lamalo slowo w KAZDYM miejscu, nawet gdy bylo miejsce, zeby zawinac je calkiem na
     nowa linie (np. krotkie 2-3 literowe "resztki" osobno) - "break-word" lamie w srodku slowa
     TYLKO gdy samo slowo nie miesci sie w ogole na swojej linii (ostatecznosc, nie pierwszy wybor). */
  overflow-wrap: break-word;
  word-break: normal;
}

.profile-custom-text.has-shadow {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.65),
    0 0 var(--custom-text-glow, 18px) color-mix(in srgb, var(--custom-text-glow-color, var(--custom-text-color, #fff)) 55%, transparent);
}

.immersive-preview .profile-page {
  cursor: var(--editor-cursor-default, auto);
}

.immersive-preview .profile-section,
.immersive-preview .profile-udi {
  cursor: var(--editor-cursor-default, pointer);
}

.immersive-preview .profile-section {
  cursor: var(--editor-cursor-grab, grab);
  touch-action: none;
  user-select: none;
}

.immersive-preview .profile-section img,
.immersive-preview .profile-section video,
.immersive-preview .profile-bg,
.immersive-preview .profile-video {
  -webkit-user-drag: none;
  user-select: none;
}

.immersive-preview .profile-section:hover,
.immersive-preview .profile-udi:hover {
  outline: 1px dashed color-mix(in srgb, var(--profile-accent) 70%, white);
  outline-offset: 0.18rem;
}

/* Okragly avatar: przerywana ramka po najechaniu rysowala sie tuz przy krawedzi kola i na czarnym tle
   wygladala jak jasne, krzywe piksele. Zaznaczony avatar (klikniety) nadal ma wyrazna ramke ponizej. */
.immersive-preview .avatar-wrap:not(.is-selected):hover {
  outline: none;
}

.immersive-preview .profile-section.is-selected,
.immersive-preview .profile-udi.is-selected {
  outline: 2px solid color-mix(in srgb, var(--profile-accent) 82%, white);
  outline-offset: 0.28rem;
}

/* Zaznaczony element (floating, np. przeciagniety opis) idzie na sam wierzch, zeby dwie
   nakladajace sie sekcje o tym samym z-index nie chowaly sie nawzajem po wybraniu. */
.immersive-preview .profile-section.section-floating.is-selected,
.immersive-preview .profile-udi.section-floating.is-selected,
.immersive-preview .profile-stats.stats-floating.is-selected {
  z-index: 50;
}

.immersive-preview .profile-section.is-dragging {
  cursor: var(--editor-cursor-grabbing, grabbing);
  opacity: 0.52;
}

.immersive-preview .profile-section.is-drag-over {
  outline: 2px dashed var(--profile-accent);
  outline-offset: 0.35rem;
}

.immersive-preview .profile-section.is-drag-over.drop-after::after,
.immersive-preview .profile-section.is-drag-over:not(.drop-after)::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  height: 0.16rem;
  border-radius: 999px;
  background: var(--profile-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--profile-accent) 80%, transparent);
  z-index: 3;
}

.immersive-preview .profile-section.is-drag-over:not(.drop-after)::before {
  top: -0.45rem;
}

.immersive-preview .profile-section.is-drag-over.drop-after::after {
  bottom: -0.45rem;
}

.bio-card.compact {
  min-height: min(16rem, calc(100vh - 2.4rem));
  padding: 0.8rem;
}

.bio-card.flat {
  border-color: transparent;
  background: color-mix(in srgb, var(--card-bg-color, #080808) 72%, transparent);
  backdrop-filter: none;
}

.bio-card.neon {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-border-color, var(--profile-accent)) 60%, transparent),
    0 0 38px color-mix(in srgb, var(--card-border-color, var(--profile-accent)) 34%, transparent),
    0 22px 70px rgba(0, 0, 0, 0.38);
}

.bio-card.no-frame {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.avatar-wrap {
  position: relative;
  isolation: isolate;
  width: var(--avatar-size, 6.6rem);
  height: var(--avatar-size, 6.6rem);
  margin: 0 auto 0.8rem;
  border-radius: 999px;
  /* Obwodka to JEDEN, jednolity kolor wybrany przez usera (--avatar-ring-color). Wczesniej byl to gradient
     "twoj kolor -> kolor akcentu" plus biala ramka i biala poswiata - wygladalo jak kilka obwodek naraz. */
  padding: 0.3rem;
  border: 0;
  background: var(--avatar-ring-color, var(--profile-accent));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.avatar-wrap::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border-radius: inherit;
  background: var(--avatar-bg-color, #161616);
  z-index: 0;
  pointer-events: none;
}

.avatar-wrap.profilo-logo-avatar {
  width: min(14rem, 62vw);
  height: auto;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.avatar-wrap.profilo-logo-avatar::before {
  display: none;
}

.profilo-logo-avatar .avatar {
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 0 24px rgba(37, 208, 171, 0.26));
}

.avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: var(--avatar-fit, cover);
  /* Kadr = punkt zaczepienia: object-position przesuwa okno zdjecia (gdy zdjecie nie jest kwadratem), a
     przyblizenie rosnie WOKOL tego samego punktu - dzieki temu da sie dojechac do kazdej czesci zdjecia
     i nigdzie nie pokazuje sie puste tlo (wczesniej przesuwalo sie cale pudelko z juz przycietym zdjeciem). */
  object-position: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  display: block;
  background: var(--avatar-bg-color, #161616);
}

.empty-avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  color: var(--avatar-ring-color, #080808);
  font-weight: 950;
  font-size: clamp(1.5rem, calc(var(--avatar-size, 106px) / 3), 4.2rem);
  background: var(--avatar-bg-color, #fff);
}

.text-fx-target {
  display: inline;
}

.text-fx-fade {
  animation: text-fx-fade ease-in-out infinite;
  animation-duration: var(--fx-text-speed, 3s);
}

@keyframes text-fx-fade {
  0%,
  100% {
    opacity: 0.08;
  }
  50% {
    opacity: 1;
  }
}

.profile-name {
  margin: 0;
  font-family: var(--name-font, Inter, Arial, sans-serif);
  font-size: var(--name-size, 34px);
  font-weight: var(--name-weight, 900);
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  color: var(--name-color, #fff);
  text-shadow: 0 0 var(--name-glow, 0px) color-mix(in srgb, var(--name-color, #fff) 58%, transparent);
}

.profile-badge-list {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.45rem;
  vertical-align: middle;
  flex-wrap: wrap;
}

.profile-badge {
  --profile-badge-size: 1.28rem;
  width: 1.28rem;
  max-width: 1.28rem;
  min-width: 1.28rem;
  height: var(--profile-badge-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--accent)) 64%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 18%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--badge-color, var(--accent)) 24%, transparent);
  color: color-mix(in srgb, var(--badge-color, var(--accent)) 72%, white);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    max-width 0.18s ease,
    width 0.18s ease,
    padding 0.18s ease,
    background 0.18s ease,
    transform 0.2s ease;
}

.profile-badge:hover,
.profile-badge:focus-within,
.profile-badge.badge-label-always,
.badge-labels-visible .profile-badge {
  width: auto;
  max-width: 12rem;
  gap: 0.35rem;
  padding: 0 0.42rem;
}

.profile-badge.badge-label-always > strong,
.profile-badge.badge-label-always > .badge-art,
.badge-labels-visible .profile-badge > strong,
.badge-labels-visible .profile-badge > .badge-art {
  margin-inline: 0;
}

.profile-badge > strong {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  display: grid;
  place-items: center;
  margin-inline: auto;
  line-height: 1;
  color: var(--badge-color, var(--accent));
  transition: margin 0.18s ease;
}

.profile-badge .badge-art {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
}

.profile-badge:hover > strong,
.profile-badge:focus-within > strong,
.profile-badge:hover > .badge-art,
.profile-badge:focus-within > .badge-art {
  margin-inline: 0;
}

.profile-badge .badge-pill-label {
  line-height: 1;
}

.profile-handle {
  margin: 0.35rem 0 0;
  font-family: var(--handle-font, Inter, Arial, sans-serif);
  font-size: var(--handle-size, 14px);
  color: var(--handle-color, color-mix(in srgb, var(--profile-accent) 72%, white));
  font-weight: var(--handle-weight, 850);
  overflow-wrap: anywhere;
  text-shadow: 0 0 var(--handle-glow, 0px) color-mix(in srgb, var(--handle-color, var(--profile-accent)) 58%, transparent);
}

.profile-bio {
  margin: 0.72rem auto 0;
  max-width: 18.5rem;
  font-family: var(--bio-font, Inter, Arial, sans-serif);
  font-size: var(--bio-size, 16px);
  font-weight: var(--bio-weight, 500);
  color: var(--bio-color, rgba(255, 255, 255, 0.82));
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-shadow: 0 0 var(--bio-glow, 0px) color-mix(in srgb, var(--bio-color, #fff) 44%, transparent);
}

.profile-stats {
  width: fit-content;
  margin: 0.75rem 0 0 auto;
  display: inline-flex;
}

.profile-stats.stats-floating {
  position: absolute;
  z-index: 4;
  margin: 0;
  display: inline-flex;
}

.stats-page {
  z-index: 3;
}

.stats-slot-top-left,
.section-slot-top-left {
  top: 0.65rem;
  left: 0.65rem;
}

.stats-slot-top-center,
.section-slot-top-center {
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
}

.stats-slot-top-right,
.section-slot-top-right {
  top: 0.65rem;
  right: 0.65rem;
}

.stats-slot-middle-left,
.section-slot-middle-left {
  top: 50%;
  left: 0.65rem;
  transform: translateY(-50%);
}

.stats-slot-center,
.section-slot-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stats-slot-middle-right,
.section-slot-middle-right {
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
}

.stats-slot-bottom-left,
.section-slot-bottom-left {
  bottom: 0.65rem;
  left: 0.65rem;
}

.stats-slot-bottom-center,
.section-slot-bottom-center {
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
}

.stats-slot-bottom-right,
.section-slot-bottom-right {
  right: 0.65rem;
  bottom: 0.65rem;
}

.immersive-preview .profile-section.is-dragging-position {
  outline: 2px solid var(--profile-accent);
  outline-offset: 0.28rem;
  opacity: 0.28;
  cursor: var(--editor-cursor-grabbing, grabbing);
}

/* Uchwyty do rozciagania sa zawsze w DOM (patrz ensureSectionResizeHandles w app.js) - chowane
   tutaj w CSS, dopoki sekcja nie jest zaznaczona. Zwykle, male kwadraty w rogach (standardowe uchwyty
   zaznaczenia, bez wlasnych strzalek - user nie chcial customowych strzalek, kursor zostaje
   systemowy, patrz nwse-resize/nesw-resize nizej). Calkiem niewidzialne uchwyty (poprzednia wersja)
   byly nie do znalezienia - user wprost: "nie moge w ogole znalezc takiej opcji". */
.section-resize-handle {
  display: none;
  position: absolute;
  z-index: 60;
  width: 0.75rem;
  height: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.85);
  border-radius: 2px;
  user-select: none;
  touch-action: none;
}

.immersive-preview .profile-section.section-floating.is-selected > .section-resize-handle,
.immersive-preview .bio-card.is-selected > .section-resize-handle {
  display: block;
}

.section-resize-nw,
.section-resize-se {
  cursor: nwse-resize;
}

.section-resize-ne,
.section-resize-sw {
  cursor: nesw-resize;
}

.section-resize-nw {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.section-resize-se {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.section-resize-ne {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.section-resize-sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.immersive-preview .profile-section.is-resizing {
  opacity: 0.9;
}

.section-drag-ghost {
  z-index: 9999;
  pointer-events: none;
  opacity: 0.96;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.46));
  outline: 2px solid color-mix(in srgb, var(--profile-accent, #25d0ab) 78%, white);
  outline-offset: 0.25rem;
  transition: none !important;
}

.section-drag-ghost,
.section-drag-ghost * {
  pointer-events: none !important;
}

.alignment-guide {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--accent, #25d0ab) 72%, white);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #25d0ab) 70%, transparent);
  transition: opacity 80ms ease;
}

.alignment-guide.is-visible {
  opacity: 0.95;
}

.alignment-guide-vertical {
  width: 1px;
}

.alignment-guide-horizontal {
  height: 1px;
}

.alignment-guide-strong {
  background: color-mix(in srgb, var(--accent, #25d0ab) 86%, white);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32),
    0 0 22px color-mix(in srgb, var(--accent, #25d0ab) 84%, transparent);
}

.alignment-guide-vertical.alignment-guide-strong {
  width: 4px;
  transform: translateX(-2px);
}

.alignment-guide-horizontal.alignment-guide-strong {
  height: 4px;
  transform: translateY(-2px);
}

.default-position-guide {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--accent, #25d0ab) 55%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--accent, #25d0ab) 8%, transparent);
  opacity: 0.6;
  /* Ramka ROSNIE (skaluje sie) PLYNNIE w miare zblizania sie przeciaganego elementu - transform
     ustawiany wprost z JS (patrz setProgress() w createDefaultPositionGuide) - zeby reakcja byla
     widoczna juz przy samym najechaniu w poblize, a nie dopiero w ostatniej chwili przy puszczeniu
     (gdzie uznajemy to za "wystarczajaco blisko" i faktycznie resetujemy pozycje). */
  transform-origin: center;
  transition:
    transform 90ms ease,
    opacity 90ms ease,
    background 90ms ease,
    border-color 90ms ease;
}

.default-position-guide.is-armed {
  opacity: 1;
  border-style: solid;
  border-color: var(--accent, #25d0ab);
  background: color-mix(in srgb, var(--accent, #25d0ab) 22%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent, #25d0ab) 55%, transparent);
}

.default-position-guide.is-round {
  border-radius: 999px;
}

/* Duszek pokazujacy, GDZIE NAPRAWDE wyladuje przeciagany element, jesli puscisz go TERAZ (patrz
   createLandingGuide w bindSectionPositionDrag) - w odroznieniu od .default-position-guide (ktora
   pokazuje tylko miejsce PODSTAWOWE i tylko "jak blisko niego jestes"), ta ramka jest widoczna
   PRZEZ CALY czas przeciagania i NADAZA za kazdym ruchem myszy, pokazujac ostateczna, wolna od
   nachodzenia pozycje - user widzi WIELKI dokad to naprawde trafi, zanim jeszcze pusci przycisk,
   zamiast "upuszczam tu - dostaje tam" niespodzianki.  */
.landing-position-guide {
  position: fixed;
  z-index: 9996;
  pointer-events: none;
  border: 2px dashed color-mix(in srgb, #4fb4ff 70%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, #4fb4ff 10%, transparent);
  opacity: 0.85;
  transition:
    left 70ms ease,
    top 70ms ease,
    width 70ms ease,
    height 70ms ease;
}

.landing-position-guide.is-round {
  border-radius: 999px;
}

/* Duszek symulujacy, jak bardzo urosnie KARTA, jesli przeciagany element wyladuje tam, gdzie go
   wlasnie trzymasz (patrz simulateLandingAndGrowth) - widoczny TYLKO gdy przewidywany rozmiar karty
   jest realnie wiekszy niz jej biezacy, prawdziwy rozmiar (karta sama jeszcze sie nie zmienia, zeby
   nie myliło to z finalnym zapisem - to tylko podglad "tak by wygladalo, gdybys tu puscil"). */
.card-growth-guide {
  position: fixed;
  z-index: 9995;
  pointer-events: none;
  border: 2px dashed color-mix(in srgb, #ffb84f 65%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, #ffb84f 6%, transparent);
  opacity: 0.8;
  transition:
    left 90ms ease,
    top 90ms ease,
    width 90ms ease,
    height 90ms ease;
}

/* Czerwone podswietlenie widzetu, na ktory biezaco nachodzi przeciagany element (patrz
   overlapWarned w bindSectionPositionDrag) - czysto informacyjne ostrzezenie, nic nie blokuje. */
.immersive-preview .profile-section.is-overlap-warning {
  outline: 2px solid #ff4d4f;
  outline-offset: 0.2rem;
  background: color-mix(in srgb, #ff4d4f 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, #ff4d4f 55%, transparent);
}

.emoji-strip {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.emoji-link {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 45%, rgba(255, 255, 255, 0.2));
  background: color-mix(in srgb, var(--profile-accent) 22%, rgba(0, 0, 0, 0.42));
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-link img {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
  display: block;
}

.discord-status {
  margin-top: 0.8rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--discord-text-color, #ffffff) 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--discord-bg-color, #171717) 72%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--discord-text-color, rgba(255, 255, 255, 0.82));
  flex-wrap: wrap;
}

/* Ksztalty takie jak na prawdziwym Discordzie, nie same kolorowe kropki: online to zwykle pelne
   kolo, idle to "ksiezyc" (male kolo w kolorze tla odgryza kawalek z gory-lewej), dnd to kolo z
   pozioma "belka" na srodku, offline to pusty pierscien. Odgryzione/wyciete kawalki uzywaja tego
   samego koloru tla karty (--discord-bg-color), co juz wczesniej robil border pierscienia wokol
   avatara - wtapiaja sie w tlo zamiast byc osobnym, widocznym elementem. */
.discord-dot {
  position: relative;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: #80848e;
  overflow: hidden;
}

.discord-status.online .discord-dot {
  background: #23a55a;
}

.discord-status.idle .discord-dot {
  background: #f0b232;
}

.discord-status.idle .discord-dot::after {
  content: "";
  position: absolute;
  top: -18%;
  left: -18%;
  width: 72%;
  height: 72%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.dnd .discord-dot {
  background: #f23f42;
}

.discord-status.dnd .discord-dot::after {
  content: "";
  position: absolute;
  top: 38%;
  left: 18%;
  width: 64%;
  height: 24%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.offline .discord-dot::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.streaming .discord-dot {
  background: #a98bff;
}

.discord-status.discord-card {
  /* Bazowy .discord-status ma flex-wrap: wrap (potrzebne dla wariantu-pigulki) - w wariancie karty
     to powodowalo, ze przy wezszej/przeciagnietej karcie kolumna z nazwa i statusem spadala pod
     awatar jako osobny wiersz, zamiast zostac obok niego. Tekst i tak nie zawija sie "wewnatrz"
     (patrz .discord-card-sub: nowrap + ellipsis) - po prostu sie przytnie, jesli zabraknie miejsca. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  text-align: left;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
}

.discord-card-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
}

.discord-card-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.08);
}

.discord-card-status-ring {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: #80848e;
  border: 2.5px solid var(--discord-bg-color, #171717);
  overflow: hidden;
}

.discord-status.discord-card.online .discord-card-status-ring {
  background: #23a55a;
}

.discord-status.discord-card.idle .discord-card-status-ring {
  background: #f0b232;
}

.discord-status.discord-card.idle .discord-card-status-ring::after {
  content: "";
  position: absolute;
  top: -18%;
  left: -18%;
  width: 72%;
  height: 72%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.discord-card.dnd .discord-card-status-ring {
  background: #f23f42;
}

.discord-status.discord-card.dnd .discord-card-status-ring::after {
  content: "";
  position: absolute;
  top: 38%;
  left: 18%;
  width: 64%;
  height: 24%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.discord-card.offline .discord-card-status-ring::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  border-radius: 999px;
  background: var(--discord-bg-color, #171717);
}

.discord-status.discord-card.streaming .discord-card-status-ring {
  background: #a98bff;
}

.discord-card-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.discord-card-name {
  font-size: 1.05rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-card-sub {
  font-size: 0.85rem;
  opacity: 0.72;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opis aktywnosci (np. tytul utworu) moze byc dluzszy niz sam status ("Nie przeszkadzać") - w
   przeciwienstwie do niego NIE jest wiec obcinany wielokropkiem w jednej linijce, tylko zawija sie
   pod statusem (do 2 linii, dalej z sensownym limitem na wypadek naprawde dlugiego tekstu). Pusty
   (brak aktywnosci) - w ogole sie nie pokazuje, zeby nie zostawiac pustej linii w karcie. */
.discord-card-activity {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.74rem;
  opacity: 0.58;
  line-height: 1.25;
  word-break: break-word;
}

.discord-card-activity:empty {
  display: none;
}

.discord-block {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
  /* Ten sam problem i rozwiazanie co .faceit-card/.steam-card - bez tego status Discorda wygladal
     inaczej w zwyklym miejscu karty niz jako wolny element. */
  width: min(100%, 22rem);
}

.faceit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--faceit-bg-color, #0a0a0a) 72%, transparent);
  color: var(--faceit-text-color, #ffffff);
  /* "width: 100%" bylo kiedys celowo pominiete, bo po "wyciagnieciu" sekcji poza karte (floating/
     position:absolute) liczyloby sie wzgledem calej strony (.profile-page), nie tresci karty -
     element rozciagalby sie na cala szerokosc ekranu. ALE brak jakiegokolwiek width oznaczal, ze w
     zwyklym miejscu karta i tak rozciagala sie przez domyslny align-items:stretch rodzica
     (.bio-card), a jako wolny element kurczyla sie do szerokosci samej tresci (~150-190px) - TEN SAM
     widget wygladal wiec zupelnie inaczej w zaleznosci od pozycji. "min(100%, 22rem)" rozwiazuje
     oba problemy naraz: nigdy nie przekracza 22rem (bezpieczne nawet na calej stronie), a jest
     JEDNAKOWE niezaleznie od pozycji.
  */
  width: min(100%, 22rem);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.faceit-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.78rem;
}

.faceit-card-head strong {
  flex: 0 0 auto;
  color: #ff5500;
  letter-spacing: 0.02em;
}

.faceit-card-nick {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  opacity: 0.75;
}

.faceit-card.is-loading .faceit-card-body {
  opacity: 0.5;
}

.faceit-card-error {
  font-size: 0.72rem;
  opacity: 0.7;
}

.faceit-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.faceit-elo {
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

.faceit-level-ring {
  --ring-size: 2.4rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--level-color, #ff5500) calc(var(--level) * 36deg), rgba(255, 255, 255, 0.14) 0deg);
  flex: 0 0 auto;
}

.faceit-level-ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #141414;
}

.faceit-level-ring strong {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.faceit-matches {
  display: flex;
  gap: 0.4rem;
}

.faceit-match-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: inline-block;
  text-decoration: none;
  position: relative;
}

.faceit-match-dot.is-win {
  background: #2fd06a;
}

.faceit-match-dot.is-loss {
  background: #ff4d5e;
}

.faceit-match-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.faceit-match-dot:hover::after,
.faceit-match-dot:focus-visible::after {
  opacity: 1;
}

/* Ta sama struktura/te same zabezpieczenia przed przepelnieniem co .faceit-card wyzej (min-width:0 +
   grid-template-columns:minmax(0,1fr) + brak wymuszonego width:100% - patrz dlugi komentarz tam) -
   karta Steam ma dokladnie ten sam problem "wyciagniecia poza karte", wiec od razu ten sam fix. */
.steam-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--steam-bg-color, #0a0a0a) 72%, transparent);
  color: var(--steam-text-color, #ffffff);
  /* Patrz komentarz przy .faceit-card - ten sam problem (inny rozmiar w zwyklym miejscu vs jako
     wolny element), to samo rozwiazanie. */
  width: min(100%, 22rem);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.steam-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.78rem;
  color: inherit;
  text-decoration: none;
}

a.steam-card-head:hover .steam-card-head-info strong {
  text-decoration: underline;
}

.steam-inventory-item {
  display: block;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease;
}

.steam-inventory-item:hover {
  transform: translateY(-2px);
}

.steam-card-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.steam-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.steam-card-head-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.steam-card-head-info strong {
  color: #66c0f4;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.steam-card-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
  font-size: 0.74rem;
}

.steam-card.is-loading .steam-card-body {
  opacity: 0.5;
  /* Dopoki prawdziwe dane (CS2/osiagniecia/gablota) nie doladuja sie z /api/steam/:id (patrz
     bindSteamStats), ta sekcja jest pusta (brak tresci = brak wysokosci) - karta pokazywala sie wiec
     najpierw maleńka (sam naglowek z "Wczytywanie..."), po czym WIDOCZNIE "skakala" w dol/rosla w
     momencie doladowania tresci - zgloszony bug, zweryfikowany bezposrednio: zmierzona wysokosc
     .steam-card-body z pelna trescia (statystyki CS2 + pasek osiagniec + gablota przedmiotow, taki
     uklad jak w zgloszeniu) to ~135px. Rezerwujemy TYLE miejsca juz w stanie ladowania - karta ma
     wiec od razu docelowy rozmiar, zero skoku. Profile z mniejsza iloscia tresci (np. bez gabloty)
     moga przez to minimalnie skurczyc sie PO zaladowaniu zamiast urosnac - to swiadomy kompromis,
     bo skurczenie sie jest wizualnie dużo mniej rzucajace sie w oczy niz nagle "wyskoczenie" karty. */
  min-height: 8.5rem;
}

.steam-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.steam-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.steam-stat strong {
  font-size: 0.9rem;
  font-weight: 800;
}

.steam-stat span {
  font-size: 0.68rem;
  opacity: 0.68;
}

.steam-achievements {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
  opacity: 0.85;
}

.steam-achievements-bar {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.steam-achievements-fill {
  height: 100%;
  background: #66c0f4;
  border-radius: 999px;
}

.steam-inventory {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.steam-inventory-header {
  color: var(--muted, #b7b4aa);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.steam-inventory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.steam-inventory-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.steam-inventory-grid img {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--line, rgba(255, 255, 255, 0.18));
}

.steam-inventory-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

.steam-inventory-count strong {
  font-size: 1.3rem;
  line-height: 1.1;
}

.steam-inventory-count span {
  color: var(--muted, #b7b4aa);
  font-size: 0.68rem;
}

.discord-server-card {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--discord-text-color, #ffffff) 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--discord-bg-color, #171717) 72%, transparent);
  color: var(--discord-text-color, #fff);
  text-decoration: none;
  cursor: pointer;
}

.discord-server-card img {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.3);
}

.discord-server-card span {
  display: grid;
  line-height: 1.25;
  text-align: left;
}

.discord-server-card em {
  font-style: normal;
  font-size: 0.78rem;
  opacity: 0.75;
}

.discord-server-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.discord-server-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.discord-server-preview .discord-server-card {
  flex: 1 1 auto;
  pointer-events: none;
}

.clock-card,
.weather-card {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.75rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  /* Bez tego, w zwyklym ("inline") miejscu w karcie, .bio-card (flex-direction: column, domyslne
     align-items: stretch) rozciagal ten element na CALA szerokosc karty - a jako wolny element
     (position: absolute, wyjety z tego ukladu) wracal do naturalnej, dopasowanej do tresci
     szerokosci (to wlasnie oznacza "inline-flex"). Ten sam element wygladal wiec zupelnie inaczej
     (szeroka tabletka vs waska, dopasowana do tekstu) w zaleznosci od tego, czy ma wlasna pozycje -
     align-self: center przerywa to rozciaganie, wiec rozmiar jest juz zawsze taki sam. */
  align-self: center;
}

/* Domyslne wartosci --clock-bg-color/--weather-bg-color i ich text-color to #ffffff, zeby bez
   wlasnego koloru wyglad zostal DOKLADNIE taki jak wczesniej (ten sam subtelny bialy gradient
   zamiast nagle litego bialego tla) - color-mix do niskich % robi z bialego dokladnie to samo,
   co wczesniej bylo wpisane na sztywno jako rgba(255,255,255, 0.0X). */
.clock-card {
  border: 1px solid color-mix(in srgb, var(--clock-bg-color, #ffffff) 16%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--clock-bg-color, #ffffff) 10%, transparent), color-mix(in srgb, var(--clock-bg-color, #ffffff) 2%, transparent));
  color: var(--clock-text-color, rgba(255, 255, 255, 0.95));
}

.weather-card {
  border: 1px solid color-mix(in srgb, var(--weather-bg-color, #ffffff) 16%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--weather-bg-color, #ffffff) 10%, transparent), color-mix(in srgb, var(--weather-bg-color, #ffffff) 2%, transparent));
  color: var(--weather-text-color, rgba(255, 255, 255, 0.95));
}

.clock-card {
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  padding: 0.6rem 1.4rem;
}

.clock-card-time {
  font-family: var(--clock-font, "Space Grotesk", "Inter", sans-serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.clock-card-date {
  font-family: var(--clock-font, "Space Grotesk", "Inter", sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.7;
  /* Jawnie, zamiast polegac wylacznie na "align-items: center" rodzica (ktore centruje caly BOX
     tej linii, ale nie gwarantuje wycentrowania samego TEKSTU w nim, gdyby kiedys box byl szerszy
     niz tresc - np. przy zawijaniu na 2 linie) - belt-and-suspenders przeciwko "data przesunieta
     w lewo". */
  text-align: center;
  /* Szerokosc "dopasowanej do tresci" karty (inline-flex, patrz .clock-card) liczy sie troche
     INACZEJ w zwyklym miejscu (jako dziecko flexa .bio-card) niz jako wolny element (position:
     absolute, procent wzgledem kontenera) - obie powinny wyjsc "takie samo", ale zaokraglenia
     subpikselowe miedzy tymi dwoma trybami potrafily byc o wlos inne. Przy dacie balansujacej
     dokladnie na granicy zawijania ("Niedziela, 11 pazdziernika") ten jeden piksel roznicy
     wystarczal, zeby w jednym trybie zmiescila sie w jednej linii, a w drugim zawinela na dwie -
     caly pill nagle wygladal "inaczej" (wyzszy i chudszy) mimo tych samych ustawien. Zamiast gonic
     idealnie identyczna szerokosc miedzy dwoma roznymi systemami layoutu, po prostu nie pozwalamy
     tej linii zawijac sie wcale - zawsze jedna linia, niezaleznie od pozycji. */
  white-space: nowrap;
}

.weather-card-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04));
  flex: 0 0 auto;
}

.weather-card-info {
  display: grid;
  line-height: 1.18;
  text-align: left;
}

.weather-card-temp {
  font-family: var(--weather-font, "Space Grotesk", "Inter", sans-serif);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.weather-card-city {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.68;
  /* Ten sam problem i to samo rozwiazanie co .clock-card-date - patrz komentarz tam. */
  white-space: nowrap;
}

/* motyw: karta z paskiem po lewej */
.weather-theme-card {
  border-radius: 0.5rem;
  border-left: 0.28rem solid var(--profile-accent, var(--accent));
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
}

/* motyw: minimalny - sam tekst, bez tla */
.weather-theme-minimal {
  border: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0.2rem 0.1rem;
}

.weather-theme-minimal.weather-card .weather-card-icon {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  background: none;
}

/* motyw: neon - swiecaca obwodka w kolorze akcentu */
.weather-theme-neon {
  background: rgba(6, 6, 8, 0.72);
  border: 1px solid var(--profile-accent, var(--accent));
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--profile-accent, var(--accent)) 55%, transparent), inset 0 0 0.6rem color-mix(in srgb, var(--profile-accent, var(--accent)) 25%, transparent);
}

.weather-theme-neon .clock-card-time,
.weather-theme-neon .weather-card-temp {
  color: var(--profile-accent, var(--accent));
  text-shadow: 0 0 0.6rem color-mix(in srgb, var(--profile-accent, var(--accent)) 70%, transparent);
}

/* motyw: analogowy - tarcza ze wskazowkami nad cyfrowym czasem */
.clock-card.weather-theme-analog {
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem 0.7rem;
  gap: 0.2rem;
}

.clock-analog-face {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.45rem;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0deg 1.5deg, transparent 1.5deg 30deg),
    #121212;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.clock-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  border-radius: 2px;
  background: currentColor;
}

.clock-hand-hour {
  width: 3px;
  height: 24%;
  margin-left: -1.5px;
  margin-top: -24%;
}

.clock-hand-minute {
  width: 2px;
  height: 34%;
  margin-left: -1px;
  margin-top: -34%;
  background: #fff;
}

.clock-hand-second {
  width: 1px;
  height: 38%;
  margin-left: -0.5px;
  margin-top: -38%;
  background: #e8242a;
}

.clock-analog-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.clock-card-tz {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.55;
}

/* schematy wygladu */
.scheme-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.scheme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.scheme-row code {
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.scheme-actions {
  margin-top: 0.6rem;
}

.scheme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.scheme-card {
  display: grid;
  /* Bez tego kafelek mogl "urosnac" szerzej niz kontener, zeby zmiescic plakietke PRYWATNY/PUBLICZNY
     obok nazwy (ten sam blad co wczesniej przy .faceit-card/.steam-card - patrz komentarz tam) -
     domyslna, niejawna kolumna grida liczy sie wg max-content dzieci, nie dostepnej szerokosci. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  min-width: 0;
  overflow: hidden;
}

.scheme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.scheme-card-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.scheme-visibility-badge {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scheme-visibility-badge.is-public {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.scheme-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.scheme-card-meta code {
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.scheme-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.scheme-use-btn {
  flex: 1 1 auto;
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 999px;
}

.scheme-apply-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* muzyka: przedzial czasu */
.music-clip-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.music-clip-field input {
  width: 4.2rem;
}

/* plany / ulepsz */
.upgrade-button {
  border-color: color-mix(in srgb, var(--accent-3) 55%, transparent);
  color: var(--accent-3);
}

.plans-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 2vw, 1.3rem);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
}

.plans-shell {
  width: min(60rem, 100%);
  max-height: calc(100vh - 1.4rem);
  overflow: auto;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), #101114;
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.58);
}

.plans-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.plans-head strong {
  font-size: 1.2rem;
}

.plans-head span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.plan-card.is-current {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(18, 18, 18, 0.84));
}

.plan-card h4 {
  margin: 0;
  font-size: 1.1rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.plan-price strong {
  font-size: 1.6rem;
}

.plan-price span {
  color: var(--muted);
  font-size: 0.85rem;
}

.plan-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  flex: 1;
}

.plan-card li {
  padding-left: 1.1rem;
  position: relative;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.plans-note {
  margin: 0;
  color: var(--faint);
  font-size: 0.8rem;
  text-align: center;
}

.upgrade-requests-panel {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.upgrade-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.blocklist-panel {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.blocklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.blocklist-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.blocklist-column h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
}

.blocklist-count {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
}

.blocklist-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 11rem;
  overflow-y: auto;
}

.blocklist-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.blocklist-list li > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  word-break: break-word;
}

.blocklist-reason {
  color: var(--muted);
  font-size: 0.76rem;
}

.blocklist-empty {
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  border-style: dashed;
}

.blocklist-add-form {
  display: grid;
  gap: 0.35rem;
}

/* kursor niestandardowy */
.profile-page {
  cursor: var(--profile-cursor, auto);
}

/* czasteczki za kursorem - spawnowane w JS (bindCursorTrail), animacja i znikniecie w 100% CSS */
.cursor-trail-particle {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: var(--profile-cursor-trail-color, var(--accent));
  animation: cursor-trail-float 0.8s ease-out forwards;
  will-change: transform, opacity;
}

.cursor-trail-sparkle::before,
.cursor-trail-heart::before,
.cursor-trail-star::before {
  display: block;
  font-size: 1.1rem;
  line-height: 1;
}

.cursor-trail-sparkle::before {
  content: "✦";
}

.cursor-trail-heart::before {
  content: "♥";
}

.cursor-trail-star::before {
  content: "★";
}

.cursor-trail-bubble {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--profile-cursor-trail-color, var(--accent));
  opacity: 0.75;
}

.cursor-trail-custom {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

@keyframes cursor-trail-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% - 34px)) scale(0.4);
  }
}

/* efekty tla - z-index musi byc NEGATYWNY (ponizej .profile-content, ktory nie ma wlasnego
   z-index i wiec siedzi na "warstwie 0") - inaczej efekt (np. "Burza") renderuje sie NAD karta
   i tekstem zamiast pod nimi, tak jak prawdziwe tlo. */
.bgfx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--fx-color, #25d0ab);
}

.bgfx-wrap {
  position: absolute;
  display: block;
  transform: translate(var(--fx-mx, 0px), var(--fx-my, 0px));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bgfx-item {
  display: block;
}

.bgfx-particle {
  width: calc(0.35rem * var(--fx-size, 1));
  height: calc(0.35rem * var(--fx-size, 1));
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  opacity: 0.75;
  animation: bgfx-float-up linear infinite;
}

[data-fx-direction="up"] .bgfx-particle {
  animation-name: bgfx-float-up;
}

[data-fx-direction="down"] .bgfx-particle {
  animation-name: bgfx-float-down;
}

[data-fx-direction="left"] .bgfx-particle {
  animation-name: bgfx-float-left;
}

[data-fx-direction="right"] .bgfx-particle {
  animation-name: bgfx-float-right;
}

.bgfx-corner-stuck {
  animation: bgfx-corner-pulse ease-in-out infinite !important;
}

.bgfx-star {
  width: calc(0.85rem * var(--fx-size, 1));
  height: calc(0.85rem * var(--fx-size, 1));
  opacity: 0.9;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}

.bgfx-star-twinkle {
  animation: bgfx-star-twinkle ease-in-out infinite;
  animation-duration: var(--fx-twinkle-dur, 3s);
}

.bgfx-butterfly {
  display: block;
  width: calc(1.6rem * var(--fx-size, 1));
  height: calc(1.6rem * var(--fx-size, 1));
  opacity: 0.85;
  animation: bgfx-flutter ease-in-out infinite;
}

.bgfx-wing {
  transform-box: view-box;
  animation: bgfx-wing-flap ease-in-out infinite;
  animation-duration: var(--fx-flap-dur, 0.32s);
  animation-delay: var(--fx-flap-delay, 0s);
}

.bgfx-wing-left {
  transform-origin: 12px 12px;
}

.bgfx-wing-right {
  transform-origin: 12px 12px;
}

.bgfx-laser {
  width: 46vmax;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  box-shadow: 0 0 12px currentColor;
  opacity: 0;
  transform: rotate(var(--fx-angle, 30deg));
  animation: bgfx-laser-sweep-right linear infinite;
}

.bgfx-laser-dir-right {
  animation-name: bgfx-laser-sweep-right;
}

.bgfx-laser-dir-left {
  animation-name: bgfx-laser-sweep-left;
}

.bgfx-laser-dir-down {
  animation-name: bgfx-laser-sweep-down;
}

.bgfx-laser-dir-up {
  animation-name: bgfx-laser-sweep-up;
}

.bgfx-network {
  color: var(--fx-color, #25d0ab);
}

.bgfx-net-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bgfx-net-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 1.2px currentColor);
  animation: bgfx-net-pulse ease-in-out infinite;
  animation-duration: 3.4s;
  opacity: 0.85;
  transition: opacity 0.38s ease;
}

.bgfx-net-line {
  stroke: currentColor;
  stroke-width: 0.16;
  stroke-opacity: 0.4;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.38s ease;
}

.bgfx-net-dot.is-respawning {
  animation-play-state: paused;
  opacity: 0;
}

.bgfx-net-line.is-respawning {
  opacity: 0;
}

@keyframes bgfx-net-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.bgfx-keyboard {
  display: grid;
  place-items: center;
  color: var(--fx-color, #25d0ab);
}

.bgfx-keyboard-rows {
  display: grid;
  gap: 0.6vmin;
  width: min(92%, 64rem);
  transform: perspective(60rem) rotateX(8deg);
}

.bgfx-key-row {
  display: flex;
  justify-content: center;
  gap: 0.6vmin;
}

.bgfx-key {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.6vmin;
  height: 4.6vmin;
  max-width: 2.4rem;
  max-height: 2.4rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  animation: bgfx-key-light ease-in-out infinite;
}

.bgfx-key-idle {
  animation: none;
}

/* klawisze w trybie sekwencji (A -> B -> C ...) - JS przelacza klase co ustawiony krok czasu,
   zamiast losowej animacji CSS. */
.bgfx-key.is-lit {
  animation: none;
  background: color-mix(in srgb, currentColor 55%, transparent);
  border-color: currentColor;
  box-shadow: 0 0 1.1vmin currentColor;
}

.bgfx-key.is-lit .bgfx-key-letter {
  animation: none;
  opacity: 1;
}

.bgfx-key-space {
  width: calc(4.6vmin * 5);
  max-width: 12rem;
}

.bgfx-key-letter {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.5vmin;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--fx-color, #25d0ab);
  opacity: 0;
  animation-name: bgfx-key-letter-light;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: inherit;
  animation-duration: inherit;
}

@keyframes bgfx-key-light {
  0%,
  76%,
  100% {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
  86% {
    background: color-mix(in srgb, currentColor 55%, transparent);
    border-color: currentColor;
    box-shadow: 0 0 1.1vmin currentColor;
  }
}

@keyframes bgfx-key-letter-light {
  0%,
  76%,
  100% {
    opacity: 0;
  }
  86% {
    opacity: 1;
  }
}

/* wybor konkretnych klawiszy w GUI efektu tla (statyczna, klikalna klawiatura) */
.bgfx-keypick {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.4rem;
  width: 100%;
  min-width: 0;
}

.bgfx-keypick-rows {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  min-width: 0;
}

.bgfx-keypick-row {
  display: flex;
  gap: 0.22rem;
  width: 100%;
  min-width: 0;
}

.bgfx-keypick-key {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 1.8rem;
  padding: 0;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.62rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bgfx-keypick-key:hover {
  background: rgba(255, 255, 255, 0.09);
}

.bgfx-keypick-key.is-active {
  background: color-mix(in srgb, var(--key-color, var(--accent)) 45%, transparent);
  border-color: var(--key-color, var(--accent));
  color: #fff;
}

.bgfx-keypick-space {
  flex: 5 1 0;
}

.is-keyboard-picker .bgfx-keypick {
  gap: 0.75rem;
}

.is-keyboard-picker .bgfx-keypick-rows {
  gap: 0.45rem;
}

.is-keyboard-picker .bgfx-keypick-row {
  gap: 0.4rem;
}

.is-keyboard-picker .bgfx-keypick-key {
  height: 3.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 0.45rem;
}

.bgfx-keychip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bgfx-keychip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.bgfx-keychip-letter {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 1.1rem;
  text-align: center;
}

.bgfx-keychip-color {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.bgfx-keychip-color::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}

.bgfx-keychip-color::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.bgfx-keychip-order {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

.bgfx-keychip .mini-button {
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  min-width: 0;
}

.bgfx-keychip .icon-button {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.7rem;
}

/* efekt tla: burza (jedna, duza chmura na srodku u gory, ktora doleci z odbiciem, zacznie migac i wystrzeli
   postrzepiony piorun w dol, z krotkim rozblyskiem calego tla) */
.bgfx-storm-cloud {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 26vmin;
  max-width: 16rem;
  transform: translate(-50%, -240%) scale(0.85);
  opacity: 0;
  animation-name: bgfx-storm-fly;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.bgfx-cloud-body {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0.7vmin 1.1vmin rgba(0, 0, 0, 0.5)) brightness(0.94);
  animation-name: bgfx-storm-flicker;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: inherit;
  animation-duration: inherit;
}

.bgfx-cloud-puffs {
  fill: currentColor;
}

.bgfx-cloud-shade {
  fill: rgba(0, 0, 0, 0.22);
}

.bgfx-cloud-highlight {
  fill: rgba(255, 255, 255, 0.35);
}

.bgfx-bolt {
  position: absolute;
  left: 50%;
  top: 88%;
  width: 6vmin;
  max-width: 3.4rem;
  height: 42vh;
  transform: translateX(-50%) scaleY(0) scaleX(0.7);
  transform-origin: top center;
  opacity: 0;
  color: currentColor;
  filter: drop-shadow(0 0 1.2vmin currentColor) drop-shadow(0 0 2.6vmin currentColor);
  animation-name: bgfx-storm-bolt;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
  animation-iteration-count: infinite;
  animation-delay: inherit;
  animation-duration: inherit;
}

.bgfx-bolt-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bgfx-storm-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, currentColor, transparent 65%);
  opacity: 0;
  animation-name: bgfx-storm-flash;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes bgfx-storm-fly {
  0% {
    transform: translate(-50%, -240%) scale(0.85);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  22% {
    transform: translate(-50%, 9%) scale(1.05);
  }
  30% {
    transform: translate(-50%, -3%) scale(0.98);
  }
  36% {
    transform: translate(-50%, 0%) scale(1);
  }
  90% {
    transform: translate(-50%, 0%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) scale(0.88);
    opacity: 0;
  }
}

@keyframes bgfx-storm-flicker {
  0%,
  55%,
  100% {
    filter: drop-shadow(0 0.4vmin 0.6vmin rgba(0, 0, 0, 0.4)) brightness(0.94);
  }
  58%,
  64% {
    filter: drop-shadow(0 0 2.8vmin currentColor) brightness(1.7);
  }
  61%,
  67% {
    filter: drop-shadow(0 0.4vmin 0.6vmin rgba(0, 0, 0, 0.4)) brightness(0.94);
  }
  70% {
    filter: drop-shadow(0 0 3.6vmin currentColor) brightness(1.9);
  }
}

@keyframes bgfx-storm-bolt {
  0%,
  74%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0) scaleX(0.7);
  }
  75.5% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) scaleX(1);
  }
  78% {
    opacity: 0.15;
  }
  79.5% {
    opacity: 1;
  }
  81% {
    opacity: 0.35;
  }
  82.5% {
    opacity: 1;
  }
  86% {
    opacity: 0;
    transform: translateX(-50%) scaleY(1) scaleX(1);
  }
}

@keyframes bgfx-storm-flash {
  0%,
  74%,
  100% {
    opacity: 0;
  }
  75.5% {
    opacity: 0.55;
  }
  77% {
    opacity: 0.1;
  }
  79.5% {
    opacity: 0.45;
  }
  83% {
    opacity: 0;
  }
}

/* wybor efektu tla: gui na caly ekran */
.bgfx-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.bgfx-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 55000;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 2vw, 1.3rem);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
}

.bgfx-picker-shell {
  width: min(72rem, 100%);
  height: min(42rem, calc(100vh - 1.4rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
  gap: 1rem;
}

.bgfx-picker-shell.is-keyboard-picker {
  width: min(88rem, 100%);
  height: min(50rem, calc(100vh - 1.4rem));
  grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1fr);
}

.bgfx-picker-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: #101010;
}

.bgfx-picker-stage .profile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgfx-picker-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.bgfx-picker-side {
  display: grid;
  align-content: start;
  /* Wiersze maja wysokosc swojej tresci i nie wolno ich scisnac: przy przewijanym panelu siatka zwezala je do min-height,
     a dluzszy opis przelacznika wystawal poza ramke (panel wyboru efektu tla, stylu karty, muzyki...). */
  grid-auto-rows: max-content;
  gap: 0.9rem;
  padding: clamp(0.8rem, 1.5vw, 1.15rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), #101114;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.bgfx-picker-side::-webkit-scrollbar {
  width: 0.55rem;
}

.bgfx-picker-side::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

.bgfx-picker-side::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 74%, #111);
}

.bgfx-picker-side > * {
  min-width: 0;
}

.bgfx-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.bgfx-option {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
}

.bgfx-option:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.bgfx-option.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}

/* Kafelki motywu zegara/pogody: prawdziwa, mala plytka (te same klasy co na wizytowce) zamiast
   samego napisu z nazwa - od razu widac jak dany motyw wyglada, zamiast zgadywac po etykiecie. */
.theme-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.theme-tile {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
}

.theme-tile:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.theme-tile.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}

.theme-tile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.6rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #0c0c0c;
  pointer-events: none;
}

.theme-tile-preview .clock-card,
.theme-tile-preview .weather-card {
  transform: scale(0.62);
  margin: 0;
  pointer-events: none;
}

.link-layout-tile-preview .profile-link,
.link-layout-tile-preview .profile-link-icon-only {
  transform: scale(0.82);
  margin: 0;
  pointer-events: none;
}

.font-tile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.font-tile-preview {
  height: 4.4rem;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
}

/* Kafelki efektow maja pelna szerokosc panelu (bez wciskania dwoch w wasciwy rzad) - dluga nazwa, np.
   "Odszyfrowywanie", nie miesci sie w polowie waskiego panelu i wystawala poza kafelek. Na szerokim
   panelu auto-fit dalej uklada je po dwa obok siebie. */
.text-fx-option-grid {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.text-fx-option {
  padding: 1rem 0.6rem;
  min-height: 4rem;
}

.text-fx-option > span {
  max-width: 100%;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.text-fx-demo {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}

.text-fx-demo-fade {
  animation: text-fx-demo-fade 2.4s ease-in-out infinite;
}

@keyframes text-fx-demo-fade {
  0%,
  100% {
    opacity: 0.14;
  }
  50% {
    opacity: 1;
  }
}

.text-fx-demo-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 2px solid currentColor;
  animation:
    text-fx-demo-typewriter 2.6s steps(7, end) infinite,
    text-fx-demo-caret 0.65s steps(1, end) infinite;
}

@keyframes text-fx-demo-typewriter {
  0%,
  4% {
    width: 0;
  }
  38%,
  50% {
    width: 7ch;
  }
  88%,
  100% {
    width: 0;
  }
}

@keyframes text-fx-demo-caret {
  0%,
  49% {
    border-right-color: currentColor;
  }
  50%,
  100% {
    border-right-color: transparent;
  }
}

.text-fx-demo-rotate {
  position: relative;
  display: inline-grid;
  min-width: 4.4rem;
  min-height: 1.3rem;
}

.text-fx-demo-rotate em {
  grid-area: 1 / 1;
  font-style: normal;
  opacity: 0;
  animation: text-fx-demo-rotate-fade 3.6s steps(1, end) infinite;
}

.text-fx-demo-rotate em:nth-child(2) {
  animation-delay: 1.8s;
}

@keyframes text-fx-demo-rotate-fade {
  0%,
  8% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0;
  }
}

.text-fx-demo-scramble {
  font-family: "Space Grotesk", "Inter", monospace;
  letter-spacing: 0.03em;
  animation: text-fx-demo-scramble-glitch 2.2s steps(1, end) infinite;
}

@keyframes text-fx-demo-scramble-glitch {
  0%,
  76%,
  100% {
    opacity: 1;
    filter: none;
  }
  80% {
    opacity: 0.6;
    filter: blur(0.4px);
  }
  84% {
    opacity: 1;
  }
}

.text-fx-demo-slot {
  display: inline-block;
  animation: text-fx-demo-slot-drop 2.2s cubic-bezier(0.17, 0.89, 0.32, 1.35) infinite;
}

@keyframes text-fx-demo-slot-drop {
  0% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-55%);
    opacity: 0.4;
  }
  18%,
  85% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}

/* Prawdziwa (nie-demo) animacja na publicznej wizytowce (runTextSlot) - kazda litera to osobny
   span, ktory "spada" z gory z coraz wiekszym opoznieniem, jak kolejne bebny w automacie. */
.text-fx-slot-char {
  display: inline-block;
  animation: text-fx-slot-drop 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.4) both;
}

@keyframes text-fx-slot-drop {
  0% {
    transform: translateY(-130%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.bgfx-option-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.bgfx-option-icon-none {
  background: transparent;
  border: 1.5px dashed var(--faint);
}

.bgfx-option-icon-particles {
  background: radial-gradient(circle, var(--accent) 0 30%, transparent 32%) 20% 30% / 45% 45% no-repeat, radial-gradient(circle, var(--accent) 0 30%, transparent 32%) 70% 60% / 40% 40% no-repeat, radial-gradient(circle, var(--accent) 0 30%, transparent 32%) 50% 85% / 35% 35% no-repeat;
}

.bgfx-option-icon-butterflies {
  clip-path: polygon(50% 50%, 10% 15%, 5% 45%, 50% 50%, 5% 55%, 10% 85%, 50% 50%, 90% 85%, 95% 55%, 50% 50%, 95% 45%, 90% 15%);
}

.bgfx-option-icon-lasers {
  border-radius: 2px;
  background: linear-gradient(100deg, transparent, var(--accent), transparent);
}

.bgfx-option-icon-stars {
  background: radial-gradient(circle, #fff 0 15%, transparent 17%) 25% 25% / 35% 35% no-repeat, radial-gradient(circle, #fff 0 15%, transparent 17%) 70% 60% / 30% 30% no-repeat, radial-gradient(circle, var(--accent) 0 18%, transparent 20%) 50% 85% / 30% 30% no-repeat;
}

.bgfx-option-icon-network {
  border-radius: 4px;
  background: radial-gradient(circle, var(--accent) 0 16%, transparent 18%) 20% 25% / 40% 40% no-repeat, radial-gradient(circle, var(--accent) 0 16%, transparent 18%) 75% 30% / 40% 40% no-repeat, radial-gradient(circle, var(--accent) 0 16%, transparent 18%) 45% 75% / 40% 40% no-repeat, linear-gradient(115deg, transparent 45%, var(--accent) 46%, var(--accent) 48%, transparent 49%), linear-gradient(35deg, transparent 45%, var(--accent) 46%, var(--accent) 48%, transparent 49%);
}

.bgfx-option-icon-keyboard {
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 15%, transparent 15% 20%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 22%, transparent 22% 32%),
    radial-gradient(circle, var(--accent) 0 25%, transparent 27%) 30% 65% / 20% 20% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bgfx-option-icon-storm {
  border-radius: 3px;
  background:
    linear-gradient(200deg, var(--accent) 0 2px, transparent 2px) 48% 60% / 10% 45% no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 42%, transparent 44%) 35% 32% / 55% 46% no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 42%, transparent 44%) 62% 42% / 46% 38% no-repeat;
}

.music-style-icon {
  position: relative;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.music-style-icon-orb {
  border-radius: 999px;
}

.music-style-icon-pill,
.music-style-icon-bar {
  border-radius: 0.35rem;
  width: 1.9rem;
}

.music-style-icon-glass {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  backdrop-filter: blur(2px);
}

.music-style-icon-dock {
  border-radius: 0.5rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}

.music-style-icon-minimal {
  background: rgba(255, 255, 255, 0.08);
  border-style: dashed;
}

.music-style-picker-overlay .bgfx-picker-stage.music-style-stage {
  display: grid;
  place-items: center;
}

.music-style-stage .music-stack {
  position: relative;
  z-index: 1;
}

/* podglad w picker-ach "duzego UI" (karta, i inne w przyszlosci) ma pokazywac TYLKO to, co
   dana kategoria zmienia - bez tla strony, efektow tla i innych, nie zwiazanych elementow -
   i ma byc czysto poglądowy (wysrodkowany, bez przeciagania pozycji). */
.card-style-picker-overlay .bgfx-picker-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #0c0c0c;
}

.card-style-picker-overlay .bgfx-picker-stage.stage-bg-white {
  background: #f2f2f2;
}

/* Wyglad tekstu i Pogoda-i-czas: podglad ma pokazywac TYLKO to, co dana kategoria zmienia
   (nazwa/nick/opis albo zegar/pogoda) - bez reszty wizytowki (avatar, tlo, efekty, muzyka...). */
.bgfx-picker-stage.text-style-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
}

.text-style-stage-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem;
  max-width: 100%;
}

.stage-bg-field {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: -0.1rem 0 0.2rem;
}

.stage-bg-heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.stage-bg-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  cursor: pointer;
}

.stage-bg-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.stage-bg-swatch::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}

.stage-bg-swatch-black::before {
  background: #0c0c0c;
}

.stage-bg-swatch-white::before {
  background: #f2f2f2;
}

.stage-bg-switch {
  flex: 0 0 auto;
}

.card-style-picker-overlay .bgfx-picker-stage .profile-page {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
}

.card-style-picker-overlay .bgfx-picker-stage .bgfx,
.card-style-picker-overlay .bgfx-picker-stage .profile-shade,
.card-style-picker-overlay .bgfx-picker-stage .noise,
.card-style-picker-overlay .bgfx-picker-stage > .profile-page > [data-profile-section]:not(.profile-content) {
  display: none !important;
}

/* Prawdziwe tlo strony (obraz/kolor/wideo) MA byc widoczne w tym pickerze - inaczej przezroczystosc
   karty widac tylko na sztucznym czarnym/bialym tle, co nie pokazuje jak naprawde wyjdzie to na
   wizytowce (stad wrazenie "w ui dziala, w praktyce inaczej"). .profile-page jest position:static
   tutaj, wiec to tlo pozycjonuje sie wzgledem calej sceny (.bgfx-picker-stage), nie tylko karty. */
.card-style-picker-overlay .bgfx-picker-stage .profile-bg,
.card-style-picker-overlay .bgfx-picker-stage .profile-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card-style-picker-overlay .bgfx-picker-stage .profile-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 5vw, 2rem);
  pointer-events: none;
}

.card-style-picker-overlay .bgfx-picker-stage .bio-card.card-floating {
  position: static;
  transform: none !important;
}

/* Ten picker jest tylko od stylu KARTY (kolory/ramka/glow/przezroczystosc) - muzyka i licznik
   wyswietlen to osobne kategorie z wlasnym UI, wiec nie maja tu co robic w podgladzie. */
.card-style-picker-overlay .bgfx-picker-stage [data-profile-section="music"],
.card-style-picker-overlay .bgfx-picker-stage [data-profile-section="stats"] {
  display: none !important;
}

@keyframes bgfx-float-up {
  0% {
    transform: translateY(10vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-40vh) translateX(var(--fx-drift, 0));
    opacity: 0;
  }
}

@keyframes bgfx-float-down {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(40vh) translateX(var(--fx-drift, 0));
    opacity: 0;
  }
}

@keyframes bgfx-float-left {
  0% {
    transform: translateX(10vw) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(-40vw) translateY(var(--fx-drift, 0));
    opacity: 0;
  }
}

@keyframes bgfx-float-right {
  0% {
    transform: translateX(-10vw) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(40vw) translateY(var(--fx-drift, 0));
    opacity: 0;
  }
}

@keyframes bgfx-corner-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1);
  }
}

@keyframes bgfx-star-twinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes bgfx-flutter {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(calc(var(--fx-drift, 0) * 1), -3vh) rotate(8deg);
  }
  50% {
    transform: translate(calc(var(--fx-drift, 0) * -1), -8vh) rotate(-6deg);
  }
  75% {
    transform: translate(calc(var(--fx-drift, 0) * 1.4), -13vh) rotate(10deg);
  }
  100% {
    transform: translate(calc(var(--fx-drift, 0) * -0.6), -19vh) rotate(0deg);
  }
}

@keyframes bgfx-wing-flap {
  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }
  45% {
    transform: scaleX(0.3) scaleY(0.94);
  }
  55% {
    transform: scaleX(0.3) scaleY(0.94);
  }
}

@keyframes bgfx-laser-sweep-right {
  0% {
    transform: translateX(-60vw) rotate(var(--fx-angle, 30deg));
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(60vw) rotate(var(--fx-angle, 30deg));
    opacity: 0;
  }
}

@keyframes bgfx-laser-sweep-left {
  0% {
    transform: translateX(60vw) rotate(var(--fx-angle, 30deg));
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(-60vw) rotate(var(--fx-angle, 30deg));
    opacity: 0;
  }
}

@keyframes bgfx-laser-sweep-down {
  0% {
    transform: translateY(-60vh) rotate(var(--fx-angle, 90deg));
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(60vh) rotate(var(--fx-angle, 90deg));
    opacity: 0;
  }
}

@keyframes bgfx-laser-sweep-up {
  0% {
    transform: translateY(60vh) rotate(var(--fx-angle, 90deg));
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-60vh) rotate(var(--fx-angle, 90deg));
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .bgfx-picker-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(12rem, 1fr) auto;
  }
  .plans-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .discord-server-field,
  .scheme-apply-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.music-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.music-player-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.music-player-wrap.has-underglow::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -0.5rem;
  height: 0.9rem;
  background: var(--music-glow-color, var(--profile-accent));
  filter: blur(0.85rem);
  opacity: 0.55;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.music-mascot {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1;
  animation: music-mascot-idle 2.6s ease-in-out infinite;
  transform-origin: 50% 85%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.music-player-wrap:has(.music-player.is-playing) .music-mascot {
  animation: music-mascot-bob 0.55s ease-in-out infinite;
}

@keyframes music-mascot-idle {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

@keyframes music-mascot-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-0.35rem) rotate(6deg);
  }
}

.music-player {
  --music-bg: rgba(5, 5, 9, 0.72);
  --music-line: rgba(255, 255, 255, 0.14);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(100%, 22rem);
  color: var(--music-text-color, #fff);
}

.music-eq {
  display: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 0.9rem;
  flex: 0 0 auto;
  color: var(--profile-accent);
}

.music-player.is-playing .music-eq {
  display: inline-flex;
}

.music-eq span {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: music-eq-bounce 0.85s ease-in-out infinite;
}

.music-eq span:nth-child(1) {
  animation-delay: -0.6s;
}

.music-eq span:nth-child(2) {
  animation-delay: -0.3s;
}

.music-eq span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes music-eq-bounce {
  0%,
  100% {
    height: 25%;
  }
  50% {
    height: 100%;
  }
}

.music-meta {
  min-width: 0;
  text-align: left;
}

.music-meta strong,
.music-meta span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-meta strong {
  font-size: 0.88rem;
}

.music-title-scroll {
  width: 100%;
  max-width: 11rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.music-title-scroll span {
  display: inline-block;
  width: max-content;
  min-width: max-content;
  animation: music-title-marquee 9s linear infinite;
  color: var(--music-text-color, rgba(255, 255, 255, 0.9));
  white-space: nowrap;
}

@keyframes music-title-marquee {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(110%);
    opacity: 0;
  }
}

.music-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.music-round,
.music-mini-round {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--music-line);
  border-radius: 999px;
  background: var(--music-bg);
  color: var(--music-text-color, #fff);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.music-round {
  width: 3.15rem;
  height: 3.15rem;
}

.music-mini-round {
  width: 2.05rem;
  height: 2.05rem;
}

.music-round svg,
.music-mini-round svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: currentColor;
}

.music-round:hover,
.music-mini-round:hover {
  border-color: color-mix(in srgb, var(--profile-accent) 62%, white);
  background: color-mix(in srgb, var(--profile-accent) 18%, rgba(5, 5, 9, 0.78));
  transform: scale(1.06);
}

.music-play-toggle {
  color: var(--music-text-color, #fff);
}

.music-play-toggle.music-round {
  --btn-color: var(--music-play-color, var(--profile-accent));
  background: linear-gradient(150deg, color-mix(in srgb, var(--btn-color) 92%, white 8%), color-mix(in srgb, var(--btn-color) 62%, black 18%));
  border-color: color-mix(in srgb, var(--btn-color) 60%, transparent);
  color: #0a0a0a;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--btn-color) 40%, transparent), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.music-play-toggle.music-round:hover {
  background: linear-gradient(150deg, color-mix(in srgb, var(--btn-color) 96%, white 12%), color-mix(in srgb, var(--btn-color) 68%, black 12%));
}

.music-player.is-playing .music-play-toggle.music-round {
  animation: music-play-pulse 2.6s ease-in-out infinite;
}

@keyframes music-play-pulse {
  0%,
  100% {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--btn-color) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--btn-color) 55%, transparent);
  }
  50% {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--btn-color) 40%, transparent), 0 0 0 9px color-mix(in srgb, var(--btn-color) 0%, transparent);
  }
}

.music-play-toggle .icon-pause {
  display: none;
}

.music-player.is-playing .music-play-toggle .icon-play {
  display: none;
}

.music-player.is-playing .music-play-toggle .icon-pause {
  display: block;
}

.music-player.is-muted .music-volume-toggle {
  color: rgba(255, 255, 255, 0.48);
}

.music-source-dot {
  width: 0.58rem;
  height: 0.4rem;
  display: inline-block;
  border-radius: 0.12rem;
  background: #ff173d;
  box-shadow: 0 0 13px rgba(255, 23, 61, 0.45);
}

.music-track-badge {
  position: absolute;
  top: -0.45rem;
  left: -0.45rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg, #080808);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.music-track-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-volume-range {
  width: 5.5rem;
  accent-color: var(--profile-accent);
}

.music-volume-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Niewidzialny "mostek" wypelniajacy przerwe miedzy przyciskiem a wyskakujacym suwakiem (patrz
   "bottom: calc(100% + 0.55rem)" nizej) - bez tego ruch myszy z przycisku DO suwaka przechodzil
   przez martwa strefe bez zadnego potomka ".music-volume-hover" pod kursorem, co gubilo :hover
   w POLOWIE DROGI i suwak znikal (opacity/pointer-events), zanim user zdazyl go zlapac. */
.music-volume-hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2.45rem;
  height: 0.55rem;
  transform: translateX(-50%);
}

.music-volume-hover .music-volume-range {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  width: 2.45rem;
  height: 7rem;
  padding: 0.65rem 0.35rem;
  border: 1px solid var(--music-line);
  border-radius: 999px;
  background: rgba(5, 5, 9, 0.88);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  accent-color: var(--profile-accent);
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.35rem);
  transition: opacity 150ms ease, transform 150ms ease;
}

.music-volume-hover:hover .music-volume-range,
.music-volume-hover:focus-within .music-volume-range {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.music-player-orb {
  position: relative;
}

.music-player-orb .music-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.music-player-orb::before {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: music-orb-ring 2.4s ease-out infinite;
}

.music-player-orb.is-playing::before {
  opacity: 1;
}

@keyframes music-orb-ring {
  0% {
    transform: scale(0.82);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

.music-player-pill {
  padding: 0.35rem 0.45rem 0.35rem 0.8rem;
  border: 1px solid var(--music-line);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--music-player-bg, #1f1f1f) 90%, transparent), color-mix(in srgb, var(--music-player-bg, #1f1f1f) 72%, transparent));
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.music-player-pill .music-meta {
  max-width: 8.5rem;
}

.music-player-bar {
  width: min(100%, 19rem);
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--music-line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--music-player-bg, #1f1f1f) 92%, transparent), color-mix(in srgb, var(--music-player-bg, #1f1f1f) 78%, transparent));
  backdrop-filter: blur(16px);
  justify-content: space-between;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.music-player-bar .music-meta {
  flex: 1 1 auto;
}

.music-player-glass {
  padding: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--music-player-bg, #1f1f1f) 48%, transparent), color-mix(in srgb, var(--music-player-bg, #1f1f1f) 28%, transparent));
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.music-player-glass .music-meta {
  width: 8.5rem;
}

.music-player-dock {
  padding: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 40%, rgba(255, 255, 255, 0.18));
  border-radius: 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--music-player-bg, #1f1f1f) 90%, transparent), color-mix(in srgb, var(--profile-accent) 22%, var(--music-player-bg, #1f1f1f)));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--profile-accent) 20%, rgba(0, 0, 0, 0.3)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.music-player-dock .music-meta {
  width: 9.5rem;
  padding-left: 0.35rem;
}

.music-player-minimal {
  gap: 0.32rem;
}

.music-player-minimal .music-round {
  width: 2.65rem;
  height: 2.65rem;
  background: rgba(0, 0, 0, 0.52);
}

.music-player-minimal .music-play-toggle.music-round {
  background: linear-gradient(150deg, color-mix(in srgb, var(--profile-accent) 92%, white 8%), color-mix(in srgb, var(--profile-accent) 62%, black 18%));
}

.music-player-minimal .music-meta,
.music-player-minimal .music-eq,
.music-player-minimal .music-source-dot {
  display: none;
}

.music-bg-off .music-player-pill,
.music-bg-off .music-player-bar,
.music-bg-off .music-player-glass,
.music-bg-off .music-player-dock {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.music-volume-hidden .music-volume-toggle,
.music-volume-hidden .music-mini-round,
.music-volume-hidden .music-volume-range {
  display: none;
}

.stat {
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--stats-border-color, #ffffff) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--stats-bg-color, #050505) 72%, transparent);
  color: var(--stats-text-color, rgba(255, 255, 255, 0.88));
}

.stat strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1;
}

.stat span {
  color: color-mix(in srgb, var(--stats-text-color, #ffffff) 72%, transparent);
  font-size: 0.72rem;
}

.view-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.9);
}

.last-edited-stat {
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--last-edited-text-color, #ffffff) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--last-edited-bg-color, #111111) 72%, transparent);
  color: var(--last-edited-text-color, #ffffff);
  font-size: 0.78rem;
  /* Patrz identyczny komentarz przy .clock-card/.weather-card - bez tego ten sam pill byl szeroki
     na cala karte w zwyklym miejscu, a waski (dopasowany do tresci) jako wolny element. */
  align-self: center;
  /* Patrz komentarz przy .clock-card-date - ten sam problem (tekst balansujacy na granicy
     zawijania miedzy dwoma systemami layoutu wygladal inaczej w zaleznosci od pozycji). */
  white-space: nowrap;
}

.last-edited-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.favorite-games-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  /* Patrz identyczny komentarz przy .clock-card/.weather-card - bez tego ta lista byla rozciagana
     na cala karte w zwyklym miejscu, a dopasowana do tresci jako wolny element. align-self samo w
     sobie nie wystarczylo (flex-wrap wciaz liczyl zawijanie wzgledem dostepnej, szerszej przestrzeni
     przed scisnieciem) - jawne "width: fit-content" wymusza identyczna szerokosc w obu przypadkach. */
  align-self: center;
  width: fit-content;
  max-width: 100%;
}

.top-clip-block {
  width: min(100%, 22rem);
  margin-top: 0.75rem;
}

.top-clip-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  display: block;
}

.top-clip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.1rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.top-clip-play {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--profile-accent, #25d0ab);
  color: #06120f;
  font-size: 0.8rem;
}

.favorite-game-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--favorite-games-text-color, #ffffff) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--favorite-games-bg-color, #111111) 72%, transparent);
  color: var(--favorite-games-text-color, #ffffff);
  font-size: 0.78rem;
  /* Patrz komentarz przy .clock-card-date - nazwa gry (zwlaszcza z ta spacja w srodku, np.
     "CHUJCIE TO") moglaby inaczej zawinac sie w zwyklym miejscu niz jako wolny element. */
  white-space: nowrap;
}

.favorite-game-icon-img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  border-radius: 0.2rem;
  display: block;
}

.favorite-game-icon-text {
  font-size: 1rem;
  line-height: 1;
}

/* Drugi, alternatywny styl (oprocz plakietek z medalami) - prawdziwe "podium" z trzema stopniami,
   1. miejsce zawsze na srodku i najwyzej, tak jak na prawdziwych podiach zawodow. */
.favorite-games-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.favorite-games-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 5rem;
}

.favorite-games-step-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--favorite-games-bg-color, #111111) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--favorite-games-text-color, #ffffff) 20%, transparent);
}

.favorite-games-step-icon .favorite-game-icon-img {
  width: 1.4rem;
  height: 1.4rem;
}

/* Logo gry na ciemnym tle plakietki: bez kolka/ramki - sama ikona gry, nieco wieksza. */
.favorite-games-step-icon.is-bare-logo {
  width: auto;
  height: 2.2rem;
  border: 0;
  background: none;
  border-radius: 0;
}

.favorite-games-step-icon.is-bare-logo .favorite-game-icon-img {
  width: auto;
  height: 2.2rem;
  max-width: 3.4rem;
  border-radius: 0.3rem;
}

.favorite-games-step-icon .favorite-game-icon-text {
  font-size: 1.2rem;
}

.favorite-games-step-name {
  color: var(--favorite-games-text-color, #ffffff);
  font-size: 0.68rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-games-step-block {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 0.4rem 0.4rem 0 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.favorite-games-step-block strong {
  font-size: 1.3rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.55);
}

/* Kolejnosc w HTML to zawsze 1./2./3. miejsce (patrz renderProfileSection) - WIZUALNE przestawienie
   (2. po lewej, 1. na srodku, 3. po prawej, jak na prawdziwym podium) robi CSS "order" NA SAMYM
   .favorite-games-step-X (bezposredni element flex .favorite-games-podium) - "order" na elemencie
   .favorite-games-step-block ponizej nic by nie robil, bo ten div nie jest bezposrednim dzieckiem
   kontenera flex. */
.favorite-games-step-0 {
  order: 2;
}

.favorite-games-step-1 {
  order: 1;
}

.favorite-games-step-2 {
  order: 3;
}

.favorite-games-step-0 .favorite-games-step-block {
  height: 4.2rem;
  background: linear-gradient(160deg, #ffd766, #d9a521);
}

.favorite-games-step-1 .favorite-games-step-block {
  height: 3.1rem;
  background: linear-gradient(160deg, #e2e6ea, #aab2bb);
}

.favorite-games-step-2 .favorite-games-step-block {
  height: 2.3rem;
  background: linear-gradient(160deg, #e3a469, #b1703a);
}

.stat-icon-img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  display: block;
}

.stat-icon-text {
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 950;
  line-height: 1;
}

.view-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.view-icon circle {
  fill: currentColor;
}

/* Kolumna, zeby dalo sie mieszac linki "Pelne" (caly wiersz) i "Same ikony" (maly kwadracik na
   swoim wierszu, wyrownany do lewej) w jednej liscie - kazdy link ma teraz WLASNY wyglad
   (effectiveLinkLayout), nie tylko jeden globalny dla calej listy. */
.profile-links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.profile-link {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0 0.85rem;
  border-radius: var(--radius);
  color: var(--link-text-color, #fff);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--link-border-color, var(--profile-accent)) 55%, transparent);
  background: color-mix(in srgb, var(--link-bg-color, var(--profile-accent)) 72%, transparent);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.profile-link-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.link-icon {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--link-icon-text-color, #fff);
  background: color-mix(in srgb, var(--link-icon-bg-color, var(--profile-accent)) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--link-border-color, var(--profile-accent)) 42%, rgba(255, 255, 255, 0.2));
  font-size: 0.78rem;
  line-height: 1;
  flex: 0 0 auto;
  overflow: hidden;
}

.link-icon img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  display: block;
}

.profile-links-icons {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.profile-link-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 0.85rem;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--link-border-color, var(--profile-accent)) 55%, transparent);
  background: color-mix(in srgb, var(--link-bg-color, var(--profile-accent)) 72%, transparent);
  transition: transform 0.15s ease;
}

.profile-link-icon-only:hover {
  transform: translateY(-2px);
}

.profile-link-icon-only .link-icon {
  min-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.3rem;
}

.profile-link-icon-only .link-icon img {
  width: 62%;
  height: 62%;
}

.profile-link-main > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-link > span:last-child {
  flex: 0 0 auto;
  opacity: 0.7;
}

.plan-grid,
.saved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.plan-card,
.saved-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: rgba(18, 18, 18, 0.84);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.price strong {
  font-size: 1.7rem;
}

.price span {
  color: var(--muted);
}

.premium-rule-panel {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
}

.premium-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.premium-rule-card {
  min-height: 4.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.premium-rule-card span {
  display: grid;
  gap: 0.18rem;
}

.premium-rule-card strong {
  color: var(--text);
}

.premium-rule-card em {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1.35;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.saved-card {
  min-height: 11rem;
  position: relative;
  overflow: hidden;
}

.saved-swatch {
  height: 4rem;
  margin: -1rem -1rem 0;
  background:
    linear-gradient(135deg, var(--swatch), rgba(255, 77, 109, 0.56)),
    #191919;
}

.profile-pages-scroll {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}

.profile-pages-scroll > .profile-page,
.profile-pages-scroll > .profile-page-second {
  height: 100vh;
  scroll-snap-align: start;
}

.profile-page-second {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  /* .profile-bg/.profile-video (reuzywane tu przez "Takie samo tlo jak na stronie 1") maja ujemny
     z-index - bez isolation:isolate (tak jak .profile-page) mogloby to "przebic" przez sasiednia
     strone podczas przewijania zamiast zostac zamkniete w tym jednym kontenerze. */
  isolation: isolate;
}

.second-page-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.second-page-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.profile-section.profile-udi.second-page-uid {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  white-space: nowrap;
}

/* W edytorze live-podglad pokazuje tylko strone 1 (patrz renderUserEditor) - ta plakietka to jedyny
   sygnal, ze druga karta jest wlaczona, zeby nie wygladalo jakby ustawienie "nic nie zrobilo". */
.second-page-indicator {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.page-dots {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.page-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.page-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

.intro-gate {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease;
  font-family: "Press Start 2P", "Space Mono", "SFMono-Regular", Consolas, monospace;
}

.intro-gate.is-leaving {
  opacity: 0;
}

/* Pelnoekranowa nakladka na publicznej, zbanowanej wizytowce - sama karta renderuje sie dalej POD
   spodem (patrz renderPublic w app.js), ta nakladka tylko lezy NA NIEJ z wysokim z-index i bez
   zadnego listenera klikniecia (w odroznieniu od .intro-gate) - wiec nic pod nia nie da sie uzyc. */
.ban-gate {
  position: fixed;
  inset: 0;
  z-index: 95000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(120, 10, 10, 0.55), rgba(5, 0, 0, 0.92));
  backdrop-filter: blur(6px);
  animation: ban-gate-fade-in 0.4s ease both;
}

@keyframes ban-gate-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ban-gate-card {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: 26rem;
  padding: 2.2rem 1.8rem;
  border-radius: var(--radius, 16px);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: linear-gradient(160deg, rgba(20, 4, 4, 0.9), rgba(10, 0, 0, 0.95));
  box-shadow:
    0 0 60px color-mix(in srgb, var(--danger) 35%, transparent),
    0 20px 50px rgba(0, 0, 0, 0.6);
  color: #fff;
  animation:
    ban-gate-card-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    ban-gate-pulse 2.4s ease-in-out 0.6s infinite;
}

@keyframes ban-gate-card-in {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ban-gate-pulse {
  0%,
  100% {
    box-shadow:
      0 0 60px color-mix(in srgb, var(--danger) 35%, transparent),
      0 20px 50px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 90px color-mix(in srgb, var(--danger) 55%, transparent),
      0 20px 50px rgba(0, 0, 0, 0.6);
  }
}

.ban-gate-stamp {
  padding: 0.4rem 1.4rem;
  border: 0.22rem solid var(--danger);
  border-radius: 0.4rem;
  color: var(--danger);
  font-family: "Space Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.3rem;
  transform: rotate(-8deg);
  text-shadow: 0 0 18px color-mix(in srgb, var(--danger) 70%, transparent);
  animation: ban-gate-stamp-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes ban-gate-stamp-in {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scale(2.4);
  }
  60% {
    opacity: 1;
    transform: rotate(-8deg) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

.ban-gate-card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.ban-gate-countdown {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.ban-gate-countdown strong {
  color: var(--danger);
}

/* Pasek u gory edytora, gdy to WLASNY profil zalogowanego usera jest zbanowany (patrz renderBanNotice) -
   position:fixed (nie zwykly blok), bo .immersive-editor sklada sie z samych position:fixed paneli
   (patrz .immersive-preview/.immersive-actions) - zwykly blok w normalnym ukladzie zostalby po prostu
   zasloniety przez nie, zamiast odepchnac je w dol. */
.ban-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.9rem;
  padding: 0.6rem 1rem;
  border-bottom: 2px solid var(--danger);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 30%, #0a0a0a), color-mix(in srgb, var(--danger) 14%, #0a0a0a));
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
  animation: ban-notice-glow 2.2s ease-in-out infinite;
}

.ban-notice strong {
  color: var(--danger);
}

@keyframes ban-notice-glow {
  0%,
  100% {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--danger) 45%, transparent);
  }
  50% {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--danger) 90%, transparent);
  }
}

.intro-loading-box {
  width: min(22rem, 100%);
}

.intro-loading-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.intro-loading-bar {
  height: 1.6rem;
  border: 3px solid currentColor;
  padding: 3px;
}

.intro-loading-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 13px);
  transition: width 0.08s linear;
}

.intro-tap-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.intro-tap-visual {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
}

.intro-tap-ring {
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: intro-tap-pulse 1.8s ease-out infinite;
}

.intro-tap-ring-delay {
  animation-delay: 0.9s;
}

.intro-tap-label {
  font-family: "Press Start 2P", "Space Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

@keyframes intro-tap-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* Komunikat (np. "Ticket wysłany") lezy nad przyciskiem pomocy / ikonami - nie ma przechwytywac kliknięć */
.toast {
  pointer-events: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  /* Ma byc widoczny NAD wszystkim (modale ustawien konta to z-index 50000, tutorial 60000) - toast
     to jedyna informacja zwrotna po klikinieciu np. "Odlacz", wiec nie moze sie chowac za niczym. */
  z-index: 70000;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid rgba(37, 208, 171, 0.5);
  border-radius: var(--radius);
  background: rgba(12, 12, 12, 0.95);
  box-shadow: var(--shadow);
  color: var(--text);
}

.section-context-menu {
  position: fixed;
  z-index: 100;
  width: 11rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(10, 10, 10, 0.97);
  box-shadow: var(--shadow);
}

.section-context-menu strong {
  padding: 0.25rem 0.35rem;
  font-size: 0.82rem;
}

.section-context-menu button {
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.public-view {
  min-height: 100vh;
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
}

.public-view .profile-page {
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.public-actions {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
}

.notice {
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(244, 201, 93, 0.38);
  border-radius: var(--radius);
  background: rgba(244, 201, 93, 0.08);
  color: var(--accent-3);
  font-weight: 800;
}

button:disabled,
button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.empty-state {
  min-height: 12rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .preview-shell {
    position: static;
    grid-template-columns: 1fr;
  }

  .profile-tool-drawer {
    position: static;
    width: 100%;
    min-height: 0;
  }

  .drawer-tab {
    width: 100%;
    min-height: 2.75rem;
    writing-mode: horizontal-tb;
  }

  .drawer-panel {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 0.6rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .device {
    min-height: 34rem;
    max-height: none;
  }

  .plan-grid,
  .premium-rule-grid,
  .library-grid,
  .user-profile-grid,
  .quick-actions-grid,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .badge-builder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-tabs button {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    min-height: 4.4rem;
    padding: 0.55rem;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .form-grid,
  .field-row,
  .plan-grid,
  .library-grid,
  .user-profile-grid,
  .quick-actions-grid,
  .layout-toggle-grid,
  .metrics-grid,
  .badge-builder {
    grid-template-columns: 1fr;
  }

  .immersive-actions {
    left: 4.4rem;
    right: 0.75rem;
  }
}

@media (max-width: 560px) {
  .public-view {
    min-height: 100dvh;
    padding: 0;
    place-items: stretch;
  }

  .public-view .profile-page {
    width: 100vw;
    min-height: 100dvh;
    height: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Karte (.bio-card) wolno wlascicielowi przeciagnac/zmienic rozmiar DOWOLNIE (procentowo
     wzgledem CALEJ strony, scope:"page", patrz cardPlacement w app.js) - sensowny wybor na szerokim
     ekranie (np. waska, wysoka "wizytowka" przesunieta w bok), ale TE SAME procenty na duzo
     waskim telefonie daja ultra-waska, przesunieta w bok karte z OGROMNYM kawalkiem goreg tla
     (zdjecia/wideo) widocznym obok - zweryfikowane bezposrednio na prawdziwym profilu (karta
     ~21% szerokosci strony, zaczynajaca sie od 11% od lewej - na telefonie to kilkadziesiat
     pikselow, przyklejone do lewej krawedzi). Zamiast probowac "skalowac" te same procenty (nie ma
     dobrego przeliczenia z proporcji desktopu na proporcje telefonu), na tej szerokosci WRACAMY do
     zwyklego, wysrodkowanego ukladu karty - ignorujac swobodna pozycje/rozmiar. Inline styl
     left/top/min-width/min-height/transform (patrz positionStyleAttr w app.js) ma wyzszy priorytet
     niz zwykla regula klasy, stad !important. Dotyczy WYLACZNIE publicznie ogladanego profilu
     (.public-view) - w EDYTORZE (.immersive-preview) wlasciciel MUSI dalej widziec i moc poprawic
     swoja prawdziwa, wlasna pozycje karty, nawet przegladajac/edytujac z telefonu. */
  .public-view .bio-card.card-floating {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 23.5rem) !important;
    min-width: 0 !important;
    min-height: min(23.5rem, calc(100dvh - 2.4rem)) !important;
    margin: 0 auto !important;
  }

  .public-actions {
    top: 0.55rem;
    left: 0.55rem;
  }

  .main,
  .sidebar {
    padding: 0.8rem;
  }

  .nav-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-header {
    flex-direction: column;
  }

  .link-row {
    grid-template-columns: 1fr;
  }

  .emoji-row {
    grid-template-columns: 1fr;
  }

  .music-track-row {
    grid-template-columns: 1fr;
  }

  .music-track-row .icon-button {
    width: 100%;
  }

  .link-row .icon-button {
    width: 100%;
  }

  .emoji-row .icon-button {
    width: 100%;
  }

  .device {
    width: 100%;
    min-height: 32rem;
    border-radius: 1.25rem;
  }

  .turnstile-card {
    grid-template-columns: 1fr;
    width: calc(100% - 1rem);
    margin-inline: auto;
  }

  .turnstile-widget {
    min-width: 0;
    width: 100%;
    justify-items: start;
    overflow: auto hidden;
  }

  .immersive-options {
    width: 3.15rem;
  }

  .options-rail {
    width: 3.15rem;
    font-size: 1.25rem;
  }

  .options-drawer {
    left: 3.15rem;
    width: calc(100vw - 3.15rem);
    padding: 0.8rem;
    transform: translateX(calc(-100% - 3.25rem));
  }

  .immersive-preview {
    left: 3.15rem;
  }

  .immersive-preview .profile-page {
    width: calc(100vw - 3.15rem);
  }

  .immersive-actions {
    top: 0.75rem;
    left: 3.75rem;
    right: 0.65rem;
    gap: 0.45rem;
  }

  .immersive-actions .primary-button,
  .immersive-actions .secondary-button {
    flex: 1 1 8rem;
    min-width: 0;
    padding-inline: 0.65rem;
  }

  /* Na waskim ekranie .immersive-actions (przyciski jezyka/tutoriala/podgladu) rozciaga sie PRAWIE
     na cala szerokosc i zaczyna w TYM SAMYM miejscu (top:0.75rem), co domyslna (lewy-gorny rog)
     pozycja plakietki UID - zweryfikowane bezposrednio (plakietka "UID 101" chowala sie czesciowo
     POD przyciskiem jezyka). Edytorowe przyciski to NIE sekcja profilu, wiec caly system odpychania
     nachodzenia miedzy sekcjami (patrz app.js) nigdy ich nie widzi i nigdy nie policzy dla UID
     pozycji, ktora by je omijala - nawet gdy UID zostanie samo przez ten system automatycznie
     przesuniete (np. z dala od awatara), nowa pozycja i tak moze wciaz wypasc w tej samej, gornej
     strefie zajetej przez pasek. Zamiast probowac rozroznic "domyslna" pozycje od "juz poprawionej
     przez system" (zweryfikowane bezposrednio, ze to zawodzi - system potrafi "ochrzcic" UID realna,
     zapisana pozycja, nawet gdy user nigdy go nie ruszyl), odsuwamy PLAKIETKE W CALYM EDYTORZE na tej
     szerokosci bezwarunkowo, z !important (bo inline left/top/transform doczepiony przez ten sam
     system zawsze by wygral z samej klasy) - dotyczy WYLACZNIE edytora (.immersive-preview); na
     publicznie ogladanym profilu (gdzie nie ma tego paska) plakietka zostaje na swoim prawdziwym,
     wybranym przez usera miejscu bez zmian. Te zawsze zawijaja sie do najwyzej dwoch rzedow na tej
     szerokosci (zmierzony pasek dwoch rzedow siega ~6.7rem), 7.5rem z zapasem starcza w kazdym
     ukladzie jezykowym (dluzsze etykiety przyciskow moga zawijac sie troche nizej). */
  .immersive-preview .profile-section.profile-udi:not(.is-at-default) {
    top: 7.5rem !important;
  }

  .immersive-preview .bio-card {
    width: min(22rem, calc(100vw - 4.45rem));
  }

  .profile-content {
    padding: 1rem;
  }

  .bio-card {
    padding: 0.82rem;
  }

  .profile-name {
    font-size: min(var(--name-size, 34px), 2.1rem);
  }

  .music-player {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  .immersive-editor.options-dock-left .immersive-preview {
    inset: 0 0 0 3.15rem;
  }

  .immersive-editor.options-dock-left .immersive-preview .profile-page {
    width: calc(100vw - 3.15rem);
    height: 100vh;
    min-height: 100vh;
  }

  .immersive-options.options-dock-right {
    inset: 0 0 0 auto;
    width: 3.15rem;
  }

  .immersive-editor.options-dock-right .immersive-preview {
    inset: 0 3.15rem 0 0;
  }

  .immersive-editor.options-dock-right .immersive-preview .profile-page {
    width: calc(100vw - 3.15rem);
    height: 100vh;
    min-height: 100vh;
  }

  .immersive-options.options-dock-right .options-drawer {
    inset: 0 3.15rem 0 auto;
    width: calc(100vw - 3.15rem);
    transform: translateX(calc(100% + 3.25rem));
  }

  .immersive-options.options-dock-right.is-open .options-drawer {
    transform: translateX(0);
  }

  .immersive-options.options-dock-top,
  .immersive-options.options-dock-bottom {
    left: 0;
    right: 0;
    width: 100%;
    height: 3.15rem;
  }

  .immersive-options.options-dock-top .options-rail,
  .immersive-options.options-dock-bottom .options-rail {
    width: 100%;
    height: 3.15rem;
    font-size: 1rem;
  }

  .immersive-editor.options-dock-top .immersive-preview {
    inset: 3.15rem 0 0 0;
  }

  .immersive-editor.options-dock-bottom .immersive-preview {
    inset: 0 0 3.15rem 0;
  }

  .immersive-editor.options-dock-top .immersive-preview .profile-page,
  .immersive-editor.options-dock-bottom .immersive-preview .profile-page {
    width: 100vw;
    height: calc(100vh - 3.15rem);
    min-height: calc(100vh - 3.15rem);
  }

  .immersive-options.options-dock-top .options-drawer,
  .immersive-options.options-dock-bottom .options-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-height: min(32rem, calc(100vh - 3.15rem));
  }

  .immersive-options.options-dock-top .options-drawer {
    inset: 3.15rem 0 auto 0;
    transform: translateY(calc(-100% - 3.25rem));
  }

  .immersive-options.options-dock-bottom .options-drawer {
    inset: auto 0 3.15rem 0;
    transform: translateY(calc(100% + 3.25rem));
  }

  .immersive-options.options-dock-top.is-open .options-drawer,
  .immersive-options.options-dock-bottom.is-open .options-drawer {
    transform: translateY(0);
  }

  .immersive-editor.options-dock-right .immersive-actions {
    right: 3.75rem;
    left: 0.65rem;
  }

  .immersive-editor.options-dock-top .immersive-actions {
    top: 3.75rem;
    left: 0.65rem;
  }

  .immersive-editor.options-dock-bottom .immersive-actions {
    top: 0.75rem;
    bottom: auto;
    left: 0.65rem;
  }
}

/* konta: logowanie / rejestracja */
.auth-card {
  width: min(28rem, 100%);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.auth-tabs button {
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.auth-tabs button.is-active {
  background: var(--accent);
  color: #06120f;
}

.auth-form {
  display: grid;
  gap: 0.85rem;
}

.auth-field {
  display: grid;
  gap: 0.35rem;
}

.auth-field > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.auth-field small {
  color: var(--faint);
}

.auth-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.2rem;
  text-align: center;
  text-decoration: underline;
}

.link-button:hover {
  opacity: 0.85;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--faint);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.auth-oauth-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}

.auth-oauth {
  min-height: 2.8rem;
  font-weight: 800;
}

.auth-oauth-discord {
  border-color: rgba(88, 101, 242, 0.7);
}

.auth-oauth-google {
  border-color: rgba(255, 255, 255, 0.35);
}

.oauth-connect-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid transparent;
  border-radius: 0.7rem;
  transition: border-color 0.2s ease;
}

.oauth-connect-box.is-disconnected {
  border-color: #e5484d;
}

.oauth-connect-box.is-connected {
  border-color: #25d0ab;
}

.oauth-connect-box .auth-oauth {
  border-color: transparent;
}

.auth-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
}

.auth-user-chip i {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.auth-user-chip i.is-vip {
  background: var(--accent-3);
  color: #1a1400;
}

.account-status-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.account-status-icon svg {
  flex: 0 0 auto;
  opacity: 0.8;
}

.account-status-icon span {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status-icon.is-verified {
  border-color: rgba(86, 227, 159, 0.32);
  color: var(--text);
}

.account-status-icon.is-verified svg {
  opacity: 1;
  color: var(--ok);
}

.account-status-icon b {
  font-size: 0.8rem;
}

.user-profile-card.auth-slot {
  border-style: dashed;
}

.user-profile-card.is-locked {
  opacity: 0.65;
}

/* kafelki profili: avatar w prawym gornym rogu */
.user-profile-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding-right: 4.6rem;
}

.user-profile-card .table-actions {
  grid-column: 1;
  flex-wrap: wrap;
  align-items: center;
}

.tile-avatar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--swatch, var(--accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--swatch, var(--accent)) 30%, #111);
  box-shadow: 0 0 16px color-mix(in srgb, var(--swatch, var(--accent)) 35%, transparent);
}

.tile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tile-avatar b {
  font-size: 1.3rem;
  font-weight: 900;
}

/* sortowanie */
.sort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.sort-chip {
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.sort-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.sort-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}

/* polubienia */
.like-button {
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.like-button svg {
  fill: none;
}

.like-button:hover {
  border-color: rgba(255, 77, 109, 0.6);
  color: var(--text);
}

.like-button.is-liked {
  border-color: rgba(255, 77, 109, 0.7);
  background: rgba(255, 77, 109, 0.16);
  color: #ff6b85;
}

.like-button.is-liked svg {
  fill: currentColor;
}

.like-button.is-liked svg path {
  fill: currentColor;
}

.like-button:not(.is-liked) svg path {
  fill: none;
}

.public-like {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  min-height: 2.8rem;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(10px);
  color: #fff;
}

/* przycisk pliku jako ikona */
.file-picker-icon {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.file-picker:hover .file-picker-icon {
  color: var(--accent);
}

.file-picker.icon-only {
  justify-content: center;
  min-width: 2.75rem;
}

/* selektor jezyka */
.lang-picker {
  position: relative;
  display: inline-block;
}

.lang-toggle {
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.lang-toggle:hover {
  border-color: var(--line-strong);
}

.lang-flag {
  width: 1.5rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 200;
  min-width: 11rem;
  display: none;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #131313;
  box-shadow: var(--shadow);
}

.lang-picker.is-open .lang-menu {
  display: grid;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.lang-option:hover,
.lang-option.is-active {
  background: rgba(37, 208, 171, 0.14);
}

.auth-lang {
  margin-left: auto;
  align-self: flex-start;
}

.immersive-actions .lang-picker {
  align-self: center;
}

/* biblioteka mediow (max 3 pliki na serwerze) */
.media-field {
  display: grid;
  gap: 0.6rem;
}

.file-picker.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.media-library {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.media-library-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.media-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.media-thumb {
  position: relative;
  min-width: 0;
}

.media-thumb-pick {
  width: 100%;
  display: grid;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.media-thumb-pick:hover {
  border-color: var(--line-strong);
}

.media-thumb.is-active .media-thumb-pick {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}

.media-thumb-pick i {
  height: 3.4rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
}

.media-thumb-pick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-thumb-pick video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-thumb-pick span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-thumb-delete {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--danger);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.media-limit {
  margin: 0;
  color: var(--accent-3);
  font-size: 0.8rem;
  line-height: 1.4;
}

.bg-sequence-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.bg-sequence-item {
  position: relative;
  height: 3.6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.bg-sequence-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-sequence-item button {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--danger);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.profile-bg-sequence {
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
}

/* kadr tla */
.bg-crop-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.4fr);
  gap: 1rem;
  align-items: start;
  overflow: auto;
}

.bg-crop-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: grab;
  touch-action: none;
}

.bg-crop-stage.is-cropping {
  cursor: grabbing;
}

.bg-crop-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.bg-crop-fit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.bg-crop-fit button {
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.bg-crop-fit button.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width: 760px) {
  .bg-crop-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* tutorial */
.tour-button {
  width: 2.4rem;
  min-height: 2.4rem;
  border-radius: 999px;
  font-weight: 900;
}

#tour-root {
  position: fixed;
  inset: 0;
  z-index: 60000;
}

.tour-mask {
  position: absolute;
  inset: 0;
}

.tour-spot {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.74),
    0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tour-mask:has(~ .tour-spot[hidden]) {
  background: rgba(0, 0, 0, 0.74);
}

/* Krok "interactive" (na razie: wybor jezyka) - maska normalnie lapie KAZDE klikniecie na calym
   ekranie (zeby nie dalo sie przypadkiem rozgrzebac reszty strony w trakcie tutoriala), co
   uniemozliwialoby faktyczne uzycie podswietlonego elementu - samo podswietlenie byloby czysto
   wizualne. Na czas takiego kroku maska przepuszcza klikniecia, a sam podswietlony element (i to,
   co z niego sie rozwija, np. lista jezykow) dostaje wyzszy z-index niz tutorial, zeby bylo
   widoczne NAD nim, nie pod spodem. */
/* #tour-root samo w sobie (nie tylko .tour-mask) lapie klikniecia na calym ekranie, bo pokrywa go
   bez przerwy (inset: 0) - samo wylaczenie pointer-events na .tour-mask nie wystarczylo
   (zweryfikowane bezposrednio: klik realna myszka mimo tego nie docieral do przycisku). Trzeba
   wylaczyc je na CALYM #tour-root, a nastepnie jawnie WLACZYC z powrotem tylko na .tour-card
   (pointer-events sie dziedziczy), zeby przyciski Dalej/Wstecz/Pomiń tutorial dalej dzialaly. */
#tour-root.is-interactive {
  pointer-events: none;
}

#tour-root.is-interactive .tour-card {
  pointer-events: auto;
}

.tour-interactive-target {
  position: relative;
  z-index: 60001;
}

.tour-card {
  position: fixed;
  width: min(24rem, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid rgba(37, 208, 171, 0.45);
  border-radius: var(--radius);
  background: #111413;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.tour-step {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.tour-card h4 {
  margin: 0;
  font-size: 1.15rem;
}

.tour-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.tour-spacer {
  flex: 1;
}

@media (max-width: 640px) {
  .tour-card {
    right: 0.75rem;
    width: auto;
  }
}

/* Przycisk pomocy ("?" z kropka nowych odpowiedzi) nie ma co robic na podgladzie wizytowki: zaslaniał podglad w edytorze i
   publiczny widok profilu. Zostaje na stronie glownej (lista profili, Moje wizytowki, panel ownera). */
body:has(.app-shell.editing-shell) .help-widget,
body:has(#app.public-view) .help-widget,
body:has(.app-shell.editing-shell) .social-dock,
body:has(#app.public-view) .social-dock {
  display: none !important;
}

/* Ikony Discord / TikTok: stale w lewym dolnym rogu, jedna obok drugiej */
.social-dock {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 39000;
  display: flex;
  gap: 0.6rem;
}

.social-dock .social-link {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(20, 22, 21, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.social-dock .social-link svg {
  width: 1.4rem;
  height: 1.4rem;
}

.social-dock .social-link:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent);
}

.help-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.help-widget-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Dymek "Dostałeś odpowiedź" - wyrozniony akcentem, znika po chwili (is-hidden dodaje skrypt) */
.help-widget-bubble.is-alert {
  background: var(--accent);
  border-color: var(--accent);
  color: #04110d;
}

.help-widget-bubble.is-hidden {
  opacity: 0;
  transform: translateY(0.4rem);
  pointer-events: none;
}

.help-widget-toggle {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--accent);
  color: #06201a;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.help-widget-toggle:hover {
  filter: brightness(1.08);
}

.help-widget-panel {
  position: absolute;
  right: 0;
  bottom: 4.1rem;
  width: min(20rem, calc(100vw - 2.5rem));
  max-height: min(26rem, calc(100vh - 7rem));
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.6rem;
}

.help-widget-panel-title {
  font-weight: 800;
  padding: 0.4rem 0.5rem 0.6rem;
}

.help-widget-question {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.help-widget-question:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
  filter: brightness(1.15);
}

.help-widget-other {
  color: var(--muted);
}

/* Panel pomocy: na starcie ticket (wyrozniony), moje tickety i "Najczestsze pytania" */
.help-widget-primary {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  font-weight: 800;
}

.help-widget-primary small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.help-widget-question .ticket-count {
  float: right;
}

.help-widget-home .help-widget-mail,
.help-widget-home .help-widget-panel-title {
  margin: 0.2rem 0 0.55rem;
}

.help-widget-home[hidden],
.help-widget-list[hidden],
.help-widget-answer[hidden],
.help-widget-question[hidden] {
  display: none;
}

.help-widget-answer-text {
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.3rem 0.5rem 0.5rem;
}

.help-widget-answer-text a {
  color: var(--accent);
  word-break: break-all;
}

.help-widget-back {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
}

@media (max-width: 640px) {
  .help-widget {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

/* Zgoda na tresci zewnetrzne (consent.js) - zastepnik osadzonego filmu YouTube. */
.external-consent-placeholder {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm, 12px);
  background: rgba(0, 0, 0, 0.55);
  color: #f3f1ea;
  font-size: 0.85rem;
  text-align: center;
}

.external-consent-placeholder p {
  margin: 0;
}

.external-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

.external-consent-link {
  color: var(--accent, #25d0ab);
  font-weight: 700;
}

.second-page-video-placeholder {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  z-index: 2;
}

/* Pole akceptacji regulaminu przy zakladaniu konta. */
.auth-consent-line {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--muted, #b7b4aa);
  line-height: 1.4;
}

.auth-consent-line input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  accent-color: var(--accent, #25d0ab);
}

.auth-consent-line a {
  color: var(--accent, #25d0ab);
}

/* Scena edycji avatara/odznaki bywa PROSTOKATEM (okno pelnoekranowe), a kolko i obraz mialy po 84% szerokosci
   i wysokosci sceny - wychodzil z tego owal zamiast kola, a podglad nie odpowiadal temu, co trafia na
   wizytowke. Teraz oba sa kwadratem o boku rownym KROTSZEMU wymiarowi sceny, wysrodkowanym (cqmin =
   mniejszy z wymiarow kontenera). */
@supports (width: 1cqmin) {
  .avatar-crop-stage {
    container-type: size;
  }

  .avatar-crop-image,
  .badge-crop-image {
    left: calc(50% - 42cqmin);
    top: calc(50% - 42cqmin);
    width: 84cqmin;
    height: 84cqmin;
  }

  .avatar-crop-circle {
    inset: auto;
    box-sizing: border-box;
    left: calc(50% - 42cqmin);
    top: calc(50% - 42cqmin);
    width: 84cqmin;
    height: 84cqmin;
    border-radius: 50%;
  }
}

/* Sklep ze skroconymi adresami (jedna litera / cyfra) w panelu Opcje. */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 0.4rem; margin: 0.8rem 0; }
.slot-cell { display: grid; gap: 0.05rem; justify-items: center; padding: 0.5rem 0.2rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; cursor: pointer; }
.slot-cell strong { font-size: 1.15rem; line-height: 1.1; }
.slot-cell small { font-size: 0.62rem; color: var(--muted); }
.slot-cell:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.slot-cell.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.slot-cell.is-mine { border-color: #35d07f; background: rgba(53, 208, 127, 0.14); }
.slot-cell.is-taken, .slot-cell.is-reserved { opacity: 0.4; cursor: not-allowed; }
.slot-buy, .slot-order-info, .slot-list { display: grid; gap: 0.5rem; margin-top: 0.8rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.slot-buy p, .slot-order-info p, .slot-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.slot-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); gap: 0.4rem; }
.slot-months button { display: grid; justify-items: center; padding: 0.45rem 0.3rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.slot-months button small { color: var(--muted); font-weight: 600; }
.slot-months button.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.slot-row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; align-items: center; }
.slot-row small { grid-column: 1; color: var(--muted); }
.slot-row button { grid-column: 2; grid-row: 1 / span 2; }
.slot-order-info code { color: var(--accent); }
.slot-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.slot-consent input { flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--accent); }
.slot-buy .primary-button:disabled { opacity: 0.45; cursor: not-allowed; }
.slot-row-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.4rem; }
.slot-row-actions button { grid-column: auto; grid-row: auto; }
.slot-group-title { margin: 0.9rem 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.slot-grid.is-numbers { grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); max-height: 19rem; overflow-y: auto; padding-right: 0.2rem; }

/* Tickety (okno poza #app, otwierane z widgetu pomocy) */
.help-widget-toggle.has-unread::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ff5d5d; border: 2px solid #080808; }
.help-widget-toggle { position: relative; }
.help-widget-mail { font-size: 0.85rem; color: var(--muted); }
[data-ticket-modal] { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 1rem; }
.ticket-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.ticket-panel { position: relative; width: min(560px, 100%); max-height: min(780px, 92vh); display: flex; flex-direction: column; background: #0d0f0e; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); color: var(--text); }
.ticket-panel header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.05rem; }
.ticket-x { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.5rem; }
.ticket-body { padding: 1rem 1.1rem 1.2rem; overflow-y: auto; display: grid; gap: 0.8rem; align-content: start; }
.ticket-list { display: grid; gap: 0.5rem; }
.ticket-item { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; text-align: left; width: 100%; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; cursor: pointer; }
.ticket-item:hover { border-color: var(--accent); }
.ticket-item.is-unread { border-color: #ff5d5d; }
.ticket-item span:first-child { display: grid; gap: 0.15rem; min-width: 0; }
.ticket-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-item small, .ticket-muted { color: var(--muted); font-size: 0.8rem; }
.ticket-status { font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.ticket-status.is-open { color: #f5b942; }
.ticket-status.is-answered { color: #35d07f; }
.ticket-status.is-closed { color: var(--muted); }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.ticket-thread { display: grid; gap: 0.5rem; }
.ticket-msg { padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.05); max-width: 90%; }
.ticket-msg p { margin: 0.2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-msg small { color: var(--muted); font-size: 0.74rem; }
.ticket-msg.is-owner { background: rgba(37, 208, 171, 0.12); border: 1px solid rgba(37, 208, 171, 0.3); justify-self: start; }
.ticket-msg.is-user { justify-self: end; }
.ticket-form { display: grid; gap: 0.7rem; }
.ticket-form label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.ticket-form textarea { resize: vertical; min-height: 4rem; }
.ticket-row { display: flex; gap: 0.6rem; }
.ticket-row .secondary-button { flex: 1; }
.ticket-error { color: #ff5d5d; margin: 0; font-size: 0.85rem; }

/* Lista rozwijana (kategoria): bialy panel z prawie niewidocznym tekstem = domyslny wyglad przegladarki przy jasnych opcjach.
   Ciemny schemat kolorow + jawne kolory opcji (dotyczy kazdego select.control, nie tylko w ticketach). */
select.control,
.ticket-form select {
  color-scheme: dark;
}

select.control option,
.ticket-form select option {
  background-color: #161616;
  color: #f8f8f3;
}

/* Zakladki ticketow: Otwarte / Zamkniete (kropka = nowa odpowiedz) */
.ticket-tabs { display: flex; gap: 0.4rem; }
.ticket-tabs button { flex: 1; padding: 0.5rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.ticket-tabs button.is-active { border-color: var(--accent); background: rgba(37, 208, 171, 0.14); color: var(--text); }
.ticket-dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem; border-radius: 50%; background: #ff5d5d; vertical-align: middle; }

/* Przycisk "Tickety" w pasku strony glownej ze znaczkiem liczby nowych odpowiedzi + ikony Discord / TikTok */
.ticket-nav-button { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.ticket-count { min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: #ff5d5d; color: #fff; font-size: 0.7rem; font-weight: 900; line-height: 1; display: inline-grid; place-items: center; }
.ticket-count[hidden] { display: none; }
.social-link { display: inline-grid; place-items: center; text-decoration: none; }