:root{
  --bg:#0f1115;
  --bg-soft:#151821;
  --panel:#1b1f2b;
  --text:#e7e9ee;
  --muted:#9aa3b2;
  --accent:#7c9cff;
  --accent-2:#46d7aa;
  --danger:#ff6b6b;
  --border:#2a3142;
  --shadow:rgba(0,0,0,.4);
  --radius:16px;
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{background-color:var(--bg)}
.hidden{display:none !important}

body{
  margin:0;color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  /* ВАЖНО: фон убран отсюда, чтобы ::after не прятался под ним */
  /* background:var(--bg); */
}
/* фиксированный градиент, покрывает всё окно */
body::before{
  content:""; position:fixed; inset:-20vh -20vw; z-index:-2; pointer-events:none; /* -2 чтобы быть под волной */
  background:radial-gradient(1300px 900px at 15% -10%, #121622 0 35%, var(--bg) 70%);
}

/* «взрывная волна» — теперь над градиентом, под контентом */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  opacity:0; transform:scale(.3);
  background:radial-gradient(600px 600px at var(--wave-x,50%) var(--wave-y,50%), rgba(124,156,255,.25), transparent 60%);
}
body.wave::after{ animation:wave .9s ease-out forwards }
@keyframes wave{
  0%{ opacity:.35; transform:scale(.3) }
  100%{ opacity:0; transform:scale(2.2) }
}

.wrap{max-width:1100px;padding:0 20px;margin:0 auto}

/* Header */
.header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--header-h);padding:14px 0;
  background:linear-gradient(180deg,rgba(15,17,21,.96),rgba(15,17,21,.88));
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(45deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px var(--accent);
  animation:pulse 1.8s ease-in-out infinite;
  transform-origin:center;
  cursor:pointer;
  position:relative; /* для локальной ряби */
}
@keyframes pulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 10px var(--accent) }
  50%{ transform:scale(1.2); box-shadow:0 0 22px rgba(124,156,255,.8) }
}
.brand h1{margin:0;font-size:20px;letter-spacing:.2px}
/* цвет слова blog в логотипе — ключевой селектор */
.brand h1 .blog{ color: var(--accent-2); }

.muted{color:var(--muted)}

/* локальная рябь вокруг точки — опционально красиво */
.brand .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:0.5px solid currentColor; opacity:0; transform:scale(1);
  pointer-events:none;
}
.brand .dot:hover::after{ animation: logo-dot-ripple .8s ease-out forwards }
@keyframes logo-dot-ripple{
  0%{ opacity:.9; transform:scale(1) }
  100%{ opacity:0; transform:scale(100.2) }
}

/* Tabs */
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav .tablink{
  padding:8px 12px;border-radius:999px;border:1px solid var(--border);
  color:var(--text);background:rgba(255,255,255,.02);cursor:pointer
}
.nav .tablink.active{
  background:linear-gradient(45deg,rgba(124,156,255,.15),rgba(70,215,170,.15));
  border-color:var(--accent)
}

/* Content */
.content{display:grid;gap:18px;padding:18px 0 40px}
.card{
  background:linear-gradient(180deg,var(--panel),#171b26);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px var(--shadow);padding:16px
}
.card + .card{margin-top:14px}

/* Post */
.post{
  position:relative !important;
  display:grid;gap:8px;
  padding:14px 14px 60px !important; /* место под футер */
  border:1px solid var(--border);
  border-radius:12px;background:var(--bg-soft)
}
.post h3{margin:0;font-size:20px}
.post .meta{color:var(--muted);font-size:13px}
.post .footer{
  position:absolute !important;left:12px !important;right:12px !important;bottom:10px !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:8px !important;margin:0 !important;z-index:7 !important
}
.post .footer .right{margin-left:auto}
.post .meta.ts{font-size:11px;color:var(--muted);opacity:.65;line-height:1}

/* Telegram button on post */
.post .tg-btn{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.02); color:var(--text); text-decoration:none;
  font-size:13px;
}
.post .tg-btn:hover{ border-color:var(--accent) }
.post .tg-btn svg{ width:16px; height:16px; display:block }

/* Forms / buttons */
.form-row{display:grid;gap:8px;margin:12px 0}
.form-row label{font-weight:600}
.form-row input,.form-row select,.form-row textarea{
  width:100%;background:var(--bg-soft);color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px
}

.btn,.icon-btn{
  appearance:none;border:1px solid var(--border);background:var(--panel);
  color:var(--text);border-radius:12px;cursor:pointer
}
.btn{padding:10px 14px}
.btn.small{padding:6px 10px;font-size:14px}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger);color:#ffd8d8}
.btn:hover,.icon-btn:hover{border-color:var(--accent)}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}

.icon-btn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(255,255,255,.02)
}
.icon-btn svg{width:18px;height:18px;display:block}
.actions{display:flex;gap:10px;align-items:center}

/* Admin drawer */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(720px,94vw);
  background:#0f121a;border-left:1px solid var(--border);
  transform:translateX(110%);transition:transform .25s ease;
  box-shadow:-10px 0 40px var(--shadow);padding:16px;overflow:auto;
  z-index:9999 !important
}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tabs{display:grid;gap:12px}
.tabs .card{margin-bottom:14px}
.tabs-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:8px}
.tab{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);cursor:pointer}
.tab.active{border-color:var(--accent)}
.tab.right{margin-left:auto}
.tab-pane.hidden{display:none !important}
.grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.grid-two{grid-template-columns:1fr}}

/* Admin FAB */
.admin-fab{
  position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  background:rgba(27,31,43,.65);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;z-index:10000;backdrop-filter:blur(4px)
}
.admin-fab:hover{color:var(--text);border-color:var(--accent)}

/* Like + fireworks */
.like-btn{
  border:none !important;background:transparent !important;box-shadow:none !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:36px !important;padding:6px 8px !important;border-radius:14px !important;cursor:pointer;gap:4px !important;
  position:relative;overflow:visible;
}
.like-btn:hover,.like-btn:focus-visible{background:rgba(255,255,255,.06) !important;outline:none !important;border-radius:14px !important}
.like-btn svg{width:20px;height:20px;display:block}
.like-btn .heart-outline{stroke:#9aa3b2;stroke-width:2;fill:none;transition:opacity .18s ease}
.like-btn .heart-fill{transform-origin:50% 50%;transform:scale(.2);opacity:0;transition:transform .18s ease,opacity .18s ease}
.like-btn.liked .heart-outline{opacity:0}
.like-btn.liked .heart-fill{opacity:1;transform:scale(1)}
.like-btn .cnt{font-size:12px;color:#c2c8d4;display:inline-flex;align-items:center;line-height:1;transform:translateY(2px);margin-left:1px}
.like-btn .dot{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);opacity:1;pointer-events:none}
@keyframes dotOut{to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity:0; }}
.big-heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}
.big-heart svg{width:80px;height:80px;display:block}
@keyframes bigHeart{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.6)} 30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }
.big-heart{animation:bigHeart .5s ease forwards}

/* Admin tables — фикс ширины у действий + общая линия строки */
.table{width:100%;border-collapse:collapse;margin-top:6px;table-layout:fixed}
.table tr{border-bottom:1px solid var(--border)}
.table tr:last-child{border-bottom:0}
.table th,.table td{padding:12px 12px;vertical-align:middle}
.table thead th{color:var(--muted);font-weight:600;font-size:14px}
.table th.actions,.table td.actions{width:140px;min-width:140px;white-space:nowrap;text-align:right}
.table td.actions .icon-btn + .icon-btn{margin-left:8px}

/* Notes list */
.note-list{display:grid;gap:6px;margin:6px 0 0}
.note-item{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text)}