/* ====== ТЕМА / ПЕРЕМЕННЫЕ ====== */
:root{
  /* цвета */
  --bg:#0b0f14; --panel:#0f172a; --text:#e5e7eb; --muted:#94a3b8;
  --ring:#1f2937; --accent:#7c3aed; --accent2:#06b6d4;
  --good:#16a34a; --bad:#ef4444; --warn:#f59e0b;

  /* типографика и размеры */
  --font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 20px;
  --shadow-1: 0 8px 22px rgba(0,0,0,.28);
  --shadow-2: 0 12px 36px rgba(0,0,0,.35);
  --gap-sm: 8px; --gap: 12px; --gap-lg: 22px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

@media (prefers-color-scheme: light){
  :root{ --bg:#f3f4f6; --panel:#ffffff; --text:#0f172a; --muted:#475569; --ring:#e5e7eb; }
}

/* ====== БАЗА ====== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font: var(--font);
  overflow-x:hidden;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; display:block; }

/* Системные фокусы */
:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* Скроллбар (поддерживаемые движки) */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ring) 85%, transparent); border-radius: 999px }
*::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--ring) 65%, transparent) }

/* ====== ФОН (CANVAS) ====== */
#bg-particles{
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  display: block; pointer-events: none;
  background:
    radial-gradient(1200px 700px at -10% -20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 50%),
    radial-gradient(1200px 700px at 110% 120%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 50%),
    var(--bg);
}

/* ====== ХЕДЕР ====== */
.topbar{
  position: sticky; top: 0; z-index: 10;
  height: 60px; display: flex; align-items: center; gap: var(--gap);
  padding: 0 16px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--ring) 85%, transparent);
}
.brand{ display:flex; text-decoration: none; color: inherit; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.brand-icon{ width:22px; height:22px; border-radius:6px; }
.spacer{ flex:1 }

/* Профиль */
.profile{ position:relative; }
.profile-btn{
  height:38px; display:flex; align-items:center; gap:10px; padding:0 10px;
  border:1px solid var(--ring); border-radius:var(--radius);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--text); cursor:pointer;
}
.profile-btn:focus-visible{ box-shadow: var(--focus); }
.profile-name{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--ring); background:#111; }
.chev{ opacity:.7 }

.profile-menu{
  position:absolute; right:0; top:48px; width:260px;
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid var(--ring); border-radius:var(--radius);
  box-shadow: var(--shadow-2);
  display:none; overflow:hidden;
}
.profile-menu.show{ display:block; animation:pop .14s ease-out; }
.pm-header{ padding:12px 14px; border-bottom:1px solid var(--ring); }
.pm-title{ font-weight:800 }
.pm-sub{ font-size:12px; color:var(--muted) }
.pm-item{
  width:100%; text-align:left; background:transparent; border:0; color:var(--text);
  display:block; padding:10px 14px; cursor:pointer; text-decoration:none;
}
.pm-item:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.pm-item.danger:hover{ background:color-mix(in srgb, var(--bad) 14%, transparent); }

/* ====== АНИМАЦИИ ====== */
@keyframes pop{ from{ transform:translateY(6px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* ====== КОНТЕНТ-ОБЛАСТЬ ====== */
.page{
  position:relative; z-index:1; /* поверх канваса */
  padding: 22px; max-width: 1200px; margin: 0 auto;
}

/* ====== КАРТОЧКИ / ПАНЕЛИ ====== */
.card{
  width:100%;
  border:1px solid var(--ring); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent), var(--panel));
  box-shadow: var(--shadow-2); overflow:hidden;
}
.body{ padding: 22px; }
.panel{
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:18px; background:color-mix(in srgb, var(--panel) 96%, transparent);
}

/* ====== СЕТКИ ====== */
.grid{ display:grid; gap: var(--gap-lg); }
@media (min-width:900px){ .grid.cols-2{ grid-template-columns: 1.4fr .9fr } }

.row{ display:flex; gap: var(--gap); align-items:center; min-width:0; max-width: 180px; flex-wrap: wrap; }

/* ====== ФОРМЫ ====== */
label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 6px }
input, textarea, select, .input, button{
  font:inherit; color:var(--text);
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid var(--ring); border-radius: var(--radius);
  outline:none;
}
input, .input, textarea, select{ width:100%; padding:12px; min-width:0; }
input:focus, textarea:focus, select:focus{
  border-color:color-mix(in srgb, var(--accent) 70%, var(--ring));
  box-shadow: var(--focus);
}
.hint{ font-size:12px; color:var(--muted) }
.muted{ color:var(--muted) }

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; cursor:pointer; user-select:none;
  border:none; color:#fff; font-weight:800; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 16px rgba(124,58,237,.35);
}
.btn:hover{ filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none }
.btn.secondary{ background:transparent; border:1px solid var(--ring); color:var(--text); box-shadow:none }
.btn.danger{ background: linear-gradient(135deg, var(--bad), #ff7b7b); }

/* ====== HERO-БАННЕР ====== */
.hero{
  position:relative; margin:16px 0 10px; border-radius:var(--radius-xl); overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("/static/img/hero.jpg") center/cover no-repeat,
    color-mix(in srgb, var(--panel) 90%, transparent);
  border:1px solid var(--ring);
}
.hero-inner{ padding:28px 24px }
.hero h1{ margin:0 0 6px 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing:.2px }

/* ====== ACTION-BUTTONS ====== */
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 }
.action-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius);
  text-decoration:none; color:var(--text);
  border:1px solid var(--ring);
  background:color-mix(in srgb, var(--panel) 94%, transparent);
}
.action-btn:hover{
  border-color:color-mix(in srgb, var(--accent) 50%, var(--ring));
  box-shadow: var(--shadow-1);
}
.action-btn .icon{ font-size:18px }

/* бейджик на кнопках */
.badge{
  position:absolute; right:-8px; top:-8px;
  min-width:22px; height:22px; padding:0 6px;
  display:inline-grid; place-items:center;
  background:linear-gradient(135deg, var(--bad), #ff7b7b);
  color:#fff; border-radius:999px; border:2px solid var(--panel);
  font-size:12px; font-weight:800;
}

/* ====== ONLINE GRID ====== */
.online-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px; margin-top:12px;
}
.online-user{
  display:flex; align-items:center; gap:10px; padding:8px;
  border:1px solid var(--ring); border-radius:var(--radius);
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  min-width:0;
}
.online-user img{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--ring); object-fit:cover; background:#111;
}
.online-user .u-name{
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.online-user .u-sub{ font-size:12px; color:var(--muted) }

/* ====== УТИЛИТЫ ====== */
.hr{ height:1px; background:var(--ring); margin:16px 0 }
.text-center{ text-align:center }
.hidden{ display:none !important }
.ok{ color: var(--good) } .bad{ color: var(--bad) } .warn{ color: var(--warn) }

/* ====== МЕДИА / КОНТРАСТ / МОУШН ====== */
@media (max-width: 600px){
  .profile-name{ max-width:140px; }
  .page{ padding: 16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .profile-menu.show{ display:block; }
}

/* ===== Таблица ===== */
.table-wrap{ position:relative; overflow:auto; border:1px solid var(--ring); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--panel) 96%, transparent) }
.table{ width:100%; border-collapse:separate; border-spacing:0 }
.table thead th{
  position:sticky; top:0; background:color-mix(in srgb, var(--panel) 94%, transparent);
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--ring); font-weight:600; font-size:14px; cursor:default; user-select:none;
}
.table thead th[data-sort]{ cursor:pointer }
.table tbody td{ padding:10px 12px; border-bottom:1px solid color-mix(in srgb, var(--ring) 85%, transparent); vertical-align:top }
.table tbody tr:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent) }

/* ===== Пустое/Загрузка/Ошибка ===== */
.empty, .loading, .error{ padding:16px; text-align:center }
.loading{ color: var(--muted) }
.error{ color: var(--bad) }

/* ===== Табы в модалке ===== */
.tabs{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap }
.tab-btn{
  border:1px solid var(--ring); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  padding:8px 12px; cursor:pointer;
}
.tab-btn.is-active{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--ring));
}
.tab-pane.hidden{ display:none !important }

/* ===== Бейджи ===== */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--ring); font-size:12px; line-height:18px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.badge.warn{ background: color-mix(in srgb, var(--warn) 15%, transparent); color:#fff; border-color: color-mix(in srgb, var(--warn) 50%, var(--ring)) }

/* ===== Модалка (dialog) ===== */
.modal{ border:0; padding:0; background:transparent }
.modal::backdrop{ background:rgba(0,0,0,.45); backdrop-filter: blur(2px) }
.modal-box{
  width:min(92vw, 980px);
  margin:auto; border:1px solid var(--ring); border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow: var(--shadow-2);
  padding:16px;
}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid var(--ring); border-radius:999px; padding:10px 14px;
  box-shadow: var(--shadow-2); z-index:1000; font-weight:700
}
.toast[data-type="bad"]{ border-color: color-mix(in srgb, var(--bad) 50%, var(--ring)) }
.toast[data-type="warn"]{ border-color: color-mix(in srgb, var(--warn) 50%, var(--ring)) }

/* ==== Discord Send — тематическая страница и элементы ==== */
.page--discord {
  --ds-accent: #7c3aed;           /* фиолетовый */
  --ds-accent-2: #06b6d4;         /* бирюзовый */
  --ds-bg: color-mix(in srgb, var(--panel) 92%, transparent);
  --ds-ring: color-mix(in srgb, var(--ring) 70%, transparent);
  --ds-muted: var(--muted);
}

/* «цветное» тело секции */
.ds-section {
  border: 1px solid var(--ring);
  border-radius: var(--radius-xl);
  padding: 18px;
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--ds-accent) 10%, transparent), transparent 55%),
    radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--ds-accent-2) 10%, transparent), transparent 55%),
    var(--ds-bg);
  box-shadow: var(--shadow-2);
}

/* заголовок блока */
.ds-title {
  margin: 0 0 6px 0;
  font-weight: 800;
  letter-spacing: .2px;
}
.ds-subtitle { color: var(--ds-muted); margin-bottom: 14px; }

/* сетка формы/превью */
.ds-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 920px) {
  .ds-grid.cols-2 {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* карточки внутри секции */
.ds-card {
  border: 1px solid var(--ds-ring);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  padding: 14px;
}

.ds-row { display: grid; gap: 12px; }
@media (min-width: 780px) {
  .ds-row.split-2 { grid-template-columns: 1fr 1fr; }
  .ds-row.split-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* подпись и поле */
.ds-label { font-size: 13px; color: var(--ds-muted); display:block; margin-bottom: 6px; }
.ds-input, .ds-textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}
.ds-textarea { min-height: 140px; resize: vertical; }
.ds-input:focus, .ds-textarea:focus {
  border-color: color-mix(in srgb, var(--ds-accent) 60%, var(--ring));
  box-shadow: var(--focus);
}

/* чекбоксы + подписи */
.ds-check { display: inline-flex; align-items: center; gap: 8px; }
.ds-check input { width: 18px; height: 18px; }

/* кнопки действий */
.ds-actions { display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.ds-primary {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2));
  box-shadow: 0 6px 16px rgba(124,58,237,.35);
}
.btn.ds-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--ring);
  box-shadow: none;
}

/* статус/ответ */
.ds-status { font-size: 13px; color: var(--ds-muted); }
.ds-status.ok { color: var(--good); }
.ds-status.bad { color: var(--bad); }

.ds-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* превью embed */
.embed-preview .box {
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  padding: 10px;
}
.embed-preview .title { font-weight: 700; }
.embed-preview .desc { margin-top: 6px; color: var(--text); }
.embed-preview .fields { margin-top: 8px; display:grid; gap:8px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .embed-preview .fields { grid-template-columns: 1fr 1fr; } }
.embed-preview .field {
  border: 1px solid var(--ring);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.embed-preview .thumb { width:64px; height:64px; object-fit: cover; border-radius: 8px; border:1px solid var(--ring); }
.embed-preview .image { max-height: 220px; border-radius: 10px; border:1px solid var(--ring); margin-top: 8px; display:block; }

/* мини-хелперы */
.ds-hidden { display: none !important; }
.pad { padding: 6px 0; }
.sep { height:1px; background: var(--ring); margin: 8px 0; }