:root {
  color-scheme: dark;                /* тёмные нативные контролы и фон браузера */
  --bg: #0a0f0c;
  --bg-2: #0e1511;
  --panel: #121a15;
  --panel-2: #16211a;
  --line: #1e2c22;
  --ink: #ddf5e8;
  --ink-soft: #b9d6c4;
  --muted: #7d9c8a;
  --c-g: #3ddc84;
  --c-g-d: #1f9d57;
  --c-lime: #a8f25c;
  --c-lime-d: #7cc038;
  --c-mint: #7ee2bd;
  --c-mint-d: #3eaa86;
  --c-emerald: #34c39b;
  --c-emerald-d: #1f8a6e;
  --c-olive: #7f8f54;
  --c-olive-d: #5c6a3a;
  --term-green: #57e88f;
  --danger: #ff6b6b;
  --danger-d: #c94f4f;
  --warn: #ffd66b;
  --warn-d: #cf9f3a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Тёмный фон всего прокручиваемого полотна — не даёт белым полосам появляться снизу,
     особенно на мобильных, где высота вьюпорта меняется при показе/скрытии адресной строки. */
  background: linear-gradient(160deg, var(--bg), var(--bg-2)) fixed;
  background-color: var(--bg);
  min-height: 100%;
}
body {
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", "Nunito", sans-serif;
  color: var(--ink);
  background: transparent;              /* фон теперь на html — избегаем fixed-глюков iOS */
  min-height: 100vh;
  min-height: 100dvh;                   /* динамическая высота вьюпорта */
  overflow-x: hidden;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;    /* плавный скролл на iOS */
}

/* Терминальная фоновая сетка */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25), transparent 70%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.25), transparent 70%);
  opacity:.5; }
/* плавающие "орбы" свечения */
.orbs { position:fixed; inset:0; z-index:-1; pointer-events:none; pointer-events:none; overflow:hidden; }
.orbs, .orbs * { pointer-events:none; }
.orbs span { position:absolute; border-radius:50%; filter:blur(90px); animation: orbFloat 18s ease-in-out infinite; }
form input, form textarea, form select, input.input, textarea.input, select.input { pointer-events:auto; cursor:text; }
.orbs .o1 { width:420px; height:420px; background:rgba(61,220,132,.14); top:-100px; left:-80px; }
.orbs .o2 { width:360px; height:360px; background:rgba(52,195,155,.12); right:-90px; bottom:5%; animation-delay:-6s; }
.orbs .o3 { width:300px; height:300px; background:rgba(168,242,92,.10); left:45%; top:35%; animation-delay:-11s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

/* Пластилиновый прожиг текста */
.glow-text { color:var(--term-green); background:linear-gradient(90deg,#a8f25c,#3ddc84,#7ee2bd,#3ddc84,#a8f25c);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent; animation: glowMove 6s linear infinite; }
@keyframes glowMove { to{background-position:-200% 0} }

/* Прогресс-бар скролла */
#scrollbar { position:fixed; top:0; left:0; height:4px; width:0; z-index:50;
  background:linear-gradient(90deg,var(--c-g),var(--c-lime)); }

/* 3D-наклон карточек */
.card { transform-style: preserve-3d; transition: box-shadow .25s ease; }
.card:hover { box-shadow: 0 22px 40px -18px rgba(61,220,132,.35); }
.card.glow { position:relative; overflow:hidden; }
.card.glow::after { content:""; position:absolute; top:0; left:-120%; height:100%; width:60%;
  background:linear-gradient(100deg, transparent, rgba(168,242,92,.22), transparent); transform:skewX(-20deg);
  transition:left .6s ease; }
.card.glow:hover::after { left:130%; }


a { color: var(--term-green); text-decoration: none; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.wrap { max-width: none; margin: 0 auto; padding: 0 2rem; width: 100%; }
main { flex: 1; padding: 1.5rem 0 3rem; }

/* ===== Анимации ===== */
@keyframes floaty { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(12px,-16px) rotate(10deg)} }
@keyframes squish { 0%{transform:scale(1)}25%{transform:scale(1.06,.92)}50%{transform:scale(.94,1.06)}75%{transform:scale(1.03,.97)}100%{transform:scale(1)} }
@keyframes bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes sway { 0%,100%{transform:rotate(0)}25%{transform:rotate(1.4deg)}75%{transform:rotate(-1.4deg)} }
@keyframes blinkK { 50%{opacity:0} }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.45} }
@keyframes tapReveal { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

.bg-char { position: fixed; z-index:0; pointer-events:none; opacity:.15; animation: floaty ease-in-out infinite; }
.bg-char.c1 { width:160px; height:160px; background:var(--c-g); border-radius:46% 54% 60% 40%/52% 42% 58% 48%; top:12%; left:-40px; animation-duration:9s; }
.bg-char.c2 { width:120px; height:120px; background:var(--c-emerald); border-radius:52% 48% 44% 56%/58% 62% 38% 42%; bottom:6%; right:-30px; animation-duration:11s; }

/* ===== Навигация (анимированный «стеклянный» баннер) ===== */
nav { position: sticky; top:0; z-index:40; margin-top:12px; padding:0 .6rem;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) }
.nav-pill { max-width:none; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:.8rem 1rem; padding:.55rem 2rem; position:relative;
  background:linear-gradient(120deg, rgba(14,21,17,.92), rgba(8,12,10,.94));
  border:1px solid rgba(61,220,132,.25); border-radius:18px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -20px rgba(0,0,0,.7) }
/* верхняя неоновая полоса-градиент */
.nav-pill::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c-lime), var(--c-g), var(--c-mint), transparent);
  background-size:200% 100%; animation:navLine 5s linear infinite; opacity:.8 }
@keyframes navLine{ to{ background-position:-200% 0 } }
/* плавающее свечение в углу баннера */
.nav-pill::after{ content:""; position:absolute; width:160px; height:160px; border-radius:50%; top:-90px; right:-50px;
  background:radial-gradient(circle, rgba(61,220,132,.18), transparent 70%);
  animation:navGlow 7s ease-in-out infinite; pointer-events:none }
@keyframes navGlow{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
/* логотип с анимированным свечением точки */
.logo { position:relative; font-weight:800; color:var(--ink); font-size:1.08rem; display:inline-flex; align-items:center; gap:.4rem; z-index:2 }
.logo .dot { position:relative; width:.7em; height:.7em; background:var(--c-lime); border-radius:50%; box-shadow:0 0 10px var(--c-lime);
  animation:dotPulse 2.2s ease-in-out infinite; display:inline-block }
@keyframes dotPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }
.logo .py { opacity:.65; color:var(--c-lime) }
.logo:hover .py{ opacity:1 }
.nav-links { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; z-index:2 }
.nav-links a { position:relative; color:var(--ink-soft); font-weight:600; font-size:.92rem; padding:.4rem .7rem; border-radius:10px;
  transition:color .18s,background .18s,transform .18s }
.nav-links a::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--c-g),var(--c-lime)); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1) }
.nav-links a:hover{ color:#fff; background:rgba(61,220,132,.08); transform:translateY(-1px) }
.nav-links a:hover::after{ transform:scaleX(1) }
.nav-links .nav-cta{ background:linear-gradient(120deg,var(--c-g),var(--c-mint)); color:#06240f; border-radius:999px;
  padding:.42rem .95rem; font-weight:800 }
.nav-links .nav-cta::after{ display:none }
.nav-links .nav-cta:hover{ filter:brightness(1.08); transform:none }
/* неавторизованные: Войти/Регистрация помечаем */
.nav-links a{ }

/* ===== Мобильное бургер-меню ===== */
.nav-burger{ display:none; flex:none; width:42px; height:42px; border:none; cursor:pointer; z-index:5;
  background:rgba(61,220,132,.1); border:1px solid rgba(61,220,132,.3); border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; }
.nav-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--c-g);
  transition:transform .25s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:820px){
  .nav-burger{ display:flex; }
  .nav-links{ position:absolute; top:calc(100% + 8px); left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:.5rem; gap:.15rem;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.85); display:none; }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; padding:.7rem .9rem; border-radius:10px; font-size:.98rem; }
  .nav-links .nav-cta{ text-align:center; margin-top:.3rem; }
  .nav-pill{ position:relative; max-width:1100px; }
}
.user-chip { display:inline-flex; align-items:center; gap:.5rem; background:rgba(61,220,132,.1); color:var(--c-g);
  border:1px solid rgba(61,220,132,.3); border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.9rem;
  transition:background .2s,border-color .2s }
.user-chip:hover{ background:rgba(61,220,132,.18); border-color:var(--c-g) }
.user-chip .role { font-size:.72rem; text-transform:uppercase; opacity:.75; }

/* ===== Кнопки ===== */
.btn { display:inline-block; font-weight:800; font-size:.98rem; padding:.7rem 1.6rem; border-radius:999px;
       cursor:pointer; border:none; background:var(--c-g); color:#06240f; transform-origin:50% 80%;
       transition: transform .15s, filter .2s; text-align:center; }
.btn:hover { animation: squish .5s ease; filter:brightness(1.06); }
.btn-ghost { background:transparent; color:var(--ink); border:2px solid var(--line); }
.btn-ghost:hover { border-color:var(--c-g-d); color:var(--term-green); }
.btn-warn { background:var(--warn); color:#3a2a00; }
.btn-danger { background:var(--danger); color:#3a0606; }
.btn-sm { padding:.45rem 1rem; font-size:.85rem; }
.btn-block { width:100%; }

/* Раскрывающийся блок "Подробнее" */
details.dev-details > summary { list-style:none; cursor:pointer; }
details.dev-details > summary::-webkit-details-marker { display:none; }
details.dev-details[open] > summary { animation: squish .5s ease; white-space:nowrap; }

/* ===== Заголовки ===== */
h1,h2,h3{color:var(--ink); line-height:1.2;}
.clay-head { display:inline-flex; align-items:center; gap:.6rem; font-size:1.3rem; font-weight:800;
             color:#06240f; padding:.4rem 1.1rem; border-radius:18px 14px 20px 16px; margin-bottom:1.1rem;
             box-shadow:0 5px 0 rgba(0,0,0,.5); }
.clay-head .tag { background:rgba(6,36,15,.16); font-family:ui-monospace,monospace; font-size:.78rem;
                  padding:.05rem .5rem; border-radius:8px; }
.lead { color:var(--ink-soft); max-width:760px; margin-bottom:1.1rem; font-size:1.05rem; }

/* ===== Карточки ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.card { background:var(--panel); border:2px solid var(--line); border-radius:22px 16px 24px 18px;
        box-shadow:0 5px 0 rgba(0,0,0,.35), 0 14px 26px -16px rgba(0,0,0,.5);
        padding:1.2rem 1.3rem; transform-style: preserve-3d; transition: transform .2s, box-shadow .25s ease;
        background-image: radial-gradient(circle at 30% 20%, rgba(168,242,92,.05), transparent 55%); }
.card:hover { transform:translateY(-5px); box-shadow:0 5px 0 rgba(0,0,0,.35), 0 26px 44px -18px rgba(61,220,132,.4); }
.card .m { color:var(--c-lime); font-family:ui-monospace,monospace; font-size:.8rem; }
.card h3 { font-size:1.1rem; margin:.4rem 0 .3rem; }
.card p { color:var(--muted); font-size:.93rem; }
/* читаемая ширина текста внутри широких карточек (фон остаётся во всю ширину) */
.card h3, .card p { max-width: 900px; }
.card .price { font-family:ui-monospace,monospace; font-size:1.5rem; color:var(--term-green); font-weight:800; }
.card .price small { font-size:.8rem; color:var(--muted); font-weight:400; }

/* ===== Плашки приоритета/статуса ===== */
.prio { display:inline-block; font-family:ui-monospace,monospace; font-size:.78rem; font-weight:700;
        padding:.15rem .6rem; border-radius:999px; }
.prio.low { background:#1e2c22; color:#7f8f54; border:1px solid #3c4a2f; }
.prio.medium { background:#2c2a17; color:#ffd66b; border:1px solid #56491f; }
.prio.high { background:#2c1e12; color:#ff8c3a; border:1px solid #5c3a1f; }
.prio.critical { background:#2c1212; color:#ff6b6b; border:1px solid #6b2626; }
.status { display:inline-block; font-family:ui-monospace,monospace; font-size:.78rem; font-weight:700;
          padding:.15rem .6rem; border-radius:999px; }
.status.open { background:#0e2a1a; color:#5ee0a0; border:1px solid #1f5c3a; }
.status.in_progress { background:#122236; color:#6bb3ff; border:1px solid #24537d; }
.status.closed { background:#262626; color:#9db0c0; border:1px solid #424242; }

/* Бейдж роли в профиле — прикольный моноширинный шрифт + лёгкая пульсация */
.role-badge { display:inline-block; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-weight:800;
              text-transform:uppercase; font-size:.9rem; padding:.22rem .85rem;
              border-radius:999px; vertical-align:middle; --glow: rgba(61,220,132,.4);
              animation: roleGlow 2.6s ease-in-out infinite; }
.role-badge.user { color:#001f0e; background:#4dee95; text-shadow:0 1px 0 rgba(255,255,255,.2); }
.role-badge.support { color:#3a2a00; background:var(--warn); --glow: rgba(255,214,107,.55); }
.role-badge.admin { color:#0a2a1e; background:var(--c-mint); --glow: rgba(126,226,189,.55); }
/* Компактный вариант для переписки/сообщений */
.role-badge-sm { font-size:.72rem; padding:.08rem .6rem; margin-left:.4rem; letter-spacing:.02em; }

/* ===== Баннер роли (прежний анимированный стиль) ===== */
.role-banner{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7rem;flex-wrap:nowrap;
  padding:.6rem 1.1rem;border-radius:16px 13px 18px 15px;border:2px solid var(--line);
  background:linear-gradient(120deg,var(--panel),var(--bg-2));
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);margin-top:.5rem;max-width:100%}
.role-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 110px at 12% -30%, color-mix(in srgb,var(--rc) 20%, transparent), transparent 60%)}
.role-shine{position:absolute;top:0;bottom:0;width:50px;pointer-events:none;
  background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--rc) 50%, transparent),transparent);
  transform:skewX(-18deg); animation:roleShine 3.6s ease-in-out infinite}
@keyframes roleShine{0%{left:-80px;opacity:0}40%{left:110%;opacity:1}100%{left:110%;opacity:0}}
.role-ic{flex:none;width:42px;height:42px;border-radius:13px 11px 15px 12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 80%,#000),color-mix(in srgb,var(--rc) 55%,#000));
  color:#0a0a0a;box-shadow:0 5px 14px -6px color-mix(in srgb,var(--rc) 70%, transparent);
  animation:roleFloat 3s ease-in-out infinite;position:relative;z-index:1}
@keyframes roleFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.role-ic-text{flex:none;font-size:26px;line-height:1;position:relative;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(255,77,77,.5));animation:roleFloat 3s ease-in-out infinite}
.role-nm{font-size:1.15rem;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 90%,#fff),var(--rc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-transform:uppercase;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;position:relative;z-index:1}
/* палитры ролей */
.role-banner.user{--rc:#3ddc84}
.role-banner.support{--rc:#ffd66b}
.role-banner.developer{--rc:#7ee2bd}
.role-banner.moderator{--rc:#b58cff}
.role-banner.partner{--rc:#ffa24d}
.role-banner.admin{--rc:#ff4d4d}
@media(max-width:560px){.role-nm{font-size:1rem}.role-ic-text{font-size:22px}}

/* ===== Валюта ZND ===== */
.zond-coin { min-width:82px; height:46px; flex:0 0 auto; position:relative;
  background: linear-gradient(135deg, #b5f56a, #34c39b 55%, #1f8a6e);
  display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:20px;
  letter-spacing:1px; font-family:ui-monospace,monospace; color:#06240f; padding:0 16px;
  border-radius:14px 8px 16px 10px; transform: rotate(-2deg);
  box-shadow: inset 0 0 0 2px rgba(6,42,30,.35), 0 6px 16px -6px rgba(0,0,0,.6);
  animation: coinFloat 3.4s ease-in-out infinite; }
.zond-coin::before { content:"~"; position:absolute; left:5px; top:-2px; font-size:14px; color:#06240f; opacity:.65; }
.zond-coin::after { content:"~"; position:absolute; right:5px; bottom:-3px; font-size:14px; color:#06240f; opacity:.65; }
@keyframes coinFloat { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-4px)} }

.zond-modal { max-width:480px; }
.zond-modal h2 { display:flex; align-items:center; justify-content:center; gap:.6rem; }
.zond-modal .zond-coin { min-width:64px; height:36px; font-size:15px; padding:0 12px; animation:none; }
.zond-balance { text-align:center; color:var(--ink-soft); font-size:.98rem; margin:.3rem 0; }
.zond-balance b { color:var(--term-green); }
.znd-amount { font-size:2rem; font-weight:800; color:var(--term-green); font-family:ui-monospace,monospace;
  text-shadow:0 0 18px rgba(61,220,132,.35); }
.znd-amount span { font-size:1.05rem; color:var(--muted); font-weight:700; }
.zond-sale { text-align:center; background:linear-gradient(90deg,#2c1e12,#3a2a00); border:1px solid #56491f;
  color:#ffd66b; border-radius:12px; padding:.5rem .8rem; margin:0 auto .9rem; max-width:340px; font-size:.9rem; }
.zond-quick { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.9rem; }

.zond-snake { width:185px; margin:0 auto .3rem; animation: snakeSlither 3.2s ease-in-out infinite; }
.zond-snake svg { display:block; width:100%; height:auto; }
@keyframes snakeSlither { 0%,100%{transform:translateX(-8px) rotate(-4deg)} 50%{transform:translateX(8px) rotate(4deg)} }
.s-eye { animation: snakeBlink 4.5s ease-in-out infinite; }
@keyframes snakeBlink { 0%,90%,100%{transform:scaleY(1)} 93%{transform:scaleY(.1)} 96%{transform:scaleY(1)} }
.s-tongue { animation: snakeTongue 1.6s ease-in-out infinite; transform-origin:left center; }
@keyframes snakeTongue { 0%,55%,100%{transform:translateY(0) scaleX(1)} 62%{transform:translateY(-1px) scaleX(1.18)} 74%{transform:translateY(-1px) scaleX(.9)} }

/* ===== Админ-панель (хакерский терминал) ===== */
.adm-bar { background:#040806; border:2px solid #1f8a6e; border-radius:12px; padding:.7rem 1.2rem; margin:1rem 0;
  font-family:ui-monospace,monospace; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  box-shadow:0 0 24px -8px rgba(52,195,155,.5); }
.adm-banner { font-weight:800; font-size:1.1rem; color:var(--term-green); letter-spacing:1px; }
.adm-cursor { display:inline-block; color:var(--c-lime); animation: blinkK 1s steps(1) infinite; }
.adm-sub { color:var(--c-mint-d); font-size:.9rem; }
.adm-bar nav { display:flex; gap:.3rem .8rem; flex-wrap:wrap; }
.adm-bar nav a { color:#b1d9c8; font-size:.85rem; }
.adm-bar nav a:hover { color:#fff; text-shadow:0 0 8px var(--c-g); }

.adm-console { background:#040806; border:2px solid #1f8a6e; border-radius:14px; padding:.9rem 1.2rem; margin-bottom:1.2rem;
  font-family:ui-monospace,monospace; box-shadow: inset 0 0 20px -12px rgba(52,195,155,.5); overflow-x:auto; }
.adm-console .adm-line { color:#9fb0c8; line-height:1.6; white-space:nowrap; }
.adm-console .adm-line.ok { color:var(--term-green); }
.adm-console .adm-line.ok b { color:#fff; }

.adm-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:1.2rem 0; }
.adm-kpi { background:#040806; border:2px solid #1f8a6e; border-radius:14px 10px 16px 12px; padding:1rem 1.2rem; text-align:center;
  box-shadow:0 5px 0 rgba(0,0,0,.4); transition:transform .2s; }
.adm-kpi:hover { transform:translateY(-3px); border-color:var(--c-g); }
.adm-kpi b { display:block; font-size:1.7rem; color:var(--term-green); font-family:ui-monospace,monospace; }
.adm-kpi span { color:var(--muted); font-size:.85rem; }

.admin-h2 { font-family:ui-monospace,monospace; font-size:1.05rem; color:var(--term-green); margin:1.2rem 0 .6rem; }
.admin-h2::before { content:"# "; color:var(--c-lime); }

.adm-table { background:#040806; }
.adm-table th { background:#07100b; color:var(--term-green); font-family:ui-monospace,monospace; }
.adm-table td { color:#cfe6da; }
.adm-search { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.adm-search .input { flex:1; min-width:220px; }

/* Анимированная форма заявки (сотрудничество) */
.part-form { position:relative; border-radius:22px 16px 24px 18px; }
.part-form::before { content:""; position:absolute; inset:-2px; z-index:-1; border-radius:24px 18px 26px 20px;
  background:linear-gradient(120deg,#34c39b,#a8f25c,#3ddc84,#7ee2bd,#a8f25c);
  background-size:300% 300%; animation:partBorder 6s linear infinite; filter:blur(2px); opacity:.7; }
@keyframes partBorder { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* Раскрывающиеся карточки сотрудничества */
.part-card { cursor:pointer; }
.part-card:hover { border-color:var(--c-g-d); }
.part-inner { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; }
.part-card.open .part-inner { grid-template-rows:1fr; }
.part-inner > div { overflow:hidden; }
.part-form-inner { display:flex; flex-direction:column; gap:.5rem; margin-top:.7rem; padding-top:.7rem;
  border-top:1px dashed var(--line); }
.part-form-inner .btn { align-self:flex-start; }

/* ===== Маркетплейс ===== */
.mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.mcard { cursor:pointer; text-align:center; padding:.8rem; }
.mimg { width:100%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--bg-2); margin-bottom:.6rem; }
.mimg img { width:100%; height:100%; object-fit:cover; display:block; }
.mimg-p { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--c-mint-d);
  font-family:ui-monospace,monospace; font-weight:800; letter-spacing:2px; background:linear-gradient(135deg,var(--bg-2),var(--panel)); }
.mtitle { font-size:1.05rem; margin-bottom:.2rem; }
.mdesc { color:var(--muted); font-size:.86rem; min-height:2.4em; margin-bottom:.5rem; }
.mrow { display:flex; justify-content:center; align-items:center; gap:.6rem; }
.mprice { font-family:ui-monospace,monospace; font-weight:800; color:var(--term-green); font-size:1.05rem; }
.btn-price { font-family:ui-monospace,monospace; font-size:1rem; padding:.5rem 1.1rem; }

#prodModalBox { max-width:880px; }
.prod-body { display:flex; gap:1.2rem; flex-wrap:wrap; }
.prod-left { flex:1 1 320px; min-width:260px; }
.prod-img { aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--bg-2); margin-bottom:.4rem; }
.prod-img img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.prod-img .mimg-p { font-size:1.3rem; }
.prod-h { font-size:1.3rem; margin:.2rem 0; }
.prod-cat { color:var(--c-emerald-d); font-family:ui-monospace,monospace; font-size:.82rem; margin-bottom:.3rem; }
.prod-desc { color:var(--ink-soft); margin-bottom:.9rem; }
.mrating { color:var(--lime); font-family:ui-monospace,monospace; font-size:.88rem; min-height:1.1em; }
.mrating b { color:var(--c-g); }
.mrating span { color:var(--muted); }

/* ===== Аватарки ===== */
.av { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff;
  font-weight:800; font-family:ui-monospace,monospace; flex:none; overflow:hidden; }
.av img { width:100%; height:100%; object-fit:cover; }
.av-sm { width:30px; height:30px; font-size:14px; }
.av-lg { width:88px; height:88px; font-size:36px; }
.av-wrap { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; flex-wrap:wrap; }
.av-wrap form { display:flex; gap:.4rem; align-items:center; }
.av-wrap .input { width:150px; padding:.3rem .5rem; }

/* ===== Форум ===== */
.forum { display:grid; grid-template-columns: 230px 1fr; gap:1.2rem; align-items:start; }
@media (max-width:720px){ .forum{grid-template-columns:1fr;} }
.f-side { background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:1rem 1.1rem; }
.f-side h3 { margin-bottom:.6rem; font-size:1.05rem; color:var(--term-green); }
.f-side h4 { margin:.8rem 0 .4rem; font-size:.9rem; color:var(--ink-soft); }
.f-sec { display:flex; align-items:center; gap:.5rem; padding:.35rem .3rem; border-radius:8px; color:var(--ink-soft);
  font-size:.92rem; }
.f-sec:hover { background:var(--bg-2); }
.f-sec.on { background:var(--bg-2); color:var(--term-green); font-weight:700; }
.f-sec-dot { width:9px; height:9px; border-radius:3px; background:var(--c-olive-d); flex:none; }
.f-sec-dot.chat { background:var(--c-g); }
.f-sec-dot.news { background:var(--c-blue, var(--c-mint-d)); }
.f-sec-dot.off { background:var(--warn); }
.f-sec-dot.media { background:var(--pink, var(--c-mint)); }
.f-here { margin-left:auto; color:var(--c-lime); }
.f-new form { display:flex; flex-direction:column; gap:.4rem; }
.f-new .btn { align-self:flex-start; }
.f-main { background:var(--panel); border:2px solid var(--line); border-radius:18px; padding:1rem 1.1rem; }
.f-head h2 { margin:0 0 .1rem; }
.f-thread { display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; }
.f-post { display:flex; gap:.8rem; background:var(--bg-2); border-radius:14px; padding:.8rem .9rem; }
.f-puser { display:flex; flex-direction:column; align-items:center; gap:.25rem; flex:none; width:64px; }
.f-pname { font-size:.78rem; color:var(--ink-soft); text-align:center; overflow:hidden; text-overflow:ellipsis; max-width:64px; }
.f-pbody { flex:1; min-width:0; font-size:.95rem; }
.f-ptext { white-space:pre-wrap; color:var(--ink); }
.f-pdate, .f-ptime { color:var(--muted); font-size:.74rem; }
.f-pbody .f-ptime { margin-top:.3rem; }
.f-pmedia { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.f-pmedia img { max-width:260px; border-radius:10px; border:2px solid var(--line); }
.f-pmedia video { max-width:260px; border-radius:10px; background:var(--bg); }
.f-postform { display:flex; gap:.7rem; align-items:flex-start; margin-top:1.2rem; background:var(--bg-2);
  border-radius:14px; padding:.9rem; }
.f-postform .f-puser { width:48px; }
.f-fields { flex:1; display:flex; flex-direction:column; gap:.4rem; }
.f-fields .btn { align-self:flex-start; }

/* Тема (страница темы) */
.crumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem;
  color:var(--muted); font-size:.9rem; }
.crumb a { color:var(--term-green); text-decoration:none; }
.crumb-sep { opacity:.5; }
.badge-live { background:rgba(122,223,92,.14); color:var(--c-lime); border:1px solid rgba(122,223,92,.35);
  padding:.15rem .5rem; border-radius:20px; font-size:.72rem; white-space:nowrap; }
.f-thread-t .f-post { margin-bottom:.6rem; }

/* Список тем в разделе */
.f-topics { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.f-topic { display:flex; align-items:flex-start; gap:.8rem; background:var(--bg-2); border-radius:14px;
  padding:.85rem 1rem; border:1px solid transparent; transition:.18s; text-decoration:none; color:inherit; }
.f-topic:hover { border-color:var(--line); background:var(--panel); transform:translateY(-1px); }
.f-topic.live { border-color:rgba(122,223,92,.30); background:rgba(122,223,92,.05); }
.f-tdot { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; }
.f-tmain { display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.f-ttitle { font-weight:800; font-size:1.02rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.f-tmeta { display:flex; gap:.6rem; flex-wrap:wrap; color:var(--muted); font-size:.82rem; }
.f-tmeta b { color:var(--term-green); }
.pulse { width:11px; height:11px; border-radius:50%; background:var(--c-lime); display:inline-block;
  box-shadow:0 0 0 0 rgba(122,223,92,.5); animation:fPulse 1.8s infinite; }
@keyframes fPulse { 0%{box-shadow:0 0 0 0 rgba(122,223,92,.5);} 70%{box-shadow:0 0 0 9px rgba(122,223,92,0);} 100%{box-shadow:0 0 0 0 rgba(122,223,92,0);} }

/* Создание темы */
.f-new-topic { margin:1rem 0; }
.f-new-topic details summary { cursor:pointer; font-weight:700; color:var(--term-green);
  display:inline-flex; align-items:center; gap:.4rem; background:rgba(122,223,92,.08);
  border:1px solid rgba(122,223,92,.30); border-radius:10px; padding:.5rem .95rem; font-size:.92rem; }
.f-new-topic details[open] summary { margin-bottom:.6rem; }
.f-new-topic form { display:flex; flex-direction:column; gap:.45rem; background:var(--bg-2);
  border-radius:12px; padding:.8rem; }
.f-new-topic form .btn { align-self:flex-start; }
.prod-buy { display:flex; align-items:center; gap:.8rem; }
.prod-buy .mprice { font-size:1.4rem; }
.prod-right { flex:1 1 300px; min-width:240px; display:flex; flex-direction:column; }
.pops-tabs { display:flex; gap:.5rem; margin-bottom:.6rem; }
.pops-tab { background:var(--panel); border:2px solid var(--line); color:var(--ink); border-radius:10px;
  padding:.4rem .8rem; cursor:pointer; font-weight:700; font-size:.85rem; }
.pops-tab.on { border-color:var(--c-g); color:var(--term-green); }
.pops-panel { min-height:240px; max-height:340px; overflow-y:auto; }
.rev-list { display:flex; flex-direction:column; gap:.6rem; }
.rev-item { background:var(--bg-2); border-radius:12px; padding:.65rem .85rem; }
.rev-stars { color:var(--lime); letter-spacing:1px; }
.rev-item p { color:var(--soft); font-size:.88rem; margin:.2rem 0; }
.rev-who { color:var(--muted); font-size:.78rem; }
.rev-rate { display:flex; gap:.8rem; margin-bottom:.5rem; font-family:ui-monospace,monospace; }
.rev-rate label { cursor:pointer; }
#revF { display:flex; flex-direction:column; gap:.5rem; margin-top:.7rem; }
#revF .btn { align-self:flex-start; }
.muted { color:var(--muted); font-size:.85rem; }
.chat-box { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.chat-msg { background:var(--bg-2); border-radius:12px 12px 12px 4px; padding:.5rem .7rem; max-width:92%;
  color:var(--soft); font-size:.88rem; }
.chat-msg.me { align-self:flex-end; background:var(--c-g); color:#06240f; border-radius:12px 12px 4px 12px; }
.cm-who { font-size:.72rem; font-weight:700; opacity:.75; }
.cm-when { font-size:.7rem; opacity:.55; margin-top:.15rem; }
.chat-input { display:flex; gap:.4rem; }

/* ===== Чек на оплату + плавные модалки ===== */
.chk-modal { max-width:420px; }
.chk-card { background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:1rem 1.2rem; margin-bottom:1rem;
  box-shadow: inset 0 0 22px -14px rgba(61,220,132,.4); }
.chk-title { text-align:center; font-weight:800; color:var(--term-green); letter-spacing:1px; margin-bottom:.5rem; font-family:ui-monospace,monospace; }
.chk-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 0; border-bottom:1px dashed var(--line); }
.chk-row > span { color:var(--muted); flex:0 0 42%; text-align:left; }
.chk-row > b { color:var(--ink); text-align:right; }
.chk-row > b small { display:block; color:var(--muted); font-weight:400; }
.chk-total b { color:var(--term-green); font-size:1.15rem; }
.chk-pay { display:flex; flex-direction:column; gap:.6rem; }
.chk-modal { max-width:440px; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes modalIn { from{opacity:0; transform:scale(.94) translateY(16px)} to{opacity:1; transform:none} }
.modal-overlay.open { animation: fadeIn .25s ease; }
.modal-overlay.open .modal { animation: modalIn .32s cubic-bezier(.34,1.4,.64,1); }

/* ===== Панель услуги (VPS/домен) ===== */
.svc-info { background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
.svc-row { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px dashed var(--line); }
.svc-row:last-child { border:none; }
.svc-row span { color:var(--muted); }
.svc-row b { color:var(--ink); text-align:right; }
.svc-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }

/* ===== Консоль ===== */
.term-cons { background:#040806; border:2px solid #1f8a6e; border-radius:12px; overflow:hidden; box-shadow:0 0 26px -10px rgba(52,195,155,.5); }
.term-head { display:flex; align-items:center; gap:.4rem; background:#07100b; padding:.5rem .9rem; color:var(--muted); font-family:ui-monospace,monospace; border-bottom:1px solid #1f8a6e; }
.term-head .dot { width:10px; height:10px; border-radius:50%; }
.term-head .r{background:#ff5f56}.term-head .y{background:#ffbd2e}.term-head .g{background:#27c93f}
.term-body { padding:1rem 1.2rem 1.4rem; font-family:ui-monospace,monospace; font-size:.92rem; color:#b1d9c8; line-height:1.7; }
.term-body .tl.ok { color:var(--term-green); }
.term-body .tl.muted { color:var(--muted); }
.cur { display:inline-block; width:.6em; height:1.05em; background:var(--term-green); vertical-align:text-bottom; animation:blinkK 1s steps(1) infinite; }

.zond-pay-title { text-align:left; font-weight:700; margin:.4rem 0 .4rem; color:var(--ink-soft); font-size:.93rem; }
.zond-pay-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.zond-pay-tab { background:var(--panel); border:2px solid var(--line); color:var(--ink); border-radius:12px;
  padding:.45rem .9rem; cursor:pointer; font-weight:700; transition:border-color .2s, color .2s; }
.zond-pay-tab.on { border-color:var(--c-g); color:var(--term-green); background:var(--bg-2); }
.zond-pay-panel { background:var(--panel-2); border:2px solid var(--line); border-radius:12px;
  padding:.55rem .8rem; margin-bottom:.8rem; color:var(--muted); font-size:.9rem; }
.zond-promo { display:flex; gap:.5rem; margin-bottom:.4rem; }
.zond-promo .input { flex:1; min-width:130px; }
.zond-promo-msg { font-size:.85rem; margin-bottom:.5rem; min-height:1.1em; text-align:center; }
.zond-promo-msg.ok { color:var(--term-green); }
.zond-promo-msg.err { color:var(--danger); }
.zond-bonus { text-align:center; background:var(--bg); border:2px dashed var(--c-mint-d); color:var(--ink-soft);
  border-radius:12px; padding:.5rem; margin:0 0 .9rem; font-size:.95rem; }
.zond-bonus b { color:var(--term-green); }
/* Анимация только свечения вокруг бейджа — текст остаётся статичным и чётким */
@keyframes roleGlow { 0%,100%{ box-shadow:0 0 0 0 var(--glow);} 50%{ box-shadow:0 0 16px 4px var(--glow);} }

/* ===== Формы ===== */
/* Формы как анимированные баннеры по центру */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 160px); padding:2rem 1rem; position:relative; }

/* Анимированный баннер входа (login) */
.login-banner{position:relative;z-index:1;overflow:hidden;display:flex;align-items:center;gap:.8rem;
  width:min(100%,440px);margin:0 0 1rem auto;padding:.7rem 1rem;border-radius:16px 13px 18px 14px;
  border:2px solid var(--line);background:linear-gradient(120deg,var(--panel),var(--bg-2));
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);animation:lbIn .5s cubic-bezier(.2,.9,.3,1.1)}
@keyframes lbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.login-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--c-g),var(--c-mint),transparent);
  background-size:200% 100%;animation:lbLine 5s linear infinite}
@keyframes lbLine{to{background-position:-200% 0}}
.lb-shine{position:absolute;top:0;bottom:0;width:50px;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(61,220,132,.5),transparent);transform:skewX(-18deg);
  animation:lbShine 3.4s ease-in-out infinite}
@keyframes lbShine{0%{left:-80px;opacity:0}40%{left:110%;opacity:1}100%{left:110%;opacity:0}}
.lb-logo{flex:none;width:40px;height:40px;border-radius:12px 10px 14px 11px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:var(--bg);
  background:linear-gradient(135deg,var(--c-g),var(--c-emerald));
  box-shadow:0 4px 12px -4px rgba(61,220,132,.6);animation:lbFloat 3s ease-in-out infinite}
@keyframes lbFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.lb-info{position:relative;z-index:1;display:flex;flex-direction:column;line-height:1.3}
.lb-eyebrow{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:1px}
.lb-title{font-weight:800;font-size:1.05rem;color:var(--ink)}
.lb-status{margin-left:auto;position:relative;z-index:1;font-family:ui-monospace,monospace;font-size:.72rem;
  color:var(--c-g);display:flex;align-items:center;gap:.35rem;background:rgba(61,220,132,.1);
  border:1px solid rgba(61,220,132,.35);padding:.2rem .6rem;border-radius:999px}
.lb-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-g);box-shadow:0 0 0 0 var(--c-g);
  animation:lbDot 1.8s infinite}
@keyframes lbDot{0%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.auth-glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; pointer-events:none; z-index:0;
             animation:authPulse 8s ease-in-out infinite; }
.auth-glow.g1 { width:320px; height:320px; background:radial-gradient(circle, var(--c-g), transparent 70%);
                top:8%; left:6%; }
.auth-glow.g2 { width:280px; height:280px; background:radial-gradient(circle, var(--c-emerald), transparent 70%);
                bottom:6%; right:8%; animation-delay:3s; }
.auth-glow.g3 { width:200px; height:200px; background:radial-gradient(circle, var(--c-mint), transparent 70%);
                top:50%; left:78%; animation-delay:6s; }
@keyframes authPulse { 0%,100% { transform:translateY(0) scale(1); opacity:.35; }
                       50% { transform:translateY(-16px) scale(1.12); opacity:.55; } }

.form { position:relative; z-index:1; width:min(100%, 440px);
        background:linear-gradient(160deg, var(--panel), var(--bg-2));
        border:2px solid var(--line); border-radius:24px 20px 26px 22px;
        padding:2rem 2rem 1.9rem; overflow:hidden;
        box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(61,220,132,.05) inset;
        animation:cardIn .6s cubic-bezier(.2,.9,.3,1.2); }
.form::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
                background:linear-gradient(90deg,transparent,var(--c-g),var(--c-mint),transparent);
                background-size:200% 100%; animation:slideBorder 5s linear infinite; }
@keyframes slideBorder { to { background-position:-200% 0; } }
@keyframes cardIn { from { opacity:0; transform:translateY(24px) scale(.96); }
                    to { opacity:1; transform:none; } }
.form h2 { margin-bottom:.3rem; font-size:1.5rem; letter-spacing:.5px;
           background:linear-gradient(90deg,var(--c-g),var(--c-mint)); -webkit-background-clip:text;
           background-clip:text; color:transparent; }
.form .lead { font-size:.95rem; }
.field { margin-bottom:1rem; }
.field label { display:block; margin-bottom:.35rem; color:var(--ink-soft); font-size:.92rem; font-weight:600; }
.input, select.input, textarea.input {
  width:100%; padding:.7rem .95rem; border-radius:14px 11px 15px 12px; border:2px solid var(--line);
  background:var(--bg); color:var(--ink); font-size:1rem; font-family:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s; }
.input:focus { border-color:var(--c-g-d); box-shadow:0 0 0 3px rgba(61,220,132,.15); }
textarea.input { min-height:120px; resize:vertical; }
.form .hint { color:var(--muted); font-size:.82rem; margin-top:.3rem; }
.form .actions { margin-top:1.2rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.err, .ok { border-radius:12px; padding:.6rem .9rem; margin-bottom:1rem; font-size:.9rem; }
.err { background:#2c1212; color:#ffb3b3; border:1px solid #6b2626; }
.ok { background:#0e2a1a; color:#8ff0bb; border:1px solid #1f5c3a; }

/* ===== Zonda Captcha — «Я не робот» ===== */
.captcha { margin-top:.2rem; }
.captcha .cap-prompt { font-weight:700; margin-bottom:.7rem; color:var(--term-green); }
.captcha .cap-rings { display:flex; flex-wrap:wrap; gap:.7rem; }
.captcha .ring { width:52px; height:52px; border-radius:50%; cursor:pointer; border:none;
                 transition: transform .15s, box-shadow .15s; box-shadow:0 4px 10px -4px rgba(0,0,0,.6); }
.captcha .ring:hover { transform:scale(1.08); }
.captcha .ring.sel { transform:scale(.92); box-shadow:0 0 0 4px var(--c-g); }
.captcha .cap-refresh { margin-top:.7rem; background:none; border:none; color:var(--muted); cursor:pointer;
                        font-size:.85rem; text-decoration:underline; }

/* Кнопка-чекбокс «Я не робот» (как reCAPTCHA, но с логотипом Z) */
.rec-btn { display:flex; align-items:center; gap:.7rem; width:100%; padding:.7rem .85rem; cursor:pointer;
           background:var(--bg); border:2px solid var(--line); border-radius:12px; text-align:left;
           color:var(--ink); font-family:inherit; font-size:.95rem; transition:border-color .2s, background .2s; }
.rec-btn:hover { border-color:var(--c-g-d); }
.rec-btn .rec-box { width:22px; height:22px; flex:none; border-radius:6px; border:2px solid var(--muted);
                    position:relative; transition:all .2s; }
.rec-box-hint { display:none; }
.rec-btn.checked .rec-box { background:var(--c-g); border-color:var(--c-g); }
.rec-btn.checked .rec-box::after { content:""; position:absolute; left:5px; top:1px; width:6px; height:11px;
                                  border:solid #052015; border-width:0 3px 3px 0; transform:rotate(45deg); }
.rec-btn .rec-logo, .rec-head-logo { flex:none; width:26px; height:26px; border-radius:8px; color:var(--bg);
                                     font-weight:800; display:inline-flex; align-items:center; justify-content:center;
                                     background:linear-gradient(135deg, var(--c-g), var(--c-emerald));
                                     box-shadow:0 2px 8px -2px rgba(61,220,132,.6); }
.rec-legal { margin-top:.55rem; font-size:.72rem; color:var(--muted); }
.rec-legal a { color:var(--c-g); text-decoration:none; }
.rec-legal a:hover { text-decoration:underline; }

/* Модальное окно капчи */
.rec-modal { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
             background:rgba(5,8,6,.7); backdrop-filter:blur(4px); padding:1rem; }
.rec-modal.open { display:flex; animation:fade .2s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
body.cap-lock { overflow:hidden; }
.rec-card { width:min(100%, 380px); background:linear-gradient(170deg,var(--panel),var(--bg-2));
            border:2px solid var(--line); border-radius:20px 17px 22px 19px; padding:1.2rem 1.3rem;
            box-shadow:0 30px 60px -20px #000; animation:pop .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none} }
.rec-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.rec-head-title { font-weight:700; font-size:1.05rem; }
.rec-close { margin-left:auto; background:none; border:none; color:var(--muted); font-size:1.1rem;
             cursor:pointer; padding:.2rem .4rem; }
.rec-close:hover { color:var(--ink); }
.rec-desc { color:var(--ink-soft); font-size:.88rem; margin-bottom:1rem; }
.captcha .cap-prompt-text { margin-bottom:.8rem; font-weight:700; color:var(--c-g); }
.rec-actions { display:flex; gap:.6rem; align-items:center; margin-top:1rem; }
.rec-actions .cap-refresh { margin-top:0; padding:.5rem .8rem; border:2px solid var(--line); border-radius:10px; }
.rec-actions .rec-done { margin-left:auto; padding:.5rem 1.1rem; }
.rec-done:disabled { opacity:.5; cursor:not-allowed; }
.rec-status { margin-top:.8rem; font-size:.85rem; color:var(--c-g); font-weight:600; }

/* ===== Таблицы ===== */
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.92rem; background:var(--panel);
        border:2px solid var(--line); border-radius:16px 13px 18px 14px; overflow:hidden; }
th,td { padding:.7rem .9rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { background:var(--bg-2); color:var(--muted); font-weight:700; font-size:.82rem; font-family:ui-monospace,monospace; }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--panel-2); }

/* ===== Списки-тикеты ===== */
.ticket-row { display:flex; align-items:center; gap:.9rem; justify-content:space-between; flex-wrap:wrap; }
.ticket-row .t-subj { font-weight:700; }
.ticket-row .t-meta { color:var(--muted); font-size:.82rem; }

/* ===== Сообщения в обращении ===== */
.thread { display:flex; flex-direction:column; gap:.9rem; }
.msg { max-width:80%; padding:.8rem 1rem; border-radius:16px 12px 18px 14px; }
.msg.out { align-self:flex-end; background:var(--c-g); color:#06240f; }
.msg.out .who { color:#06240f; }
.msg.in { align-self:flex-start; background:var(--panel); border:2px solid var(--line); }
.msg .who { font-size:.78rem; font-weight:700; opacity:.8; margin-bottom:.2rem; }
.msg .when { font-size:.72rem; opacity:.6; margin-top:.3rem; }

/* ===== Футер ===== */
footer { margin-top:2rem; border-top:2px solid var(--line); padding:1.4rem 0 2rem; color:var(--muted);
         background:var(--bg); }
footer .f-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.4rem; }
footer h4 { color:var(--term-green); margin-bottom:.5rem; font-size:.95rem; }
footer a { color:var(--muted); display:block; padding:.12rem 0; font-size:.9rem; }
footer a:hover { color:var(--term-green); }
footer .f-bottom { margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.82rem; }
footer .f-links a { display:inline; padding:0; margin-right:1rem; }

/* ===== Модальные окна ===== */
body.modal-open { overflow:hidden; }
.modal-overlay { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
                 background:rgba(4,8,6,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:1rem; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-2); border:2px solid var(--line); border-radius:18px 14px 20px 16px;
         max-width:780px; width:100%; max-height:86vh; overflow-y:auto; padding:1.4rem 1.7rem 1.6rem;
         box-shadow:0 24px 70px -24px rgba(0,0,0,.75); }
.modal::-webkit-scrollbar { width:8px; }
.modal::-webkit-scrollbar-thumb { background:var(--c-olive-d); border-radius:4px; }
.modal-head { position:relative; }
.modal h2 { color:var(--term-green); font-size:1.25rem; margin:0 3rem .6rem 0; }
.modal p { color:var(--ink-soft); font-size:.95rem; margin-bottom:.45rem; }
.modal h3 { color:var(--term-green); font-size:1rem; margin:1rem 0 .3rem; }
.modal ul { list-style:none; }
.modal ul li { color:var(--ink-soft); font-size:.93rem; padding:.15rem 0 .15rem 1.2rem; position:relative; }
.modal ul li::before { content:"•"; color:var(--c-g-d); position:absolute; left:.2rem; }
.modal-close { position:absolute; top:.7rem; right:.6rem; background:var(--c-g); color:#06240f; font-weight:800;
               border:none; border-radius:10px; padding:.3rem .8rem; cursor:pointer; }

/* ===== Во что-то ещё ===== */
.notice { background:#122236; border:2px solid #24537d; color:#bde3ff; border-radius:14px; padding:.8rem 1rem; margin-bottom:1rem; font-size:.92rem; }

@media (max-width:600px){
  .nav-pill{ flex-wrap:wrap; gap:.35rem .5rem; border-radius:22px 18px 22px 18px; }
  .nav-links{ order:3; width:100%; justify-content:center; flex-wrap:wrap; padding-top:.1rem }
  .user-drop{ order:2; margin-left:auto }
  .msg{max-width:94%;}
}
@media print { .bg-char, nav { display:none; } body{background:#fff;color:#111;} }

/* Мобильные: гасим белый оверскролл и лишние отскоки, растягиваем всего */
@media (max-width:820px){
  html, body { background-color: var(--bg); overscroll-behavior-y: none; }
  html, body { overflow-x: clip; }   /* не даёт тянуть страницу вбок; clip не ломает sticky */
  body { min-height: 100dvh; }
  /* декоративные фоны не должны создавать горизонтальный скролл на телефоне */
  .bg-char{ display:none; }
  .orbs{ overflow:hidden; }
  .orbs span{ max-width:100vw; }
}
/* ===== Подтверждение почты (баннер) и 2FA ===== */
.email-banner { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:#122236;
  border:2px solid #24537d; border-radius:14px; padding:.85rem 1rem; margin-bottom:1.2rem;
  color:#bde3ff; font-size:.95rem; }
.email-banner form { display:inline-flex; gap:.4rem; align-items:center; }
.email-banner .input { width:130px; }
.qr-wrap { margin:.6rem 0; }
.qr { border-radius:12px; border:2px solid var(--line); background:#fff; padding:.5rem; width:200px; height:200px; }
.totp-key { display:flex; flex-direction:column; gap:.2rem; margin:.4rem 0; }
.totp-key span { color:var(--muted); font-size:.82rem; }
.totp-key code { font-size:1.05rem; letter-spacing:2px; color:var(--c-lime); word-break:break-all; }

/* ===== Кнопка прокрутки вниз (чат) ===== */
.scroll-down { position:fixed; right:22px; bottom:86px; z-index:60; width:52px; height:52px;
  border-radius:50%; border:none; cursor:pointer; background:var(--c-g); color:#06240f;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity .25s, transform .25s; }
.scroll-down.show { opacity:1; transform:none; pointer-events:auto; }
.scroll-down:hover { background:var(--c-lime); }
.scroll-down.bounce svg { animation:sDnBounce .7s ease; }
@keyframes sDnBounce { 0%,100%{transform:translateY(0)} 35%{transform:translateY(7px)} 60%{transform:translateY(-3px)} 80%{transform:translateY(2px)} }

/* ===== Баннер Zandor (главная) ===== */
.zandor-banner{position:relative;overflow:hidden;margin:2.2rem 0;border-radius:24px 18px 24px 18px;
  border:2px solid #1e2c22;background:linear-gradient(135deg,#0e1511,#0a0f0c);padding:1.5rem 1.7rem;
  box-shadow:0 22px 50px -32px rgba(0,0,0,.9)}
.zandor-banner::after{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 260px at 8% -20%, rgba(61,220,132,.16), transparent 60%)}
.zb-in{position:relative;z-index:2;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.zb-logo{flex:none;display:flex;align-items:center;gap:.5rem;color:#3ddc84;font-weight:900;font-size:1.25rem}
.zb-logo span{font-size:1.25rem}
.zb-text{flex:1;min-width:220px}
.zb-text h3{color:#ddf5e8;margin:0 0 .15rem;font-size:1.2rem}
.zb-text p{color:#9fb8a8;margin:0;font-size:.92rem;line-height:1.45}
.zb-btn{background:#3ddc84;color:#06240f;border-bottom:4px solid #1f9d57;white-space:nowrap}
.zb-btn:hover{filter:brightness(1.08)}
.zb-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}
.zb-orb.o1{width:130px;height:130px;right:-30px;top:-50px;background:radial-gradient(circle at 35% 35%,rgba(61,220,132,.4),transparent)}
.zb-orb.o2{width:90px;height:90px;left:50%;bottom:-60px;background:radial-gradient(circle at 40% 40%,rgba(168,242,92,.25),transparent)}

/* ===== 3D-слой (лёгкий, без библиотек) ===== */
:root { --scene-dur: 18s; }

/* 3D-сцена в hero: вращающийся куб */
.z3d-scene{ position:relative; width:64px; height:64px; margin:0 auto 1.2rem; perspective:420px; }
.z3d-cube{ width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:z3dSpin var(--scene-dur) linear infinite; }
.z3d-face{ position:absolute; inset:0; border:2px solid rgba(168,242,92,.85); background:rgba(61,220,132,.08);
  box-shadow:inset 0 0 22px rgba(61,220,132,.25), 0 0 26px rgba(61,220,132,.18); }
.z3d-face:nth-child(1){ transform:translateZ(32px); }
.z3d-face:nth-child(2){ transform:rotateY(90deg) translateZ(32px); }
.z3d-face:nth-child(3){ transform:rotateY(180deg) translateZ(32px); }
.z3d-face:nth-child(4){ transform:rotateY(270deg) translateZ(32px); }
.z3d-face:nth-child(5){ transform:rotateX(90deg) translateZ(32px); }
.z3d-face:nth-child(6){ transform:rotateX(-90deg) translateZ(32px); }
@keyframes z3dSpin{ from{ transform:rotateX(-18deg) rotateY(0); } to{ transform:rotateX(-18deg) rotateY(360deg); } }

/* Параллакс-объекты в hero (float при скролле) */
.z3d-float{ position:absolute; pointer-events:none; }
.z3d-float.f1{ width:16px; height:16px; left:12%; top:14%; border:2px solid rgba(61,220,132,.4); transform:rotate(14deg);
  animation:z3dBob 7s ease-in-out infinite; }
.z3d-float.f2{ width:26px; height:26px; right:14%; top:22%; border-radius:50%; border:2px solid rgba(168,242,92,.4);
  animation:z3dBob 9s ease-in-out infinite .6s; }
.z3d-float.f3{ width:18px; height:18px; left:22%; bottom:10%; border-radius:6px; background:rgba(61,220,132,.14);
  transform:rotate(20deg); animation:z3dBob 8s ease-in-out infinite 1.1s; }
.z3d-float.f4{ width:12px; height:12px; right:24%; bottom:16%; border-radius:50%; background:rgba(168,242,92,.35);
  animation:z3dPulse 3s ease-in-out infinite; }
@keyframes z3dBob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0));} 50%{ transform:translateY(-16px) rotate(var(--r,0));} }
@keyframes z3dPulse{ 0%,100%{ opacity:.25; transform:scale(1);} 50%{ opacity:1; transform:scale(1.3);} }

/* Глубина на карточках: tilt-класс для баннеров */
.tilt{ transform-style:preserve-3d; transition:transform .18s ease, box-shadow .25s ease; will-change:transform; }
.tilt.floating{ box-shadow:0 30px 70px -40px rgba(0,0,0,.95); }
.tilt-inner{ transform:translateZ(26px); }

/* Свечение-объём вокруг hero */
.z3d-glow{ position:relative; }
.z3d-glow::before{ content:""; position:absolute; left:50%; top:50%; width:80%; height:120px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(61,220,132,.12), transparent); filter:blur(24px); pointer-events:none; z-index:0; }

@media (prefers-reduced-motion: reduce){
  .z3d-cube{ animation:none; }
  .z3d-float{ animation:none; }
}

/* ═══ Мобильная адаптация (общая, все страницы) ═══ */
@media (max-width: 820px){
  /* Таблицы: горизонтальный скролл вместо поломки вёрстки */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  thead, tbody, tr { display: table; width:100%; table-layout:auto; }
  .table-scroll, .adm-table-wrap, .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Модальные окна: на всю высоту с скроллом */
  .modal-overlay { padding:.5rem; align-items:flex-end; }
  .modal { max-height:min(90dvh, 92vh); border-radius:18px 18px 14px 14px; padding:1.1rem 1.1rem 1.3rem; }
  .modal-close { padding:.5rem .9rem; }   /* тач-цель больше */

  /* Кнопки и тач-цели */
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-sm { min-height:38px; }
  .chip-btn, .nm-item, .nd-btn { min-height:42px; }
  form button, .modal-close, .pay-btn { -webkit-tap-highlight-color:transparent; }
  input, textarea, select, button, a { touch-action:manipulation; }

  /* Сетки карточек: 2 колонки на телефоне для аккуратности */
  .cards { grid-template-columns:repeat(2,1fr); }
  .grid { grid-template-columns:repeat(2,1fr); }
  .review-grid { grid-template-columns:1fr !important; }   /* отзывы в столбик */
  .mgrid { grid-template-columns:repeat(2,1fr); }
  @media (max-width:420px){
    .cards, .grid, .mgrid { grid-template-columns:1fr; }   /* совсем узкие — 1 колонка */
  }

  /* Отступы и типографика */
  .wrap { padding:0 .9rem; }
  main { padding:1rem 0 2rem; }
  h1 { font-size:clamp(1.7rem,6vw,2.3rem); }
  footer .f-grid { gap:1.1rem; }
}

/* ===== Новая админ-панель: сайдбар ===== */
body.has-adm { }
.adm-side{ position:fixed; top:0; left:0; bottom:0; width:236px; z-index:55;
  background:linear-gradient(180deg,#0c1322,#0a0f1c); border-right:1px solid #1a2340;
  padding:1.1rem .8rem; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:6px 0 24px -12px rgba(0,0,0,.6) }
.adm-side::-webkit-scrollbar{width:0}
.adm-brand{ font-weight:900; color:#fff; font-size:1.1rem; padding:.2rem .5rem 1rem; display:flex; align-items:center; gap:.35rem;
  border-bottom:1px solid #1a2340; margin-bottom:.6rem }
.adm-cursor{ color:#7aa2ff; animation:blinkK 1s steps(1) infinite }
.adm-sub{ font-size:.66rem; color:#8aa0c8; font-weight:600; }
.adm-nav{ display:flex; flex-direction:column; gap:.12rem }
.adm-group{ font-size:.62rem; text-transform:uppercase; letter-spacing:.9px; color:#5b6f9d; padding:.7rem .5rem .2rem; font-weight:800 }
.adm-link{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:11px; color:#c6d3ef;
  font-size:.9rem; font-weight:600; transition:background .18s,color .18s,transform .18s,box-shadow .18s; position:relative }
.adm-link:hover{ background:#16203a; color:#fff; transform:translateX(3px) }
.adm-link.on{ background:linear-gradient(90deg,#24408f,#17223f); color:#9ec5ff; box-shadow:inset 3px 0 0 #7aa2ff }
.adm-link.on::after{ content:""; position:absolute; right:.6rem; top:50%; width:6px;height:6px;border-radius:50%;
  background:#7aa2ff; transform:translateY(-50%); box-shadow:0 0 10px #7aa2ff }
.adm-link span{ width:20px; text-align:center; font-size:1rem }
.adm-space{ flex:1 }

/* контент админки: сдвиг ровно на ширину сайдбара, страницы появляются плавно */
.adm-side ~ main{ padding-left:0 }
@media (min-width:821px){
  .adm-side ~ main{ margin-left:236px; }
  .adm-side ~ main .wrap{ max-width:none }
}
/* в админке скрываем верхнюю навигацию сайта, чтобы не дублировалась с сайдбаром */
body:has(.adm-side) > nav{ display:none }
body:has(.adm-side) main{ min-height:100vh }
body.adm-page main{ }
@keyframes admFadeIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.adm-side ~ main{ animation:admFadeIn .35s ease }
.adm-side ~ main .wrap > *:not(.adm-console){ animation:admFadeIn .4s ease both }
.adm-side ~ main .wrap > *:nth-child(3){animation-delay:.05s}
.adm-side ~ main .wrap > *:nth-child(4){animation-delay:.1s}
.adm-side ~ main .wrap > *:nth-child(5){animation-delay:.15s}
@media (max-width:820px){ .adm-side{ display:none } }

/* Перекраска таблиц/KPI под новый стиль админки */
.adm-kpis{ gap:1rem }
.adm-kpi{ background:linear-gradient(150deg,#0e1626,#0a0f1c); border:1px solid #1e2f55; border-radius:16px; padding:1.1rem 1.2rem;
  transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; overflow:hidden }
.adm-kpi::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 0%, rgba(122,162,255,.1), transparent 60%); }
.adm-kpi:hover{ transform:translateY(-4px); border-color:#3f5fd0; box-shadow:0 16px 30px -18px rgba(63,95,208,.5) }
.adm-kpi b{ position:relative; font-size:1.8rem }
.adm-kpi span{ position:relative }
.adm-table{ background:#0e141f; border-radius:16px; border-color:#1e2f55 }
.adm-table th{ background:#0a1018; color:#7aa2ff }
.adm-table td{ color:#c6d3ef; border-color:#17233a }
.adm-table tbody tr{ transition:background .15s }
.adm-table tbody tr:hover{ background:#131d30 }
.adm-quick{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 }
.adm-quick .btn{ animation:admFadeIn .35s ease both }
.admin-h2{ color:#7aa2ff }

/* плавающий скроллбар для таблиц */
.table-scroll{ scrollbar-width:thin; scrollbar-color:#3f5fd0 transparent }
.table-scroll::-webkit-scrollbar{ height:8px }
.table-scroll::-webkit-scrollbar-thumb{ background:#2a3a63; border-radius:4px }
.table-scroll::-webkit-scrollbar-thumb:hover{ background:#3f5fd0 }

/* Быстрая аккуратная сетка дэшборда */
.adm-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start }
@media(max-width:900px){ .adm-cols{ grid-template-columns:1fr } }

/* ===== Выпадающее меню пользователя (аватарка) ===== */
.user-drop{ position:relative }
.user-chip{ cursor:pointer; border:none; line-height:1 }
.user-chip .uav{ width:30px; height:30px; font-size:14px }
.user-chip .uname{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ud-arrow{ font-size:.7rem; opacity:.8 }
.uav{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; flex:none;
  background:#06240f; color:var(--c-g); font-weight:800; vertical-align:middle }
.uav img{ width:100%; height:100%; object-fit:cover }
.uav-lg{ width:46px; height:46px; font-size:20px }
.ud-menu{ position:absolute; top:calc(100% + 10px); right:0; z-index:200; min-width:250px;
  background:#0e1526; border:1px solid #22314f; border-radius:16px; padding:.4rem; display:none;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8); transform-origin:top right;
  animation:udPop .18s ease }
.ud-menu.open{ display:block }
@keyframes udPop{ from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:none} }
.ud-head{ display:flex; gap:.7rem; align-items:center; padding:.6rem .8rem .8rem; border-bottom:1px solid #1f2b45; margin-bottom:.3rem }
.ud-head b{ font-size:.95rem; color:#fff }
.ud-email{ font-size:.72rem; color:#8aa0c8; display:block }
.ud-menu a{ display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; border-radius:10px; color:#c6d3ef;
  font-size:.9rem; font-weight:500; transition:background .13s,color .13s }
.ud-menu a:hover{ background:#16203a; color:#fff }
.ud-menu a span{ width:20px; text-align:center }
.ud-sep{ border-top:1px solid #1f2b45; margin:.3rem 0 }
.ud-logout{ width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--danger);
  font-size:.9rem; font-weight:600; padding:.5rem .8rem; border-radius:10px }
.ud-logout:hover{ background:rgba(255,107,107,.1) }
/* тёмный фон шапки для контраста чипа независимо от смены */
.user-chip{ background:#06240f; color:var(--c-g) }
.nav-pill .user-chip{ background:#06240f }
@media(max-width:720px){ .user-chip .uname{ display:none } }

/* ===== Аватарка-меню: правый верхний угол, адаптив ===== */
.nav-links{ }
.user-drop{ margin-left:auto; flex:none }
.user-chip{ height:40px; gap:.5rem; padding:.2rem .75rem .2rem .35rem }
.user-chip .uav{ width:32px; height:32px; font-size:15px; box-shadow:0 0 0 2px rgba(6,36,15,.55) }
.user-chip:hover{ filter:brightness(1.15) }
.uname{ max-width:110px }
/* меню не выходит за экран на маленьких */
.ud-menu{ right:0; min-width:250px }
@media(max-width:820px){
  .nav-pill{ gap:.3rem; padding:.5rem .6rem }
  .nav-links{ gap:.3rem }
  .nav-links .nav-cta{ padding:.3rem .6rem; font-size:.85rem }
  .user-drop{ margin-left:2px }
  .user-chip{ height:38px; padding:.15rem .3rem .15rem .2rem }
  .user-chip .uav{ width:30px; height:30px; font-size:14px }
  .ud-arrow{ display:none }
  .ud-menu{ min-width:230px; top:calc(100% + 8px) }
}