@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0c0c10;
  --surface:   #111116;
  --card:      #17171e;
  --card2:     #1d1d26;
  --border:    #25253a;
  --purple:    #a855f7;
  --pdark:     #9333ea;
  --pdim:      rgba(168,85,247,0.08);
  --pglow:     rgba(168,85,247,0.16);
  --lilac:     #c084fc;
  --text:      #e2e8f0;
  --muted:     #42425e;
  --muted2:    #7c7c9e;
  --red:       #f87171;
  --gold:      #facc15;
  --green:     #4ade80;
  --blue:      #60a5fa;
  --r:         8px;
  --sidebar:   216px;
  --topbar:    54px;
  --font:      'Inter', sans-serif;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; overflow-x: hidden; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── Animations ── */
@keyframes fade-up   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes card-in   { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-in  { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(12px); } }
@keyframes shake     { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-4px)} 70%{transform:translateX(4px)} }
@keyframes pop-in    { from { transform:scale(0); } to { transform:scale(1); } }
@keyframes bcast-in  { from { opacity:0; max-height:0; } to { opacity:1; max-height:60px; } }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ── Broadcast bar ─────────────────────────────────────────────────────────── */
.broadcast-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 38px; overflow: hidden;
  border-bottom: 1px solid var(--border);
  animation: bcast-in 0.4s var(--ease) both;
}
.broadcast-bar[data-type="info"]    { background: rgba(96,165,250,0.06);  border-left: 3px solid var(--blue); }
.broadcast-bar[data-type="warning"] { background: rgba(250,204,21,0.06);  border-left: 3px solid var(--gold); }
.broadcast-bar[data-type="urgent"]  { background: rgba(248,113,113,0.07); border-left: 3px solid var(--red); }
.broadcast-bar[data-type="success"] { background: rgba(168,85,247,0.06);  border-left: 3px solid var(--purple); }

.broadcast-inner { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.broadcast-icon  { font-size:14px; flex-shrink:0; }
.broadcast-text  { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.broadcast-text strong { font-weight:600; }
.broadcast-player { color:var(--purple); }
.broadcast-author { font-size:11px; color:var(--muted2); margin-left:12px; flex-shrink:0; }
.broadcast-close {
  background:none; border:none; color:var(--muted2); cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:4px; flex-shrink:0; margin-left:8px;
  transition: color 0.15s, background 0.15s;
}
.broadcast-close:hover { color:var(--text); background:var(--card2); }

/* ── App shell ─────────────────────────────────────────────────────────────── */
.shell { display:flex; height:100%; min-height:100vh; }

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:98; backdrop-filter:blur(2px);
}
.sidebar-overlay.open { display:block; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 99;
  transition: transform 0.25s var(--ease);
}

.sidebar-logo {
  display:flex; align-items:center; gap:9px;
  padding:16px 14px 14px;
  border-bottom:1px solid var(--border);
  text-decoration:none;
}
.sidebar-logo img {
  width:22px; height:22px; flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(168,85,247,0.4));
  transition:filter 0.3s;
}
.sidebar-logo:hover img { filter:drop-shadow(0 0 14px rgba(168,85,247,0.65)); }
.sidebar-logo .logo-text { font-size:14px; font-weight:700; color:var(--text); }
.sidebar-logo .logo-text em { color:var(--purple); font-style:normal; }

.sidebar-nav { flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:1px; }

.nav-label {
  font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:0.6px; padding:8px 8px 4px;
}

.sidebar-link {
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r);
  font-size:13px; font-weight:500; color:var(--muted2); cursor:pointer;
  text-decoration:none; border:none; background:none; font-family:var(--font); width:100%;
  transition:background 0.15s, color 0.15s;
}
.sidebar-link:hover  { background:var(--card2); color:var(--text); }
.sidebar-link.active { background:var(--pdim); color:var(--purple); }

.sl-icon { width:16px; text-align:center; font-size:14px; flex-shrink:0; line-height:1; }

.sl-badge {
  margin-left:auto; background:var(--purple); color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px; min-width:18px; text-align:center;
}

.sidebar-footer {
  padding:12px 10px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.s-avatar {
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  background:var(--pdim); border:1px solid rgba(168,85,247,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--purple);
}
.s-name { font-size:12px; font-weight:600; color:var(--text); line-height:1.3; }
.s-role { font-size:11px; color:var(--muted2); }

/* ── Main area ──────────────────────────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* ── Topbar ── */
.topbar {
  height:var(--topbar); display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-bottom:1px solid var(--border);
  background:rgba(12,12,16,0.8); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:80; gap:14px; flex-shrink:0;
}
.topbar-left  { display:flex; align-items:center; gap:12px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar-title { font-size:15px; font-weight:600; color:var(--text); }

.sidebar-toggle {
  display:none; background:none; border:none; color:var(--muted2);
  cursor:pointer; font-size:18px; padding:4px; line-height:1;
  transition:color 0.15s;
}
.sidebar-toggle:hover { color:var(--text); }

/* ── Notif bell ── */
.notif-btn {
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:6px 10px; color:var(--muted2); cursor:pointer; font-size:15px;
  display:flex; align-items:center; transition:all 0.15s;
}
.notif-btn:hover { background:var(--card2); border-color:var(--purple); color:var(--text); }

.notif-badge {
  position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; border-radius:99px; padding:1px 5px; min-width:17px;
  text-align:center; display:none; animation:pop-in 0.25s var(--spring);
}
.notif-badge.visible { display:block; }

/* ── Notif panel ── */
.notif-panel {
  position:fixed; top:calc(var(--topbar) + 6px); right:16px; width:300px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 16px 48px rgba(0,0,0,0.7); z-index:200; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(-6px) scale(0.97);
  transition:opacity 0.18s, transform 0.22s var(--spring);
  transform-origin:top right;
}
.notif-panel.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }

.notif-panel-header {
  padding:11px 14px; background:var(--surface); border-bottom:1px solid var(--border);
  font-size:12px; font-weight:600; display:flex; justify-content:space-between;
}
.notif-panel-header span:first-child { color:var(--text); }
.notif-panel-header span:last-child  { color:var(--muted2); }
.notif-list { max-height:260px; overflow-y:auto; }
.notif-item {
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--border); transition:background 0.12s;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--card2); }
.notif-icon   { font-size:15px; flex-shrink:0; margin-top:1px; }
.notif-name   { font-weight:600; font-size:13px; margin-bottom:2px; }
.notif-detail { font-size:12px; color:var(--muted2); }
.notif-detail.urgent  { color:var(--red); }
.notif-detail.warning { color:var(--gold); }
.notif-empty { padding:20px 14px; text-align:center; color:var(--muted2); font-size:13px; }

/* ── Page content ── */
.page-content { flex:1; padding:24px; overflow-y:auto; }

/* ── Tab panels ── */
.tab-panel        { display:none; }
.tab-panel.active { display:block; animation:fade-up 0.28s var(--ease) both; }

/* ── Stats ── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px;
}
.stat-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; position:relative; overflow:hidden;
  transition:transform 0.18s var(--ease), border-color 0.18s;
  animation:fade-up 0.3s var(--ease) both;
}
.stat-card:nth-child(1){animation-delay:0.04s}
.stat-card:nth-child(2){animation-delay:0.08s}
.stat-card:nth-child(3){animation-delay:0.12s}
.stat-card:nth-child(4){animation-delay:0.16s}
.stat-card:hover { transform:translateY(-2px); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.stat-card.purple::before { background:linear-gradient(90deg,var(--purple),var(--lilac)); }
.stat-card.gold::before   { background:var(--gold); }
.stat-card.red::before    { background:var(--red); }
.stat-card.blue::before   { background:var(--blue); }
.stat-card.purple:hover { border-color:rgba(168,85,247,0.3); }
.stat-card.gold:hover   { border-color:rgba(250,204,21,0.3); }
.stat-card.red:hover    { border-color:rgba(248,113,113,0.3); }
.stat-card.blue:hover   { border-color:rgba(96,165,250,0.3); }
.stat-value { font-size:28px; font-weight:700; color:var(--text); line-height:1; margin-bottom:5px; }
.stat-label { font-size:12px; color:var(--muted2); }

/* ── Filter bar ── */
.filter-bar { display:flex; gap:10px; margin-bottom:16px; }
.search-input-wrap { position:relative; flex:1; max-width:320px; }
.search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--muted2); font-size:14px; pointer-events:none; transition:color 0.15s;
}
.search-input-wrap:focus-within .search-icon { color:var(--purple); }
.search-input {
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:8px 12px 8px 32px; color:var(--text); font-family:var(--font); font-size:13px;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px var(--pdim); }
.search-input::placeholder { color:var(--muted2); }

/* ── Cards grid ── */
.subs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; }

.sub-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
  animation:card-in 0.35s var(--ease) both;
}
.sub-card:hover { border-color:rgba(168,85,247,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.3); transform:translateY(-2px); }
.sub-card.expiring-soon   { border-color:rgba(250,204,21,0.3); }
.sub-card.expiring-urgent { border-color:rgba(248,113,113,0.4); }

.sub-card-header {
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.player-avatar {
  width:34px; height:34px; border-radius:6px; image-rendering:pixelated;
  border:1px solid var(--border); flex-shrink:0; background:var(--card2);
  transition:transform 0.25s var(--spring);
}
.sub-card:hover .player-avatar { transform:scale(1.07) rotate(-2deg); }
.sub-card-meta { flex:1; min-width:0; }
.username { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.months-badge {
  display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600;
  padding:1px 7px; border-radius:99px;
  background:var(--pdim); color:var(--lilac); border:1px solid rgba(168,85,247,0.15);
}

.delete-btn {
  opacity:0; transition:opacity 0.18s, transform 0.18s; transform:scale(0.85); margin-left:auto;
}
.sub-card:hover .delete-btn { opacity:1; transform:scale(1); }

.sub-card-body { padding:13px 14px; display:flex; flex-direction:column; gap:12px; }

.expiry-info  { display:flex; flex-direction:column; gap:6px; }
.expiry-row   { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.expiry-row .label { color:var(--muted2); }
.expiry-row .value { color:var(--text); font-weight:500; }
.days-pill { font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px; }
.days-pill.safe   { background:rgba(74,222,128,0.1);  color:var(--green); }
.days-pill.warn   { background:rgba(250,204,21,0.1);   color:var(--gold); }
.days-pill.urgent { background:rgba(248,113,113,0.1);  color:var(--red); }

.progress-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:2px; transition:width 0.8s var(--ease); }
.progress-bar-fill.safe   { background:var(--green); }
.progress-bar-fill.warn   { background:var(--gold); }
.progress-bar-fill.urgent { background:var(--red); }

.checklist       { display:flex; flex-direction:column; gap:6px; }
.checklist-title { font-size:10px; font-weight:600; color:var(--muted2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.check-row       { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.check-row input[type="checkbox"] { width:14px; height:14px; accent-color:var(--purple); cursor:pointer; flex-shrink:0; }
.check-row label { cursor:pointer; color:var(--text); transition:color 0.15s; }
.check-row.done label { color:var(--muted2); text-decoration:line-through; }

.tag-input-row { display:flex; gap:7px; margin-top:2px; }
.tag-input-row input {
  flex:1; background:var(--card2); border:1px solid var(--border); border-radius:var(--r);
  padding:6px 9px; color:var(--text); font-family:var(--font); font-size:13px;
  transition:border-color 0.15s;
}
.tag-input-row input:focus { outline:none; border-color:var(--purple); }
.tag-input-row input::placeholder { color:var(--muted2); }

.sub-card-footer {
  padding:10px 14px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.card-id { margin-left:auto; font-size:11px; color:var(--muted); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:var(--r); border:1px solid transparent;
  font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.15s var(--ease); white-space:nowrap; text-decoration:none;
}
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-primary   { background:var(--purple); color:#fff; border-color:var(--purple); }
.btn-primary:hover:not(:disabled)   { background:var(--pdark); border-color:var(--pdark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(168,85,247,0.3); }
.btn-secondary { background:transparent; color:var(--text); border-color:var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--card2); border-color:var(--purple); color:var(--purple); }
.btn-ghost     { background:transparent; color:var(--muted2); border-color:transparent; }
.btn-ghost:hover:not(:disabled) { background:var(--card2); color:var(--text); }
.btn-gold      { background:rgba(250,204,21,0.08); color:var(--gold); border-color:rgba(250,204,21,0.2); }
.btn-gold:hover:not(:disabled)  { background:rgba(250,204,21,0.14); transform:translateY(-1px); }
.btn-danger    { background:rgba(248,113,113,0.08); color:var(--red); border-color:rgba(248,113,113,0.2); }
.btn-danger:hover:not(:disabled){ background:rgba(248,113,113,0.14); }
.btn-sm   { padding:4px 9px; font-size:12px; }
.btn-icon { padding:5px; font-size:13px; }
.btn:active:not(:disabled) { transform:translateY(0) !important; box-shadow:none !important; }

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0);
  z-index:300; display:flex; align-items:center; justify-content:center;
  pointer-events:none; transition:background 0.2s, backdrop-filter 0.2s;
  backdrop-filter:blur(0px);
}
.modal-overlay.open { background:rgba(0,0,0,0.75); pointer-events:all; backdrop-filter:blur(6px); }
.modal {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  width:100%; max-width:440px; margin:20px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.85);
  opacity:0; transform:translateY(16px) scale(0.97);
  transition:opacity 0.2s var(--ease), transform 0.25s var(--spring);
}
.modal-overlay.open .modal { opacity:1; transform:translateY(0) scale(1); }
.modal-header {
  padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-size:14px; font-weight:700; color:var(--text); }
.modal-body { padding:18px 16px; display:flex; flex-direction:column; gap:14px; }

/* ── Forms ── */
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:11px; font-weight:600; color:var(--muted2); text-transform:uppercase; letter-spacing:0.4px; }
.form-group input,
.form-group textarea,
.form-group select {
  background:var(--card2); border:1px solid var(--border); border-radius:var(--r);
  padding:9px 11px; color:var(--text); font-family:var(--font); font-size:13px; width:100%;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px var(--pdim); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--muted2); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-group select    { appearance:none; }
.form-hint  { font-size:11px; color:var(--muted2); margin-top:-2px; }
.form-error {
  font-size:12px; color:var(--red); display:none; padding:8px 11px;
  background:rgba(248,113,113,0.07); border:1px solid rgba(248,113,113,0.2);
  border-radius:var(--r); animation:shake 0.3s var(--ease);
}
.form-error.visible { display:block; }

/* ── Day chips ── */
.days-chips { display:flex; flex-wrap:wrap; gap:7px; }
.day-chip {
  padding:5px 13px; border-radius:99px; background:var(--card2); border:1px solid var(--border);
  color:var(--text); font-size:12px; cursor:pointer; font-family:var(--font);
  transition:all 0.15s;
}
.day-chip:hover     { border-color:var(--purple); color:var(--purple); }
.day-chip.selected  { background:var(--pdim); border-color:var(--purple); color:var(--purple); }

/* ── Toast ── */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:500; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:10px 14px; font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 6px 20px rgba(0,0,0,0.5); pointer-events:all; max-width:280px;
  animation:toast-in 0.25s var(--ease) both;
}
.toast.removing   { animation:toast-out 0.2s var(--ease) both; }
.toast.success    { border-left:3px solid var(--purple); }
.toast.error      { border-left:3px solid var(--red); }
.toast.info       { border-left:3px solid var(--blue); }
.toast-icon       { font-size:12px; }

/* ── Empty state ── */
.empty-state {
  text-align:center; padding:52px 20px;
  border:1px dashed var(--border); border-radius:var(--r); color:var(--muted2);
}
.empty-icon { font-size:36px; margin-bottom:12px; }
.empty-state strong { display:block; font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; }
.empty-state p { font-size:13px; }

/* ── Messages / broadcasts ── */
.messages-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.panel-box { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.panel-box-header { padding:11px 14px; background:var(--surface); border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
.panel-box-body   { padding:14px; display:flex; flex-direction:column; gap:12px; }

.msg-list { display:flex; flex-direction:column; max-height:380px; overflow-y:auto; }
.msg-item {
  padding:10px 12px; border-radius:var(--r); display:flex; align-items:flex-start; gap:9px;
  transition:background 0.12s;
}
.msg-item:hover { background:var(--card2); }
.msg-item-icon  { font-size:15px; flex-shrink:0; margin-top:1px; }
.msg-item-body  { flex:1; min-width:0; }
.msg-item-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.msg-item-text  { font-size:12px; color:var(--muted2); line-height:1.5; }
.msg-item-meta  { font-size:11px; color:var(--muted); margin-top:3px; }
.msg-item-actions { flex-shrink:0; }
.msg-type-badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px; margin-bottom:3px; }
.msg-type-badge.warning { background:rgba(250,204,21,0.1);  color:var(--gold); }
.msg-type-badge.info    { background:rgba(96,165,250,0.1);   color:var(--blue); }
.msg-type-badge.urgent  { background:rgba(248,113,113,0.1);  color:var(--red); }
.msg-type-badge.success { background:var(--pdim);             color:var(--lilac); }

/* ── Settings ── */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.alert { padding:10px 13px; border-radius:var(--r); font-size:13px; display:flex; align-items:flex-start; gap:8px; }
.alert.warning { background:rgba(250,204,21,0.07); border:1px solid rgba(250,204,21,0.2); color:var(--gold); }
.alert.error   { background:rgba(248,113,113,0.07); border:1px solid rgba(248,113,113,0.2); color:var(--red); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .sidebar {
    position:fixed; top:0; left:0; height:100vh; z-index:99;
    transform:translateX(-100%);
  }
  .sidebar.open { transform:translateX(0); box-shadow:6px 0 24px rgba(0,0,0,0.6); }
  .sidebar-toggle { display:block; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .messages-layout { grid-template-columns:1fr; }
}
@media (max-width: 500px) {
  .page-content { padding:14px; }
  .subs-grid { grid-template-columns:1fr; }
  .notif-panel { right:8px; left:8px; width:auto; }
  .topbar { padding:0 14px; }
  .stats-row { grid-template-columns:repeat(2,1fr); gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

@keyframes logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }