.auth-tabs{ display:flex; margin-bottom:20px; border-bottom:1px solid var(--border); }
.auth-tab{
  flex:1; text-align:center; padding:9px; cursor:pointer; background:none; border:none;
  font-size:13px; font-weight:700; color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.auth-tab.active{ color:var(--text-heading); border-color:var(--accent); }

/* =============================================================================
   Отзывчивость: сайдбар прячется на узких экранах
   ============================================================================= */
.menu-toggle{ display:none; }
.sidebar-scrim{ border:0; padding:0; display:none; }
/* #app > .sidebar задаёт z-index:2 — на мобилке нужны селекторы той же
   специфичности, иначе меню оказывается ПОД scrim и клики не работают. */
@media (max-width:900px){
  #app > .sidebar{
    position:fixed; left:0; top:0; z-index:50; width:min(var(--sidebar-w), 86vw);
    max-width:320px; height:100dvh; transform:translateX(-105%);
    transition:transform .18s ease, visibility .18s ease;
    box-shadow:var(--shadow-pop);
    pointer-events:none; visibility:hidden;
  }
  #app > .sidebar.open{
    transform:translateX(0);
    pointer-events:auto; visibility:visible;
  }
  #app > .sidebar-scrim{
    display:none; position:fixed; inset:0; z-index:40;
    background:rgba(6,5,12,.6); border:0; padding:0; cursor:pointer;
  }
  #app > .sidebar-scrim.show{ display:block; }
  .menu-toggle{ display:inline-flex; width:40px; height:40px; }
  .topbar{
    position:sticky; padding:14px 14px 12px; align-items:center; gap:10px;
  }
  .topbar-titles{ min-width:0; flex:1; gap:8px; }
  .topbar-titles > div{ min-width:0; }
  .topbar-titles .sub{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .content{ padding:14px 14px 36px; }
  body.sidebar-open{ overflow:hidden; touch-action:none; }
}

.access-card{
  max-width:520px; margin:72px auto; padding:36px;
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
}
.blocked-icon{
  width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  border-radius:20px; color:var(--accent-light); background:var(--accent-soft);
}
.blocked-icon svg{ width:30px; height:30px; }
@media (max-width:560px){
  .topbar-titles h1{ font-size:18px; margin-bottom:2px; }
  .account-widget{ padding:4px; }
  .account-widget .name,
  .account-widget .chev{ display:none; }
  .card-pad{ padding:16px; }
  .roster-row{ flex-wrap:wrap; gap:10px; }
  .roster-row .row-actions{ margin-left:auto; }
  .audit-row, .audit-main{ align-items:flex-start; flex-direction:column; gap:4px; }
  .audit-meta{ text-align:left; }
  .toolbar{ gap:10px; }
  .toolbar-right, .toolbar .row-actions{ width:100%; }
  .toolbar-right .btn, .toolbar .row-actions .btn{ flex:1 1 auto; }
  .search-input{ min-width:0; width:100%; flex:1 1 100%; }
  .btn{ max-width:100%; }
  .modal-actions .btn{ min-width:0; }
  .gmp-table-wrap,
  .payout-table-wrap,
  .table-scroll{
    margin-left:-6px; margin-right:-6px; padding-left:6px; padding-right:6px;
    -webkit-overflow-scrolling:touch;
  }
  .rule-card .row-actions,
  .vacation-card .row-actions{ width:100%; }
}

/* =============================================================================
   Публичный сайт: Главная и форма заявки (без сайдбара, своя шапка)
   ============================================================================= */
.site{ position:relative; z-index:1; min-height:100vh; width:100%; display:flex; flex-direction:column; }

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(10,8,17,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header-inner{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.site-brand{ display:flex; align-items:center; gap:10px; }
.site-brand-mark{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(155deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; font-weight:800; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.site-brand-name{ font-weight:800; font-size:14.5px; color:var(--text-heading); letter-spacing:.03em; }
.site-nav{ display:flex; align-items:center; gap:26px; }
.site-nav-link{ font-size:13.5px; font-weight:600; color:var(--text-body); }
.site-nav-link:hover{ color:var(--text-heading); }
.site-nav-link.active{ color:var(--text-heading); }

.site-main{ flex:1; }

/* --- Hero ---
   Полноширинный визуальный план с горами; бренд — главный сигнал первого экрана.
   Без fixed-фона: градиент привязан к блоку и стыкуется с фоном страницы. */
.site-hero{
  position:relative; padding:84px 24px 60px; text-align:center; overflow:hidden;
  background-color: var(--bg-page);
  background-size:cover; background-position:center;
}
.site-hero-home{
  min-height:min(78vh, 760px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:96px 24px 72px;
}
.site-hero > .site-hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.site-hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  transform:scale(1.04);
  animation:site-hero-pan 18s ease-in-out alternate infinite;
}
.site-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,12,36,.35) 0%, rgba(8,6,15,.55) 42%, rgba(8,6,15,.94) 78%, var(--bg-page) 100%),
    radial-gradient(70% 55% at 50% 18%, rgba(124,92,252,.22), transparent 70%);
}
.site-hero > :not(.site-hero-bg){ position:relative; z-index:1; }
.site-hero-inner{
  width:min(720px, 100%);
  animation:site-hero-rise .9s ease both;
}
.site-hero-brand,
.site-hero h1{
  font-size:clamp(36px, 7vw, 64px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0 0 14px;
  color:var(--text-heading);
  text-shadow:0 10px 40px rgba(0,0,0,.35);
}
.site-hero-sub{
  max-width:34rem; margin:0 auto 28px;
  color:rgba(226,222,245,.82); font-size:clamp(14px, 2.2vw, 16.5px);
  line-height:1.55;
}
.site-hero-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.site-hero-ghost{
  background:rgba(26,23,39,.55);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.site-hero-ghost.is-disabled,
.site-hero-ghost[aria-disabled="true"]{
  opacity:.6; cursor:default; pointer-events:none;
}
@keyframes site-hero-rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes site-hero-pan{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{ transform:scale(1.08) translate3d(0,-1.5%,0); }
}
@media (prefers-reduced-motion: reduce){
  .site-hero-bg img{ animation:none; transform:none; }
  .site-hero-inner{ animation:none; }
}

/* --- Контентные секции главной --- */
.site-section{ max-width:760px; margin:0 auto; padding:38px 24px 20px; }
.site-home{
  max-width:760px; margin:0 auto;
  padding:8px 24px 56px;
  display:flex; flex-direction:column; gap:42px;
}
.site-block{ min-width:0; }
.site-block-title{
  font-size:clamp(20px, 3vw, 26px);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 12px;
  color:var(--text-heading);
}
.site-block-text{
  margin:0 0 10px;
  color:var(--text-body);
  font-size:15px;
  line-height:1.6;
  max-width:38rem;
}
.site-block-text:last-child{ margin-bottom:0; }
.site-block-intro{
  text-align:center;
  padding:8px 0 4px;
}
.site-block-intro .site-block-text{
  margin-left:auto; margin-right:auto;
  color:var(--text-muted);
}

.site-offer-list{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--border-soft);
}
.site-offer-list li{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:16px 0;
  border-bottom:1px solid var(--border-soft);
}
.site-offer-num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent-light);
  padding-top:3px;
}
.site-offer-text{
  color:var(--text-body);
  font-size:14.5px;
  line-height:1.55;
}

.site-need-list{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.site-need-list li{
  position:relative;
  padding:12px 14px 12px 36px;
  color:var(--text-body);
  font-size:14.5px;
  line-height:1.5;
  border-left:2px solid rgba(167,139,250,.45);
  background:linear-gradient(90deg, rgba(124,92,252,.08), transparent 70%);
}
.site-need-list li::before{
  content:'';
  position:absolute; left:16px; top:1.15em;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-light);
  box-shadow:0 0 0 4px rgba(124,92,252,.12);
}

.site-block-aside{
  padding:22px 0 0;
  border-top:1px solid var(--border-soft);
}
.site-block-cta{
  text-align:center;
  padding:28px 18px 8px;
  margin-top:4px;
}
.site-block-cta .site-block-text{
  margin:0 auto 20px;
  color:var(--text-muted);
}
.site-cta-closed{
  margin:0;
  color:var(--text-muted);
  font-size:14px;
}

.site-lead{ text-align:center; font-weight:700; color:var(--text-heading); font-size:15.5px; margin-bottom:4px; }
.site-lead-sub{
  text-align:center; color:var(--text-muted); font-size:14px; line-height:1.55;
  margin:0 auto 8px; max-width:560px;
}
.site-h2{ font-size:19px; font-weight:800; margin:32px 0 14px; }
.site-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.site-list li{ position:relative; padding-left:20px; color:var(--text-body); font-size:14px; line-height:1.5; }
.site-list li::before{ content:''; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent-light); }
.site-note{
  color:var(--text-body); font-size:14px; line-height:1.55; margin:0 0 12px;
}

.site-callout{ margin-top:26px; }
.site-callout h3{ font-size:16px; margin-bottom:8px; }
.site-callout-underline{ width:36px; height:3px; border-radius:2px; background:var(--red); margin-bottom:18px; }
.site-callout .site-list{ margin-bottom:22px; }

.site-footer{
  margin-top:auto; text-align:center; padding:34px 24px 46px; color:var(--text-faint); font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.site-footer a{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-weight:600; }
.site-footer a:hover{ color:var(--accent-light); }

/* --- Форма заявки (в стиле опросника) --- */
.site-page-head{ max-width:640px; margin:0 auto; padding:46px 24px 6px; text-align:center; }
.site-page-head h1{ font-size:27px; margin-bottom:8px; }
.site-page-head p{ color:var(--text-muted); font-size:13.5px; }

.qform{ max-width:640px; margin:0 auto; padding:24px 24px 60px; display:flex; flex-direction:column; gap:14px; }
.qform-card{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.045);
  border-radius:var(--radius-md);
  padding:18px 18px;
}
.qform-row{ align-items:stretch; }
.qform-row > .qform-card{ min-width:0; }
.qform-label{ display:block; font-size:14.5px; font-weight:700; color:var(--text-heading); margin-bottom:5px; }
.qform-required{ color:var(--accent-light); margin-left:3px; }
.qform-hint{ font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.qform-hint-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.qform-hint-row .qform-hint{ margin-bottom:0; }
.qform-card .input,
.qform-card textarea.input{
  margin-top:2px; width:100%;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  padding:9px 11px;
}
.qform-card .input:focus,
.qform-card textarea.input:focus{
  border-color:rgba(167,139,250,.55);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.qform-card .field-hint{ margin-top:8px; }
.qform .error-text{ text-align:center; }
.qform > .btn{ width:100%; }

.site-toast{
  position:fixed; left:50%; bottom:28px; z-index:400;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  max-width:min(440px, calc(100vw - 24px));
  padding:14px 14px 14px 16px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:var(--bg-card);
  box-shadow:var(--shadow-pop);
  animation:site-toast-in .28s ease both;
}
.site-toast-ok{
  border-color:rgba(52,211,153,.35);
  background:linear-gradient(180deg, rgba(52,211,153,.14), var(--bg-card));
}
.site-toast-error{
  border-color:rgba(248,113,113,.35);
  background:linear-gradient(180deg, rgba(248,113,113,.12), var(--bg-card));
}
.site-toast-text{
  flex:1; min-width:0;
  font-size:14px; font-weight:600; line-height:1.4;
  color:var(--text-heading);
}
.site-toast-error .site-toast-text{ color:#fecaca; }
.site-toast-close{
  flex-shrink:0; width:28px; height:28px;
  border:0; border-radius:8px;
  background:transparent; color:var(--text-muted);
  font-size:18px; line-height:1; cursor:pointer;
}
.site-toast-close:hover{ background:var(--bg-hover); color:var(--text-heading); }
@keyframes site-toast-in{
  from{ opacity:0; transform:translate(-50%, 12px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .site-toast{ animation:none; }
}

/* --- ссылка "Как найти свой Discord ID?" рядом с полем Discord в заявке --- */
.qform-hint-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--accent-light);
  background:none; border:none; padding:0; cursor:pointer; white-space:nowrap;
}