:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #090a0b;
  --panel: #111316;
  --panel-2: #171a1e;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f3f1ec;
  --muted: #9da1a7;
  --accent: #c96d2d;
  --accent-light: #ef9a50;
  --accent-dark: #7c3818;
  --success: #6fbd84;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: 20;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 20% 10%, rgba(201,109,45,.08), transparent 34%);
  mix-blend-mode: screen;
}

.landing-page,
.inner-page,
.success-page {
  background:
    radial-gradient(circle at 14% 2%, rgba(171,83,30,.13), transparent 30%),
    linear-gradient(180deg, #0b0c0e 0%, #08090a 100%);
}

.topbar {
  width: min(100% - 48px, 1460px);
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.topbar.compact { width: min(100% - 48px, 1180px); }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,154,80,.45);
  background: linear-gradient(145deg, #8b401d, #3d1a0c);
  color: #fff5e9;
  font-weight: 900;
  letter-spacing: -.06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.35);
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 15px; letter-spacing: .12em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 11px; letter-spacing: .05em; }

.topbar-status,
.secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #b8bbc0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(111,189,132,.10), 0 0 18px rgba(111,189,132,.4);
}

.payment-layout {
  width: min(100% - 48px, 1460px);
  min-height: calc(100vh - 146px);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(410px, .8fr);
  border: 1px solid var(--line);
  background: #0e1012;
  box-shadow: 0 32px 100px rgba(0,0,0,.42);
  overflow: hidden;
}

.hero-panel { position: relative; min-height: 690px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,7,8,.20) 0%, rgba(6,7,8,.18) 42%, rgba(6,7,8,.74) 100%),
    linear-gradient(0deg, rgba(6,7,8,.94) 0%, rgba(6,7,8,.05) 55%, rgba(6,7,8,.2) 100%);
}
.hero-panel::before,
.inner-visual::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.13);
  pointer-events: none;
}
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 97.5%, rgba(201,109,45,.35) 97.5% 98%, transparent 98%);
}

.hero-content {
  position: absolute;
  left: 54px;
  right: 48px;
  bottom: 48px;
  z-index: 3;
  max-width: 720px;
}
.eyebrow,
.section-kicker {
  display: inline-block;
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-content h1 {
  max-width: 650px;
  margin: 16px 0 14px;
  font-size: clamp(42px, 5vw, 78px);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-content > p {
  max-width: 590px;
  margin: 0;
  color: #c3c0bb;
  font-size: 15px;
  line-height: 1.65;
}
.hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 660px;
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.feature-item {
  min-height: 88px;
  padding: 18px 18px 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #d9d5ce;
  font-size: 12px;
  line-height: 1.45;
}
.feature-item + .feature-item { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.14); }
.feature-number { color: var(--accent-light); font-size: 10px; font-weight: 900; letter-spacing: .08em; }

.checkout-panel {
  position: relative;
  padding: 52px 46px 38px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #17191d, #101215);
  background-size: 28px 28px, 28px 28px, auto;
  border-left: 1px solid var(--line);
}
.checkout-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 96px;
  background: linear-gradient(180deg, var(--accent-light), transparent);
}
.checkout-heading h2,
.pay-card h2 {
  margin: 10px 0 10px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.checkout-heading p,
.muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.plan-card {
  margin: 28px 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(239,154,80,.25);
  background: linear-gradient(135deg, rgba(201,109,45,.16), rgba(201,109,45,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.plan-card > div:first-child { display: grid; gap: 6px; }
.plan-label { color: #bfae9e; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.plan-card strong { font-size: 18px; }
.plan-price { display: flex; align-items: flex-start; color: #fff2e5; }
.plan-price span { font-size: 42px; font-weight: 900; line-height: .8; letter-spacing: -.06em; }
.plan-price small { margin: -3px 0 0 5px; color: var(--accent-light); font-size: 18px; font-weight: 800; }

.checkout-form { display: grid; gap: 17px; }
.field { display: grid; gap: 8px; }
.field > span { color: #d8d5cf; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.field em { color: #777c83; font-size: 10px; font-style: normal; font-weight: 500; text-transform: uppercase; }
.field small { color: #6f747b; font-size: 10px; }
input[type="text"],
input:not([type]) {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #363a40;
  border-radius: 0;
  outline: none;
  background: rgba(7,8,10,.68);
  color: #f4f1eb;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder { color: #646970; }
input:focus {
  border-color: rgba(239,154,80,.65);
  background: rgba(10,11,13,.9);
  box-shadow: 0 0 0 3px rgba(201,109,45,.10);
}

.primary-button,
.secondary-button {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: .02em;
}
.primary-button {
  width: 100%;
  margin-top: 4px;
  padding: 0 18px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #e7833c, #b95622);
  color: #160b05;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 30px rgba(141,61,23,.22);
  transition: transform .18s ease, filter .18s ease;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.primary-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.button-arrow { font-size: 23px; line-height: 1; }

.checkout-footer {
  margin-top: 22px;
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-top: 1px solid var(--line);
}
.shield-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111,189,132,.32);
  color: var(--success);
  font-size: 12px;
}
.checkout-footer p { margin: 0; color: #7f848b; font-size: 11px; line-height: 1.5; }
.checkout-footer strong { color: #bfc3c8; }

.error-message,
.error { margin: 2px 0 0; color: #ff9b91; font-size: 12px; line-height: 1.5; }

.site-footer {
  width: min(100% - 48px, 1460px);
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #5f646a;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Payment page */
.inner-shell {
  width: min(100% - 48px, 1180px);
  min-height: calc(100vh - 116px);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, .7fr);
  border: 1px solid var(--line);
  background: #111316;
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}
.inner-visual { position: relative; min-height: 650px; overflow: hidden; background: #0c0d0f; }
.inner-visual-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.inner-visual-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,9,.78), rgba(7,8,9,.03) 60%, rgba(7,8,9,.12)); }
.inner-visual-copy { position: absolute; z-index: 3; left: 46px; right: 46px; bottom: 46px; }
.inner-visual-copy h1 { margin: 10px 0 12px; font-size: clamp(44px, 5vw, 72px); line-height: .95; letter-spacing: -.055em; }
.inner-visual-copy p { max-width: 480px; margin: 0; color: #c4c0ba; font-size: 13px; line-height: 1.7; }

.pay-card {
  padding: 48px 42px 36px;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    #15181c;
  background-size: 28px 28px;
  border-left: 1px solid var(--line);
}
.badge {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid rgba(111,189,132,.22);
  color: #a9d8b6;
  background: rgba(111,189,132,.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.order-meta {
  margin: 24px 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.order-meta > div { padding: 14px 16px; display: grid; gap: 5px; }
.order-meta > div + div { border-left: 1px solid var(--line); }
.order-meta span { color: #737880; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.order-meta strong { overflow: hidden; color: #e3e0da; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.summary {
  margin: 0 0 24px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(239,154,80,.24);
  background: linear-gradient(135deg, rgba(201,109,45,.16), rgba(201,109,45,.03));
}
.summary span { color: #ab9b8c; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.summary strong { color: #fff2e5; font-size: 32px; letter-spacing: -.04em; }
fieldset { margin: 0 0 20px; padding: 0; border: 0; }
legend { margin-bottom: 10px; color: #b9bdc2; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.method {
  position: relative;
  min-height: 68px;
  margin-top: 9px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  align-items: center;
  gap: 12px;
  border: 1px solid #34383e;
  background: rgba(7,8,10,.56);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.method:hover { border-color: #555b63; }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #4b5057; color: #d9d5cf; font-size: 13px; font-weight: 900; }
.method-copy { display: grid; gap: 4px; }
.method-copy strong { color: #e6e2dc; font-size: 12px; }
.method-copy small { color: #747981; font-size: 10px; }
.method-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #4b5057; color: transparent; font-size: 10px; }
.method:has(input:checked) { border-color: rgba(239,154,80,.58); background: rgba(201,109,45,.09); }
.method:has(input:checked) .method-check { border-color: var(--accent-light); background: var(--accent); color: #180b04; }
.fineprint { margin: 18px 0 0; color: #73787f; font-size: 10px; line-height: 1.6; }

/* Success page */
.success-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.success-card {
  width: min(100%, 560px);
  padding: 34px 38px 40px;
  text-align: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #17191d, #101215);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 0 30px 100px rgba(0,0,0,.45);
}
.success-brand { display: flex; justify-content: center; margin-bottom: 40px; text-align: left; }
.status-orbit {
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,154,80,.3);
  background: rgba(201,109,45,.08);
  transform: rotate(45deg);
}
.status-orbit > * { transform: rotate(-45deg); }
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.status-orbit.success { border-color: rgba(111,189,132,.42); background: rgba(111,189,132,.1); }
.success-check { color: var(--success); font-size: 30px; font-weight: 900; }
.success-card h1 { margin: 12px 0 10px; font-size: 38px; letter-spacing: -.04em; }
.progress-line { height: 2px; margin: 28px 0 0; overflow: hidden; background: rgba(255,255,255,.08); }
.progress-line span { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); animation: scan 1.5s ease-in-out infinite; }
.secondary-button { margin-top: 24px; padding: 0 20px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); color: #d8d5cf; }
.secondary-button:hover { border-color: rgba(239,154,80,.5); color: #fff; }

@keyframes spin { to { transform: rotate(315deg); } }
@keyframes scan { from { transform: translateX(-110%); } to { transform: translateX(245%); } }

@media (max-width: 1050px) {
  .payment-layout,
  .inner-shell { grid-template-columns: 1fr; }
  .hero-panel { min-height: 560px; }
  .checkout-panel,
  .pay-card { border-left: 0; border-top: 1px solid var(--line); }
  .inner-visual { min-height: 440px; }
}

@media (max-width: 680px) {
  .topbar,
  .topbar.compact,
  .payment-layout,
  .inner-shell,
  .site-footer { width: min(100% - 24px, 1460px); }
  .topbar { height: 70px; }
  .topbar-status,
  .secure-badge { display: none; }
  .payment-layout,
  .inner-shell { margin-top: 12px; }
  .hero-panel { min-height: 490px; }
  .hero-panel::before,
  .inner-visual::before { inset: 6px; }
  .hero-content { left: 26px; right: 26px; bottom: 26px; }
  .hero-content h1 { font-size: 43px; }
  .hero-content > p { font-size: 13px; }
  .hero-features { grid-template-columns: 1fr; margin-top: 24px; }
  .feature-item { min-height: 58px; padding: 12px 0; }
  .feature-item + .feature-item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .checkout-panel,
  .pay-card { padding: 34px 22px 28px; }
  .checkout-heading h2,
  .pay-card h2 { font-size: 32px; }
  .inner-visual { min-height: 360px; }
  .inner-visual-copy { left: 26px; right: 26px; bottom: 26px; }
  .inner-visual-copy h1 { font-size: 44px; }
  .site-footer { min-height: 78px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  .success-card { padding: 28px 22px 34px; }
}


/* === Transparent full-background landing override === */
.landing-page {
  position: relative;
  background:
    linear-gradient(180deg, rgba(5,6,8,.72) 0%, rgba(5,6,8,.80) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.38) 100%),
    url('/recruit-board-bg.png') center center / cover no-repeat fixed;
}

.topbar {
  margin-top: 18px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,15,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
}

.payment-layout {
  min-height: calc(100vh - 182px);
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(9,11,14,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
}

.hero-panel {
  min-height: 700px;
  background: transparent;
}

.hero-art {
  display: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(6,7,8,.36) 0%, rgba(6,7,8,.20) 48%, rgba(6,7,8,.28) 100%),
    linear-gradient(0deg, rgba(6,7,8,.62) 0%, rgba(6,7,8,.04) 52%, rgba(6,7,8,.20) 100%);
}

.hero-panel::before,
.inner-visual::before {
  inset: 20px;
  border: 1px solid rgba(255,255,255,.12);
}

.hero-content {
  max-width: 760px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.hero-content h1 {
  max-width: 700px;
}

.hero-features {
  max-width: 720px;
  background: rgba(10,12,15,.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.feature-item {
  background: rgba(255,255,255,.015);
}

.checkout-panel {
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    rgba(12,14,18,.18);
  background-size: 28px 28px, 28px 28px, auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,.10);
}

.plan-card,
.checkout-footer,
.order-meta,
.summary,
.method,
.success-card,
.pay-card,
.inner-shell,
.inner-visual,
.topbar.compact {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.plan-card {
  background: linear-gradient(135deg, rgba(201,109,45,.16), rgba(201,109,45,.04));
}

input[type="text"],
input:not([type]) {
  background: rgba(7,8,10,.22);
}

.site-footer {
  margin-top: 10px;
  padding: 0 10px;
  min-height: 54px;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

@media (max-width: 1050px) {
  .payment-layout {
    background: rgba(9,11,14,.14);
  }
  .hero-panel {
    min-height: 540px;
  }
}

@media (max-width: 680px) {
  .topbar {
    margin-top: 12px;
    padding: 0 12px;
    border-radius: 14px;
  }
  .payment-layout {
    border-radius: 20px;
  }
  .hero-panel {
    min-height: 460px;
  }
}

/* === Sharp background override: no heavy blur === */
.landing-page .topbar {
  background: rgba(10,12,15,.24);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-page .payment-layout {
  background: rgba(9,11,14,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-page .hero-shade {
  background:
    linear-gradient(90deg, rgba(6,7,8,.24) 0%, rgba(6,7,8,.10) 50%, rgba(6,7,8,.18) 100%),
    linear-gradient(0deg, rgba(6,7,8,.52) 0%, rgba(6,7,8,.02) 58%, rgba(6,7,8,.12) 100%);
}

.landing-page .hero-features,
.landing-page .feature-item {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-page .hero-features {
  background: rgba(8,10,12,.18);
}

.landing-page .checkout-panel {
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    rgba(12,14,18,.28);
  background-size: 28px 28px, 28px 28px, auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.landing-page .plan-card,
.landing-page .checkout-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-page input[type="text"],
.landing-page input:not([type]) {
  background: rgba(7,8,10,.34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* tighten horizontal lines on payment image */
.inner-visual::before {
  inset: 4px 8px;
}

@media (max-width: 680px) {
  .inner-visual::before {
    inset: 4px 6px;
  }
}


/* push payment image frame flush to the edges */
.inner-visual::before {
  inset: 0 !important;
}

@media (max-width: 680px) {
  .inner-visual::before {
    inset: 0 !important;
  }
}


/* remove inner frame and make image visually flush */
.inner-visual::before { display: none !important; }


/* add first-page image as background on second page without changing layout */
.inner-page {
  background:
    linear-gradient(180deg, rgba(5,6,8,.72) 0%, rgba(5,6,8,.80) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.38) 100%),
    url('/recruit-board-bg.png') center center / cover no-repeat fixed;
}

/* === CL SEARCH COMMUNITY === */
.community-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(201,109,45,.11), transparent 27%),
    linear-gradient(180deg, #0b0c0e 0%, #08090a 100%);
}
.community-topbar { position: relative; z-index: 2; }
.community-top-actions { display: flex; align-items: center; gap: 12px; }
.scrap-pill {
  min-height: 42px;
  padding: 0 14px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(239,154,80,.3);
  background: rgba(201,109,45,.08);
}
.scrap-pill .scrap-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,154,80,.45);
  background: #4b210f;
  color: #ffd3a8;
  font-size: 12px;
  font-weight: 900;
}
.scrap-pill strong { color: #fff2e5; font-size: 15px; }
.scrap-pill small { color: #a79d93; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ghost-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.025);
  color: #d8d5ce;
  cursor: pointer;
}
.ghost-button:hover { border-color: rgba(239,154,80,.4); color: #fff; }
.danger-text { color: #d98585; }

.community-main {
  width: min(100% - 48px, 1460px);
  margin: 22px auto 40px;
}
.auth-gate {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
}
.auth-card {
  width: min(100%, 520px);
  padding: 42px;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #17191d, #101215);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}
.auth-card h1 { margin: 10px 0 10px; font-size: 42px; letter-spacing: -.05em; }
.auth-card > p { margin: 0 0 26px; color: var(--muted); line-height: 1.65; }
.discord-login-button {
  min-height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #5865f2;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 14px 38px rgba(88,101,242,.22);
}
.discord-login-button:hover { filter: brightness(1.08); }
.discord-logo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  font-weight: 900;
}
.auth-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: #747981;
  font-size: 11px;
  line-height: 1.55;
}

.community-shell {
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: #0e1012;
  box-shadow: 0 32px 100px rgba(0,0,0,.38);
}
.community-sidebar {
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
    #0c0e10;
}
.profile-summary {
  padding: 0 8px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.profile-summary > div { min-width: 0; display: grid; gap: 4px; }
.profile-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(239,154,80,.3);
  background: #16191c;
}
.profile-avatar.large { width: 74px; height: 74px; }
.community-nav { margin-top: 18px; display: grid; gap: 5px; }
.community-nav-item {
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #9da1a7;
  text-align: left;
  cursor: pointer;
}
.community-nav-item > span { width: 18px; color: #777d84; text-align: center; }
.community-nav-item:hover { color: #e4e0da; background: rgba(255,255,255,.025); }
.community-nav-item.is-active {
  border-color: rgba(239,154,80,.2);
  background: linear-gradient(90deg, rgba(201,109,45,.16), rgba(201,109,45,.025));
  color: #fff2e6;
}
.community-nav-item.is-active > span { color: var(--accent-light); }
.nav-badge,
.conversation-unread {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
}
.sidebar-currency-card {
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(239,154,80,.2);
  background: rgba(201,109,45,.07);
  display: grid;
  gap: 7px;
}
.sidebar-currency-card > span { color: #aa9e92; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sidebar-currency-card strong { color: #fff0df; }
.sidebar-currency-card small { color: #73787f; font-size: 10px; line-height: 1.45; }

.community-content {
  min-width: 0;
  padding: 34px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #111316;
  background-size: 32px 32px, 32px 32px, auto;
}
.community-tab { display: none; }
.community-tab.is-active { display: block; }
.content-heading,
.content-subheading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.content-heading { margin-bottom: 26px; }
.content-heading h1 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: .95; letter-spacing: -.05em; }
.content-subheading h2 { margin: 7px 0 0; font-size: 26px; letter-spacing: -.03em; }
.compact-button { min-height: 40px !important; padding: 0 15px !important; font-size: 11px !important; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  gap: 16px;
}
.dashboard-card,
.people-search-card,
.history-card,
.profile-editor,
.admin-scrap-card,
.transfer-card,
.wallet-balance-card {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.dashboard-card { min-height: 220px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.card-label { color: #8e939a; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.large-balance { margin: 18px 0 auto; display: flex; align-items: baseline; gap: 9px; }
.large-balance > span { font-size: clamp(44px, 5vw, 68px); font-weight: 900; letter-spacing: -.06em; }
.large-balance small { color: var(--accent-light); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.dashboard-number { margin: 18px 0 auto; font-size: 68px; font-weight: 900; letter-spacing: -.06em; }
.dashboard-profile-card strong { margin-top: 18px; font-size: 22px; }
.dashboard-profile-card p { margin: 10px 0 auto; color: var(--muted); font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.balance-card { border-color: rgba(239,154,80,.22); background: linear-gradient(145deg, rgba(201,109,45,.15), rgba(255,255,255,.014)); }
.people-search-card { margin-top: 18px; padding: 26px; }
.community-search-field { margin-top: 22px; display: grid; gap: 8px; }
.community-search-field > span { color: #b4b0aa; font-size: 11px; }
.community-search-field input,
.field input[type="search"],
.field input[type="number"],
.field input[type="text"],
.field textarea,
.message-composer textarea,
.profile-editor textarea {
  width: 100%;
  border: 1px solid #34383e;
  background: rgba(6,7,9,.72);
  color: #f0ece6;
  outline: none;
}
.community-search-field input,
.field input[type="search"],
.field input[type="number"],
.field input[type="text"] { min-height: 48px; padding: 0 14px; }
.field textarea,
.message-composer textarea,
.profile-editor textarea { padding: 13px 14px; resize: vertical; }
.community-search-field input:focus,
.field input:focus,
.field textarea:focus,
.message-composer textarea:focus,
.profile-editor textarea:focus { border-color: rgba(239,154,80,.65); box-shadow: 0 0 0 3px rgba(201,109,45,.09); }
.user-results,
.mini-user-results { margin-top: 12px; display: grid; gap: 8px; }
.user-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-result-card {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  background: rgba(7,8,10,.45);
}
.user-result-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.user-result-copy { min-width: 0; display: grid; gap: 4px; }
.user-result-copy strong,
.user-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-result-copy small { color: var(--muted); font-size: 10px; }
.user-result-actions { margin-left: auto; }
.empty-state { margin: 0; padding: 18px; color: #73787f; font-size: 12px; text-align: center; }

.messenger-layout {
  height: min(680px, calc(100vh - 230px));
  min-height: 500px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: rgba(6,7,9,.52);
}
.conversation-list { overflow-y: auto; border-right: 1px solid var(--line); }
.conversation-item {
  width: 100%;
  min-height: 78px;
  padding: 13px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.conversation-item:hover { background: rgba(255,255,255,.025); }
.conversation-item.is-active { background: linear-gradient(90deg, rgba(201,109,45,.14), transparent); }
.conversation-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.conversation-item > div { min-width: 0; }
.conversation-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.conversation-item-top time { color: #676c73; font-size: 9px; white-space: nowrap; }
.conversation-item p { margin: 6px 0 0; overflow: hidden; color: #898e95; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message-panel { min-width: 0; display: grid; }
.message-placeholder { place-self: center; padding: 30px; color: #8a8f96; text-align: center; }
.message-placeholder strong { color: #d8d4ce; font-size: 18px; }
.message-placeholder p { margin: 8px 0 0; font-size: 12px; }
.message-thread-shell { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.message-thread-header { min-height: 70px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.thread-user { display: flex; align-items: center; gap: 11px; }
.thread-user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.thread-user > div { display: grid; gap: 4px; }
.thread-user small { color: var(--muted); font-size: 10px; }
.message-thread { min-height: 0; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.message-bubble { max-width: min(78%, 650px); padding: 11px 13px 8px; align-self: flex-start; border: 1px solid var(--line); background: #171a1e; }
.message-bubble.is-own { align-self: flex-end; border-color: rgba(239,154,80,.22); background: rgba(201,109,45,.13); }
.message-bubble p { margin: 0; color: #e4e0da; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble time { display: block; margin-top: 6px; color: #686d74; font-size: 8px; text-align: right; }
.message-composer { padding: 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-top: 1px solid var(--line); }
.message-composer textarea { min-height: 50px; max-height: 150px; }
.message-composer .primary-button { align-self: stretch; }

.wallet-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.wallet-balance-card { padding: 28px; border-color: rgba(239,154,80,.24); background: linear-gradient(145deg, rgba(201,109,45,.16), rgba(255,255,255,.014)); }
.wallet-balance-card > span { color: #aa9d90; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.wallet-balance-card > div { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.wallet-balance-card strong { font-size: clamp(50px, 6vw, 78px); letter-spacing: -.07em; }
.wallet-balance-card small { color: var(--accent-light); font-weight: 900; }
.wallet-balance-card p { margin: 22px 0 0; color: #777c83; font-size: 11px; line-height: 1.55; }
.transfer-card,
.profile-editor,
.admin-scrap-card { padding: 28px; }
.transfer-card h2 { margin: 8px 0 22px; font-size: 30px; letter-spacing: -.04em; }
.transfer-card .field + .field,
.profile-editor .field,
.admin-scrap-card .field + .field { margin-top: 15px; }
.transfer-card > .primary-button,
.profile-editor > .primary-button,
.admin-scrap-card > .primary-button { margin-top: 20px; }
.history-card { margin-top: 18px; padding: 24px; }
.transaction-list { margin-top: 15px; display: grid; }
.transaction-row { padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255,255,255,.065); }
.transaction-row > div { min-width: 0; display: grid; gap: 5px; }
.transaction-row small { color: #777c83; font-size: 10px; }
.transaction-row > b { white-space: nowrap; font-size: 12px; }
.amount-positive { color: #81c995; }
.amount-negative { color: #dd8c85; }
.profile-editor,
.admin-scrap-card { max-width: 760px; }
.profile-editor-head { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; }
.profile-editor-head > div { display: grid; gap: 5px; }
.profile-editor-head strong { font-size: 22px; }
.profile-editor-head small { color: var(--muted); }

.community-dialog {
  width: min(92vw, 650px);
  padding: 0;
  border: 1px solid var(--line-strong);
  background: #111316;
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
.community-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.dialog-card { padding: 26px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dialog-heading h2 { margin: 7px 0 0; font-size: 30px; }
.dialog-close { width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: #aaa; font-size: 24px; cursor: pointer; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 9px; }
.toast-item { max-width: min(400px, calc(100vw - 36px)); padding: 13px 15px; border: 1px solid var(--line-strong); background: #171a1e; color: #e7e2dc; box-shadow: 0 15px 45px rgba(0,0,0,.4); font-size: 12px; }
.toast-success { border-color: rgba(111,189,132,.42); }
.toast-error { border-color: rgba(221,104,96,.48); }

.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-link {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  color: #d4d0ca;
  font-size: 11px;
  font-weight: 700;
}
.topbar-link.is-primary { border-color: rgba(239,154,80,.4); background: rgba(201,109,45,.12); color: #fff0df; }

@media (max-width: 1100px) {
  .community-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .community-content { padding: 24px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-profile-card { grid-column: span 2; }
  .messenger-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .community-main { width: min(100% - 20px, 1460px); margin-top: 10px; }
  .topbar.compact { width: min(100% - 20px, 1180px); }
  .community-shell { display: block; }
  .community-sidebar { padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-summary { padding-bottom: 14px; }
  .community-nav { grid-template-columns: repeat(4, 1fr); overflow-x: auto; }
  .community-nav-item { min-width: 120px; justify-content: center; padding: 0 9px; }
  .community-nav-item > span { display: none; }
  .sidebar-currency-card { display: none; }
  .community-content { padding: 18px; }
  .dashboard-grid,
  .wallet-grid { grid-template-columns: 1fr; }
  .dashboard-profile-card { grid-column: auto; }
  .user-results { grid-template-columns: 1fr; }
  .messenger-layout { height: auto; min-height: 650px; grid-template-columns: 1fr; grid-template-rows: 220px minmax(430px, 1fr); }
  .conversation-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .message-composer { grid-template-columns: 1fr; }
  .message-bubble { max-width: 90%; }
  .community-top-actions .ghost-button { display: none; }
  .scrap-pill small { display: none; }
  .topbar-nav { gap: 5px; }
  .topbar-link { padding: 0 9px; font-size: 9px; }
}

.voice-reward-card { display: flex; flex-direction: column; }
.voice-reward-card > p { margin: 0 0 20px; color: #a6abb1; font-size: 12px; line-height: 1.6; }
.voice-reward-card > small { margin-top: auto; padding-top: 18px; color: #70757c; font-size: 10px; line-height: 1.5; }
.voice-reward-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.voice-reward-rules > div { padding: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(4,5,7,.36); display: grid; gap: 7px; }
.voice-reward-rules span { color: #777c83; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.voice-reward-rules strong { color: #f0ece6; font-size: 13px; }

.steam-link-card {
  max-width: 760px;
  margin-top: 18px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(27,69,91,.18), rgba(255,255,255,.012));
}
.steam-link-card h2 { margin: 8px 0 8px; font-size: 28px; letter-spacing: -.04em; }
.steam-link-card p { margin: 0; color: #8d9299; font-size: 12px; }
.steam-link-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.steam-profile-link { display: inline-block; margin-top: 10px; color: #8ecbf0; font-size: 11px; text-decoration: none; }
.steam-profile-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .voice-reward-rules { grid-template-columns: 1fr; }
  .steam-link-card { align-items: flex-start; flex-direction: column; }
}

.steam-login-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  border: 1px solid rgba(128, 194, 255, .38);
  background: linear-gradient(135deg, #1f425f, #102638);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.steam-login-button:hover { border-color: rgba(128, 194, 255, .7); filter: brightness(1.08); }
.steam-login-logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  font-weight: 900;
}
.auth-alternative {
  display: block;
  width: max-content;
  margin: 16px auto 0;
  color: #aeb4bc;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.account-link-grid { display: grid; gap: 16px; margin-top: 18px; }
.discord-link-card small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.5; }

/* === COMMUNITY V4 LAYOUT FIXES === */
.community-page [hidden] { display: none !important; }
.community-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10, 11, 13, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.community-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.community-main {
  margin-top: 12px;
}
.auth-gate {
  min-height: auto;
  padding: 28px 0 50px;
  place-items: start center;
}
.community-shell {
  min-height: calc(100vh - 118px);
}
.wallet-topup-link {
  width: max-content;
  margin-top: 18px;
}
@media (max-width: 720px) {
  .community-home-link { display: none; }
  .auth-gate { padding-top: 12px; }
}


/* === CL SEARCH PORTAL V5 === */
.community-page {
  position: relative;
  isolation: isolate;
  background: #08090a;
}
.community-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(7,8,10,.79), rgba(7,8,10,.91)),
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05) 50%, rgba(0,0,0,.28)),
    url('/recruit-board-bg.png') center / cover no-repeat;
}
.community-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 13% 12%, rgba(201,109,45,.13), transparent 29%);
}
.community-shell { background: rgba(14,16,18,.94); backdrop-filter: blur(7px); }
.community-sidebar { background: rgba(12,14,16,.95); }
.community-nav-subitem { min-height: 38px; margin-left: 24px; padding-left: 18px; font-size: 11px; border-left: 1px solid rgba(239,154,80,.28); }
.wallet-grid.wallet-grid-single, .wallet-grid { grid-template-columns: minmax(0, 1fr); }
.wallet-balance-card { max-width: none; }
.cabinet-topup-intro {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(121,52,20,.25), rgba(255,255,255,.015));
}
.cabinet-topup-intro > div { display: grid; gap: 5px; }
.cabinet-topup-intro strong { color: #fff0e1; font-size: 26px; }
.cabinet-topup-intro small, .cabinet-topup-intro p { color: var(--muted); }
.cabinet-topup-intro p { margin: 0; max-width: 560px; line-height: 1.6; }
.cabinet-topup-packages { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.cabinet-topup-card { min-height: 260px; padding: 24px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); background: rgba(12,14,16,.82); }
.cabinet-topup-card:last-child { border-right: 0; }
.cabinet-topup-card > span { width: max-content; padding: 5px 8px; border: 1px solid rgba(239,154,80,.36); color: #ffd3a8; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.cabinet-topup-card > strong { margin-top: 8px; color: #fff; font-size: clamp(38px, 4vw, 56px); line-height: 1; }
.cabinet-topup-card > b { color: #f3e2d1; font-size: 18px; }
.cabinet-topup-card > button { margin-top: auto; width: 100%; }
@media (max-width: 1000px) { .cabinet-topup-packages { grid-template-columns: repeat(2, 1fr); } .cabinet-topup-card:nth-child(2) { border-right: 0; } }
@media (max-width: 620px) { .cabinet-topup-intro { display: grid; } .cabinet-topup-packages { grid-template-columns: 1fr; } .cabinet-topup-card { border-right: 0; border-bottom: 1px solid var(--line); } }

/* === CL SEARCH PORTAL V6: FRIENDS & AVATARS === */
.friends-search-card,
.friends-section {
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(15, 17, 20, .84);
}
.friends-section { margin-top: 18px; }
.friends-search-card .content-subheading,
.friends-section .content-subheading { margin-bottom: 4px; }
.friends-section .user-results,
.friends-search-card .user-results { margin-top: 18px; }
.user-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.user-result-actions button:disabled {
  opacity: .55;
  cursor: default;
}
.avatar-editor {
  display: grid;
  justify-items: center;
  gap: 9px;
}
.avatar-upload-button,
.avatar-remove-button {
  border: 0;
  background: transparent;
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.avatar-remove-button {
  width: max-content;
  padding: 0;
  color: #8f949b;
  text-align: left;
}
.avatar-upload-button:hover,
.avatar-remove-button:hover { color: #fff; }
@media (max-width: 760px) {
  .user-result-actions { width: 100%; justify-content: flex-start; }
  .user-result-card { flex-wrap: wrap; }
}

/* === CL SEARCH PORTAL V7: SOCIAL PROFILE & AUDIO CALLS === */
.social-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.social-profile-main,
.social-profile-side { display: grid; gap: 18px; }
.social-profile-card,
.social-wall-card,
.social-side-card {
  border: 1px solid var(--line);
  background: rgba(15, 17, 20, .88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.social-profile-cover {
  height: 190px;
  background:
    linear-gradient(180deg, rgba(9,10,12,.08), rgba(9,10,12,.82)),
    linear-gradient(90deg, rgba(201,109,45,.18), transparent 52%),
    url('/recruit-board-bg.png') center 34% / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.social-profile-info {
  min-height: 150px;
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
}
.social-profile-avatar {
  width: 126px;
  height: 126px;
  margin-top: -56px;
  border: 4px solid #111316;
  border-radius: 50%;
  object-fit: cover;
  background: #16191c;
  box-shadow: 0 12px 35px rgba(0,0,0,.38);
}
.social-profile-copy { min-width: 0; padding-top: 18px; }
.social-profile-copy h1 {
  margin: 7px 0 3px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-profile-copy > strong { color: #9da3aa; font-size: 12px; font-weight: 600; }
.social-profile-copy > p { margin: 13px 0 0; max-width: 700px; color: #b2b6bc; line-height: 1.6; }
.social-edit-button { align-self: end; }
.social-wall-card,
.social-side-card { padding: 22px; }
.social-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.social-section-heading h2 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.035em; }
.text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-light);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.social-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.social-stats-grid > button {
  min-height: 92px;
  padding: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(5,6,8,.34);
  color: inherit;
  cursor: pointer;
}
.social-stats-grid > button:last-child { border-right: 0; }
.social-stats-grid > button:hover { background: rgba(201,109,45,.09); }
.social-stats-grid strong { color: #fff; font-size: 26px; letter-spacing: -.04em; }
.social-stats-grid span { color: #81868d; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.social-preview-list { display: grid; }
.social-conversation-preview {
  width: 100%;
  min-height: 68px;
  padding: 11px 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.social-conversation-preview:first-child { border-top: 0; }
.social-conversation-preview:hover { background: rgba(255,255,255,.018); }
.social-conversation-preview img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.social-conversation-preview > span { min-width: 0; display: grid; gap: 5px; }
.social-conversation-preview strong,
.social-conversation-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-conversation-preview small { color: #8c9198; }
.social-conversation-preview time { color: #686d74; font-size: 10px; }
.social-friends-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.social-friend-preview {
  min-width: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #d9d6d0;
  cursor: pointer;
}
.social-friend-preview img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.social-friend-preview span { width: 100%; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.social-balance-card { display: grid; gap: 13px; border-color: rgba(239,154,80,.22); background: linear-gradient(145deg, rgba(201,109,45,.14), rgba(15,17,20,.88)); }
.social-balance-card > strong { color: #fff2e5; font-size: 26px; }
.social-balance-card .primary-button { width: 100%; }
.thread-actions { display: flex; gap: 8px; align-items: center; }
.call-action-button { color: #b9d6ff; }
.call-security-note {
  margin-bottom: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(226,150,64,.34);
  background: rgba(126,72,21,.14);
  color: #e9c89f;
  font-size: 12px;
  line-height: 1.55;
}
.call-history-card { margin-top: 0; }
.call-history-list { display: grid; }
.call-history-row {
  min-height: 74px;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-top: 1px solid rgba(255,255,255,.065);
}
.call-history-row:first-child { border-top: 0; }
.call-history-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.call-history-row > div { min-width: 0; display: grid; gap: 5px; }
.call-history-row small { color: #7f848b; line-height: 1.5; }
.call-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4,5,7,.82);
  backdrop-filter: blur(13px);
}
.call-card {
  width: min(100%, 430px);
  padding: 38px 30px 32px;
  display: grid;
  justify-items: center;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 50% 0, rgba(201,109,45,.2), transparent 35%),
    linear-gradient(180deg, #171a1e, #0e1013);
  box-shadow: 0 36px 110px rgba(0,0,0,.7);
  text-align: center;
}
.call-avatar { width: 112px; height: 112px; margin: 22px 0 15px; border: 3px solid rgba(239,154,80,.38); border-radius: 50%; object-fit: cover; }
.call-card h2 { margin: 0; color: #fff; font-size: 31px; letter-spacing: -.04em; }
.call-card p { margin: 9px 0 0; color: #a0a5ac; }
.call-timer { margin-top: 13px; color: #fff0df; font-size: 18px; letter-spacing: .06em; }
.call-actions { margin-top: 28px; display: flex; justify-content: center; gap: 20px; }
.call-round-button {
  min-width: 68px;
  height: 58px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.call-round-button.accept { background: #2c9d62; font-size: 22px; }
.call-round-button.decline { width: 58px; min-width: 58px; padding: 0; background: #b94f48; font-size: 25px; }
.call-round-button.mute { background: #31363d; }
.call-round-button:hover { filter: brightness(1.1); }

@media (max-width: 1000px) {
  .social-profile-layout { grid-template-columns: 1fr; }
  .social-profile-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .social-profile-info { grid-template-columns: 88px minmax(0, 1fr); padding: 0 16px 18px; }
  .social-profile-avatar { width: 88px; height: 88px; }
  .social-edit-button { grid-column: 1 / -1; width: 100%; }
  .social-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .social-stats-grid > button:nth-child(2) { border-right: 0; }
  .social-stats-grid > button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .social-profile-side { grid-template-columns: 1fr; }
  .call-history-row { grid-template-columns: 44px minmax(0, 1fr); }
  .call-history-row > button { grid-column: 1 / -1; width: 100%; }
}

/* Portal V8: профили игроков, «Кадры» и аналитика */
.profile-link-target { cursor: pointer; }
.profile-link-target:hover { opacity: .86; }
.public-profile-toolbar { margin-bottom: 14px; }
.public-user-card { margin-bottom: 18px; }
.public-profile-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.public-profile-grid { display: grid; gap: 18px; }
.public-friend-count { color: #a8adb3; font-size: 12px; font-weight: 600; }
.public-friend-count b { color: #fff; font-size: 20px; margin-right: 4px; }

.frame-wall-card { overflow: hidden; }
.frame-feed { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 190px); gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.profile-frame-feed { grid-auto-columns: minmax(180px, 230px); }
.frame-card { position: relative; min-height: 245px; border: 1px solid rgba(255,255,255,.1); background: #0d1012; overflow: hidden; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.frame-card:hover { transform: translateY(-2px); border-color: rgba(228,117,43,.7); }
.frame-card > img { width: 100%; height: 245px; display: block; object-fit: cover; }
.frame-card-meta { position: absolute; inset: auto 0 0; padding: 34px 12px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; background: linear-gradient(transparent, rgba(0,0,0,.92)); }
.frame-card-meta strong { color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-card-meta small { color: #c8c9ca; font-size: 10px; white-space: nowrap; }
.frame-upload-card { width: min(560px, calc(100vw - 32px)); }
.frame-drop-zone { min-height: 300px; border: 1px dashed rgba(228,117,43,.75); background: rgba(228,117,43,.055); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.frame-drop-zone span { color: #e4752b; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.frame-drop-zone img { width: 100%; max-height: 480px; object-fit: contain; background: #090a0b; }
.frame-lifetime-note { color: #858b91; font-size: 11px; }
.frame-view-dialog { width: min(900px, calc(100vw - 26px)); }
.frame-view-card { position: relative; width: 100%; max-width: 900px; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.frame-view-card > img { width: 100%; height: min(72vh, 720px); object-fit: contain; background: #050607; }
.frame-view-copy { padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.frame-view-copy > strong { font-size: 20px; color: #fff; }
.frame-view-copy > p { color: #b5b9bd; line-height: 1.55; }
.frame-view-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.frame-view-close { position: absolute; z-index: 2; top: 10px; right: 10px; background: rgba(0,0,0,.7); }

.admin-analytics { margin-bottom: 26px; border: 1px solid var(--line); background: rgba(15,17,19,.88); padding: 22px; }
.admin-analytics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-analytics-head h2 { margin: 4px 0 0; font-size: 27px; }
.admin-analytics-head select { background: #0b0d0f; color: #fff; border: 1px solid var(--line); padding: 10px 12px; }
.analytics-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.analytics-cards article { min-height: 92px; border: 1px solid var(--line); background: rgba(255,255,255,.018); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.analytics-cards span { color: #8e949a; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.analytics-cards strong { color: #fff; font-size: 30px; letter-spacing: -.04em; }
.analytics-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.analytics-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.analytics-table th, .analytics-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
.analytics-table th { color: #e4752b; text-transform: uppercase; letter-spacing: .06em; background: rgba(228,117,43,.055); }
.analytics-table td { color: #c6c9cc; }
.admin-scrap-heading { margin-top: 8px; }

@media (max-width: 900px) {
  .analytics-cards { grid-template-columns: repeat(2, 1fr); }
  .frame-view-card { grid-template-columns: 1fr; }
  .frame-view-card > img { height: min(58vh, 560px); }
  .public-profile-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
}
@media (max-width: 560px) {
  .analytics-cards { grid-template-columns: 1fr; }
  .frame-feed { grid-auto-columns: 76vw; }
  .frame-card, .frame-card > img { min-height: 320px; height: 320px; }
}

/* Portal V9 — администрирование по разделам */
.admin-main-heading { align-items: flex-end; }
.admin-range-control { display: grid; gap: 6px; min-width: 150px; }
.admin-range-control span { color: #8f9499; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.admin-range-control select,
.admin-log-filters select { min-height: 38px; border: 1px solid var(--line); background: #0a0c0e; color: #fff; padding: 0 12px; font: inherit; }
.admin-subnav { display: flex; gap: 8px; margin: -4px 0 24px; padding: 6px; border: 1px solid var(--line); background: rgba(10,12,14,.86); overflow-x: auto; }
.admin-subnav-button { flex: 0 0 auto; min-width: 112px; min-height: 42px; border: 1px solid transparent; background: transparent; color: #969ca1; font: 800 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .035em; cursor: pointer; }
.admin-subnav-button:hover { color: #fff; border-color: rgba(255,255,255,.12); }
.admin-subnav-button.is-active { color: #fff; border-color: #96501f; background: linear-gradient(180deg, rgba(225,105,36,.33), rgba(106,45,14,.3)); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.admin-subpanel { display: none; }
.admin-subpanel.is-active { display: block; animation: adminPanelIn .2s ease both; }
@keyframes adminPanelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.admin-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.admin-panel-heading h2 { margin: 4px 0 0; color: #fff; font-size: 30px; letter-spacing: -.035em; }
.admin-live-indicator { display: inline-flex; align-items: center; gap: 8px; color: #8f969c; font-size: 11px; }
.admin-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #53bf72; box-shadow: 0 0 12px rgba(83,191,114,.55); }
.analytics-cards { display: grid; gap: 10px; margin-bottom: 18px; }
.analytics-cards-overview,
.analytics-cards-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-cards-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-cards article { min-height: 106px; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.analytics-cards article:first-child { background: linear-gradient(145deg, rgba(113,48,18,.33), rgba(255,255,255,.008)); }
.analytics-cards span { color: #8f959a; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.analytics-cards strong { color: #fff; font-size: 32px; letter-spacing: -.045em; }
.analytics-cards small { color: #747b81; font-size: 10px; }
.admin-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-chart-card { border: 1px solid var(--line); background: rgba(13,15,17,.9); padding: 18px; min-width: 0; }
.admin-chart-card-wide { margin-bottom: 18px; }
.admin-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.admin-chart-heading span { color: #df6f27; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.admin-chart-heading h3 { margin: 4px 0 0; color: #fff; font-size: 20px; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; color: #8f959a; font-size: 10px; white-space: nowrap; }
.chart-legend b { width: 14px; height: 3px; display: inline-block; margin-left: 5px; }
.legend-orange { background: #e4752b; }
.legend-blue { background: #4d91d9; }
.legend-green { background: #58b77b; }
.legend-red { background: #c85b5b; }
.analytics-chart { min-height: 250px; position: relative; overflow: hidden; }
.analytics-chart-large { min-height: 300px; }
.analytics-chart svg { width: 100%; height: 100%; min-height: inherit; display: block; overflow: visible; }
.analytics-chart .chart-grid-line { stroke: rgba(255,255,255,.075); stroke-width: 1; }
.analytics-chart .chart-axis-label { fill: #666d73; font: 10px/1 sans-serif; }
.analytics-chart .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.analytics-chart .chart-area { opacity: .09; }
.analytics-chart .chart-point { stroke: #0f1113; stroke-width: 2; }
.analytics-chart .chart-empty { color: #6f767c; min-height: inherit; display: grid; place-items: center; font-size: 12px; }
.admin-log-section { margin-top: 18px; border: 1px solid var(--line); background: rgba(13,15,17,.82); }
.admin-log-heading { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.admin-log-heading h3 { margin: 4px 0 0; color: #fff; font-size: 20px; }
.admin-event-log { max-height: 410px; overflow: auto; }
.admin-event-log-full { max-height: 590px; border: 1px solid var(--line); background: rgba(13,15,17,.84); }
.admin-event-row { display: grid; grid-template-columns: 96px 130px minmax(0, 1fr) 150px; align-items: center; gap: 14px; min-height: 54px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.065); }
.admin-event-row:last-child { border-bottom: 0; }
.admin-event-row:hover { background: rgba(255,255,255,.018); }
.admin-event-source { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 72px; min-height: 24px; padding: 0 8px; border: 1px solid rgba(255,255,255,.11); color: #b8bdc1; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-event-source.discord { border-color: rgba(88,101,242,.48); color: #aab0ff; background: rgba(88,101,242,.08); }
.admin-event-source.site { border-color: rgba(228,117,43,.48); color: #ef9b62; background: rgba(228,117,43,.08); }
.admin-event-time { color: #777e84; font-size: 10px; }
.admin-event-copy strong { display: block; color: #f1f3f4; font-size: 12px; margin-bottom: 3px; }
.admin-event-copy small { color: #777e84; font-size: 10px; }
.admin-event-actor { text-align: right; color: #b7bcc0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-log-filters { display: flex; gap: 8px; }
.analytics-table-wrap { margin-top: 18px; }
.admin-scrap-card { max-width: 660px; }

@media (max-width: 1180px) {
  .analytics-cards-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-cards-overview, .analytics-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .admin-main-heading, .admin-panel-heading { align-items: stretch; flex-direction: column; }
  .admin-chart-grid { grid-template-columns: 1fr; }
  .analytics-cards-five, .analytics-cards-overview, .analytics-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-event-row { grid-template-columns: 78px minmax(0, 1fr); }
  .admin-event-time, .admin-event-actor { grid-column: 2; text-align: left; }
  .admin-log-filters { width: 100%; }
  .admin-log-filters select { flex: 1; min-width: 0; }
}
@media (max-width: 520px) {
  .analytics-cards-five, .analytics-cards-overview, .analytics-cards-four { grid-template-columns: 1fr; }
  .admin-subnav-button { min-width: 96px; }
  .analytics-chart { min-height: 220px; }
}

/* V10: друзья, кланы, вложения, шапки и оформление профиля */
.section-subnav {
  display: flex; gap: 8px; margin: 0 0 22px; padding: 6px;
  border: 1px solid var(--line); background: rgba(8,9,10,.78); overflow-x: auto;
}
.section-subnav-button {
  min-width: 140px; padding: 12px 18px; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: .04em;
}
.section-subnav-button.is-active { color: var(--text); background: rgba(201,109,45,.16); border-color: rgba(239,154,80,.35); }
.section-subnav-button b { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.section-subpanel { display: none; }
.section-subpanel.is-active { display: block; }

.clan-search-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; padding: 20px; border: 1px solid var(--line); background: rgba(12,14,16,.82); }
.clan-search-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.clan-search-form input { min-height: 44px; padding: 0 13px; border: 1px solid var(--line-strong); background: #090b0d; color: var(--text); }
.clan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.clan-card-site { min-height: 260px; padding: 20px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(24,15,11,.94), rgba(12,14,16,.96)); display: flex; flex-direction: column; gap: 12px; }
.clan-card-site h2 { margin: 0; font-size: 25px; }
.clan-card-site p { flex: 1; margin: 0; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clan-card-head { display: flex; justify-content: space-between; color: var(--accent-light); font-size: 12px; text-transform: uppercase; }
.clan-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.clan-card-tags span { padding: 5px 8px; border: 1px solid rgba(239,154,80,.25); color: #d7b395; background: rgba(201,109,45,.08); }
.clan-owner-stats { margin-bottom: 18px; padding: 18px; border: 1px solid rgba(239,154,80,.28); background: rgba(70,34,16,.18); }
.clan-owner-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.clan-owner-grid article { padding: 14px; border: 1px solid var(--line); background: rgba(5,6,7,.46); display: grid; gap: 5px; }
.clan-owner-grid strong { font-size: 30px; color: var(--accent-light); }
.clan-owner-grid small { color: var(--muted); }
.clan-detail-card { width: min(760px, 92vw); }
.clan-detail-meta { margin: -6px 0 16px; color: var(--accent-light); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.clan-detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.clan-detail-list div { padding: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.clan-detail-list dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.clan-detail-list dd { margin: 6px 0 0; white-space: pre-wrap; }
.clan-detail-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.clan-detail-actions span { color: var(--muted); }

.message-attachment-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 28px; }
.message-attach-button { cursor: pointer; color: var(--accent-light); font-weight: 800; }
#messageFileName { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.message-image-attachment { display: block; max-width: 320px; margin: 4px 0; }
.message-image-attachment img { display: block; width: 100%; max-height: 360px; object-fit: cover; border: 1px solid var(--line); }
.message-file-attachment { display: grid; gap: 4px; min-width: 220px; padding: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.message-file-attachment small { color: var(--muted); }

.banner-editor-card { margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); background: rgba(12,14,16,.75); }
.banner-editor-preview { min-height: 180px; border: 1px solid var(--line); background-position: center; background-size: cover; }
.banner-editor-actions { display: flex; gap: 10px; margin: 12px 0 8px; }
.social-profile-cover { position: relative; overflow: hidden; background-position: center !important; background-size: cover !important; }
.social-profile-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.frame-view-count { display: block; margin: -4px 0 10px; color: var(--muted); }

.cosmetic-frame-rust { outline: 3px double #7f3f1f; box-shadow: 0 0 0 5px rgba(52,24,13,.7), 0 0 18px rgba(201,109,45,.25); }
.cosmetic-frame-ember { animation: cosmeticEmber 2.2s ease-in-out infinite; }
.cosmetic-frame-signal { outline: 2px solid #79b9cb; animation: cosmeticSignal 1.4s linear infinite; }
@keyframes cosmeticEmber { 0%,100% { box-shadow: 0 0 0 3px #6f2c13,0 0 12px rgba(255,100,20,.25); } 50% { box-shadow: 0 0 0 4px #d46d2d,0 0 30px rgba(255,105,25,.7); } }
@keyframes cosmeticSignal { 0%,100% { box-shadow: 0 0 0 2px rgba(121,185,203,.35),0 0 8px rgba(121,185,203,.2); } 50% { box-shadow: 0 0 0 5px rgba(121,185,203,.12),0 0 24px rgba(121,185,203,.75); } }
.cosmetic-nick-bronze { color: transparent !important; background: linear-gradient(90deg,#8f4b20,#ffd08a,#a65322); background-clip: text; -webkit-background-clip: text; }
.cosmetic-nick-ember { color: transparent !important; background: linear-gradient(90deg,#ff7a1a,#fff0b1,#d74b13,#ff7a1a); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; animation: nickFlow 2.5s linear infinite; }
.cosmetic-nick-glitch { color: #f6f6f6; text-shadow: 1px 0 #ef6b35,-1px 0 #4ab8cc; animation: nickGlitch 2.8s steps(1) infinite; }
@keyframes nickFlow { to { background-position: 220% 0; } }
@keyframes nickGlitch { 0%,91%,100% { transform:none; } 92% { transform:translateX(1px); } 94% { transform:translateX(-1px); } 96% { transform:none; } }
.cosmetic-banner-smoke::after { opacity:.55; background: radial-gradient(ellipse at 20% 90%,rgba(180,180,180,.2),transparent 45%), radial-gradient(ellipse at 70% 100%,rgba(190,190,190,.16),transparent 48%); animation: bannerSmoke 7s ease-in-out infinite alternate; }
.cosmetic-banner-scan::after { opacity:.55; background: linear-gradient(180deg,transparent 0 46%,rgba(122,214,238,.4) 49%,transparent 52%); background-size:100% 180%; animation: bannerScan 3s linear infinite; }
.cosmetic-banner-embers::after { opacity:.75; background-image: radial-gradient(circle,#ff9b45 0 1px,transparent 2px),radial-gradient(circle,#dc5d23 0 1px,transparent 2px); background-size:52px 52px,79px 79px; animation: bannerEmbers 8s linear infinite; }
@keyframes bannerSmoke { to { transform: translate3d(3%,-2%,0) scale(1.06); } }
@keyframes bannerScan { from { background-position:0 -80%; } to { background-position:0 140%; } }
@keyframes bannerEmbers { from { background-position:0 90px,20px 130px; } to { background-position:30px -40px,0 -80px; } }

@media (max-width: 1000px) {
  .clan-search-form { grid-template-columns: 1fr 1fr; }
  .clan-grid, .clan-owner-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .clan-search-form, .clan-grid, .clan-owner-grid, .clan-detail-list { grid-template-columns: 1fr; }
  .message-image-attachment { max-width: 230px; }
}

/* V11: полноразмерные карточки, статусы, расширенный магазин и рулетка */
.clan-detail-dialog {
  width: min(1120px, 96vw);
  max-width: 96vw;
  height: min(900px, 94vh);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: #0b0d0f;
  overflow: hidden;
}
.clan-detail-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(7px); }
.clan-detail-dialog .clan-detail-card {
  box-sizing: border-box;
  width: 100%; min-height: 100%; max-height: 94vh;
  padding: 36px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.clan-detail-dialog .clan-detail-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.clan-detail-dialog .clan-detail-list dd { overflow-wrap: anywhere; }
.clan-detail-dialog .clan-detail-actions { margin-top: auto; padding-top: 24px; }

.user-presence, .profile-presence { display: block; margin-top: 4px; color: #878c92; font-size: 11px; font-style: normal; }
.user-presence::before, .profile-presence::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #666b70; }
.user-presence.is-online, .profile-presence.is-online { color: #78d59b; }
.user-presence.is-online::before, .profile-presence.is-online::before { background: #3fd27f; box-shadow: 0 0 10px rgba(63,210,127,.55); }
.trade-url-field { margin-top: 16px; }
.trade-url-field input { width: min(650px,100%); }
.admin-management-grid { display:grid; grid-template-columns:minmax(320px,520px) 1fr; gap:18px; }
.admin-role-actions { display:flex; flex-wrap:wrap; gap:10px; }
.delivery-row { align-items:center; }
.delivery-actions { display:flex; justify-content:flex-end; }

.cosmetic-frame-carbon { outline:3px solid #32383e; box-shadow:0 0 0 6px #0e1114, inset 0 0 0 1px #747b81; }
.cosmetic-frame-toxic { outline:2px solid #92e232; box-shadow:0 0 22px rgba(146,226,50,.65); animation:cosmeticPulse 2s ease-in-out infinite; }
.cosmetic-frame-frost { outline:3px solid #c9efff; box-shadow:0 0 20px rgba(120,210,255,.62); }
.cosmetic-frame-hazard { outline:4px dashed #f0b229; box-shadow:0 0 0 3px #17120a; }
.cosmetic-frame-neon { outline:2px solid #9b62ff; box-shadow:0 0 18px #9b62ff,0 0 34px rgba(70,187,255,.45); animation:cosmeticHue 4s linear infinite; }
.cosmetic-frame-military { outline:4px double #5e6d46; box-shadow:0 0 0 4px #171c12; }
.cosmetic-frame-radiation { outline:3px solid #d9f14b; box-shadow:0 0 24px rgba(217,241,75,.48); animation:cosmeticPulse 1.3s ease-in-out infinite; }
.cosmetic-frame-copper { outline:3px solid #b86f35; box-shadow:inset 0 0 9px #e2a06c,0 0 15px rgba(184,111,53,.42); }
.cosmetic-frame-elite { outline:2px solid #f7d483; box-shadow:0 0 0 4px #7f3d1d,0 0 0 7px #f7d483,0 0 28px rgba(247,212,131,.55); animation:cosmeticElite 3s linear infinite; }
@keyframes cosmeticPulse { 50% { filter:brightness(1.38); transform:scale(1.02); } }
@keyframes cosmeticHue { to { filter:hue-rotate(360deg); } }
@keyframes cosmeticElite { 50% { box-shadow:0 0 0 4px #f7d483,0 0 0 7px #7f3d1d,0 0 38px rgba(247,212,131,.8); } }

.cosmetic-nick-frost { color:transparent!important; background:linear-gradient(90deg,#e9fbff,#65c8ff,#fff); background-clip:text; -webkit-background-clip:text; }
.cosmetic-nick-toxic { color:#bff05b!important; text-shadow:0 0 10px rgba(150,240,70,.72); }
.cosmetic-nick-sunset { color:transparent!important; background:linear-gradient(90deg,#ff7a31,#ffcf5f,#9a5bff); background-clip:text; -webkit-background-clip:text; }
.cosmetic-nick-steel { color:transparent!important; background:linear-gradient(180deg,#fff,#8d949b,#d9e0e6); background-clip:text; -webkit-background-clip:text; }
.cosmetic-nick-neon { color:#d6b1ff!important; text-shadow:0 0 8px #a54dff,0 0 18px #2cb8ff; animation:nickNeon 1.8s ease-in-out infinite; }
.cosmetic-nick-blood { color:#ff665a!important; text-shadow:0 2px 0 #5c1010,0 0 12px rgba(180,20,20,.7); }
.cosmetic-nick-gold { color:transparent!important; background:linear-gradient(90deg,#8f5c10,#fff1a6,#d19a24,#fff1a6); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; animation:nickFlow 3s linear infinite; }
.cosmetic-nick-camo { color:transparent!important; background:linear-gradient(90deg,#6c7b4d,#c5b985,#485535,#91885e); background-clip:text; -webkit-background-clip:text; }
.cosmetic-nick-elite { color:transparent!important; background:linear-gradient(90deg,#ff9c42,#fff,#68d8ff,#ff9c42); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; animation:nickFlow 1.7s linear infinite; filter:drop-shadow(0 0 7px rgba(255,145,62,.65)); }
@keyframes nickNeon { 50% { text-shadow:0 0 14px #a54dff,0 0 30px #2cb8ff; } }

.cosmetic-banner-rain::after { opacity:.55; background:repeating-linear-gradient(112deg,transparent 0 22px,rgba(130,255,90,.34) 24px,transparent 26px); animation:bannerRain 2s linear infinite; }
.cosmetic-banner-static::after { opacity:.26; background-image:repeating-radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px 4px); animation:bannerStatic .18s steps(2) infinite; }
.cosmetic-banner-radar::after { opacity:.48; background:conic-gradient(from 0deg at 50% 80%,transparent 0 320deg,rgba(76,255,154,.55) 350deg,transparent 360deg); animation:bannerRadar 4s linear infinite; }
.cosmetic-banner-fog::after { opacity:.5; background:radial-gradient(ellipse at 20% 100%,rgba(220,225,230,.22),transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(220,225,230,.2),transparent 55%); animation:bannerSmoke 10s ease-in-out infinite alternate; }
.cosmetic-banner-fireline::after { opacity:.72; background:linear-gradient(180deg,transparent 82%,rgba(255,98,30,.25) 86%,#ff7d2b 94%,transparent 100%); animation:bannerFireline 2.1s ease-in-out infinite; }
.cosmetic-banner-grid::after { opacity:.35; background-image:linear-gradient(rgba(111,205,238,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(111,205,238,.35) 1px,transparent 1px); background-size:32px 32px; animation:bannerGrid 6s linear infinite; }
.cosmetic-banner-sparks::after { opacity:.75; background-image:radial-gradient(circle,#bdf4ff 0 1px,transparent 2px),radial-gradient(circle,#6fd4ff 0 1px,transparent 2px); background-size:44px 56px,71px 67px; animation:bannerSparks 2.5s steps(5) infinite; }
.cosmetic-banner-radiation::after { opacity:.42; background:repeating-radial-gradient(circle at 50% 50%,rgba(220,245,70,.32) 0 7px,transparent 9px 28px); animation:bannerRadiation 4s ease-in-out infinite; }
.cosmetic-banner-elite::after { opacity:.62; background:linear-gradient(100deg,transparent 0 30%,rgba(255,141,53,.4) 44%,rgba(111,216,255,.34) 50%,transparent 64%),repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.08) 19px 20px); background-size:220% 100%,100% 100%; animation:bannerElite 4s linear infinite; }
@keyframes bannerRain { to { background-position:60px 80px; } }
@keyframes bannerStatic { 50% { transform:translate(2px,-1px); } }
@keyframes bannerRadar { to { transform:rotate(360deg); } }
@keyframes bannerFireline { 50% { filter:brightness(1.6); } }
@keyframes bannerGrid { to { background-position:32px 32px; } }
@keyframes bannerSparks { 50% { background-position:20px -30px,-15px 25px; } }
@keyframes bannerRadiation { 50% { transform:scale(1.08); filter:brightness(1.4); } }
@keyframes bannerElite { to { background-position:-220% 0,0 0; } }

.roulette-page { min-height:100vh; }
.roulette-shell { width:min(1240px,calc(100% - 36px)); margin:34px auto 80px; }
.roulette-hero { padding:34px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(63,28,12,.88),rgba(9,11,13,.97)); }
.roulette-hero h1 { margin:8px 0; font-size:clamp(42px,7vw,88px); line-height:.9; text-transform:uppercase; }
.roulette-status { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.roulette-status span { padding:9px 12px; border:1px solid var(--line); background:#0b0d0f; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.case-card { position:relative; overflow:hidden; padding:28px; border:1px solid var(--line); background:linear-gradient(145deg,#17100c,#0b0d0f); }
.case-card::before { content:''; position:absolute; inset:0; opacity:.12; background:repeating-linear-gradient(45deg,transparent 0 18px,#f09245 20px 21px); }
.case-card > * { position:relative; }
.case-card h2 { margin:10px 0; font-size:34px; }
.case-price { font-size:26px; color:var(--accent-light); font-weight:900; }
.case-prizes { display:grid; gap:7px; margin:18px 0; max-height:260px; overflow:auto; }
.case-prize { display:flex; justify-content:space-between; gap:12px; padding:10px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.26); }
.rarity-common{color:#b7bcc1}.rarity-uncommon{color:#78d59b}.rarity-rare{color:#70bfff}.rarity-epic{color:#c48dff}.rarity-legendary{color:#ffb048}
.roulette-result { margin-top:20px; padding:30px; text-align:center; border:1px solid var(--line); background:#0c0e10; }
.roulette-result strong { display:block; margin:10px 0; font-size:42px; }
.roulette-history { margin-top:20px; padding:24px; border:1px solid var(--line); background:#0c0e10; }
.roulette-history-list { display:grid; gap:8px; }
.roulette-history-row { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.08); }

@media (max-width: 820px) {
  .clan-detail-dialog { width:96vw; height:92vh; }
  .clan-detail-dialog .clan-detail-card { padding:22px; max-height:92vh; }
  .clan-detail-dialog .clan-detail-list { grid-template-columns:1fr; }
  .case-grid, .admin-management-grid { grid-template-columns:1fr; }
}

/* V12: безопасность и удаление карточек */
.admin-security-note { margin:0 0 16px; padding:12px 14px; border:1px solid rgba(239,154,80,.25); background:rgba(73,34,15,.2); color:var(--muted); line-height:1.55; }
.admin-sessions-table td { max-width:260px; overflow-wrap:anywhere; }
.admin-sessions-table td:nth-child(2) { color:var(--accent-light); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.clan-detail-actions .danger-text { margin-left:auto; }
@media(max-width:800px){
  .admin-sessions-table { min-width:900px; }
  .clan-detail-actions { align-items:stretch; flex-direction:column; }
  .clan-detail-actions .danger-text { margin-left:0; }
}

/* V13: фотографии карточек и безопасные Discord-ссылки */
.clan-card-cover {
  min-height: 150px;
  margin: -20px -20px 2px;
  border-bottom: 1px solid var(--line);
  background-position: center;
  background-size: cover;
}
.clan-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0 22px;
}
.clan-photo-thumb {
  position: relative;
  min-height: 150px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #07090a;
  cursor: zoom-in;
}
.clan-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  max-height: 260px;
  object-fit: cover;
  transition: transform .2s ease, filter .2s ease;
}
.clan-photo-thumb:hover img { transform: scale(1.035); filter: brightness(1.08); }
.clan-invite-notice {
  margin: 4px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(221, 92, 76, .35);
  background: rgba(98, 29, 24, .2);
  color: #e5aaa2;
  line-height: 1.5;
}
@media (max-width: 650px) {
  .clan-photo-gallery { grid-template-columns: 1fr; }
  .clan-photo-thumb img { max-height: 220px; }
}

/* V16 Stability: security, onboarding and mobile hardening */
.security-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:18px}.security-card{background:rgba(15,17,19,.92);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.18)}.security-card p{color:#aeb3b8;line-height:1.55}.session-list{display:grid;gap:10px;margin-top:16px}.session-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:13px}.session-row div{display:grid;gap:4px;min-width:0}.session-row strong{font-size:14px}.session-row small{color:#8e959c;overflow-wrap:anywhere}.security-checklist{display:grid;gap:12px;padding-left:20px;color:#c8ccd0;line-height:1.5}.onboarding-dialog{max-width:none}.onboarding-card{width:min(540px,calc(100vw - 28px));display:grid;gap:15px}.onboarding-card>p{margin:0;color:#aeb3b8}.onboarding-card .text-button{justify-self:center}
@media(max-width:900px){.security-grid{grid-template-columns:1fr}.community-shell{grid-template-columns:1fr}.community-sidebar{position:static;max-height:none}.community-nav{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.community-nav-item{min-width:0}.community-content{min-width:0}}
@media(max-width:560px){.community-main{padding:12px}.community-content{padding:0}.community-nav{grid-template-columns:1fr}.security-card{padding:16px}.session-row{align-items:flex-start;flex-direction:column}.session-row button{width:100%}.community-top-actions{gap:6px}.community-home-link{display:none}}

/* V17 onboarding: Rust role and search-mode setup */
.onboarding-intent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.onboarding-intent-card{position:relative;display:grid;gap:6px;padding:15px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);cursor:pointer}.onboarding-intent-card input{position:absolute;opacity:0;pointer-events:none}.onboarding-intent-card:has(input:checked){border-color:#d77431;background:rgba(215,116,49,.12);box-shadow:inset 0 0 0 1px rgba(215,116,49,.25)}.onboarding-intent-card strong{font-size:15px}.onboarding-intent-card small{color:#90969b;line-height:1.4}.onboarding-candidate-fields{display:grid;gap:14px}.onboarding-candidate-fields[hidden]{display:none}.onboarding-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.role-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.role-check-grid label{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);background:#111416;color:#c6cbd0;font-size:12px}.role-check-grid input{width:auto}.steam-hours-preview{display:grid;gap:4px;padding:12px;border:1px solid rgba(102,178,255,.18);background:rgba(60,115,165,.08)}.steam-hours-preview small{color:#8f969c;line-height:1.4}@media(max-width:720px){.onboarding-intent-grid,.onboarding-field-grid{grid-template-columns:1fr}.role-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.role-helper { display:block; margin-top:8px; color:#8f8b84; font-size:11px; line-height:1.45; }