/* ═══════════════════════════════════════════════════════════════
   KMRP Dashboard · dashboard.css
═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --bg:        #e8eaf0;
  --bg2:       #dfe1e8;
  --surface:   #eef0f5;
  --surface2:  #f5f6fa;
  --border:    rgba(0,0,0,.06);
  --text:      #0d0f1a;
  --text2:     #4a506e;
  --text3:     #8990b0;

  /* gradientes vividos */
  --g-purple: linear-gradient(135deg,#7c3aed,#a78bfa);
  --g-blue:   linear-gradient(135deg,#1d4ed8,#60a5fa);
  --g-green:  linear-gradient(135deg,#059669,#34d399);
  --g-amber:  linear-gradient(135deg,#d97706,#fbbf24);
  --g-red:    linear-gradient(135deg,#dc2626,#f87171);
  --g-teal:   linear-gradient(135deg,#0d9488,#2dd4bf);
  --g-gray:   linear-gradient(135deg,#6b7280,#9ca3af);
  --g-main:   linear-gradient(135deg,#6d28d9,#4f46e5,#0ea5e9);

  --green:#059669; --green-l:#dcfce7; --green-m:#4ade80;
  --red:#dc2626;   --red-l:#fee2e2;   --red-m:#f87171;
  --amber:#d97706; --amber-l:#fef3c7; --amber-m:#fbbf24;
  --blue:#2563eb;  --blue-l:#dbeafe;  --blue-m:#60a5fa;
  --purple:#7c3aed;--purple-l:#ede9fe;--purple-m:#a78bfa;

  --sidebar-w: 230px;
  --header-h:  62px;
  --radius:    20px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  /* Neumorphism light */
  --neu-shadow: 8px 8px 20px #c8cad4, -8px -8px 20px #ffffff;
  --neu-inset:  inset 4px 4px 8px #c8cad4, inset -4px -4px 8px #ffffff;
  --shadow-card: 6px 6px 16px #c0c2cc, -6px -6px 16px #ffffff;
  --shadow-lg:   0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
}

[data-theme="dark"] {
  --bg:      #0f1120;
  --bg2:     #13162a;
  --surface: #181b30;
  --surface2:#1f2340;
  --border:  rgba(255,255,255,.06);
  --text:    #eef0ff;
  --text2:   #7880a8;
  --text3:   #3d4468;

  --neu-shadow: 6px 6px 14px #0a0c1a, -6px -6px 14px #222540;
  --neu-inset:  inset 4px 4px 8px #0a0c1a, inset -4px -4px 8px #222540;
  --shadow-card: 6px 6px 14px #0a0c1a, -6px -6px 14px #222540;
  --shadow-lg:  0 20px 60px rgba(0,0,0,.5);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:13px;
  min-height:100vh; display:flex;
  transition:background .3s,color .3s;
}

/* ════════════════════════════════
   SIDEBAR
════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w); min-height:100vh;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; bottom:0; z-index:200;
  transition:background .3s,border .3s;
  box-shadow:4px 0 20px rgba(0,0,0,.04);
}
.sidebar-logo {
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.logo-mark {
  width:38px; height:38px; border-radius:12px;
  background:var(--g-main);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(109,40,217,.35); flex-shrink:0;
}
.logo-mark svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.logo-brand { font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--text); letter-spacing:-.02em }
.logo-sub { font-size:9px; font-weight:500; color:var(--text3); letter-spacing:.1em; text-transform:uppercase }
.nav { flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:2px }
.nav-section { font-size:9px; font-weight:700; color:var(--text3); letter-spacing:.12em; text-transform:uppercase; padding:10px 10px 6px }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--radius-xs);
  font-size:12px; font-weight:500; color:var(--text2);
  cursor:pointer; transition:all .15s; text-decoration:none;
  border:1px solid transparent;
}
.nav-item svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.nav-item:hover { background:var(--bg2); color:var(--text) }
.nav-item.active { background:var(--purple-l); color:var(--purple); border-color:rgba(124,58,237,.15); font-weight:700 }
[data-theme="dark"] .nav-item.active { background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.3) }
.sidebar-footer { padding:14px; border-top:1px solid var(--border) }
.theme-btn {
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:9px 12px;
  cursor:pointer; font-size:11px; font-weight:600; color:var(--text2);
  transition:all .15s; font-family:var(--font-body);
}
.theme-btn:hover { color:var(--text); border-color:var(--purple) }
.theme-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ════════════════════════════════
   SHELL
════════════════════════════════ */
.shell { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh }

/* ════════════════════════════════
   TOPBAR
════════════════════════════════ */
.topbar {
  height:var(--header-h); background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  transition:background .3s,border .3s;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.topbar-title { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); letter-spacing:-.03em }
.topbar-sub { font-size:11px; color:var(--text3); margin-top:2px }
.topbar-right { display:flex; align-items:center; gap:10px }
.pill { display:flex; align-items:center; gap:6px; border-radius:20px; padding:5px 13px; font-size:11px; font-weight:600 }
.pill-live { background:var(--green-l); color:var(--green) }
.pill-time { background:var(--surface2); border:1px solid var(--border); color:var(--text2) }
.pulse { width:6px; height:6px; border-radius:50%; background:var(--green-m); animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.countdown-badge {
  font-size:10px; font-weight:700; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:4px 11px;
}
.refresh-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:7px 13px;
  font-size:11px; font-weight:600; color:var(--text2);
  cursor:pointer; transition:all .15s; font-family:var(--font-body);
}
.refresh-btn:hover { border-color:var(--purple); color:var(--purple) }
.refresh-btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.refresh-btn.spinning svg { animation:spin .7s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

/* ════════════════════════════════
   FILTERS
════════════════════════════════ */
.filters {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:9px 28px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transition:background .3s;
}
.filter-label { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.1em }
.filter-sep { width:1px; height:20px; background:var(--border) }
select {
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
  padding:6px 26px 6px 10px; border-radius:var(--radius-xs);
  font-size:11px; font-weight:500; font-family:var(--font-body);
  cursor:pointer; outline:none; transition:all .15s; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238990b0'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,.1) }
.reset-btn {
  background:transparent; border:1px solid var(--border); color:var(--text2);
  padding:6px 13px; border-radius:var(--radius-xs); font-size:11px; font-weight:600;
  font-family:var(--font-body); cursor:pointer; transition:all .15s;
}
.reset-btn:hover { border-color:var(--purple); color:var(--purple) }
.count-chip {
  margin-left:auto;
  background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(79,70,229,.06));
  border:1px solid rgba(124,58,237,.18);
  padding:5px 13px; border-radius:20px; font-size:11px; font-weight:700; color:var(--purple);
}

/* ════════════════════════════════
   CONTENT
════════════════════════════════ */
.content { padding:22px 28px; display:flex; flex-direction:column; gap:22px; flex:1 }
.section-label {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.12em;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--border) }

/* ════════════════════════════════
   EXEC AVATAR CARDS
════════════════════════════════ */
.exec-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
.exec-card {
  background:var(--surface); border-radius:var(--radius);
  padding:18px 12px 14px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .25s,box-shadow .25s; cursor:default;
  position:relative; overflow:hidden;
}
.exec-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg) }
.exec-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:var(--radius) var(--radius) 0 0;
}
.exec-card[data-color="purple"]::before { background:var(--g-purple) }
.exec-card[data-color="blue"]::before   { background:var(--g-blue) }
.exec-card[data-color="green"]::before  { background:var(--g-green) }
.exec-card[data-color="amber"]::before  { background:var(--g-amber) }
.exec-card[data-color="red"]::before    { background:var(--g-red) }
.exec-card[data-color="teal"]::before   { background:var(--g-teal) }
.avatar-wrap { width:72px; height:82px }
.exec-name { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--text); text-align:center; line-height:1.2 }
.exec-name span { display:block; font-family:var(--font-body); font-size:10px; font-weight:400; color:var(--text3); margin-top:1px }
.exec-stats { display:flex; gap:12px; margin-top:2px }
.exec-stat { text-align:center }
.exec-stat-num { font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--text); line-height:1 }
.exec-stat-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em }
.exec-chip { font-size:9px; font-weight:700; padding:3px 10px; border-radius:20px }
.exec-chip.ok      { background:var(--green-l); color:var(--green) }
.exec-chip.pending { background:var(--amber-l); color:var(--amber) }
.exec-chip.bad     { background:var(--red-l);   color:var(--red) }

/* ════════════════════════════════
   KPI CARDS — NEUMORPHISM
════════════════════════════════ */
.kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px }

.kpi-card {
  width:100%; /* responsive */
  min-height:140px;
  border-radius:24px;
  background:var(--bg);
  box-shadow:var(--neu-shadow);
  border:none;
  padding:18px 16px;
  display:flex; flex-direction:column; gap:10px;
  transition:box-shadow .2s,transform .2s;
  cursor:default; position:relative; overflow:hidden;
}
.kpi-card:hover {
  transform:translateY(-3px);
  box-shadow:10px 10px 28px #b8bac8, -10px -10px 28px #ffffff;
}
[data-theme="dark"] .kpi-card:hover {
  box-shadow:10px 10px 28px #080a18, -10px -10px 28px #262948;
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:24px 24px 0 0;
}
.kpi-card.c-purple::before { background:var(--g-purple) }
.kpi-card.c-green::before  { background:var(--g-green) }
.kpi-card.c-red::before    { background:var(--g-red) }
.kpi-card.c-amber::before  { background:var(--g-amber) }
.kpi-card.c-blue::before   { background:var(--g-blue) }
.kpi-card.c-gray::before   { background:var(--g-gray) }

.kpi-top { display:flex; align-items:center; justify-content:space-between }
.kpi-icon {
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-inset);
  background:var(--bg);
}
.kpi-icon svg { width:16px; height:16px; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none }
.kpi-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px }
.kpi-num { font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1; letter-spacing:-.04em }
.kpi-label { font-size:11px; font-weight:500; color:var(--text2); line-height:1.3 }
.kpi-bar { height:4px; border-radius:2px; background:var(--bg2); box-shadow:var(--neu-inset); overflow:hidden }
.kpi-bar-fill { height:100%; border-radius:2px; transition:width .9s cubic-bezier(.4,0,.2,1) }

/* color variants */
.c-purple .kpi-icon svg { stroke:var(--purple) }
.c-purple .kpi-num { color:var(--purple) }
.c-purple .kpi-badge { background:var(--purple-l); color:var(--purple) }
.c-purple .kpi-bar-fill { background:var(--g-purple) }
.c-green .kpi-icon svg { stroke:var(--green) }
.c-green .kpi-num { color:var(--green) }
.c-green .kpi-badge { background:var(--green-l); color:var(--green) }
.c-green .kpi-bar-fill { background:var(--g-green) }
.c-red .kpi-icon svg { stroke:var(--red) }
.c-red .kpi-num { color:var(--red) }
.c-red .kpi-badge { background:var(--red-l); color:var(--red) }
.c-red .kpi-bar-fill { background:var(--g-red) }
.c-amber .kpi-icon svg { stroke:var(--amber) }
.c-amber .kpi-num { color:var(--amber) }
.c-amber .kpi-badge { background:var(--amber-l); color:var(--amber) }
.c-amber .kpi-bar-fill { background:var(--g-amber) }
.c-blue .kpi-icon svg { stroke:var(--blue) }
.c-blue .kpi-num { color:var(--blue) }
.c-blue .kpi-badge { background:var(--blue-l); color:var(--blue) }
.c-blue .kpi-bar-fill { background:var(--g-blue) }
.c-gray .kpi-icon svg { stroke:var(--text2) }
.c-gray .kpi-num { color:var(--text) }
.c-gray .kpi-badge { background:var(--surface2); color:var(--text2) }
.c-gray .kpi-bar-fill { background:var(--g-gray) }

/* ════════════════════════════════
   LOADER (filtro)
════════════════════════════════ */
.loader-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(var(--bg-rgb, 232,234,240),.85);
  backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:20px;
  transition:opacity .2s;
}
[data-theme="dark"] .loader-overlay { background:rgba(15,17,32,.88) }
.loader-overlay.show { display:flex }
.loader-label { font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--text2); letter-spacing:.05em }
.loader {
  display:flex; align-items:center; justify-content:center;
}
.slider {
  overflow:hidden; background-color:var(--surface);
  margin:0 10px; height:72px; width:18px;
  border-radius:30px;
  box-shadow:12px 12px 18px rgba(0,0,0,.1), -12px -12px 24px rgba(255,255,255,.7),
             inset -4px -4px 8px rgba(0,0,255,.08),
             inset 4px 4px 8px rgba(0,0,0,.08);
  position:relative;
}
[data-theme="dark"] .slider {
  box-shadow:10px 10px 18px rgba(0,0,0,.4), -10px -10px 24px rgba(255,255,255,.03),
             inset -3px -3px 7px rgba(0,0,255,.15),
             inset 3px 3px 7px rgba(0,0,0,.3);
}
.slider::before {
  content:""; position:absolute; top:0; left:0;
  height:18px; width:18px; border-radius:100%;
  box-shadow:inset 0px 0px 0px rgba(0,0,0,.3),
             0px 380px 0 360px #2697f3,
             inset 0px 0px 0px rgba(0,0,0,.1);
  animation:sliderAnim 2.5s ease-in-out infinite;
  animation-delay:calc(-0.5s * var(--i));
}
@keyframes sliderAnim {
  0%   { transform:translateY(220px); filter:hue-rotate(0deg) }
  50%  { transform:translateY(0) }
  100% { transform:translateY(220px); filter:hue-rotate(180deg) }
}

/* ════════════════════════════════
   GRID LAYOUTS
════════════════════════════════ */
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.row-3 { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px }
.card {
  background:var(--surface); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-card); border:1px solid var(--border);
  transition:background .3s,border .3s;
}

/* ════════════════════════════════
   BAR CHART
════════════════════════════════ */
.bar-item { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.bar-item:last-child { margin-bottom:0 }
.bar-rank { font-size:10px; font-weight:800; color:var(--text3); width:14px; text-align:center; flex-shrink:0 }
.bar-avatar-sm {
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff;
}
.bar-name { font-size:11px; font-weight:600; color:var(--text2); width:84px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar-track { flex:1; height:9px; background:var(--bg2); border-radius:5px; overflow:hidden; box-shadow:var(--neu-inset) }
.bar-fill { height:100%; border-radius:5px; transition:width .9s cubic-bezier(.4,0,.2,1) }
.bar-val { font-size:12px; font-weight:800; color:var(--text); width:20px; text-align:right; flex-shrink:0 }

/* ════════════════════════════════
   STATUS CARDS
════════════════════════════════ */
.status-list { display:flex; flex-direction:column; gap:8px }
.status-card {
  background:var(--surface2); border-radius:var(--radius-sm); border:1px solid var(--border);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
}
.status-left { display:flex; align-items:center; gap:10px }
.status-icon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.status-icon svg { width:14px; height:14px; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none }
.status-name { font-size:12px; font-weight:600; color:var(--text) }
.status-sub { font-size:10px; color:var(--text3) }
.status-right { text-align:right }
.status-num { font-family:var(--font-display); font-size:22px; font-weight:800; line-height:1 }
.status-pct { font-size:10px; color:var(--text3) }

/* ════════════════════════════════
   SPLIT BAR
════════════════════════════════ */
.split-track { height:13px; border-radius:7px; overflow:hidden; display:flex; margin:12px 0 8px; box-shadow:var(--neu-inset) }
.split-a { background:var(--g-green); transition:width .9s }
.split-b { background:var(--g-blue); transition:width .9s }
.split-labels { display:flex; justify-content:space-between }
.split-item { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:var(--text2) }
.split-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0 }
.split-item b { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); margin-left:3px }

/* reagend */
.reagend-box { border-radius:var(--radius-sm); border:1px solid; padding:14px; text-align:center; margin-top:14px }
.reagend-num { font-family:var(--font-display); font-size:46px; font-weight:800; line-height:1; letter-spacing:-.04em }
.reagend-label { font-size:10px; font-weight:700; margin-top:4px; text-transform:uppercase; letter-spacing:.08em }

/* ════════════════════════════════
   RANKING TABLE
════════════════════════════════ */
.rank-tbl { width:100%; border-collapse:collapse }
.rank-tbl th {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text3); padding:0 8px 10px; text-align:left;
  border-bottom:2px solid var(--border);
}
.rank-tbl td { padding:9px 8px; border-bottom:1px solid var(--border); font-size:11px; vertical-align:middle }
.rank-tbl tr:last-child td { border-bottom:none }
.rank-tbl tr:hover td { background:var(--surface2) }
.rank-pos {
  font-family:var(--font-display); font-size:12px; font-weight:800;
  width:24px; height:24px; border-radius:8px;
  background:var(--bg2); color:var(--text2);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-shadow);
}
.rank-pos.top { background:var(--g-amber); color:#fff; box-shadow:0 4px 12px rgba(217,119,6,.3) }
.rank-name { font-size:12px; font-weight:700; color:var(--text) }
.rank-sub { font-size:10px; color:var(--text3) }
.chip { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; letter-spacing:.03em }
.chip.g { background:var(--green-l); color:var(--green) }
.chip.a { background:var(--amber-l); color:var(--amber) }
.chip.r { background:var(--red-l);   color:var(--red) }
.score-row { display:flex; align-items:center; gap:3px }
.score-pip { width:9px; height:9px; border-radius:3px; background:var(--bg2); box-shadow:2px 2px 4px rgba(0,0,0,.1) }
.score-pip.on { background:var(--g-green) }

/* ════════════════════════════════
   CHARTS
════════════════════════════════ */
.chart-wrap    { position:relative; height:180px }
.chart-wrap-sm { position:relative; height:130px }

/* ════════════════════════════════
   API BANNER
════════════════════════════════ */
.api-banner {
  background:var(--amber-l); border:1px solid var(--amber-m);
  border-radius:var(--radius-xs); padding:8px 14px;
  font-size:11px; font-weight:600; color:var(--amber);
  display:none; align-items:center; gap:8px;
}
.api-banner.show { display:flex }
.api-banner code { background:rgba(0,0,0,.08); padding:1px 6px; border-radius:4px; font-size:10px }

/* ════════════════════════════════
   TOAST
════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 18px;
  font-size:12px; font-weight:600; color:var(--text);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:8px;
  transform:translateY(80px); opacity:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.toast.show { transform:translateY(0); opacity:1 }
.toast-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer {
  background:var(--surface); border-top:1px solid var(--border);
  padding:10px 28px; display:flex; justify-content:space-between; align-items:center;
  transition:background .3s;
}
.footer-txt { font-size:10px; font-weight:500; color:var(--text3); display:flex; align-items:center; gap:6px }

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade { opacity:0; animation:fadeUp .4s ease forwards }
.fade:nth-child(1){animation-delay:.04s}.fade:nth-child(2){animation-delay:.08s}
.fade:nth-child(3){animation-delay:.12s}.fade:nth-child(4){animation-delay:.16s}
.fade:nth-child(5){animation-delay:.20s}.fade:nth-child(6){animation-delay:.24s}

@keyframes avatarFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.avatar-float { animation:avatarFloat 3.2s ease-in-out infinite }