/* ═══════════════════════════════════════════════════════════════
   portal.css — Общие стили ФБ-портала (тёмная портальная тема)
   Используется всеми шаблонами.
═══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark:#0f2548;--dark2:#0c1a35;--dark3:#0a1628;
  --pink:#d0177a;--pink-l:#e8219a;--pink-xl:rgba(208,23,122,.12);--pink-xs:rgba(208,23,122,.06);
  --white:#fff;--muted:rgba(255,255,255,.65);--muted2:rgba(255,255,255,.45);
  --card:rgba(255,255,255,.04);--card-h:rgba(255,255,255,.07);
  --card-border:rgba(255,255,255,.08);
  --success:#10b981;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6;--purple:#a855f7;
  --r:16px;
}
html,body{overflow-x:hidden;max-width:100vw}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  min-height:100vh;color:var(--white);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(208,23,122,.18), transparent 70%),
    radial-gradient(900px 500px at 90% 110%, rgba(37,99,168,.22), transparent 70%),
    linear-gradient(180deg,var(--dark3) 0%,var(--dark2) 50%,var(--dark3) 100%);
  background-attachment:fixed;
  display:flex;flex-direction:column;
}

/* ═══ HEADER ═══ */
.app-header{
  padding:18px 32px;display:flex;align-items:center;gap:22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,22,40,.6);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:100;
}
.logo-kb{display:flex;align-items:center;gap:12px}
.logo-kb .circle{
  width:40px;height:40px;background:var(--pink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff;
  box-shadow:0 4px 20px rgba(208,23,122,.4);
  position:relative;overflow:hidden;
}
.logo-kb .circle::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 45%);
}
.logo-kb .line1{font-size:.95rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px;line-height:1.05}
.logo-kb .line2{font-size:.95rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px;line-height:1.05}
.logo-divider{width:1px;height:32px;background:rgba(255,255,255,.15)}
.logo-fb{display:flex;align-items:center}
.logo-fb svg{display:block}
.header-tag{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.8px;font-weight:600}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}

/* ═══ USER CHIP ═══ */
.user-chip{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--card-border);
}
.u-ava{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),#a855f7);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:900;color:#fff;
}
.u-meta{line-height:1.2}
.u-name{font-size:.82rem;font-weight:700}
.u-role{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}

/* ═══ HELP/LOGOUT BTN ═══ */
.help-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:all .15s;
}
.help-btn:hover{background:rgba(208,23,122,.12);color:#fff;border-color:rgba(208,23,122,.3)}

/* ═══ FLASH MESSAGES ═══ */
.flashes{padding:12px 32px 0;display:flex;flex-direction:column;gap:8px}
.flash{
  padding:12px 18px;border-radius:10px;
  font-size:.88rem;font-weight:600;
  border:1px solid var(--card-border);
  backdrop-filter:blur(8px);
}
.flash-error   {background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fecaca}
.flash-warning {background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:#fde68a}
.flash-info    {background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.4);color:#bfdbfe}
.flash-success {background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#a7f3d0}

/* ═══ CONTAINERS ═══ */
.page-wrap{max-width:1400px;margin:0 auto;padding:32px 24px 64px;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:1.6rem;font-weight:900;letter-spacing:-.3px}
.page-head .sub{color:var(--muted);font-size:.92rem;margin-top:4px}

/* ═══ CARDS ═══ */
.card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--r);padding:22px;
  transition:all .2s;
}
.card:hover{background:var(--card-h);border-color:rgba(208,23,122,.25)}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  font-size:.9rem;font-weight:700;cursor:pointer;
  border:1px solid var(--card-border);
  background:rgba(255,255,255,.05);color:#fff;
  text-decoration:none;transition:all .15s;
}
.btn:hover{background:rgba(255,255,255,.08)}
.btn-primary{
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-l) 50%,var(--purple) 100%);
  border:none;box-shadow:0 6px 20px rgba(208,23,122,.35);
}
.btn-primary:hover{box-shadow:0 10px 28px rgba(208,23,122,.45);transform:translateY(-1px)}

/* ═══ PULSE ANIMATION ═══ */
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(232,33,154,.5)}
  50%{opacity:.7;transform:scale(1.15);box-shadow:0 0 0 6px rgba(232,33,154,0)}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}