/* ═══════════════════════════════════════════════════════════
  60т.рф — Premium Design System
  ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:        #060d1c;
  --bg-2:      #0b1730;
  --bg-3:      #102040;
  --card:      rgba(255,255,255,.055);
  --card-h:    rgba(255,255,255,.09);
  --border:    rgba(168,194,255,.18);
  --border-h:  rgba(190,212,255,.34);

  --blue:      #5D9DFF;
  --blue-d:    #3D76F8;
  --blue-g:    rgba(93,157,255,.35);
  --purple:    #7D73FF;
  --gold:      #E9BE73;
  --gold-g:    rgba(233,190,115,.36);
  --green:     #22C55E;
  --red:       #EF4444;

  --text:      #E2E8F0;
  --muted:     #94A3B8;
  --muted-2:   #64748B;

  --font-h:    'Space Grotesk', sans-serif;
  --font-b:    'Manrope', sans-serif;
  --r:         14px;
  --r-lg:      20px;
  --shadow:    0 24px 60px rgba(2,8,23,.48);
  --trans:     .2s ease;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body  { background:var(--bg); color:var(--text); font-family:var(--font-b);
  line-height:1.6; min-height:100dvh; overflow-x:hidden;
  background-image:radial-gradient(1200px 520px at -10% -10%, rgba(59,130,246,.14), transparent 60%),
       radial-gradient(900px 420px at 115% 95%, rgba(245,158,11,.10), transparent 60%);
  background-attachment:fixed; }
img   { display:block; max-width:100%; }
a     { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; }
input, textarea { font:inherit; }
ul, ol { list-style:none; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-h); font-weight:700; line-height:1.08; letter-spacing:.01em; }
h1  { font-size:clamp(2.1rem,5vw,4rem); }
h2  { font-size:clamp(1.5rem,3.5vw,2.6rem); }
h3  { font-size:1.15rem; }
p   { color:var(--muted); }

.logo-lockup {
  display:inline-flex;
  align-items:center;
  gap:.62rem;
}

.brand-mark {
  width:30px;
  height:30px;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(2,8,23,.45);
  flex-shrink:0;
}

.eyebrow {
  display:inline-block;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
  color:#BBD2FF; font-weight:700;
  background:linear-gradient(135deg, rgba(93,157,255,.18), rgba(233,190,115,.12));
  padding:.28em .74em; border-radius:999px;
  border:1px solid rgba(150,187,255,.36);
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45em;
  padding:.75rem 1.4rem; border-radius:999px;
  font-weight:600; font-size:.93rem;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), opacity var(--trans);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:hover  { transform:translateY(-2px); }
.btn:active { transform:translateY(0);    }
.btn:disabled { opacity:.45; pointer-events:none; }
.btn:focus-visible {
  outline:2px solid rgba(59,130,246,.6);
  outline-offset:2px;
}

.btn-primary {
  background:linear-gradient(135deg,#6CA9FF,#457CFF 58%, #325CF2);
  color:#fff;
  box-shadow:0 10px 30px var(--blue-g), 0 0 0 1px rgba(200,220,255,.22) inset;
}
.btn-primary:hover { box-shadow:0 10px 30px var(--blue-g); }

.btn-gold {
  background:linear-gradient(135deg,var(--gold),#d97706);
  color:#1c1000;
  box-shadow:0 6px 22px var(--gold-g);
}
.btn-gold:hover { box-shadow:0 10px 30px var(--gold-g); }

.btn-outline {
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-color:var(--border);
  color:#dce8ff;
}
.btn-outline:hover { background:var(--card-h); }

.btn-ghost {
  background:var(--card);
  border-color:var(--border);
  color:var(--muted);
}
.btn-ghost:hover { background:var(--card-h); color:var(--text); }

.btn-danger {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff; box-shadow:0 4px 16px rgba(239,68,68,.3);
}

.btn-sm { padding:.5rem .9rem; font-size:.82rem; }
.btn-lg { padding:.95rem 2rem; font-size:.99rem; }
.btn-full { width:100%; justify-content:center; }

/* ─── INPUTS ─────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:.35rem; }
.field label { font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:.03em; }
.input {
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border:1px solid var(--border);
  border-radius:var(--r); color:var(--text);
  padding:.75rem 1rem; font-size:.93rem;
  transition:border-color var(--trans), box-shadow var(--trans);
  width:100%;
}
.input:focus { outline:none; border-color:#9fc5ff; box-shadow:0 0 0 3px rgba(93,157,255,.28); }
.input::placeholder { color:var(--muted-2); }

/* ─── CARDS ──────────────────────────────────────────────────── */
.card {
  background:linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
  transition:border-color var(--trans), background var(--trans);
  backdrop-filter:blur(8px) saturate(1.15);
}
.card:hover { border-color:var(--border-h); background:var(--card-h); }

.card-glow {
  position:relative;
  overflow:hidden;
}
.card-glow::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(59,130,246,.08) 0%, transparent 70%);
  pointer-events:none;
}

/* ─── BADGE ──────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.75rem; font-weight:600; padding:.22em .65em; border-radius:999px;
}
.badge-green  { background:rgba(34,197,94,.15);  color:var(--green); border:1px solid rgba(34,197,94,.25); }
.badge-blue   { background:rgba(59,130,246,.15);  color:var(--blue);  border:1px solid rgba(59,130,246,.25); }
.badge-gray   { background:rgba(100,116,139,.15); color:var(--muted); border:1px solid rgba(100,116,139,.25); }
.badge-red    { background:rgba(239,68,68,.15);   color:var(--red);   border:1px solid rgba(239,68,68,.25); }
.badge-gold   { background:rgba(245,158,11,.15);  color:var(--gold);  border:1px solid rgba(245,158,11,.25); }

.dot { width:.55em; height:.55em; border-radius:50%; background:currentColor; }
.dot-pulse { animation:pulse-dot 1.8s ease infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ─── SPINNER ────────────────────────────────────────────────── */
.spinner {
  display:inline-block; width:1.1em; height:1.1em;
  border:2px solid rgba(255,255,255,.2);
  border-top-color:currentColor;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── TOAST ──────────────────────────────────────────────────── */
#toast-wrap {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-end;
}
.toast {
  max-width:320px; padding:.75rem 1.1rem;
  background:var(--bg-3); border:1px solid var(--border-h);
  border-radius:var(--r); font-size:.87rem; color:var(--text);
  box-shadow:var(--shadow);
  animation:toastIn .25s ease forwards;
}
.toast.err { border-color:rgba(239,68,68,.45); color:#fca5a5; }
.toast.ok  { border-color:rgba(34,197,94,.45);  color:#86efac; }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ─── PRELOADER ─────────────────────────────────────────────── */
.site-preloader {
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  background:radial-gradient(900px 380px at 50% -10%, rgba(93,157,255,.2), transparent 70%), linear-gradient(180deg, #050c1b, #08142a);
  transition:opacity .35s ease, visibility .35s ease;
}

.site-preloader.is-hidden {
  opacity:0;
  visibility:hidden;
}

.preloader-core {
  position:relative;
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
}

.preloader-core img {
  width:58px;
  height:58px;
  border-radius:14px;
  z-index:2;
  box-shadow:0 10px 24px rgba(2,8,23,.45);
}

.preloader-ring {
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:2px solid rgba(151,188,255,.2);
  border-top-color:#9bc0ff;
  border-right-color:#e6bd79;
  animation:spin 1.05s linear infinite;
}

.preloader-text {
  position:absolute;
  bottom:-16px;
  font-family:var(--font-h);
  font-size:.83rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#bbd5ff;
}

/* ─── AMBIENT BG ────────────────────────────────────────────── */
.ambient { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.glow-a, .glow-b, .glow-c {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
}
.glow-a { width:500px; height:500px; background:rgba(59,130,246,.18);  top:-120px;   left:-80px;   }
.glow-b { width:400px; height:400px; background:rgba(139,92,246,.14);  bottom:-60px; right:-100px; }
.glow-c { width:300px; height:300px; background:rgba(245,158,11,.09);  top:40%;      left:50%;     }
.grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 50% 35%, black 5%, transparent 72%);
}

/* ══════════════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════════════ */

.site-header {
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(16px) saturate(1.4);
  background:linear-gradient(180deg, rgba(7,15,28,.85), rgba(7,15,28,.55));
  border-bottom:1px solid var(--border);
}
.header-inner {
  max-width:1140px; margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; gap:1.5rem; height:64px;
}
.logo { font-family:var(--font-h); font-size:.92rem; color:var(--text); white-space:nowrap; }
.logo span { color:var(--gold); }

.site-nav { display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.site-nav a { font-size:.88rem; color:var(--muted); transition:color var(--trans); }
.site-nav a:hover { color:var(--text); }

/* HERO */
.hero {
  max-width:1140px; margin:0 auto;
  padding:6.4rem 1.5rem 4.2rem;
  display:grid; gap:1.2rem;
  position:relative;
  isolation:isolate;
}

.hero-eyebrow { margin-bottom:.5rem; }
.hero h1 { max-width:14ch; }
.hero h1 em {
  font-style:normal;
  background:linear-gradient(135deg,#b8d4ff,#8fb7ff 55%, #f0c888);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub { max-width:54ch; font-size:1.05rem; margin:.5rem 0; }
.hero-cta  { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.5rem; }

.stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.75rem; margin-top:2rem;
}
.stat-card {
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid var(--border); border-radius:var(--r);
  padding:1rem 1.1rem;
}
.stat-num  { font-family:var(--font-h); font-size:1.6rem; font-weight:700; color:var(--text); }
.stat-label{ font-size:.82rem; color:var(--muted); }

/* FEATURES */
.features-section {
  max-width:1140px; margin:4rem auto;
  padding:0 1.5rem;
}
.section-head { text-align:center; margin-bottom:2.5rem; }
.section-head h2 { margin:.5rem 0 .6rem; }
.features-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.feat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.6rem;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.feat-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:0 12px 28px rgba(2,8,23,.35); }
.feat-icon {
  font-size:2rem; margin-bottom:.8rem;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2);
}
.feat-card h3 { color:var(--text); margin-bottom:.35rem; font-family:var(--font-h); font-size:.95rem; }
.feat-card p  { font-size:.88rem; }

/* STEPS */
.steps-section { max-width:800px; margin:4rem auto; padding:0 1.5rem; text-align:center; }
.steps-list {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start; gap:.8rem; margin-top:2rem;
}
.step { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.step-num {
  font-family:var(--font-h); font-size:.8rem;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  color:#fff; box-shadow:0 4px 14px var(--blue-g);
}
.step h3 { font-size:.88rem; color:var(--text); }
.step p   { font-size:.8rem; }
.step-arrow { color:var(--muted-2); font-size:1.2rem; margin-top:1rem; }

/* CTA SECTION */
.cta-section {
  max-width:700px; margin:4rem auto 5rem;
  padding:3rem 2rem;
  text-align:center;
  background:linear-gradient(145deg,rgba(59,130,246,.12),rgba(139,92,246,.1));
  border:1px solid rgba(59,130,246,.2);
  border-radius:var(--r-lg);
}
.cta-section h2 { margin:.5rem 0 .7rem; }

/* FOOTER */
.site-footer {
  border-top:1px solid var(--border);
  padding:1.5rem;
  text-align:center;
  font-size:.83rem; color:var(--muted-2);
}

/* ══════════════════════════════════════════════════════════════
   AUTH PAGE
   ══════════════════════════════════════════════════════════════ */

.auth-page {
  min-height:100dvh;
  display:grid; place-items:center;
  padding:1.5rem;
}
.auth-box {
  width:min(430px,100%);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:2.2rem 2rem;
  box-shadow:var(--shadow), 0 0 0 1px rgba(59,130,246,.08) inset;
  backdrop-filter:blur(8px);
}
.auth-logo { font-family:var(--font-h); font-size:.95rem; color:var(--text); margin-bottom:1.6rem; display:block; }
.auth-logo .logo { font-size:1rem; letter-spacing:.01em; }

.tabs { display:flex; gap:.2rem; margin-bottom:1.6rem; background:rgba(255,255,255,.04); border-radius:10px; padding:3px; }
.tab-btn {
  flex:1; padding:.52rem; border-radius:8px;
  font-size:.87rem; font-weight:600;
  color:var(--muted); transition:all .2s;
}
.tab-btn.active { background:var(--bg-3); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3); }

.tab-panel { display:none; }
.tab-panel.active { display:flex; flex-direction:column; gap:1rem; }

.vk-btn {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:#2787F5; color:#fff;
  padding:.78rem 1rem; border-radius:999px;
  font-weight:600; font-size:.92rem;
  transition:background var(--trans), transform var(--trans), box-shadow var(--trans);
  border:none; cursor:pointer; width:100%;
  box-shadow:0 4px 16px rgba(39,135,245,.3);
}
.vk-btn:hover { background:#1a6ed8; transform:translateY(-2px); box-shadow:0 8px 22px rgba(39,135,245,.4); }

.divider {
  display:flex; align-items:center; gap:.75rem;
  font-size:.78rem; color:var(--muted-2);
}
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

.auth-footer { text-align:center; font-size:.83rem; color:var(--muted); margin-top:.75rem; }
.auth-footer a { color:var(--blue); }

.err-msg { font-size:.83rem; color:#fca5a5; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); border-radius:8px; padding:.55rem .8rem; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */

.dash-wrap { display:grid; grid-template-columns:240px 1fr; min-height:100dvh; }

/* SIDEBAR */
.sidebar {
  background:var(--bg-2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:1.4rem 1rem;
  gap:.4rem;
  position:sticky; top:0; height:100dvh; overflow-y:auto;
  box-shadow:16px 0 32px rgba(2,8,23,.22);
}
.sidebar-logo {
  font-family:var(--font-h); font-size:.82rem; color:var(--text);
  padding:.5rem .6rem 1.2rem; border-bottom:1px solid var(--border); margin-bottom:.6rem;
}
.sidebar-logo .brand-mark { width:26px; height:26px; border-radius:8px; }
.sidebar-logo .logo { font-size:.86rem; }
.sidebar-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); padding:.5rem .6rem .2rem; margin-top:.4rem; }

.nav-item {
  display:flex; align-items:center; gap:.7rem;
  padding:.62rem .8rem; border-radius:10px;
  font-size:.88rem; color:var(--muted);
  transition:all .15s; border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.nav-item:hover  { background:var(--card-h); color:var(--text); }
.nav-item.active { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); color:var(--blue); }
.nav-item.active::before {
  content:'';
  width:4px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#60a5fa,#3b82f6);
  margin-right:2px;
}
.nav-icon { font-size:1.05rem; width:1.3rem; text-align:center; }

.sidebar-user {
  margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:.7rem;
}
.user-av {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:#fff; flex-shrink:0;
  overflow:hidden;
}
.user-av img { width:100%; height:100%; object-fit:cover; }
.user-name  { font-size:.83rem; font-weight:600; color:var(--text); line-height:1.2; }
.user-email { font-size:.73rem; color:var(--muted-2); }
.logout-btn { margin-left:auto; color:var(--muted-2); font-size:.85rem; transition:color .15s; }
.logout-btn:hover { color:var(--red); }

/* MAIN */
.dash-main { display:flex; flex-direction:column; overflow:hidden; }
.mobile-menu-btn {
  display:none;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:1.05rem;
  flex-shrink:0;
}

.sidebar-backdrop {
  display:none;
}

.dash-header {
  padding:1.2rem 2rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}
.dash-header h1 { font-size:1.15rem; font-family:var(--font-h); color:var(--text); }
.dash-header p  { font-size:.83rem; color:var(--muted); margin-top:.1rem; }
.dash-content    { padding:1.8rem 2rem; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1.5rem; }

/* TOKEN CARD */
.token-card {
  background:linear-gradient(145deg,rgba(59,130,246,.09),rgba(139,92,246,.07));
  border:1px solid rgba(59,130,246,.22);
  border-radius:var(--r-lg); padding:1.4rem 1.6rem;
}
.token-card h3 { font-size:.95rem; color:var(--text); margin-bottom:.3rem; font-family:var(--font-h); }
.token-card p  { font-size:.83rem; margin-bottom:1rem; }
.token-row     { display:flex; gap:.7rem; align-items:center; }
.token-input   { flex:1; font-family:monospace; font-size:.82rem; letter-spacing:.04em; }
.token-status  { display:flex; align-items:center; gap:.5rem; margin-top:.7rem; font-size:.82rem; color:var(--muted); }

/* TOOL CARD */
.tool-card {
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.tool-card:hover { border-color:var(--border-h); box-shadow:0 14px 30px rgba(2,8,23,.28); transform:translateY(-1px); }

.tool-head {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.4rem 1.6rem 0;
}
.tool-icon-wrap {
  width:50px; height:50px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.icon-blue   { background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.25); }
.icon-green  { background:rgba(34,197,94,.14);  border:1px solid rgba(34,197,94,.25);  }
.icon-red    { background:rgba(239,68,68,.14);   border:1px solid rgba(239,68,68,.25);  }
.icon-gold   { background:rgba(245,158,11,.14);  border:1px solid rgba(245,158,11,.25); }

.tool-meta   { flex:1; }
.tool-title  { font-family:var(--font-h); font-size:1rem; color:var(--text); margin-bottom:.2rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.tool-desc   { font-size:.86rem; color:var(--muted); max-width:58ch; }
.tool-toggle { margin-left:auto; flex-shrink:0; }

.dash-content,
.auth-box,
.tool-card,
.mini-card,
.entity-item,
.stat-card,
.friends-table-wrap {
  box-shadow:0 10px 28px rgba(2,8,23,.22);
}

/* TOGGLE SWITCH */
.toggle-wrap { position:relative; }
.toggle-input { position:absolute; opacity:0; width:0; height:0; }
.toggle-label {
  display:block; width:46px; height:26px;
  background:var(--muted-2); border-radius:999px;
  cursor:pointer; transition:background .25s;
  position:relative;
}
.toggle-label::after {
  content:''; position:absolute;
  top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; transition:left .25s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle-input:checked + .toggle-label { background:var(--green); }
.toggle-input:checked + .toggle-label::after { left:23px; }

/* TOOL ACTIONS */
.tool-actions {
  padding:1rem 1.6rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}

.autolike-toolbar .input {
  flex:1;
  min-width:240px;
}

.autolike-meta {
  font-size:.78rem;
  color:var(--muted-2);
  margin-top:.3rem;
}

/* INSTRUCTIONS ACCORDION */
.instr-section { border-top:1px solid var(--border); }
.instr-toggle {
  width:100%; display:flex; align-items:center; gap:.5rem;
  padding:.9rem 1.6rem; font-size:.83rem; font-weight:600;
  color:var(--muted); transition:color .15s;
  text-align:left;
}
.instr-toggle:hover { color:var(--text); }
.instr-toggle .chevron { margin-left:auto; transition:transform .25s; }
.instr-toggle.open { color:var(--text); }
.instr-toggle.open .chevron { transform:rotate(180deg); }

.instr-body {
  overflow:hidden; max-height:0;
  transition:max-height .3s ease, padding .3s ease;
}
.instr-body.open { max-height:600px; }
.instr-inner {
  padding:0 1.6rem 1.4rem;
}
.instr-steps { display:flex; flex-direction:column; gap:.65rem; padding:.5rem 0; }
.instr-step {
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.85rem; color:var(--muted);
}
.instr-step-num {
  flex-shrink:0; width:1.4rem; height:1.4rem;
  background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3);
  border-radius:50%; color:var(--blue);
  font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:.1rem;
}
.instr-note {
  margin-top:.7rem; padding:.6rem .8rem;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2);
  border-radius:8px; font-size:.8rem; color:#fcd34d;
}
.code-block {
  background:rgba(0,0,0,.35); border:1px solid var(--border);
  border-radius:8px; padding:.55rem .8rem;
  font-family:monospace; font-size:.8rem; color:#93c5fd;
  word-break:break-all; user-select:all; margin-top:.4rem;
}

.token-link-profiles {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:.45rem;
}

.token-link-profiles .btn.active {
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 1px rgba(59,130,246,.28) inset;
  color:#bfdbfe;
  background:rgba(59,130,246,.14);
}

.token-link-caption {
  margin-top:.45rem;
  font-size:.78rem;
  color:var(--muted);
}

.token-link-actions {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:.45rem;
}

/* FRIENDS TABLE */
.friends-section { padding:.4rem 1.6rem 1.4rem; }
.friends-toolbar { display:flex; gap:.7rem; margin-bottom:.9rem; flex-wrap:wrap; align-items:center; }
.friends-count   { font-size:.83rem; color:var(--muted); }
.friends-search  { flex:1; min-width:150px; }
.friends-add-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.6rem;
  margin-top:.7rem;
}
.friends-add-actions {
  display:grid;
  grid-template-columns:auto auto minmax(220px,1fr) 150px auto;
  gap:.6rem;
  align-items:center;
  margin-top:.65rem;
}
.friends-candidates-wrap {
  margin-top:.75rem;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:12px;
}
.friends-auto-wave {
  margin-top:.45rem;
  padding:.85rem;
  border:1px dashed rgba(168,194,255,.28);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.friends-auto-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.6rem;
}
.friends-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.friends-table {
  width:100%; border-collapse:collapse; font-size:.85rem;
}
.friends-table th {
  background:linear-gradient(180deg, #162843, #14253f); padding:.6rem .85rem;
  text-align:left; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.1em;
  color:#8ea2bf; font-weight:600; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:3;
}
.friends-table td { padding:.65rem .85rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.friends-table tbody tr:nth-child(2n) td { background:rgba(255,255,255,.012); }
.friends-table tr:last-child td { border-bottom:none; }
.friends-table tr:hover td { background:rgba(59,130,246,.10); }
.friend-av { width:32px; height:32px; border-radius:50%; background:var(--bg-3); }
.friend-name { font-weight:500; color:var(--text); }
.check-all, .check-row { accent-color:var(--blue); width:1rem; height:1rem; cursor:pointer; }
.del-single { color:var(--muted-2); font-size:.8rem; transition:color .15s; }
.del-single:hover { color:var(--red); }
.empty-state {
  text-align:center;
  padding:2rem 1rem;
  color:var(--muted);
  font-size:.88rem;
  border:1px dashed rgba(168,194,255,.25);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:900px) {
  .features-grid { grid-template-columns:1fr; }
  .stats-row     { grid-template-columns:1fr; }
  .steps-list    { grid-template-columns:1fr; }
  .step-arrow    { display:none; }
  .dash-wrap     { grid-template-columns:1fr; }
  .sidebar {
    display:flex;
    position:fixed;
    top:0;
    left:0;
    width:min(84vw,320px);
    height:100dvh;
    transform:translateX(-104%);
    transition:transform .28s ease;
    z-index:1200;
    box-shadow:22px 0 44px rgba(2,8,23,.48);
  }
  .sidebar.open {
    transform:translateX(0);
  }
  .sidebar-backdrop {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.54);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:1100;
  }
  .sidebar-backdrop.open {
    opacity:1;
    visibility:visible;
  }
  body.sidebar-open {
    overflow:hidden;
  }
  .mobile-menu-btn {
    display:inline-flex;
  }
  .dash-header {
    padding:1rem 1rem;
    align-items:flex-start;
  }
  .site-nav a    { display:none; }
  .token-row     { flex-direction:column; }
  .token-row .btn { width:100%; justify-content:center; }
  .friends-add-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .friends-add-actions { grid-template-columns:1fr; }
  .friends-auto-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px) {
  .hero       { padding:3.5rem 1rem 2.5rem; }
  .dash-content { padding:1.2rem 1rem; }
  .tool-head  { flex-direction:column; }
  .tool-toggle { margin-left:0; }
  .auth-box   { padding:1.6rem 1.2rem; }
  .friends-table th,
  .friends-table td { padding:.55rem .6rem; }
  .friends-add-grid { grid-template-columns:1fr; }
  .friends-auto-grid { grid-template-columns:1fr; }
}

/* ─── VK OAUTH BUTTON ─────────────────────────────────────────── */
.btn-vk-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1.2rem;
  background: #0077FF;
  color: #fff;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, transform .12s;
  margin-bottom: .75rem;
}
.btn-vk-oauth:hover  { background: #0066dd; }
.btn-vk-oauth:active { transform: scale(.98); }

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
.fade-in { animation:fadeIn .5s ease forwards; }
@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* DASHBOARD EXTENSIONS */
.friends-filter { min-width: 180px; }
.friends-stats, .token-perms-grid {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:.4rem 0 0;
}
.perm-pill {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.76rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--muted-2);
}
.perm-pill.ok {
  color:#86efac;
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.08);
}
.perm-pill.off {
  color:#fca5a5;
  border-color:rgba(239,68,68,.22);
  background:rgba(239,68,68,.08);
}
.split-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.mini-card {
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-radius:16px;
  padding:1rem;
}
.mini-title {
  margin:0 0 .85rem;
  font-size:.98rem;
}
.stack-fields {
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.textarea-lg {
  min-height:120px;
  resize:vertical;
}
.entity-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.entity-item {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  transition:background .2s, border-color .2s;
}
.entity-item:hover { background:rgba(255,255,255,.04); border-color:var(--border-h); }
.entity-title {
  color:var(--text);
  font-weight:600;
  margin-bottom:.3rem;
}
.entity-sub {
  color:var(--muted);
  font-size:.84rem;
  line-height:1.45;
}
.entity-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.35rem;
  white-space:nowrap;
  font-size:.8rem;
  color:var(--muted-2);
}
.entity-actions {
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}
.entity-actions-col {
  flex-direction:column;
  align-items:flex-end;
}
.entity-error {
  max-width:240px;
  color:#fca5a5;
  font-size:.78rem;
  text-align:right;
}
.scenario-grid {
  align-items:center;
}
.stat-card {
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:1rem;
}
.stat-value {
  font-size:1.35rem;
  font-weight:700;
  color:var(--text);
}
.stat-label {
  margin-top:.25rem;
  font-size:.8rem;
  color:var(--muted);
}
.log-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.bars-chart {
  border:1px solid var(--border);
  border-radius:12px;
  padding:.8rem;
  background:rgba(255,255,255,.02);
}

.bars-legend {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:.65rem;
}

.bars-legend-item {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--muted);
  font-size:.78rem;
}

.bars-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.bars-grid {
  display:flex;
  gap:.5rem;
  align-items:flex-end;
  overflow-x:auto;
  padding-bottom:.2rem;
}

.bars-col {
  min-width:42px;
}

.bars-stack {
  min-height:120px;
  display:flex;
  align-items:flex-end;
  gap:2px;
}

.bars-seg {
  width:8px;
  border-radius:6px 6px 0 0;
  transition:height .2s ease;
}

.bars-day {
  margin-top:.35rem;
  font-size:.72rem;
  color:var(--muted-2);
}

.seg-created, .bars-dot.seg-created { background:#60a5fa; }
.seg-sent, .bars-dot.seg-sent { background:#34d399; }
.seg-failed, .bars-dot.seg-failed { background:#f87171; }
.seg-retry, .bars-dot.seg-retry { background:#fbbf24; }
.seg-loaded, .bars-dot.seg-loaded { background:#818cf8; }
.seg-deleted, .bars-dot.seg-deleted { background:#fb7185; }

@media(max-width:900px) {
  .split-grid { grid-template-columns:1fr; }
  .entity-item { flex-direction:column; }
  .entity-meta, .entity-actions-col { align-items:flex-start; }
}