:root{--fs-3xs:.6875rem;--fs-2xs:.75rem;--fs-xs:.78125rem;--fs-sm:.8125rem;--fs-base:.8125rem;--fs-md:.875rem;--fs-lg:1rem;--fs-xl:1.125rem;--fs-2xl:1.375rem;--fs-3xl:1.75rem;--fs-4xl:2.25rem;--fs-5xl:3rem;--site-zoom:.9}
html{zoom:var(--site-zoom)}

@view-transition { navigation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }


:root {
  --head:        'Inter', system-ui, sans-serif;
  --bg:          #0a0a0f;
  --surface:     #111118;
  --surface2:    #16161f;
  --surface3:    #1c1c27;
  --surface4:    #222232;

  --accent:      #c0392b;
  --accent-h:    #e74c3c;
  --accent-dim:  rgba(192,57,43,.12);
  --accent-glow: rgba(192,57,43,.35);

  --green:       #2ecc71;
  --green-dim:   rgba(46,204,113,.12);
  --blue:        #3498db;
  --blue-dim:    rgba(52,152,219,.12);
  --gold:        #e8b54a;
  --gold-dim:    rgba(232,181,74,.12);
  --purple:      #9b59b6;
  --purple-dim:  rgba(155,89,182,.12);
  --red:         #e74c3c;

  --text:        #eaeaf8;
  --muted:       rgba(234,234,248,.52);
  --muted2:      rgba(234,234,248,.28);
  --muted3:      rgba(234,234,248,.16);

  --border:      rgba(255,255,255,.06);
  --border-h:    rgba(255,255,255,.13);
  --border-act:  rgba(192,57,43,.3);

  --radius:      14px;
  --radius-sm:   9px;
  --radius-xs:   5px;

  --shadow:      0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.55);

  --topbar-h:    60px;
  --sidebar-l:   252px;
  --sidebar-r:   268px;
  --bot-nav-h:   54px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body   {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-base,0.8125rem);
  background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-x: hidden;
}
a      { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
img    { max-width: 100%; display: block; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; font-size: var(--fs-sm,0.75rem); }
input, select, textarea { min-width: 0; max-width: 100%; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=url], textarea { -webkit-appearance: none; appearance: none; }

body.game {
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}

::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
  50%       { box-shadow: 0 0 0 4px rgba(46,204,113,.0); }
}


.topbar {
  position: relative; min-height: var(--topbar-h); flex-shrink: 0; z-index: 610;
  view-transition-name: topbar;
  padding: 5px 0;
  background: #1a1a1d;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-top: 2px solid var(--accent);
  box-shadow: 0 2px 16px rgba(0,0,0,.45);
  display: flex; align-items: center;
  user-select: none;
}
.topbar-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--fs-md,0.875rem); transition: all .2s;
  background: var(--surface2); border: 1px solid var(--border);
}
.topbar-btn:hover { color: var(--text); border-color: var(--border-h); }
.topbar-avatar {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs,0.6875rem); font-weight: 800; color: var(--text);
  transition: box-shadow .2s;
}
.topbar-avatar:hover { box-shadow: 0 0 16px rgba(192,57,43,.2); }

.sidebar-left {
  width: var(--sidebar-l); flex-shrink: 0;
  background: linear-gradient(180deg, #0d0d15 0%, #09090e 100%);
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  padding: 10px 0 0; position: relative;
  view-transition-name: sidebar-left;
}
.nav-section {
  margin: 9px 8px 5px; padding: 5px 11px; border-radius: 4px;
  font-size: var(--fs-3xs,0.5625rem); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #9398a1;
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(255,255,255,.05), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.014));
}
.nav-section:first-child { margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 8px; padding: 2px 10px; border-radius: 4px;
  font-size: var(--fs-sm,0.75rem); font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,.02);
  transition: background .15s, color .15s, box-shadow .15s; cursor: pointer;
}
.nav-item:hover {
  color: rgba(234,234,248,.85);
  background: rgba(255,255,255,.055);
}
.nav-item.active {
  color: var(--text); font-weight: 600;
  background: linear-gradient(90deg, rgba(192,57,43,.24) 0%, rgba(192,57,43,.05) 100%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-icon { width: 14px; text-align: center; flex-shrink: 0; font-size: var(--fs-2xs,0.625rem); color: var(--muted2); transition: color .15s; }
.nav-item:hover .nav-icon  { color: var(--muted); }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-label { flex: 1; }
.nav-badge {
  font-size: var(--fs-3xs,0.5625rem); font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: var(--accent); color: #fff; flex-shrink: 0;
}
.nav-badge.green  { background: var(--green); }
.nav-badge.gold   { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(243,156,18,.3); }
.nav-badge.blue   { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(52,152,219,.3); }
.nav-badge.red    { background: var(--accent); }

.nav-group { display: block; }
.nav-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.nav-toggle .nav-sec-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.nav-toggle:hover { color: #cfd3da; }
.nav-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.nav-chevron { font-size: var(--fs-3xs,0.5625rem); color: #9398a1; transition: transform .18s ease; flex-shrink: 0; }
.nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }
.nav-sec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 5px rgba(192,57,43,.7); }
.nav-group:not(.collapsed) .nav-sec-dot { display: none; }

.tb-count {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--accent); color: #fff; font-size: var(--fs-3xs,0.5625rem); font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #0d0d15;
}

input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--border); background: var(--surface3);
  cursor: pointer; position: relative; flex-shrink: 0; vertical-align: middle;
  transition: background .15s, border-color .15s;
}
input[type="checkbox"]:hover { border-color: rgba(241,196,15,.55); }
input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 50%; top: 45%;
  width: 4px; height: 8px; border: solid #1b1b22;
  border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg);
}

.ubb { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.ubb-hidden { display: none !important; }
.ubb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border-radius: 9px 9px 0 0;
  padding: 6px 8px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border);
}
.ubb-btn {
  width: 25px; height: 25px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font-size: var(--fs-xs,0.6875rem); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s;
}
.ubb-btn:hover { background: rgba(255,255,255,.07); color: #fff; border-color: var(--border); }
.ubb-btn .fa-youtube { color: #ff3d3d; }
.ubb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.ubb-select {
  height: 25px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: var(--fs-xs,0.6875rem); padding: 0 5px; cursor: pointer;
}
.ubb-area {
  min-height: 180px; max-height: 460px; overflow-y: auto; padding: 11px 14px; border-radius: 0 0 9px 9px;
  font-size: var(--fs-sm,0.75rem); line-height: 1.6; color: var(--text); outline: none;
  background: rgba(255,255,255,.11);
}
.ubb-area:empty::before { content: attr(data-ph); color: var(--muted2); }
.ubb-area.ubb-err { box-shadow: inset 0 0 0 2px var(--accent); }
.ubb-area:focus { background: rgba(255,255,255,.14); }

.ubb-area blockquote, .bb-quote {
  margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: rgba(192,57,43,.08); border-radius: 0 8px 8px 0; color: var(--muted);
}
.ubb-area pre, .bb-code {
  margin: 8px 0; padding: 10px 12px; background: #0c0c12; border: 1px solid var(--border);
  border-radius: 8px; font-family:inherit; font-size: var(--fs-base,0.8125rem);
  white-space: pre-wrap; word-wrap: break-word; color: #d7e0ea;
}
.ubb-spoiler, .bb-spoiler {
  background: #2a2a33; color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer;
  filter: blur(.01px); text-shadow: 0 0 9px rgba(255,255,255,.55);
}
.bb-spoiler.show { color: var(--text); text-shadow: none; background: rgba(255,255,255,.06); }
.bb-u { text-decoration: underline; }
.bb-btn { margin-top: 8px; }
.ubb-img, .bb-img { max-width: 100%; max-height: 320px; border-radius: 8px; margin: 6px 0; display: block; }
.bb-img { display: inline-block; vertical-align: top; max-height: none; margin: 6px 6px 6px 0; }
.ubb-resize {
  display: inline-block; resize: horizontal; overflow: hidden; max-width: 100%;
  line-height: 0; margin: 6px 0; border: 1px dashed transparent; border-radius: 8px; vertical-align: top;
}
.ubb-resize:hover { border-color: var(--accent); }
.ubb-resize img { width: 100%; height: auto; margin: 0; display: block; }
.bb-list { margin: 6px 0 6px 20px; }
.ubb-area a { color: var(--blue); text-decoration: underline; }
.ubb-area a.btn { color: #fff; text-decoration: none; }
.ubb-table {
  border-collapse: collapse; margin: 8px 0; width: auto; max-width: 100%;
  background: rgba(255,255,255,.015); font-size: var(--fs-md,0.875rem);
}
.ubb-table td, .ubb-table th {
  border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; text-align: left; min-width: 40px;
}
.ubb-table th {
  background: rgba(255,255,255,.05); font-weight: 700; color: var(--text);
}
.ubb-table td:empty::after, .ubb-table th:empty::after { content: '\00a0'; }

.ubb-yt {
  position: relative; display: inline-block; vertical-align: top; width: 280px; max-width: 100%; margin: 6px 6px 6px 0;
  border-radius: 10px; overflow: hidden; cursor: default; border: 1px solid var(--border);
}
.ubb-yt img { width: 100%; display: block; }
.ubb-yt-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); color: #fff; font-size: var(--fs-3xl,1.75rem);
}
.ubb-yt-play i { background: #ff3d3d; width: 52px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md,0.875rem); }

.bb-yt { display: inline-block; vertical-align: top; position: relative; width: 340px; max-width: 100%; margin: 8px 8px 0 0; }
.bb-yt iframe { width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: 1px solid var(--border); }

.ubb-colors {
  position: absolute; top: 46px; left: 8px; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 6px; width: 188px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border-h); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.ubb-sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: transform .12s; }
.ubb-sw:hover { transform: scale(1.12); }

.ubb-emoji {
  position: absolute; top: 46px; left: 8px; right: 8px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-h); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.ubb-colors[hidden], .ubb-emoji[hidden] { display: none !important; }
.ubb-emoji-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
.ubb-emoji-tab {
  font-size: var(--fs-xs,0.6875rem); font-weight: 700; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
}
.ubb-emoji-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ubb-emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px;
  padding: 8px 10px; max-height: 180px; overflow-y: auto;
}
.ubb-emoji-item { font-size: var(--fs-2xl,1.375rem); line-height: 1; padding: 5px; border-radius: 7px; cursor: pointer; background: transparent; border: none; }
.ubb-emoji-item:hover { background: rgba(255,255,255,.09); }

.ubb-pop-ov { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ubb-pop { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border-h); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ubb-pop-head { padding: 13px 16px; font-weight: 800; font-size: var(--fs-md,0.875rem); border-bottom: 1px solid var(--border); }
.ubb-pop-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ubb-pop-label { font-size: var(--fs-xs,0.6875rem); color: var(--muted); font-weight: 700; }
.ubb-pop-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

.sl-profile {
  padding: 8px 14px 9px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sl-profile-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sl-ava-wrap { position: relative; flex-shrink: 0; }
.sl-ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #7a1c12 100%);
  border: 2px solid rgba(192,57,43,.35);
  box-shadow: 0 0 0 1px rgba(192,57,43,.12), 0 0 18px rgba(192,57,43,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm,0.75rem); font-weight: 800; color: #fff;
}
.sl-ava img, .topbar-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.sl-ava-online {
  position: absolute; top: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
  animation: online-pulse 2.5s infinite;
}
.sl-info   { flex: 1; min-width: 0; }
.sl-name   { font-size: var(--fs-md,0.875rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-rank   { font-size: var(--fs-2xs,0.625rem); color: var(--gold); margin-top: 1px; }

.main-content {
  flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable;
  background:
    radial-gradient(ellipse at 20% 65%, rgba(192,57,43,.11) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 15%, rgba(192,57,43,.05) 0%, transparent 40%),
    linear-gradient(180deg, #0a0a0f 0%, #0d0d16 100%);
  display: flex; flex-direction: column; position: relative;
  container-type: inline-size;
  container-name: main-content;
}
.main-content::before {
  content: 'BELLOCCO';
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-size: 7rem; font-weight: 900; color: rgba(192,57,43,.05);
  pointer-events: none; user-select: none;
  letter-spacing: 8px; line-height: 1; white-space: nowrap; z-index: 0;
}
.page-content { padding: 12px 15px; display: flex; flex-direction: column; gap: 10px; }

.hl-mobile-cats { display: none; }
@container main-content (max-width: 1000px) {
  .hl-mobile-cats { display: block; margin-bottom: 12px; }
  .cmp-split-side.hl-cats { display: none; }
}
.pf-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs,0.6875rem); font-weight: 700;
  padding: 3px 10px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}

.cs4-fam{--fc:#ff5e57;position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;border:1px solid color-mix(in srgb, var(--fc) 45%, rgba(255,255,255,.16));border-radius:16px;padding:18px 20px;margin-bottom:9px;box-shadow:0 8px 28px -10px color-mix(in srgb, var(--fc) 55%, transparent),inset 0 0 0 1px rgba(255,255,255,.04);animation:cs4FamBreathe 4.5s ease-in-out infinite}
@keyframes cs4FamBreathe{0%,100%{box-shadow:0 8px 28px -10px color-mix(in srgb, var(--fc) 55%, transparent),inset 0 0 0 1px rgba(255,255,255,.04)}50%{box-shadow:0 10px 38px -8px color-mix(in srgb, var(--fc) 80%, transparent),inset 0 0 0 1px rgba(255,255,255,.08)}}
.cs4-fam-stripes{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);pointer-events:none;animation:cs4FamStripes 14s linear infinite}
@keyframes cs4FamStripes{0%{background-position:0 0}100%{background-position:220px 0}}
.cs4-fam-sheen{position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 45%,transparent 90%);transform:skewX(-18deg);pointer-events:none;animation:cs4FamSheen 5s ease-in-out infinite}
@keyframes cs4FamSheen{0%{left:-60%}35%{left:130%}100%{left:130%}}
.cs4-fam-glow{position:absolute;inset:-30% -10% -30% 40%;background:radial-gradient(circle, color-mix(in srgb, var(--fc) 55%, transparent) 0%, transparent 65%);opacity:.5;pointer-events:none;animation:cs4FamGlowPulse 4.5s ease-in-out infinite}
@keyframes cs4FamGlowPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
.cs4-fam-emb-wrap{position:relative;z-index:2;flex:none;width:64px;height:64px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.cs4-fam:hover .cs4-fam-emb-wrap{transform:scale(1.08)}
.cs4-fam-emb-orbit{position:absolute;inset:-13px;border-radius:50%;border:1px dashed color-mix(in srgb, var(--fc) 45%, transparent);animation:cs4FamSpin 9s linear infinite reverse}
.cs4-fam-emb-spark{position:absolute;top:-2.5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px var(--fc),0 0 12px 5px color-mix(in srgb, var(--fc) 70%, transparent)}
.cs4-fam-emb-ring{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 0deg, color-mix(in srgb, var(--fc) 85%, transparent), transparent 35%, color-mix(in srgb, var(--fc) 85%, transparent) 70%, transparent 100%);animation:cs4FamSpin 6s linear infinite;filter:blur(.3px)}
.cs4-fam-emb-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#101016}
@keyframes cs4FamSpin{to{transform:rotate(360deg)}}
.cs4-fam-emb{width:48px;height:48px;border-radius:14px;flex:none;display:block;position:relative;z-index:2;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.cs4-fam-emb-in{width:100%;height:100%;border-radius:inherit;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#17171f;font-size:var(--fs-xl,1.125rem)}
.cs4-fam-emb-in img{width:100%;height:100%;object-fit:cover}
.cs4-fam-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.cs4-fam b{font-size:var(--fs-lg,1rem);text-shadow:0 2px 10px rgba(0,0,0,.75),0 0 18px color-mix(in srgb, var(--fc) 50%, transparent)}
@media (prefers-reduced-motion: reduce){.cs4-fam,.cs4-fam-stripes,.cs4-fam-sheen,.cs4-fam-glow,.cs4-fam-emb-ring,.cs4-fam-emb-orbit{animation:none}}

.pf-famchip-fx{animation:cs4FamBreathe 4.5s ease-in-out infinite}
.pf-famchip-ring{position:absolute;left:1px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:conic-gradient(from 0deg, color-mix(in srgb, var(--fc) 85%, transparent), transparent 35%, color-mix(in srgb, var(--fc) 85%, transparent) 70%, transparent 100%);animation:cs4FamSpin 6s linear infinite;pointer-events:none}
@media (prefers-reduced-motion: reduce){.pf-famchip-fx,.pf-famchip-ring{animation:none}}

.pf-famring{display:inline-flex;align-items:center;vertical-align:-3px}
.pf-famring-dot{width:18px;height:18px;border-radius:50%;display:inline-block;box-sizing:border-box;border:2.5px solid var(--fc);background:color-mix(in srgb, var(--fc) 45%, #17171f);box-shadow:0 0 4px color-mix(in srgb, var(--fc) 60%, transparent)}
.pf-famring.styled .pf-famring-dot{animation:pfFamRingPulse 2.4s ease-in-out infinite}
@keyframes pfFamRingPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fc) 55%, transparent)}50%{box-shadow:0 0 7px 2px color-mix(in srgb, var(--fc) 75%, transparent)}}
@media (prefers-reduced-motion: reduce){.pf-famring.styled .pf-famring-dot{animation:none}}
.ava-circle {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #7a1c12 100%);
  border: 3px solid rgba(192,57,43,.4); color: #fff; font-weight: 800; font-size: var(--fs-4xl,2.25rem);
  box-shadow: 0 0 0 1px rgba(192,57,43,.15), 0 10px 30px rgba(192,57,43,.22);
}
.ava-circle img { width: 100%; height: 100%; object-fit: cover; }
.ava-drop {
  width: 100%; max-width: 430px; border: 2px dashed var(--border-h); border-radius: 14px;
  padding: 22px 16px; cursor: pointer; color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.ava-drop:hover, .ava-drop.drag { border-color: var(--accent); background: rgba(192,57,43,.07); color: var(--text); }
.ava-drop i { font-size: var(--fs-2xl,1.375rem); color: var(--accent); margin-bottom: 8px; }

body.game h1, body.game h2, body.game h3, body.game h4 {
  margin: 0; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.3px;
}
body.game h1 { font-size: var(--fs-2xl,1.375rem); }
body.game h2 { font-size: var(--fs-lg,1rem); }
body.game h3 { font-size: var(--fs-md,0.875rem); }
body.game h4 { font-size: var(--fs-base,0.8125rem); }
.rank-mini { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }

.prog    { height: 4px; background: rgba(255,255,255,.05); border-radius: 99px; overflow: hidden; }

.card {
  position: relative;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeGaussianBlur stdDeviation='0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(72% 52% at 50% 32%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, rgba(28,31,38,.5), rgba(12,14,18,.58));
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  border: 2.5px solid rgba(255,255,255,.1);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 5px 16px rgba(0,0,0,.32), inset 0 0 0 1px rgba(0,0,0,.25);
  transition: border-color .16s ease;
}
.card:hover { border-color: rgba(255,255,255,.16); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 5px; border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(255,255,255,.06), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
}
.card-title { display: flex; align-items: center; gap: 7px; font-family:inherit; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-sm,0.75rem); font-weight: 600; color: #d6d9dd; }
.card-title i { color: var(--accent); font-size: var(--fs-xs,0.6875rem); }
.card-body    { padding: 8px 11px; }

.widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 99px;
  font-size: var(--fs-sm,0.75rem); font-weight: 700; font-family: inherit;
  cursor: pointer; border: none; transition: all .18s;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn-primary,
.btn-green { font-weight: 900; letter-spacing: .2px; }
.btn-primary::after,
.btn-green::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  animation: btn-shine 3.6s ease-in-out infinite;
}
@keyframes btn-shine { 0%, 58% { left: -60%; } 100% { left: 150%; } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-green::after { animation: none; }
}

.btn-primary  {
  background: linear-gradient(135deg, #f9e79f, #f1c40f 45%, #e67e22);
  color: #1a1206;
  box-shadow: 0 6px 18px -8px rgba(241,196,15,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(241,196,15,.95), inset 0 1px 0 rgba(255,255,255,.45); transform: translateY(-1px); filter: brightness(1.04); }
.btn-ghost    { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface3); color: var(--text); border-color: var(--border-h); }
.btn-green    {
  background: linear-gradient(135deg, #58d68d, #2ecc71 45%, #1e8449);
  color: #06230f;
  box-shadow: 0 6px 18px -8px rgba(46,204,113,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-green:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 26px -8px rgba(46,204,113,.95), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-sm    { padding: 6px 13px; font-size: var(--fs-sm,0.75rem); }
.btn-block { width: 100%; justify-content: center; }

.btn-submit {
  position: relative; overflow: hidden;
  width: 100%; padding: 14px; margin-top: 20px;
  border-radius: 99px; border: none;
  background: linear-gradient(135deg, #f9e79f, #f1c40f 45%, #e67e22);
  color: #1a1206;
  font-size: var(--fs-lg,1rem); font-weight: 900; font-family: inherit;
  cursor: pointer; transition: all .2s; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 18px -8px rgba(241,196,15,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-submit::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  animation: btn-shine 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-submit::after { animation: none; } }
.btn-submit:hover   { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(241,196,15,.95), inset 0 1px 0 rgba(255,255,255,.45); filter: brightness(1.04); }
.btn-submit:active  { transform: translateY(0); }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: transparent;
  font-size: var(--fs-md,0.875rem); font-weight: 600; color: var(--muted);
  font-family: inherit; cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn-secondary:hover { border-color: rgba(255,255,255,.2); color: var(--text); background: var(--surface2); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs,0.625rem); font-weight: 700; padding: 3px 8px;
  border-radius: 99px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.b-red    { background: rgba(192,57,43,.15); color: var(--accent); border: 1px solid rgba(192,57,43,.25); }
.b-green  { background: rgba(46,204,113,.14); color: var(--green); border: 1px solid rgba(46,204,113,.24); }
.b-blue   { background: rgba(52,152,219,.14); color: var(--blue);  border: 1px solid rgba(52,152,219,.24); }
.b-gold   { background: rgba(243,156,18,.14); color: var(--gold);  border: 1px solid rgba(243,156,18,.24); }
.sb             { height: 100%; border-radius: 99px; transition: width .55s ease; }

.sidebar-right {
  width: var(--sidebar-r); flex-shrink: 0;
  background: linear-gradient(180deg, #0d0d15 0%, #09090e 100%);
  border-left: 1px solid rgba(255,255,255,.07);
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  padding: 10px 0 0; display: flex; flex-direction: column;
  view-transition-name: sidebar-right;
}
.crime-wait { padding: 40px 20px 44px; text-align: center; }
.crime-wait-ring {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-3xl,1.75rem); color: var(--gold);
  background: var(--gold-dim); border: 1px solid rgba(243,156,18,.3);
  animation: crime-pulse 1.8s ease-in-out infinite;
}
@keyframes crime-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(243,156,18,.25); } 50% { box-shadow: 0 0 0 12px rgba(243,156,18,0); } }
.crime-wait-title { font-size: var(--fs-lg,1rem); font-weight: 800; color: #fff; }
.crime-wait-time { font-size: var(--fs-4xl,2.25rem); font-weight: 900; color: var(--gold); margin: 8px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.crime-wait-sub { font-size: var(--fs-sm,0.75rem); color: var(--muted); }
.c-red    { color: var(--accent); }
.c-green  { color: var(--green); }
.c-blue   { color: var(--blue); }
.c-gold   { color: var(--gold); }
.c-muted  { color: var(--muted); }

.mob-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bot-nav-h); z-index: 600;
  background: linear-gradient(180deg, rgba(26,20,32,.97), rgba(9,9,14,.99));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  align-items: stretch;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 4px calc(env(safe-area-inset-bottom));
}

.mob-nav::-webkit-scrollbar { display: none; }
.mob-nav-btn {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--muted2); cursor: pointer; transition: color .15s;
  text-decoration: none;
  background: none; border: none; font: inherit;
}
.mob-nav-dot {
  position: absolute; top: 2px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-h); border: 1.5px solid #0d0912;
}
.mob-nav-btn i {
  width: 40px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg,1rem); border-radius: 12px; transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.mob-nav-btn:hover i { background: rgba(255,255,255,.05); }
.mob-nav-btn span { max-width: 100%; font-size: var(--fs-3xs,0.5625rem); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.mob-nav-btn:active i { transform: scale(.9); }
.mob-nav-btn.active { color: #fff; }
.mob-nav-btn.active i {
  color: #fff; transform: translateY(-3px) scale(1.05);
  background: linear-gradient(135deg, var(--accent), #8a2418);
  box-shadow: 0 6px 16px rgba(192,57,43,.5);
}
.mob-nav-btn.active::before {
  content: ''; position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent);
  box-shadow: 0 0 10px rgba(192,57,43,.7);
}
.mob-nav-btn:hover { color: var(--text); }

.mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(3px); z-index: 490;
}
.mob-overlay.show { display: block; }

.tb-dd-wrap { position: relative; }
.tb-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 216px; background: #111118;
  border: 1px solid rgba(255,255,255,.1); border-radius: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  z-index: 700; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.tb-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.tb-dd-head { padding: 12px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tb-dd-head-title { font-size: var(--fs-sm,0.75rem); font-weight: 700; color: var(--text); }
.tb-dd-head-sub   { font-size: var(--fs-xs,0.6875rem); color: var(--muted); margin-top: 2px; }
.tb-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: var(--fs-sm,0.75rem); color: var(--muted);
  cursor: pointer; text-decoration: none; transition: background .14s, color .14s;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.tb-dd-item:last-of-type { border-bottom: none; }
.tb-dd-item:hover { background: rgba(255,255,255,.045); color: var(--text); }
.tb-dd-item i { width: 16px; text-align: center; font-size: var(--fs-sm,0.75rem); flex-shrink: 0; }
.tb-dd-item.danger       { color: rgba(192,57,43,.75); }
.tb-dd-item.danger:hover { background: rgba(192,57,43,.08); color: var(--accent); }

.tb-dd-account { min-width: 232px; }
.tb-dd-head-account { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.tb-dd-account-ava {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm,0.75rem); font-weight: 800; color: var(--text);
}
.tb-dd-account-ava img { width: 100%; height: 100%; object-fit: cover; }
.tb-dd-account-id { min-width: 0; }
.tb-dd-account .tb-dd-head-title { font-size: var(--fs-base,0.8125rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-dd-account .tb-dd-head-sub   { font-size: var(--fs-xs,0.6875rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-dd-account .tb-dd-item { padding: 8px 14px; font-size: var(--fs-sm,0.75rem); }
.tb-dd-close { display: none; }
.tb-dd-account .tb-dd-item.danger { border-top: 1px solid rgba(255,255,255,.06); margin-top: 2px; }

@media (max-width: 1200px) {
  :root { --sidebar-r: 250px; }
}
@media (max-width: 1000px), (max-height: 480px) and (pointer: coarse) {
  :root { --sidebar-r: 0px; }
  .sidebar-right { display: none; }
  .sidebar-right {
    position: fixed !important; top: var(--topbar-h); right: 0; bottom: 0;
    width: 280px !important; z-index: 495;
    display: flex !important; flex-direction: column; overflow-y: auto;
    transform: translateX(110%); transition: transform .28s ease;
  }
  .sidebar-right.mob-open { transform: translateX(0); }
}
@media (max-width: 1000px), (max-height: 480px) and (pointer: coarse) {
  :root { --sidebar-l: 0px; --topbar-h: 96px; }
  .sidebar-left {
    position: fixed !important; top: var(--topbar-h); left: 0;
    bottom: var(--bot-nav-h); width: 260px !important;
    z-index: 495; display: flex !important;
    transform: translateX(-100%); transition: transform .28s ease;
  }
  .sidebar-left.mob-open { transform: translateX(0); }
  .sidebar-right { bottom: var(--bot-nav-h); }

  .topbar { flex-wrap: wrap; align-content: flex-start; align-items: center; }
  #tb-social-btn { display: none; }
  .main-content { padding-bottom: var(--bot-nav-h); }
  .page-content { padding: 14px 0; gap: 14px; }
  .page-content { overflow-wrap: break-word; word-break: normal; }
  .dtable td, .dtable th { overflow-wrap: break-word; word-break: normal; }
  .mob-nav { display: flex; }
}
@media (max-width: 480px) {
  .page-content { padding: 12px 0; gap: 12px; }
}


.container   { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: var(--fs-2xs,0.625rem); font-weight: 700;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 5px;
}
.form-label .req { color: var(--accent); }
.form-label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted2); font-size: var(--fs-sm,0.75rem); }
.form-label-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
}
.form-label-row .form-label { margin: 0; }
.form-label-link { font-size: var(--fs-sm,0.75rem); color: var(--muted); transition: color .2s; }
.form-label-link:hover { color: var(--accent); }
.input-wrap { position: relative; }
.input-wrap .ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: var(--fs-xs,0.6875rem); pointer-events: none;
}
.input-wrap .eye {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: var(--fs-xs,0.6875rem); cursor: pointer;
  background: none; border: none; padding: 16px; transition: color .2s;
}
.input-wrap .eye:hover { color: var(--text); }
.form-input {
  width: 100%; background: rgba(255,255,255,.11); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm,0.75rem);
  font-family: inherit; padding: 7px 10px;
  transition: border-color .2s, background .2s;
}
.input-wrap .form-input { padding: 7px 28px; }
select.form-input { padding-right: 26px; }
.form-input:focus        { outline: none; border-color: var(--accent); background: rgba(255,255,255,.14); }
.form-input::placeholder { color: rgba(234,234,248,.45); }
select option, select optgroup {
  background-color: #1b1b25; color: var(--text);
}
select optgroup { color: var(--muted); font-style: normal; }
.form-input.valid        { border-color: rgba(39,174,96,.5); }
.form-input.invalid      { border-color: rgba(192,57,43,.5); }
#ref-link { font-size: var(--fs-base,0.8125rem); padding: 9px 12px; color: var(--muted); }
.form-hint { font-size: var(--fs-sm,0.75rem); color: var(--muted2); margin-top: 4px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-strength      { height: 3px; border-radius: 2px; background: var(--surface3); margin-top: 6px; overflow: hidden; }
.pw-strength-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; width: 0; }
.form-note { font-size: var(--fs-sm,0.75rem); color: var(--muted2); text-align: center; line-height: 1.6; margin-top: 14px; }
.form-note a { color: var(--muted); text-decoration: underline; }
.form-note a:hover { color: var(--text); }

.divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: var(--fs-sm,0.75rem); color: var(--muted); white-space: nowrap; }

.oauth-row { display: flex; gap: 8px; justify-content: center; }
.oauth-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid transparent;
  color: #fff; font-size: var(--fs-sm,0.75rem); text-decoration: none; cursor: pointer;
  transition: all .2s;
}
.oauth-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.oauth-btn.oauth-facebook { background: #1877f2; }
.oauth-btn.oauth-discord  { background: #5865f2; }
.oauth-btn.oauth-tiktok   { background: #000; border: 1px solid rgba(255,255,255,.25); }
.oauth-btn.oauth-google   { background: #fff; color: #4285f4; border-color: rgba(255,255,255,.15); }

.bottom-links { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bottom-links a    { font-size: var(--fs-sm,0.75rem); color: var(--muted2); transition: color .2s; }
.bottom-links a:hover { color: var(--muted); }
.bottom-links .sep { color: var(--border); font-size: var(--fs-2xs,0.625rem); }

.msg-box {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-base,0.8125rem); line-height: 1.5;
  display: none; align-items: center; gap: 9px; margin-bottom: 16px;
}
.msg-box.show { display: flex; }
.msg-error    { background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.3); color: var(--red); }
.msg-success  { background: rgba(39,174,96,.10); border: 1px solid rgba(39,174,96,.3); color: #2ecc71; }
.alert         { border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 20px; font-size: var(--fs-md,0.875rem); line-height: 1.65; text-align: center; }
.alert i       { display: block; font-size: var(--fs-4xl,2.25rem); margin-bottom: 8px; }

body.auth-split { min-height: 100vh; display: flex; overflow: hidden; height: 100vh; }

.auth-left {
  width: 44%; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 52px; position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(192,57,43,.3) 40%, transparent 100%);
  z-index: 2;
}
.auth-left--login {
  background:
    radial-gradient(ellipse at -10% 110%, rgba(192,57,43,.45) 0%, transparent 50%),
    radial-gradient(ellipse at 90% -5%,  rgba(192,57,43,.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%,  rgba(192,57,43,.04) 0%, transparent 70%),
    linear-gradient(160deg, #0d0d18 0%, #07070d 100%);
}
.auth-left--login::after {
  content: 'BELLOCCO';
  position: absolute; bottom: -30px; left: -30px;
  font-size: 13rem; font-weight: 900; color: rgba(192,57,43,.07);
  pointer-events: none; user-select: none; letter-spacing: 6px; line-height: 1; z-index: 0;
}
.auth-left--register {
  background:
    radial-gradient(ellipse at 80% 110%, rgba(192,57,43,.4) 0%, transparent 50%),
    radial-gradient(ellipse at -5% -5%,  rgba(192,57,43,.10) 0%, transparent 40%),
    linear-gradient(160deg, #0d0d18 0%, #07070d 100%);
}
.auth-left--register::after {
  content: 'JOIN';
  position: absolute; bottom: -15px; left: -15px;
  font-size: 15rem; font-weight: 900; color: rgba(192,57,43,.07);
  pointer-events: none; user-select: none; letter-spacing: 6px; line-height: 1; z-index: 0;
}
.auth-left-logo      { height: 34px; width: auto; display: block; position: relative; z-index: 1; }
.auth-left-body      { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; position: relative; z-index: 1; }
.auth-tagline        { font-size: var(--fs-5xl,3rem); font-weight: 900; line-height: 1.08; margin-bottom: 18px; letter-spacing: -1px; }
.auth-tagline em     { color: var(--accent); font-style: normal; display: block; }
.auth-sub            { font-size: var(--fs-md,0.875rem); color: var(--muted); line-height: 1.8; margin-bottom: 40px; max-width: 340px; }
.auth-features       { display: flex; flex-direction: column; gap: 10px; }
.auth-feature        { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.025); border-left: 2px solid rgba(192,57,43,.35); transition: all .2s; }
.auth-feature:hover  { background: rgba(255,255,255,.04); border-left-color: var(--accent); }
.auth-feature-icon   { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; background: rgba(192,57,43,.14); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: var(--fs-lg,1rem); }
.auth-feature-text .auth-feature-title { font-size: var(--fs-base,0.8125rem); font-weight: 700; margin-bottom: 2px; color: var(--text); }
.auth-feature-text p  { font-size: var(--fs-sm,0.75rem); color: var(--muted); line-height: 1.5; margin: 0; }
.auth-perks { display: flex; flex-direction: column; gap: 8px; }
.auth-perk  { display: flex; align-items: center; gap: 13px; font-size: var(--fs-base,0.8125rem); color: var(--muted); padding: 11px 16px; border-radius: var(--radius-sm); background: rgba(255,255,255,.025); border-left: 2px solid rgba(39,174,96,.35); }
.auth-perk i { color: var(--green); font-size: var(--fs-sm,0.75rem); flex-shrink: 0; }
.auth-left-footer        { font-size: var(--fs-sm,0.75rem); color: rgba(234,234,248,.3); display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.auth-left-footer::before { content: ''; width: 28px; height: 1px; background: rgba(192,57,43,.4); }
.auth-right {
  flex: 1; background: linear-gradient(160deg, #0e0e18 0%, #0a0a12 100%);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 28px; overflow-y: auto;
}
.auth-right-inner    { width: 100%; max-width: 420px; }
.auth-form-header    { margin-bottom: 32px; }
.auth-form-header h1 { font-size: var(--fs-3xl,1.75rem); font-weight: 900; margin-bottom: 8px; letter-spacing: -.5px; }
.auth-form-header p  { font-size: var(--fs-md,0.875rem); color: var(--muted); line-height: 1.6; }
.auth-form-header a  { color: var(--accent); font-weight: 600; }

.hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 15% 70%, rgba(192,57,43,.35) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 15%, rgba(192,57,43,.14) 0%, transparent 42%),
    linear-gradient(180deg, rgba(3,3,7,.94) 0%, rgba(5,5,12,.88) 60%, rgba(4,4,10,.95) 100%),
    url('/assets/img/dark-city.webp') center bottom / cover no-repeat;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: 0; right: 5%; bottom: 0;
  width: 55%; max-width: 700px;
  background: url('/assets/img/gun-table.jpg') center center / contain no-repeat;
  opacity: .045; pointer-events: none; z-index: 0;
  filter: grayscale(100%) contrast(1.5);
}
.hero::after {
  content: 'OMERTÀ';
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
  font-size: clamp(48px, 14vw, 160px); font-weight: 900; color: rgba(192,57,43,.045);
  pointer-events: none; user-select: none; letter-spacing: 14px; white-space: nowrap; z-index: 0;
}

.features { padding: 100px 24px; background: #080810; }

@media (max-width: 860px) {
  body.auth-split           { flex-direction: column; overflow: auto; height: auto; }
  .auth-left                { width: 100%; min-height: auto; padding: 20px 24px; flex-direction: row; align-items: center; gap: 16px; }
  .auth-left::after         { display: none; }
  .auth-left-body,
  .auth-left-footer         { display: none; }
  .auth-left-logo           { height: 26px; }
  .auth-right               { padding: 28px 20px; min-height: auto; }
  .auth-right-inner         { max-width: 100%; }
  .form-row-2               { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hero::before             { opacity: .03; }
}


.section       { padding: 90px 0; }
.step {
  text-align: center; padding: 32px 24px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius); transition: all .2s; position: relative;
}
.step:hover { background: rgba(255,255,255,.04); transform: translateY(-3px); }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 50px; right: -15px;
  width: 30px; height: 1px; background: rgba(192,57,43,.3);
}
.step h3 { font-size: var(--fs-lg,1rem); font-weight: 800; margin-bottom: 8px; }
.step p  { font-size: var(--fs-base,0.8125rem); color: var(--muted); line-height: 1.7; margin: 0; }
@media (max-width: 768px) {
  .step:not(:last-child)::after { display: none; }
  .section       { padding: 60px 0; }
}

body.public { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
.pub-logo { height: 27px; width: auto; display: block; }
.pub-main { flex: 1; padding: 22px 16px 40px; }
.pub-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 18px 16px; }

.icon-picker { position:relative; display:inline-block; }
.icon-picker-btn { display:flex; align-items:center; gap:8px; min-width:150px; padding:8px 10px; background:var(--surface2,#1b1b22); border:1px solid rgba(255,255,255,.12); border-radius:8px; color:var(--text,#eee); cursor:pointer; font:inherit; font-size:var(--fs-sm,0.75rem); }
.icon-picker-btn .ip-label { font-family:inherit; font-size:var(--fs-xs,0.6875rem); opacity:.85; }
.icon-picker-pop { display:none; position:absolute; z-index:50; top:calc(100% + 4px); left:0; width:280px; max-width:80vw; background:#15151b; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.icon-picker.open .icon-picker-pop { display:block; }
.icon-picker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; max-height:220px; overflow-y:auto; margin-top:8px; }
.icon-picker-opt { aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid transparent; border-radius:7px; color:#ccc; cursor:pointer; font-size:var(--fs-md,0.875rem); }
.icon-picker-opt:hover { background:rgba(241,196,15,.18); color:var(--gold,#f1c40f); }
.icon-picker-opt.sel { border-color:var(--gold,#f1c40f); color:var(--gold,#f1c40f); }

.flag-img { display:inline-block; vertical-align:-2px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25); object-fit:cover; }
.flag-emoji { display:inline-block; vertical-align:middle; }

.auth-socials{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.auth-socials-lbl{font-size:var(--fs-sm,0.75rem);color:rgba(234,234,248,.4);margin-right:2px}
.auth-socials a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfcfe0;font-size:var(--fs-lg,1rem);text-decoration:none;transition:.15s}
.auth-socials a:hover{background:#c0392b;border-color:#c0392b;color:#fff;transform:translateY(-2px)}

.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #a93226; transform: translateY(-1px); }

.bdg { position: relative; width: var(--bs,64px); height: var(--bs,64px); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--g1,#ffe27a), var(--g2,#f1c40f) 55%, var(--g3,#a9791a));
  box-shadow: 0 5px 16px -2px color-mix(in srgb, var(--g2,#f1c40f) 55%, transparent), 0 3px 10px rgba(0,0,0,.5),
    inset 0 2px 5px rgba(255,255,255,.6), inset 0 -5px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.bdg::before { content:''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.65) 18deg, transparent 42deg, transparent 360deg);
  animation: bdgSweep 5s linear infinite; mix-blend-mode: overlay; }
.bdg-ring { position: absolute; inset: 6%; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08); }
.bdg > i { position: relative; font-size: calc(var(--bs,64px) * .4); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 10px rgba(255,255,255,.25); }
.bdg-s { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-size: calc(var(--bs,64px) * .17); line-height: 1; font-weight: 900; color: #fff;
  background: #15151d; border: 1px solid rgba(255,255,255,.3); padding: 2px 6px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 1; }
.bdg-cnt { position: absolute; top: -5px; right: -6px; font-size: calc(var(--bs,64px) * .2); line-height: 1; font-weight: 900; color: #1a1206;
  background: linear-gradient(135deg, #ffe27a, #f1c40f); border: 1px solid rgba(255,255,255,.55); padding: 2px 6px; border-radius: 99px; box-shadow: 0 2px 8px rgba(243,156,18,.5); z-index: 1; }
@keyframes bdgSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bdg::before { animation: none; } }

@media (max-width: 640px) {
  .card { overflow: hidden; }
}

.form-accept { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: var(--fs-base,0.8125rem); line-height: 1.5; color: var(--muted); cursor: pointer; }
.form-accept input[type=checkbox] { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.form-accept a { color: var(--accent-h); text-decoration: none; }
.form-accept a:hover { text-decoration: underline; }
.form-accept strong { color: rgba(234,234,248,.8); }

.form-remember { display: flex; align-items: center; gap: 9px; margin: 6px 0 14px; font-size: var(--fs-md,0.875rem); color: var(--muted); cursor: pointer; user-select: none; }
.form-remember input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.form-remember span { line-height: 1.3; }

.chat-fab-badge{position:absolute;top:-3px;right:-3px;background:#e74c3c;color:#fff;font-size:var(--fs-2xs,0.625rem);font-weight:800;
  border-radius:9px;padding:1px 5px;min-width:16px;text-align:center;display:none;border:2px solid var(--surface,#111118)}
.chat-fab-badge.show{display:inline-block}
.chat-panel{position:fixed;right:18px;top:calc(var(--topbar-bottom, var(--topbar-h)) + 10px);bottom:76px;z-index:602;width:300px;max-width:calc(100vw - 24px);
  background:var(--surface,#111118);border:1px solid var(--border-h,rgba(255,255,255,.13));
  border-radius:16px;display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.75)}
.chat-panel.open{display:flex}
@media(max-width:520px){
  .chat-panel{right:8px;left:8px;width:auto;max-width:none;top:calc(var(--topbar-bottom, var(--topbar-h)) + 6px);bottom:calc(var(--bot-nav-h) + 72px + env(safe-area-inset-bottom, 0px))}
}
@media(min-width:1001px){
  .chat-panel{position:static;display:flex!important;flex-shrink:0;width:300px;max-width:none;
    top:auto;right:auto;bottom:auto;border-radius:0;border:none;border-left:1px solid var(--border-h,rgba(255,255,255,.13));
    box-shadow:none;height:auto}
  .chat-panel.chat-dock-off{display:none!important}
  html.chat-dock-off-pref .chat-panel{display:none!important}
}
.chat-panel-head{display:flex;align-items:center;background:var(--surface2,#16161f);border-bottom:1px solid var(--border,rgba(255,255,255,.06));flex-shrink:0}
.chat-tabs{display:flex;flex:1}
.chat-tab{flex:1;background:none;border:none;color:var(--muted,rgba(234,234,248,.52));padding:9px 4px;font-size:var(--fs-xs,0.6875rem);font-weight:700;
  font-family:inherit;cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:5px}
.chat-tab:hover{color:#fff}
.chat-tab.active{color:var(--gold,#e8b54a);border-bottom-color:var(--gold,#e8b54a)}
.chat-close{background:none;border:none;color:var(--muted,rgba(234,234,248,.52));padding:0 10px;cursor:pointer;font-size:var(--fs-base,0.8125rem);align-self:stretch}
.chat-close:hover{color:#fff}
.chat-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.chat-friend-list{overflow-y:auto;padding:4px}
.chat-friend-row{display:flex;align-items:center;gap:8px;padding:6px;border-radius:9px;cursor:pointer}
.chat-friend-row:hover{background:var(--surface2,#16161f)}
.chat-thread-head{align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border,rgba(255,255,255,.06));
  font-size:var(--fs-sm,0.75rem);font-weight:700;flex-shrink:0;background:var(--surface2,#16161f)}
.chat-back{background:none;border:none;color:var(--muted,rgba(234,234,248,.52));cursor:pointer;font-size:var(--fs-md,0.875rem);padding:2px 4px}
.chat-back:hover{color:#fff}
.chat-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px}
.chat-msg{display:flex;gap:6px;position:relative}
.chat-msg-bubble{background:var(--surface3,#1c1c27);border-radius:12px 12px 12px 3px;padding:6px 10px;font-size:var(--fs-sm,0.75rem);
  display:inline-block;max-width:78%;word-break:break-word;line-height:1.32}
.chat-msg.mine{flex-direction:row-reverse;text-align:right}
.chat-msg.mine .chat-msg-bubble{background:linear-gradient(135deg,var(--gold,#e8b54a),#b8863a);color:#1a1408;border-radius:12px 12px 3px 12px;text-align:left}
.chat-msg.mine .chat-reply-quote{text-align:left}
.chat-msg-meta{font-size:var(--fs-3xs,0.5625rem);color:var(--muted,rgba(234,234,248,.52));margin-bottom:2px}
.chat-name-link{cursor:pointer}
.chat-name-link:hover{text-decoration:underline}
.chat-reply-quote{border-left:2px solid var(--gold,#e8b54a);background:rgba(255,255,255,.05);border-radius:6px;
  padding:3px 7px;font-size:var(--fs-xs,0.6875rem);line-height:1.25;margin-bottom:3px;max-width:78%;opacity:.85}
.chat-msg.mine .chat-reply-quote{margin-left:auto}
.chat-reply-quote b{display:block;color:var(--gold,#e8b54a)}
.chat-msg-actions{display:flex;gap:1px;margin-top:2px}
.chat-msg.mine .chat-msg-actions{justify-content:flex-end}
.chat-act{background:none;border:none;color:var(--muted,rgba(234,234,248,.52));cursor:pointer;font-size:var(--fs-2xs,0.625rem);padding:2px 4px;border-radius:4px}
.chat-act:hover{background:var(--surface3,#1c1c27);color:#fff}
.chat-act.danger:hover{background:rgba(231,76,60,.18);color:#e74c3c}
.chat-edited-tag{font-style:italic;opacity:.7;font-size:.9em}
.chat-edit-box{display:flex;gap:4px;align-items:center;max-width:78%}
.chat-edit-input{flex:1;background:var(--surface,#111118);border:1px solid var(--border-h,rgba(255,255,255,.13));
  border-radius:10px;padding:5px 9px;color:#fff;font-size:var(--fs-sm,0.75rem);font-family:inherit;min-width:0}
.chat-edit-box button{background:none;border:none;cursor:pointer;font-size:var(--fs-sm,0.75rem);padding:3px 5px;color:var(--muted,rgba(234,234,248,.52))}
.chat-edit-box button.chat-edit-save{color:#2ecc71}
.chat-edit-box button:hover{color:#fff}
.chat-reply-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--surface2,#16161f);
  border-top:1px solid var(--border,rgba(255,255,255,.06));flex-shrink:0}
.chat-reply-bar-line{width:3px;align-self:stretch;background:var(--gold,#e8b54a);border-radius:2px;flex-shrink:0}
.chat-typing{display:flex;align-items:center;gap:7px;padding:4px 12px;font-size:var(--fs-2xs,0.625rem);color:var(--muted,rgba(234,234,248,.52));font-style:italic;flex-shrink:0}
.chat-typing-dots{display:inline-flex;gap:3px;align-items:center}
.chat-typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--gold,#e8b54a);opacity:.35;animation:chatTyping 1.2s ease-in-out infinite}
.chat-typing-dots i:nth-child(2){animation-delay:.2s}.chat-typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes chatTyping{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.chat-reply-bar-info{flex:1;min-width:0;font-size:var(--fs-xs,0.6875rem);line-height:1.3;overflow:hidden}
.chat-reply-bar-info b{display:block;color:var(--gold,#e8b54a)}
.chat-reply-bar-info span{display:block;color:var(--muted,rgba(234,234,248,.52));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-reply-cancel{background:none;border:none;color:var(--muted,rgba(234,234,248,.52));cursor:pointer;font-size:var(--fs-md,0.875rem);padding:2px 6px;flex-shrink:0}
#chat-reply-cancel:hover{color:#fff}
.chat-fwd-modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:5;padding:20px}
.chat-fwd-box{background:var(--surface2,#16161f);border:1px solid var(--border-h,rgba(255,255,255,.13));border-radius:12px;
  width:100%;max-width:280px;max-height:80%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.chat-fwd-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:var(--fs-sm,0.75rem);font-weight:700;
  border-bottom:1px solid var(--border,rgba(255,255,255,.06))}
.chat-fwd-head button{background:none;border:none;color:var(--muted,rgba(234,234,248,.52));cursor:pointer;font-size:var(--fs-md,0.875rem)}
.chat-fwd-head button:hover{color:#fff}
.chat-fwd-list{overflow-y:auto;padding:4px}
.chat-tab-dot{position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:#e74c3c}
.chat-tab{position:relative}
.chat-unread-dot{width:8px;height:8px;border-radius:50%;background:#e74c3c;flex-shrink:0;display:none}
.chat-unread-dot.show{display:block}
.chat-emoji{display:flex;align-items:center;gap:2px;padding:6px 8px;flex-shrink:0;overflow-x:auto}
.chat-emoji-btn{background:none;border:none;font-size:var(--fs-lg,1rem);cursor:pointer;padding:4px;border-radius:6px;line-height:1;display:flex;align-items:center}
.chat-emoji-btn:hover{background:var(--surface3,#1c1c27)}
.chat-form{display:flex;gap:8px;padding:8px 12px 10px;border-top:1px solid var(--border,rgba(255,255,255,.06));flex-shrink:0;background:var(--surface2,#16161f)}
.chat-input{flex:1;background:var(--surface,#111118);border:1px solid var(--border-h,rgba(255,255,255,.13));border-radius:18px;
  padding:9px 14px;color:#fff;font-size:var(--fs-base,0.8125rem);font-family:inherit;min-width:0;resize:none;
  max-height:120px;overflow-y:auto;line-height:1.35}
.chat-input:focus{outline:none;border-color:var(--gold,#e8b54a)}
.chat-send{background:var(--gold,#e8b54a);color:#1a1408;border:none;border-radius:50%;
  width:36px;height:36px;flex-shrink:0;cursor:pointer;font-size:var(--fs-md,0.875rem);align-self:flex-end}
.chat-send:hover{filter:brightness(1.1)}
.chat-empty{padding:26px 14px;text-align:center;color:var(--muted,rgba(234,234,248,.52));font-size:var(--fs-sm,0.75rem);margin:auto}

.hc-bar-wrap{padding:12px 26px 0}
@media(max-width:1024px){.hc-bar-wrap{padding:14px 15px 0}}
@media(max-width:560px){.hc-bar-wrap{padding:12px 12px 0}}
.hc-bar{display:flex;align-items:center;gap:12px;margin:0;padding:9px 14px;border-radius:12px;text-decoration:none;color:var(--text);
  background:linear-gradient(100deg, rgba(192,57,43,.22) 0%, #1a1214 62%);
  border:1px solid rgba(231,76,60,.55);box-shadow:0 4px 18px -8px #e74c3c;position:relative;animation:hcPulseBar 2s infinite}
.hc-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#e74c3c}
.hc-bar:hover{border-color:#e74c3c;transform:translateY(-1px);transition:.15s}
@keyframes hcPulseBar{0%,100%{box-shadow:0 4px 18px -8px #e74c3c}50%{box-shadow:0 4px 24px -4px #e74c3c}}
.hc-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:var(--fs-lg,1rem);color:#e74c3c;background:rgba(231,76,60,.18)}
.hc-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.hc-txt strong{font-size:var(--fs-base,0.8125rem);color:#fff}
.hc-sub{font-size:var(--fs-xs,0.6875rem);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-go{margin-left:auto;flex:none;font-size:var(--fs-sm,0.75rem);font-weight:800;color:#e74c3c;white-space:nowrap;display:flex;align-items:center;gap:6px}
@media(max-width:640px){.hc-sub{display:none}.hc-bar{gap:9px;padding:8px 11px}}

.ol-fab{position:fixed;right:14px;bottom:80px;z-index:400;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg,1rem);cursor:pointer;
  background:rgba(20,18,24,.92);border:1px solid rgba(232,181,74,.35);color:var(--gold);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);transition:transform .12s,background .2s,color .2s}
.ol-fab:active{transform:scale(.92)}
.ol-fab.is-locked{background:rgba(46,204,113,.16);border-color:rgba(46,204,113,.5);color:#2ecc71}
@media(min-width:900px){.ol-fab{display:none!important}}

.tut-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:900;
  width:min(480px,calc(100vw - 32px));display:flex;align-items:stretch;
  background:linear-gradient(135deg,rgba(20,20,26,.97),rgba(30,26,18,.97));
  border:1px solid rgba(241,196,15,.35);border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(241,196,15,.08) inset;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.2,.85,.25,1)}
.tut-bar.show{transform:translate(-50%,0)}
.tut-bar.is-min{width:auto;border-radius:50%}
.tut-bar.is-min .tut-bar-body{display:none}
.tut-bar-toggle{display:none;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-dim,#b9821a),var(--gold,#f1c40f));color:#1b1b22;
  font-size:var(--fs-xl,1.125rem);align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(243,156,18,.4)}
.tut-bar.is-min .tut-bar-toggle{display:flex}
.tut-bar-body{flex:1;padding:12px 14px;min-width:0}
.tut-bar-top{display:flex;align-items:center;gap:10px}
.tut-bar-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-dim,#b9821a),var(--gold,#f1c40f));color:#1b1b22;font-size:var(--fs-lg,1rem)}
.tut-bar-txt{flex:1;min-width:0}
.tut-bar-label{font-size:var(--fs-2xs,0.625rem);text-transform:uppercase;letter-spacing:.5px;color:var(--gold,#f1c40f);font-weight:800}
.tut-bar-step{font-size:var(--fs-base,0.8125rem);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut-bar-go{flex-shrink:0;padding:6px 12px!important}
.tut-bar-min{width:28px;height:28px;flex-shrink:0;border:none;background:rgba(255,255,255,.06);border-radius:50%;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tut-bar-min:hover{color:#fff;background:rgba(255,255,255,.12)}
.tut-bar-exit{width:28px;height:28px;flex-shrink:0;border:none;background:rgba(255,255,255,.06);border-radius:50%;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tut-bar-exit:hover{color:#fff;background:rgba(231,76,60,.25)}
.tut-bar-prog{height:4px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.tut-bar-prog-fill{height:100%;border-radius:3px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--gold-dim,#b9821a),var(--gold,#f1c40f));transition:width .4s}
.tut-bar-prog-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:tutShine 2.2s infinite}
@keyframes tutShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:640px){.tut-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px))}.tut-bar-step{max-width:140px}}

.tut-modal{position:relative;width:100%;max-width:400px;text-align:center;overflow:hidden;
  padding:30px 26px 24px;border-radius:20px;
  background:linear-gradient(160deg,rgba(241,196,15,.07),var(--surface) 40%);
  border:1px solid rgba(241,196,15,.3);box-shadow:var(--shadow-lg),0 0 60px rgba(241,196,15,.08);
  transform:translateY(20px) scale(.93);transition:transform .3s cubic-bezier(.2,.85,.25,1)}
.tut-modal-ov.show .tut-modal{transform:none}
.tut-modal-dots{display:flex;gap:5px;justify-content:center;margin-bottom:16px}
.tut-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15)}
.tut-dot.done{background:var(--green,#2ecc71)}
.tut-dot.active{background:var(--gold,#f1c40f);box-shadow:0 0 0 3px rgba(241,196,15,.25)}
.tut-modal-ico{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-3xl,1.75rem);color:#1b1b22;background:linear-gradient(135deg,var(--gold-dim,#b9821a),var(--gold,#f1c40f));
  box-shadow:0 10px 28px rgba(243,156,18,.4)}
.tut-modal-kicker{font-size:var(--fs-xs,0.6875rem);text-transform:uppercase;letter-spacing:.6px;color:var(--gold,#f1c40f);font-weight:800;margin-bottom:4px}
.tut-modal-title{font-size:var(--fs-xl,1.125rem);font-weight:900;color:#fff;letter-spacing:-.2px}
.tut-modal-desc{font-size:var(--fs-base,0.8125rem);color:var(--muted);margin-top:8px;line-height:1.55}
.tut-modal-prog{height:6px;border-radius:4px;background:rgba(255,255,255,.08);margin:16px 0 4px;overflow:hidden}
.tut-modal-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-dim,#b9821a),var(--gold,#f1c40f));transition:width .5s}
.tut-modal-reward{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:6px 14px;border-radius:99px;
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.3);color:var(--green,#2ecc71);font-size:var(--fs-sm,0.75rem);font-weight:700}
.tut-modal-actions{display:flex;gap:10px;margin-top:22px}
.tut-modal-actions .btn{flex:1;justify-content:center}

.map-perk-badge{display:flex;align-items:center;gap:9px;padding:10px 14px;margin:0 0 14px;border-radius:11px;
  background:linear-gradient(120deg,rgba(241,196,15,.14),rgba(241,196,15,.03));border:1px solid rgba(241,196,15,.3);
  font-size:var(--fs-sm,0.75rem);color:#dfe2e6;line-height:1.4}
.map-perk-badge i{color:var(--gold,#f1c40f);font-size:var(--fs-md,0.875rem);flex-shrink:0}

.bl-tooltip {
  position: fixed; z-index: 100000; pointer-events: none;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border-h); border-radius: 7px;
  padding: 6px 10px; font-size: var(--fs-xs,0.6875rem); font-weight: 600; line-height: 1.4;
  max-width: 220px; box-shadow: 0 10px 26px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.bl-tooltip.show { opacity: 1; transform: translateY(0); }
.bl-tooltip::after {
  content: ''; position: absolute; width: 8px; height: 8px; left: 50%; margin-left: -4px;
  background: var(--surface2); border-right: 1px solid var(--border-h); border-bottom: 1px solid var(--border-h);
}
.bl-tooltip[data-pos="top"]::after { bottom: -5px; transform: rotate(45deg); }
.bl-tooltip[data-pos="bottom"]::after { top: -5px; transform: rotate(225deg); }
.map-perk-badge strong{color:var(--gold,#f1c40f)}

.fab-pill {
  position: fixed; right: calc(var(--sidebar-r) + 14px); z-index: 400;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--fc) 20%, #14121a);
  border: 1px solid color-mix(in srgb, var(--fc) 55%, transparent);
  color: #fff; font-size: var(--fs-xs,0.6875rem); font-weight: 800; white-space: nowrap;
  box-shadow: 0 6px 18px -6px var(--fc);
  text-decoration: none; transition: transform .15s ease;
}
.fab-pill:hover { transform: translateY(-2px); color: #fff; }
.fab-pill i { font-size: var(--fs-sm,0.75rem); color: var(--fc); }
.fab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc); flex-shrink: 0; animation: fabPulse 1.6s infinite; }
.fab-close {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 2px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.75);
  font-size: var(--fs-sm,0.75rem); line-height: 1; cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.fab-close:hover { background: rgba(255,255,255,.25); color: #fff; }
@keyframes fabPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fc) 70%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.fab-ce-notice { bottom: 134px; }
.fab-risk-notice { bottom: 58px; }
@media (max-width: 900px) {
  .fab-ce-notice { bottom: calc(var(--bot-nav-h) + 134px + env(safe-area-inset-bottom, 0px)); }
  .fab-risk-notice { bottom: calc(var(--bot-nav-h) + 58px + env(safe-area-inset-bottom, 0px)); }
}

.js-autosave-flash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  z-index: 100000; padding: 8px 16px; border-radius: 999px;
  background: rgba(46,204,113,.16); border: 1px solid rgba(46,204,113,.4); color: #6fe0a0;
  font-size: var(--fs-sm,0.75rem); font-weight: 700; pointer-events: none;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.js-autosave-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.js-autosave-flash.err { background: rgba(192,57,43,.16); border-color: rgba(192,57,43,.4); color: #f0a89f; }
.pf-famring.has-img .pf-famring-dot{background:#17171f;overflow:hidden;padding:0}
.pf-famring.has-img .pf-famring-dot img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

.pf-famring.has-ico .pf-famring-dot{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-3xs,0.5625rem);color:#fff;background:color-mix(in srgb, var(--fc) 70%, #17171f)}
.company-block{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:.9em}
.company-block strong{display:inline-block;min-width:150px}

@media (pointer: coarse){
  .oauth-btn{min-height:44px}
}
.form-input:focus-visible{outline:none}
::selection{background:rgba(242,182,50,.38);color:#fff;text-shadow:none}
::-moz-selection{background:rgba(242,182,50,.38);color:#fff}

html{zoom:var(--site-zoom,.9)}
.cx{--red:#e8352e;--red2:#ff5147;--gold:#f2b632;--gold2:#ffd25a;--green:#2fe07a;--panel:#0f1116;--panel2:#14161c;--line:rgba(255,255,255,.1);--muted:#8b8f9a;--sub:#b4b8c3;--rc:#f2b632;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.55;color:#fff;background:#08090d;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
body:has(.cx){background:#08090d}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx a{color:inherit}
.cx h1,.cx h2,.cx h3,.cx p,.cx ul,.cx ol,.cx dl,.cx dd{margin:0}
.cx ul,.cx ol{padding:0;list-style:none}
.cx img{display:block}
.cx svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cx svg.i.f{fill:currentColor;stroke:none}
.cx :focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.cx main{position:relative;z-index:1}
.cx .g{background:linear-gradient(180deg,#ffe08a 10%,#e69a14 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx .w{background:linear-gradient(180deg,#fff 20%,#b4b9c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.cx-btn{position:relative;overflow:hidden;display:inline-flex;gap:9px;align-items:center;justify-content:center;padding:14px 24px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffd25a,#f2a91c);color:#1a1200;font:800 15.5px/1.1 Inter,sans-serif;letter-spacing:.01em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s,filter .2s,box-shadow .2s;box-shadow:0 12px 32px -10px rgba(242,169,28,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.cx-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:cxShine 5s ease-in-out infinite}
@keyframes cxShine{0%,62%{left:-70%}100%{left:150%}}
.cx-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.cx-btn.ghost{background:rgba(255,255,255,.04);color:#fff;border:1.5px solid rgba(232,53,46,.95);box-shadow:none}
.cx-btn.ghost::after{display:none}
.cx-btn.ghost:hover{background:rgba(232,53,46,.2)}
.cx-btn.sm{padding:9px 16px;font-size:14px;border-radius:10px}
.cx-btn.lg{padding:17px 30px;font-size:17px;border-radius:14px}
.cx-btn .i{width:1.1em;height:1.1em}
.cx-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(47,224,122,.6);animation:cxPing 2s infinite;flex:none}
@keyframes cxPing{70%{box-shadow:0 0 0 9px rgba(47,224,122,0)}100%{box-shadow:0 0 0 0 rgba(47,224,122,0)}}

.cx-tb{position:fixed;z-index:90;top:0;left:0;right:0;background:rgba(8,9,13,.62);border-bottom:1px solid rgba(242,182,50,.18);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);transition:background .3s}
.cx-tb.on{background:rgba(8,9,13,.92)}
.cx-tb-in{width:min(1280px,100% - 32px);margin:0 auto;height:68px;display:flex;align-items:center;gap:18px}
.cx-logo{display:flex;align-items:center;flex:none}.cx-logo img{height:30px;width:auto}
.cx-nav{display:flex;gap:2px}
.cx-nav a{position:relative;padding:8px 12px;border-radius:9px;font:700 14px Inter;letter-spacing:.02em;color:#cfd2da;text-decoration:none;transition:color .2s,background .2s}
.cx-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.cx-nav a.on{color:#fff}.cx-nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--red);box-shadow:0 0 12px var(--red)}
.cx-hud{display:flex;gap:8px;margin-left:auto}
.cx-chip{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 13px Inter;color:#d6d9e1;text-decoration:none;white-space:nowrap}
.cx-chip b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.cx-chip-s{border-color:rgba(242,182,50,.4);background:rgba(242,182,50,.08);color:var(--gold2)}
.cx-chip-s .i{width:15px;height:15px}
.cx-chip-s em{font:800 10.5px Inter;font-style:normal;letter-spacing:.12em;color:#9dffc4}
.cx-chip-s i{display:block;width:54px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.cx-chip-s u{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));text-decoration:none}
.cx-hr{display:flex;align-items:center;gap:10px}
.cx-ls{display:flex}

@media (max-width:1180px){
  .cx-hud{display:none}.cx-hr{margin-left:auto}
}
@media (max-width:1000px){
  .cx-nav{display:none}
  }
@media (max-width:760px){
  .cx-tb-in{height:58px;width:calc(100% - 18px);gap:8px}.cx-logo img{height:23px}.cx-hr{gap:6px}.cx-hr .cx-btn.sm{padding:8px 11px;font-size:13px}.cx-ls .topbar-btn,.cx-ls button{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){.cx-dot,.cx-btn::after{animation:none!important}}
.cx-nc{min-height:0;font:700 13.5px Inter;padding:0 4px;transition:color .2s}
.cx-nc:empty{display:none}
.cx-nc.ok{color:#7dffb4}.cx-nc.taken,.cx-nc.blocked,.cx-nc.invalid{color:#ff8f86}.cx-nc.busy{color:#aeb2bd}
@media (max-width:760px){
  .cx{padding-bottom:78px}
}
.cx-bg{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;place-items:center}
.cx-bg .i{width:22px;height:22px}
@media (max-width:1000px){.cx-bg{display:grid}}

.cx-tb-in>.cx-bg{margin-right:-6px}

html{zoom:var(--site-zoom,.9)}
body.auth-split{--red:#e8352e;--gold:#f2b632;--gold2:#ffd25a;--line:rgba(255,255,255,.1);background:#08090d;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

.auth-scenes{position:fixed;left:0;top:0;bottom:0;width:44%;z-index:0;overflow:hidden;background:#07080b}
.auth-scenes i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:authScene 36s infinite}
.auth-scenes i:nth-child(2){animation-delay:9s}.auth-scenes i:nth-child(3){animation-delay:18s}.auth-scenes i:nth-child(4){animation-delay:27s}
@keyframes authScene{0%{opacity:0;transform:scale(1.04)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1.16)}100%{opacity:0;transform:scale(1.16)}}
body.auth-split .auth-left{position:relative;z-index:1;background:linear-gradient(90deg,rgba(8,9,13,.88) 0%,rgba(8,9,13,.55) 70%,rgba(8,9,13,.35) 100%),linear-gradient(180deg,rgba(8,9,13,.6) 0%,rgba(8,9,13,.1) 35%,rgba(8,9,13,.85) 100%)!important}
body.auth-split .auth-left::before{background:linear-gradient(90deg,#e8352e,#f2b632 55%,transparent);height:3px}
body.auth-split .auth-left::after{content:'';position:absolute;inset:18px;top:18px;left:18px;bottom:18px;right:18px;width:auto;height:auto;font-size:0;letter-spacing:0;color:transparent;pointer-events:none;border:0;transform:none;z-index:0;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/22px 2px,linear-gradient(var(--gold),var(--gold)) 0 0/2px 22px,linear-gradient(var(--gold),var(--gold)) 100% 0/22px 2px,linear-gradient(var(--gold),var(--gold)) 100% 0/2px 22px,linear-gradient(var(--gold),var(--gold)) 0 100%/22px 2px,linear-gradient(var(--gold),var(--gold)) 0 100%/2px 22px,linear-gradient(var(--gold),var(--gold)) 100% 100%/22px 2px,linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 22px;background-repeat:no-repeat;opacity:.7}
body.auth-split .auth-left-logo{height:36px}
body.auth-split .auth-tagline{font-family:Anton,Impact,'Inter',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,3.8vw,3.9rem);line-height:1;letter-spacing:.005em;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
body.auth-split .auth-tagline em{font-style:normal;background:linear-gradient(180deg,#ffe08a 10%,#e69a14 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.auth-split .auth-sub{color:#d6d9e1;line-height:1.7;max-width:46ch;font-size:15.5px}
body.auth-split .auth-features,body.auth-split .auth-perks{max-width:340px;gap:8px}
body.auth-split .auth-feature,body.auth-split .auth-perk{border:1px solid rgba(255,255,255,.12);border-left:3px solid #e8352e;border-radius:12px;background:rgba(10,11,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#e4e6ec}
body.auth-split .auth-feature:hover{background:rgba(20,22,28,.85);border-left-color:#f2b632}
body.auth-split .auth-feature-icon{border-radius:10px;background:rgba(242,182,50,.1);border:1.5px solid rgba(242,182,50,.45);color:#f2b632}
body.auth-split .auth-perk i{color:#2fe07a}
body.auth-split .auth-left-footer{color:rgba(234,234,248,.55)}
body.auth-split .auth-left-footer::before{background:#f2b632;width:32px;height:2px}
.auth-hud{position:fixed;left:min(52px,3vw);bottom:64px;z-index:2;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(44% - 80px)}
.auth-hud span{display:inline-flex;gap:8px;align-items:center;padding:8px 13px;border-radius:10px;background:rgba(10,11,16,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);font:700 13px Inter;color:#e4e6ec;white-space:nowrap}
.auth-hud b{width:8px;height:8px;border-radius:50%;background:#2fe07a;box-shadow:0 0 0 0 rgba(47,224,122,.6);animation:authPing 2s infinite}
@keyframes authPing{70%{box-shadow:0 0 0 9px rgba(47,224,122,0)}100%{box-shadow:0 0 0 0 rgba(47,224,122,0)}}

body.auth-split .auth-right{position:relative;z-index:1;background:radial-gradient(60% 40% at 85% 0%,rgba(232,53,46,.12),transparent 65%),radial-gradient(50% 40% at 0% 100%,rgba(242,182,50,.07),transparent 65%),#0a0b10;border-left:1px solid rgba(242,182,50,.22)}
body.auth-split .auth-right-inner{max-width:440px}
body.auth-split .auth-form-header{margin-bottom:26px}
body.auth-split .auth-form-header h1{font-family:Anton,Impact,'Inter',sans-serif;font-weight:400;text-transform:uppercase;font-size:2.6rem;line-height:1;letter-spacing:.01em}
body.auth-split .auth-form-header p{color:#aeb2bd}
body.auth-split .auth-form-header a{color:#ffd25a;font-weight:700}
body.auth-split .form-label{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:#8b8f9a}
body.auth-split .form-input{height:52px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#07080b;font-size:1rem;color:#fff;transition:border-color .2s,box-shadow .2s}
body.auth-split .input-wrap .form-input{padding:0 44px}
body.auth-split .form-input:focus{border-color:#f2b632;background:#0b0c11;box-shadow:0 0 0 4px rgba(242,182,50,.14)}
body.auth-split .input-wrap .ico{color:#6b7080}
body.auth-split .btn-submit{position:relative;overflow:hidden;height:56px;padding:0 18px!important;font-size:1.05rem!important;font-weight:800;border-radius:14px;border:0;background:linear-gradient(180deg,#ffd25a,#f2a91c);color:#1a1200;letter-spacing:.01em;box-shadow:0 14px 34px -12px rgba(242,169,28,.8),inset 0 1px 0 rgba(255,255,255,.55)}
body.auth-split .btn-submit:hover{filter:brightness(1.07);transform:translateY(-2px)}
body.auth-split .btn-secondary{border-radius:14px;padding:14px;background:transparent;border:1.5px solid rgba(232,53,46,.9);color:#fff}
body.auth-split .btn-secondary:hover{background:rgba(232,53,46,.18);color:#fff;border-color:#e8352e}
body.auth-split .oauth-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
body.auth-split .oauth-btn{width:auto;height:50px;border-radius:12px;gap:9px;font-weight:700;font-size:.92rem;padding:0 12px;background:#0f1116!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;transition:border-color .2s,transform .2s}
body.auth-split .oauth-btn:hover{border-color:#f2b632!important;transform:translateY(-2px)}
body.auth-split .oauth-btn i{font-size:1.1rem}
body.auth-split .divider span{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:#6b7080}
body.auth-split .auth-footer{background:rgba(8,9,13,.9);border-top:1px solid rgba(255,255,255,.08)}
body.auth-split a{transition:color .2s}

@media (max-width:860px){
  .auth-scenes{width:100%;height:170px;bottom:auto}
  .auth-hud{display:none}
  body.auth-split .auth-left{background:linear-gradient(180deg,rgba(8,9,13,.55),rgba(8,9,13,.92))!important;min-height:130px}
  body.auth-split .auth-left::after{display:none}
  body.auth-split .auth-right{border-left:0;border-top:1px solid rgba(242,182,50,.22)}
  body.auth-split .auth-form-header h1{font-size:2.2rem}
}
body.auth-split .auth-form-header h1{background:linear-gradient(180deg,#fff 30%,#aeb3bd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
body.auth-split .form-input{border-radius:16px;border:1.5px solid rgba(242,182,50,.3);background:rgba(8,9,13,.78);box-shadow:inset 0 0 24px rgba(242,182,50,.04)}
body.auth-split .form-input:focus{border-color:#ffd25a;background:rgba(8,9,13,.9);box-shadow:0 0 0 5px rgba(242,182,50,.12),0 0 34px rgba(242,182,50,.18)}
body.auth-split .btn-submit{border-radius:16px;background:linear-gradient(180deg,#ffd25a,#f2a91c);box-shadow:0 16px 36px -14px rgba(242,169,28,.85),inset 0 1px 0 rgba(255,255,255,.5)}
body.auth-split .oauth-row{display:flex;flex-wrap:wrap;gap:8px}
body.auth-split .oauth-btn{flex:1 1 0;min-width:96px;height:48px;border:0!important;border-radius:12px;color:#fff!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18)}
body.auth-split .oauth-google{background:#fff!important;color:#1f1f1f!important}body.auth-split .oauth-google i{color:#4285f4}
body.auth-split .oauth-discord{background:linear-gradient(180deg,#6b78ff,#4752e0)!important}
body.auth-split .oauth-facebook{background:linear-gradient(180deg,#2a8bff,#1269d8)!important}
body.auth-split .oauth-tiktok{background:#000!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.22)}
body.auth-split .oauth-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
body.auth-split .btn-secondary{border-radius:16px}
@media (max-width:860px){
  .auth-scenes{height:190px}
  .auth-scenes::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,16,.1),#0a0b10)}
  body.auth-split .auth-left{min-height:150px;background:none!important}
  body.auth-split .auth-left-logo{height:30px}
  body.auth-split .auth-right{border-top:0;margin-top:-14px;position:relative;z-index:2}
}
body.auth-split{display:block;height:auto;min-height:100vh;overflow:auto;padding-top:68px}
body.auth-split .cx-tb{position:fixed}
body.auth-split .cx-bg{display:none!important}
.auth-scenes{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.auth-scenes::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,13,.92) 20%,rgba(8,9,13,.55) 70%,rgba(8,9,13,.8)),linear-gradient(180deg,rgba(8,9,13,.5),rgba(8,9,13,.9))}
.auth-hud{display:none}
body.auth-split>.auth-left,body.auth-split>.auth-right{position:relative;z-index:1}
@media (min-width:861px){
  body.auth-split{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,90px);padding:68px max(24px,calc((100% - 1200px)/2)) 70px}
  body.auth-split>.cx-pubhd{flex:0 0 100%;height:0}
  body.auth-split>.auth-left{flex:1 1 420px;max-width:560px;width:auto;min-height:0;padding:0;background:none!important;display:flex;flex-direction:column;justify-content:center}
  body.auth-split .auth-left-logo{display:none}
  body.auth-split .auth-left-footer{display:none}
  body.auth-split>.auth-right{flex:0 1 500px;width:100%;min-height:0;margin:0;padding:0;background:none;border:0;display:block}
  body.auth-split .auth-right-inner{position:relative;max-width:500px;margin:0;padding:36px 34px 30px;border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(20,22,28,.9),rgba(10,11,15,.94));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 110px -40px #000}
  body.auth-split .auth-right-inner::before{content:'';position:absolute;left:34px;right:34px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#f2b632,#e8352e,transparent)}
}
@media (max-width:860px){
  .auth-scenes::after{background:linear-gradient(180deg,rgba(8,9,13,.55),rgba(8,9,13,.95))}
  body.auth-split{padding:58px 0 60px}
  body.auth-split>.auth-left{display:none}
  body.auth-split>.auth-right{background:none;border:0;margin:0;padding:18px 12px;min-height:0}
  body.auth-split .auth-right-inner{padding:26px 20px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(20,22,28,.9),rgba(10,11,15,.94));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
body.auth-split .auth-footer{background:rgba(8,9,13,.82)}
body.auth-split>.auth-right{align-items:center}
body.auth-split .auth-right-inner{border:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;padding:8px 0 0}
body.auth-split .auth-right-inner::before{display:none!important}
body.auth-split .auth-form-header{margin-bottom:30px}
body.auth-split .auth-form-header h1{font-size:clamp(2.8rem,4.4vw,3.8rem);line-height:.98;margin-bottom:12px}
body.auth-split .auth-form-header p{font-size:1.02rem;color:#b4b8c3}
body.auth-split .form-group{margin-bottom:22px}
body.auth-split .form-label{margin-bottom:8px;letter-spacing:.14em}
body.auth-split .form-input{height:56px;border:0!important;border-radius:16px;background:rgba(255,255,255,.07)!important;box-shadow:none!important;font-size:1.05rem;transition:background .2s,box-shadow .2s}
body.auth-split .form-input:hover{background:rgba(255,255,255,.1)!important}
body.auth-split .form-input:focus{background:rgba(255,255,255,.12)!important;box-shadow:0 0 0 2px #f2b632,0 12px 40px -10px rgba(242,182,50,.45)!important}
body.auth-split .btn-submit{height:60px;border-radius:999px;font-size:1.05rem!important;margin-top:10px}
body.auth-split .oauth-row{gap:10px}
body.auth-split .oauth-btn{height:50px;border-radius:999px}
body.auth-split .divider span{background:none}
body.auth-split .btn-secondary{border:0;border-radius:999px;background:rgba(255,255,255,.08)}
body.auth-split .btn-secondary:hover{background:rgba(255,255,255,.14)}
body.auth-split .auth-perk,body.auth-split .auth-feature{border:0;border-radius:0;background:none;padding:10px 0}
body.auth-split .auth-perk i{background:rgba(242,182,50,.18)}
@media (max-width:860px){
  body.auth-split>.auth-right{padding:26px 22px 20px}
  body.auth-split .auth-right-inner{padding:0}
}
body.auth-split .auth-form-header{margin-bottom:22px}
body.auth-split .auth-form-header h1{font-size:clamp(2.4rem,3.6vw,3.1rem);margin-bottom:8px}
body.auth-split .auth-form-header p{font-size:.95rem}
body.auth-split .form-group{margin-bottom:12px}
body.auth-split .form-label{font-size:.68rem;margin-bottom:6px}
body.auth-split .form-input{height:40px;border-radius:10px;font-size:.92rem}
body.auth-split .input-wrap .form-input{padding:0 38px}
body.auth-split .form-hint{font-size:.74rem;margin-top:6px}
body.auth-split .btn-submit{height:44px;border-radius:12px;margin-top:6px;padding:0 22px!important;font:800 15.5px/1.1 Inter,sans-serif!important;letter-spacing:.01em;background:linear-gradient(180deg,#ffd25a,#f2a91c);box-shadow:0 12px 32px -10px rgba(242,169,28,.7),inset 0 1px 0 rgba(255,255,255,.5)}
body.auth-split .btn-submit:hover{transform:translateY(-2px);filter:brightness(1.07)}
body.auth-split .oauth-row{display:flex;flex-wrap:wrap;gap:8px}
body.auth-split .oauth-btn{flex:0 0 auto;min-width:0;width:auto;height:auto;padding:10px 18px;gap:9px;border-radius:10px;font:700 13.5px Inter}
body.auth-split .oauth-btn i{font-size:17px}
body.auth-split .divider{margin:14px 0}
body.auth-split .btn-secondary{border-radius:12px;padding:12px;font-size:.85rem}
body.auth-split .auth-left::before,body.auth-split .auth-left::after{display:none!important}
body.auth-split>.auth-left{justify-content:center}
body.auth-split .auth-left-body{padding:0;justify-content:center}
body.auth-split .auth-tagline{font-size:clamp(2.8rem,4.4vw,4.2rem);line-height:.95;margin-bottom:18px}
body.auth-split .auth-sub{font-size:1rem;line-height:1.65;color:#c4c8d2;max-width:44ch;margin-bottom:26px}
body.auth-split .auth-perks{display:flex;flex-direction:row!important;flex-wrap:wrap;gap:8px;max-width:520px;margin:0}
body.auth-split .auth-perk{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.82rem;color:#e4e6ec}
body.auth-split .auth-perk i{width:18px;height:18px;flex:none;border-radius:50%!important;display:grid;place-items:center;background:rgba(242,182,50,.2)!important;color:#ffd25a!important;font-size:.55rem}
body.auth-split .auth-features{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;max-width:520px;margin:0}
body.auth-split .auth-feature{display:flex;gap:12px;align-items:flex-start;padding:0;background:none;border:0}
body.auth-split .auth-feature-icon{width:36px;height:36px;flex:none;border-radius:10px;background:rgba(242,182,50,.12);border:0;font-size:.95rem}
body.auth-split .auth-feature b,body.auth-split .auth-feature strong{font-size:.92rem}
body.auth-split .auth-feature small,body.auth-split .auth-feature span:not(.auth-feature-icon){font-size:.8rem;line-height:1.4}
body.auth-split>.cx-pubhd{height:0;min-height:0;background:none;overflow:visible;padding:0;margin:0}
body.auth-split .auth-features{display:flex;flex-direction:column;gap:0;max-width:440px;margin-top:6px}
body.auth-split .auth-feature{display:flex;gap:16px;align-items:center;padding:16px 0;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:none}
body.auth-split .auth-feature:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
body.auth-split .auth-feature-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:none;border:1.5px solid rgba(242,182,50,.55);color:#ffd25a;font-size:1rem}
body.auth-split .auth-feature-title{font:800 15px Inter;color:#fff;margin-bottom:2px}
body.auth-split .auth-feature-text p{margin:0;font-size:.84rem;line-height:1.45;color:#aeb2bd}
@media (max-width:860px){
body.auth-split>.auth-left{display:none!important}
body.auth-split{display:flex!important;flex-direction:column;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding:0!important;overflow:auto}
.auth-scenes::after{background:linear-gradient(180deg,rgba(8,9,13,.55) 0%,rgba(8,9,13,.1) 30%,rgba(8,9,13,.55) 100%)!important}
body.auth-split>.auth-right{flex:0 0 auto!important;width:100%;max-width:560px;margin:0!important;padding:96px 0 0!important;background:none!important;border:0!important;display:block;min-height:0}
body.auth-split .auth-right-inner{position:relative;max-width:none;width:100%;margin:0;padding:24px 22px 18px!important;border:0!important;border-radius:26px 26px 0 0!important;background:rgba(22,24,31,.86)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -30px 80px -30px rgba(0,0,0,.8)!important}
body.auth-split .auth-right-inner::before{display:none!important}
.auth-x{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:20px;line-height:1}
.auth-x:hover{background:rgba(255,255,255,.16);color:#fff}
body.auth-split .auth-form-header{margin:0 44px 18px 0;text-align:left}
body.auth-split .auth-form-header h1{font:800 clamp(1.9rem,6vw,2.3rem)/1.1 Inter,sans-serif!important;text-transform:none;letter-spacing:-.01em;background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none;margin:0 0 6px}
body.auth-split .auth-form-header p{font-size:.95rem;color:#aeb2bd}
body.auth-split .form-row-2{display:block}
body.auth-split .form-group{margin-bottom:14px}
body.auth-split .form-label{font-size:.72rem;margin-bottom:6px;letter-spacing:.1em}
body.auth-split .form-input{height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.05)!important;box-shadow:none!important;font-size:.95rem}
body.auth-split .form-input:hover{background:rgba(255,255,255,.07)!important}
body.auth-split .form-input:focus{border-color:#f2b632!important;background:rgba(255,255,255,.07)!important;box-shadow:0 0 0 3px rgba(242,182,50,.14)!important}
body.auth-split .btn-submit{height:50px;border-radius:14px;width:100%}
body.auth-split .oauth-row{display:flex;flex-wrap:nowrap;justify-content:center;gap:12px}
body.auth-split .oauth-btn{flex:0 0 auto;width:52px;height:52px;min-width:0;padding:0;border-radius:50%;gap:0}
body.auth-split .oauth-btn span{display:none}
body.auth-split .oauth-btn i{font-size:20px}
body.auth-split .oauth-google svg,body.auth-split .oauth-google i{font-size:20px}
body.auth-split .divider{margin:14px 0}
body.auth-split .btn-secondary{border-radius:14px;background:rgba(255,255,255,.05)}
body.auth-split>.auth-footer{position:static!important;flex:0 0 100%;width:100%;margin:0;padding:12px 16px 16px;background:rgba(22,24,31,.86)!important;border:0!important;backdrop-filter:blur(18px)}
@media (min-width:561px){
  body.auth-split{justify-content:center}
  body.auth-split>.auth-right{padding:84px 0 0!important}
  body.auth-split .auth-right-inner{border-radius:26px!important;padding:28px 28px 22px!important;border:1px solid rgba(255,255,255,.1)!important}
  body.auth-split>.auth-footer{background:none!important;max-width:560px}
}
body.auth-split .cx-pubhd .cx-nav,body.auth-split .cx-pubhd .cx-hud,body.auth-split .cx-pubhd .cx-hr>a,body.auth-split .cx-pubhd .cx-bg{display:none!important}
body.auth-split .cx-pubhd .cx-tb{background:none!important;border:0!important;backdrop-filter:none;-webkit-backdrop-filter:none}
body.auth-split .cx-pubhd .cx-tb-in{height:64px}
body.auth-split .cx-pubhd .cx-ls .topbar-btn,body.auth-split .cx-pubhd .cx-ls button{border-radius:50%;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.2);background:rgba(8,9,13,.55)}
body.auth-split .auth-form-header a,body.auth-split .auth-right a:not(.auth-x):not(.oauth-btn):not(.btn-secondary){color:#f2604f}
body.auth-split .form-input:focus{border-color:#e8352e!important;box-shadow:0 0 0 3px rgba(232,53,46,.18)!important}
body.auth-split .btn-submit{background:linear-gradient(180deg,#ee5a49,#d4382b)!important;color:#fff!important;box-shadow:0 14px 30px -14px rgba(232,53,46,.8)!important;font-size:1rem!important}
body.auth-split .btn-submit:hover{filter:brightness(1.08)}
body.auth-split .oauth-btn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
body.auth-split .oauth-btn i{color:#fff!important}
body.auth-split .oauth-btn:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.3)!important}
body.auth-split .form-accept input{accent-color:#e8352e}
body.auth-split .auth-right input[type=checkbox]{accent-color:#e8352e}
body.auth-split .btn-secondary{border:1px solid rgba(255,255,255,.16);color:#fff}
}
@media (min-width:861px){.auth-x{display:none}}
@media (prefers-reduced-motion:reduce){.auth-scenes i{animation:none}.auth-scenes i:first-child{opacity:1}.auth-hud b{animation:none}}


.lang-btn { font-weight: 800; font-size: var(--fs-xs,0.6875rem); letter-spacing: .5px; padding: 0; }
.tb-dd-item .lang-code { display: inline-block; width: 22px; font-weight: 800; color: var(--text); flex-shrink: 0; }
.tb-dd-item.is-active { color: var(--text); background: rgba(255,255,255,.03); }


.auth-footer{position:fixed;bottom:0;left:0;right:0;z-index:150;padding:8px 16px;text-align:center;font-size:var(--fs-xs,0.6875rem);line-height:1.6;color:rgba(234,234,248,.4);background:rgba(10,10,14,.7);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.06)}
.auth-footer a{color:rgba(234,234,248,.55);text-decoration:none;margin:0 2px}
.auth-footer a:hover{color:#fff}
@media (max-width:860px){.auth-footer{position:static;background:transparent;backdrop-filter:none;border-top:1px solid rgba(255,255,255,.06)}}


.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:16px;display:flex;justify-content:center;pointer-events:none;box-sizing:border-box;max-width:100vw}
.cookie-consent.is-hidden{display:none}
.cookie-consent .cc-inner{pointer-events:auto;max-width:min(880px,100%);width:100%;box-sizing:border-box;min-width:0;background:#14141c;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:18px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cookie-consent .cc-text{flex:1;min-width:260px}
.cookie-consent .cc-text strong{display:block;font-size:var(--fs-lg,1rem);color:#eaeaf8;margin-bottom:5px}
.cookie-consent .cc-text strong i{color:#c0392b;margin-right:6px}
.cookie-consent .cc-text p{font-size:var(--fs-base,0.8125rem);line-height:1.55;color:rgba(234,234,248,.62);margin:0}
.cookie-consent .cc-text a{color:#e74c3c;text-decoration:none}
.cookie-consent .cc-text a:hover{text-decoration:underline}
.cookie-consent .cc-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-consent .cc-btn{padding:11px 20px;border-radius:9px;font-size:var(--fs-md,0.875rem);font-weight:700;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap}
.cookie-consent .cc-btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#eaeaf8}
.cookie-consent .cc-btn-ghost:hover{background:rgba(255,255,255,.1)}
.cookie-consent .cc-btn-primary{background:#c0392b;color:#fff}
.cookie-consent .cc-btn-primary:hover{background:#e74c3c}
@media(max-width:620px){
  .cookie-consent{padding:8px}
  .cookie-consent .cc-inner{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .cookie-consent .cc-text strong{font-size:var(--fs-base,0.8125rem);margin-bottom:3px}
  .cookie-consent .cc-text p{font-size:var(--fs-sm,0.75rem);line-height:1.45}
  .cookie-consent .cc-actions{flex-direction:row}
  .cookie-consent .cc-btn{flex:1;width:auto;padding:9px 10px;font-size:var(--fs-sm,0.75rem)}
}