/* ============================================================
   XYZ Development – style.css v2
   Standard system font, dark/light theme support
   ============================================================ */

:root {
  /* System font stack – no Google Fonts */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji";

  /* Dark theme (default) */
  --bg-deep:    #050810;
  --bg-dark:    #090d1a;
  --bg-card:    #0d1424;
  --bg-panel:   #111827;
  --border:     #1e2d4a;
  --border-glow:#2a4a7f;
  --accent:     #2563eb;
  --accent-2:   #3b82f6;
  --accent-soft:#1e3a6e;
  --text-1:     #f1f5f9;
  --text-2:     #94a3b8;
  --text-3:     #64748b;
  --success:    #10b981;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --info:       #06b6d4;
  --radius:     10px;
  --radius-sm:  7px;
  --shadow:     0 4px 24px rgba(0,0,0,.6);
  --glow:       0 0 32px rgba(37,99,235,.2);
  --transition: 0.2s ease;
}

/* Light theme */
[data-theme="light"] {
  --bg-deep:    #f0f4f8;
  --bg-dark:    #e8edf4;
  --bg-card:    #ffffff;
  --bg-panel:   #f8fafc;
  --border:     #d1dce8;
  --border-glow:#93b4d8;
  --accent:     #2563eb;
  --accent-2:   #1d4ed8;
  --accent-soft:#dbeafe;
  --text-1:     #0f172a;
  --text-2:     #475569;
  --text-3:     #94a3b8;
  --shadow:     0 4px 24px rgba(0,0,0,.08);
  --glow:       0 0 20px rgba(37,99,235,.1);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background: var(--bg-deep);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}
a { color:var(--accent-2); text-decoration:none; transition:color var(--transition) }
a:hover { color:var(--text-1) }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:var(--bg-dark) }
::-webkit-scrollbar-thumb { background:var(--border-glow); border-radius:3px }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 20px }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.3rem; border-radius:var(--radius-sm);
  font-family:var(--font); font-size:.875rem; font-weight:500;
  cursor:pointer; border:none; transition:all var(--transition);
  text-decoration:none; white-space:nowrap; line-height:1.4;
}
.btn-primary  { background:var(--accent); color:#fff }
.btn-primary:hover  { background:var(--accent-2); color:#fff; box-shadow:0 0 18px rgba(37,99,235,.4); transform:translateY(-1px) }
.btn-outline  { background:transparent; color:var(--accent-2); border:1px solid var(--accent-soft) }
.btn-outline:hover  { background:var(--accent-soft); color:var(--text-1); border-color:var(--accent) }
.btn-ghost    { background:transparent; color:var(--text-2); border:1px solid var(--border) }
.btn-ghost:hover    { background:var(--bg-panel); color:var(--text-1) }
.btn-danger   { background:var(--danger); color:#fff }
.btn-danger:hover   { background:#dc2626; color:#fff }
.btn-success  { background:var(--success); color:#fff }
.btn-success:hover  { background:#059669; color:#fff }
.btn-warning  { background:var(--warning); color:#000 }
.btn-warning:hover  { background:#d97706; color:#000 }
.btn-sm { padding:.35rem .85rem; font-size:.8rem }
.btn-lg { padding:.75rem 1.8rem; font-size:.95rem; font-weight:600 }
.btn svg { flex-shrink:0 }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.18rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.badge-open     { background:rgba(16,185,129,.15); color:#10b981; border:1px solid rgba(16,185,129,.3) }
.badge-progress { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3) }
.badge-answered { background:rgba(6,182,212,.15);  color:#06b6d4; border:1px solid rgba(6,182,212,.3) }
.badge-closed   { background:rgba(100,116,139,.15);color:#64748b; border:1px solid rgba(100,116,139,.3) }
.badge-admin    { background:rgba(239,68,68,.15);  color:#ef4444; border:1px solid rgba(239,68,68,.3) }
.badge-supporter{ background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3) }
.badge-bot      { background:rgba(37,99,235,.15);  color:#60a5fa; border:1px solid rgba(37,99,235,.3) }
.badge-web      { background:rgba(139,92,246,.15); color:#a78bfa; border:1px solid rgba(139,92,246,.3) }
.badge-db       { background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.3) }
.badge-banned   { background:rgba(239,68,68,.2);   color:#f87171; border:1px solid rgba(239,68,68,.4) }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding:.8rem 1.1rem; border-radius:var(--radius-sm); font-size:.875rem; border-left:3px solid; display:flex; align-items:center; gap:.5rem }
.alert svg { flex-shrink:0 }
.alert-success { background:rgba(16,185,129,.1);  color:#34d399; border-color:var(--success) }
.alert-error   { background:rgba(239,68,68,.1);   color:#f87171; border-color:var(--danger) }
.alert-info    { background:rgba(6,182,212,.1);   color:#22d3ee; border-color:var(--info) }
.alert-warning { background:rgba(245,158,11,.1);  color:#fbbf24; border-color:var(--warning) }
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom:1.1rem }
.form-label { display:block; font-size:.825rem; font-weight:500; color:var(--text-2); margin-bottom:.35rem }
.form-control {
  width:100%; background:var(--bg-panel);
  border:1px solid var(--border); color:var(--text-1);
  padding:.6rem .9rem; border-radius:var(--radius-sm);
  font-family:var(--font); font-size:.875rem;
  transition:border-color var(--transition),box-shadow var(--transition);
  outline:none;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15) }
.form-control::placeholder { color:var(--text-3) }
textarea.form-control { resize:vertical; min-height:100px }
select.form-control { cursor:pointer }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(5,8,16,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:.75rem 0;
}
[data-theme="light"] .navbar { background:rgba(240,244,248,.92) }
.nav-inner { display:flex; align-items:center; justify-content:space-between; max-width:1160px; margin:0 auto; padding:0 20px }
.nav-logo { font-size:1.2rem; font-weight:700; color:var(--text-1); letter-spacing:-.01em }
.nav-logo span { color:var(--accent-2) }
.nav-links { display:flex; align-items:center; gap:1.75rem }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--text-2); transition:color var(--transition) }
.nav-links a:hover,.nav-links a.active { color:var(--text-1) }
.nav-cta { display:flex; gap:.6rem; align-items:center }
.hamburger { display:none; background:none; border:none; cursor:pointer; color:var(--text-2); padding:4px }
.hamburger:hover { color:var(--text-1) }

/* ── Hero ────────────────────────────────────────────────── */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:120px 0 80px }
.hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 60% 40%,rgba(37,99,235,.1) 0%,transparent 60%), linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-dark) 100%) }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px); background-size:60px 60px }
.hero-content { position:relative; z-index:1; max-width:660px }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.25); color:var(--accent-2); padding:.3rem .85rem; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.3rem }
.eyebrow-dot { width:6px; height:6px; background:var(--accent-2); border-radius:50%; animation:pulse-dot 2s infinite }
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1 { font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:1.1rem }
.hero h1 .highlight { background:linear-gradient(135deg,#60a5fa,#2563eb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero p { font-size:1rem; color:var(--text-2); max-width:500px; margin-bottom:1.75rem }
.hero-actions { display:flex; gap:.85rem; flex-wrap:wrap; align-items:center }
.hero-stats { display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); flex-wrap:wrap }
.hero-stat-num { font-size:1.6rem; font-weight:700; color:var(--text-1) }
.hero-stat-label { font-size:.775rem; color:var(--text-3); margin-top:.1rem }

/* ── Sections ────────────────────────────────────────────── */
.section { padding:72px 0 }
.section-alt { background:var(--bg-dark) }
.section-header { max-width:580px; margin-bottom:3rem }
.section-header.center { margin:0 auto 3rem; text-align:center }
.section-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); margin-bottom:.6rem }
.section-title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; line-height:1.2; letter-spacing:-.015em }
.section-title span { color:var(--accent-2) }
.section-desc { color:var(--text-2); margin-top:.6rem; font-size:.9rem }

/* ── Cards ───────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition) }
.card:hover { border-color:var(--border-glow); box-shadow:var(--glow); transform:translateY(-2px) }
.card-icon { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:1rem }
.card-icon svg { color:var(--accent-2) }
.card-icon--purple { background:rgba(139,92,246,.15); }
.card-icon--purple svg { color:#a78bfa }
.card-icon--green { background:rgba(16,185,129,.15); }
.card-icon--green svg { color:#34d399 }
.card-title { font-size:.95rem; font-weight:600; margin-bottom:.4rem }
.card-desc { color:var(--text-2); font-size:.85rem; line-height:1.6 }
.feature-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.85rem }
.feature-list li { display:flex; align-items:center; gap:.45rem; font-size:.825rem; color:var(--text-2) }
.feature-list li svg { flex-shrink:0; color:var(--success) }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.85rem; max-width:760px; margin:0 auto }
.tech-card { text-align:center; padding:1.25rem .75rem; display:flex; flex-direction:column; align-items:center; gap:.4rem }
.tech-card svg { color:var(--accent-2); opacity:.8 }
.tech-name { font-size:.825rem; font-weight:600 }
.tech-label { font-size:.725rem; color:var(--text-3) }

/* ── Process ─────────────────────────────────────────────── */
.process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem }
.process-step { text-align:center; padding:1.75rem 1.25rem }
.step-num { width:50px; height:50px; border-radius:50%; background:var(--accent-soft); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; color:#fff; margin:0 auto .85rem }
.step-title { font-weight:600; font-size:.9rem; margin-bottom:.3rem }
.step-desc { font-size:.8rem; color:var(--text-2) }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:.6rem }
.faq-question { padding:1rem 1.2rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:.875rem; user-select:none; background:var(--bg-card); transition:background var(--transition) }
.faq-question:hover { background:var(--bg-panel) }
.faq-icon { display:flex; align-items:center; flex-shrink:0; transition:transform .3s; color:var(--accent-2) }
.faq-item.open .faq-icon { transform:rotate(45deg) }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .25s; background:var(--bg-dark); padding:0 1.2rem; font-size:.85rem; color:var(--text-2); line-height:1.7 }
.faq-item.open .faq-answer { max-height:300px; padding:.9rem 1.2rem }

/* ── CTA / Footer ────────────────────────────────────────── */
.cta-banner { background:linear-gradient(135deg,var(--accent-soft),rgba(37,99,235,.15)); border:1px solid var(--border-glow); border-radius:var(--radius); padding:3rem; text-align:center; position:relative; overflow:hidden }
.cta-banner h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:700; margin-bottom:.6rem }
.cta-banner p { color:var(--text-2); max-width:480px; margin:0 auto 1.5rem }
.footer { background:var(--bg-dark); border-top:1px solid var(--border); padding:2.5rem 0 1.75rem }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; margin-bottom:2rem }
.footer-brand p { color:var(--text-3); font-size:.825rem; margin-top:.6rem; max-width:240px }
.footer-col h4 { font-size:.775rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:.85rem }
.footer-col a { display:block; color:var(--text-3); font-size:.825rem; margin-bottom:.4rem; transition:color var(--transition) }
.footer-col a:hover { color:var(--text-1) }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.25rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem }
.footer-bottom p { color:var(--text-3); font-size:.775rem }

/* ── Auth ────────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem }
.auth-box { width:100%; max-width:400px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:2.25rem; box-shadow:var(--shadow) }
.auth-logo { text-align:center; margin-bottom:1.75rem }
.logo-text { font-size:1.3rem; font-weight:700; color:var(--text-1) }
.logo-text span { color:var(--accent-2) }
.auth-title { font-size:1.3rem; font-weight:700; margin-bottom:.25rem }
.auth-sub { color:var(--text-3); font-size:.825rem; margin-bottom:1.6rem }
.auth-footer { text-align:center; margin-top:1.25rem; font-size:.825rem; color:var(--text-3) }

/* ── Dashboard Layout ────────────────────────────────────── */
.dash-wrapper { display:flex; min-height:100vh; padding-top:57px }

/* Sidebar */
.sidebar {
  width:240px; min-width:240px; background:var(--bg-dark);
  border-right:1px solid var(--border);
  padding:1.25rem .75rem;
  position:sticky; top:57px; height:calc(100vh - 57px);
  overflow-y:auto;
}
.sidebar-label { font-size:.675rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:.4rem .6rem; margin-bottom:.2rem }
.sidebar-link {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:var(--radius-sm);
  color:var(--text-2); font-size:.85rem; font-weight:500;
  transition:all var(--transition); margin-bottom:.1rem; cursor:pointer;
}
/* Individual hover glow – each sidebar link glows on its own */
.sidebar-link:hover { background:var(--accent-soft); color:var(--text-1); box-shadow:0 0 12px rgba(37,99,235,.25) }
.sidebar-link.active { background:var(--accent-soft); color:var(--text-1) }
.sidebar-link svg { flex-shrink:0; opacity:.65 }
.sidebar-link:hover svg,.sidebar-link.active svg { opacity:1 }
.sidebar-sep { border:none; border-top:1px solid var(--border); margin:.75rem 0 }
.sidebar-admin-section .sidebar-label { color:rgba(239,68,68,.65) }
.sidebar-links-group { display:flex; flex-direction:column }

/* Main */
.dash-main { flex:1; padding:1.75rem; overflow-x:hidden; max-width:calc(100vw - 240px) }
.dash-header { margin-bottom:1.75rem }
.dash-header h1 { font-size:1.4rem; font-weight:700 }
.dash-header p { color:var(--text-3); font-size:.85rem; margin-top:.2rem }

/* Stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.85rem; margin-bottom:1.5rem }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; display:flex; align-items:flex-start; gap:.85rem; transition:border-color var(--transition),box-shadow var(--transition) }
.stat-card:hover { border-color:var(--border-glow); box-shadow:var(--glow) }
.stat-icon { width:40px; height:40px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center }
.stat-icon.blue   { background:rgba(37,99,235,.18);  color:#60a5fa }
.stat-icon.green  { background:rgba(16,185,129,.18); color:#34d399 }
.stat-icon.yellow { background:rgba(245,158,11,.18); color:#fcd34d }
.stat-icon.purple { background:rgba(139,92,246,.18); color:#c4b5fd }
.stat-icon.red    { background:rgba(239,68,68,.18);  color:#f87171 }
.stat-icon.cyan   { background:rgba(6,182,212,.18);  color:#22d3ee }
.stat-value { font-size:1.4rem; font-weight:700; line-height:1 }
.stat-label { font-size:.75rem; color:var(--text-3); margin-top:.2rem }
.stat-sub   { font-size:.7rem;  color:var(--text-3); margin-top:.15rem }

/* Panels */
.panel { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1.25rem }
.panel-head { padding:.9rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.panel-head h3 { font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:.45rem }
.panel-body { padding:1.25rem }

/* Tables */
.table-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse }
th { text-align:left; font-size:.725rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); padding:.6rem .9rem; border-bottom:1px solid var(--border) }
td { padding:.75rem .9rem; border-bottom:1px solid var(--border); font-size:.85rem; color:var(--text-2); vertical-align:middle }
tr:last-child td { border-bottom:none }
tr:hover td { background:rgba(255,255,255,.02) }
[data-theme="light"] tr:hover td { background:rgba(0,0,0,.02) }

/* ── WhatsApp-style Ticket Chat ──────────────────────────── */
.chat-wrapper { display:flex; flex-direction:column; height:calc(100vh - 200px); min-height:500px }
.chat-messages {
  flex:1; overflow-y:auto; padding:1.25rem; display:flex;
  flex-direction:column; gap:.75rem;
  background:var(--bg-dark); border-radius:var(--radius) var(--radius) 0 0;
  border:1px solid var(--border); border-bottom:none;
}
.chat-bubble-wrap { display:flex; flex-direction:column; max-width:72% }
.chat-bubble-wrap.me { align-self:flex-end; align-items:flex-end }
.chat-bubble-wrap.them { align-self:flex-start; align-items:flex-start }
.chat-bubble-wrap.bot-msg { align-self:flex-start; align-items:flex-start }
.chat-bubble {
  padding:.65rem 1rem; border-radius:12px; font-size:.875rem; line-height:1.55;
  word-wrap:break-word; max-width:100%;
}
.chat-bubble-wrap.me   .chat-bubble { background:var(--accent); color:#fff; border-radius:12px 12px 2px 12px }
.chat-bubble-wrap.them .chat-bubble { background:var(--bg-card); color:var(--text-1); border:1px solid var(--border); border-radius:12px 12px 12px 2px }
.chat-bubble-wrap.bot-msg .chat-bubble { background:rgba(6,182,212,.12); color:var(--info); border:1px solid rgba(6,182,212,.25); border-radius:12px 12px 12px 2px }
.chat-meta { font-size:.7rem; color:var(--text-3); margin-top:.25rem; display:flex; align-items:center; gap:.4rem }
.chat-name { font-weight:600; font-size:.72rem; color:var(--text-3); margin-bottom:.25rem }
.chat-input-bar {
  display:flex; align-items:flex-end; gap:.6rem;
  padding:.85rem 1rem; background:var(--bg-card);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
}
.chat-input {
  flex:1; background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text-1); padding:.6rem .9rem; border-radius:20px;
  font-family:var(--font); font-size:.875rem; outline:none; resize:none;
  max-height:120px; transition:border-color var(--transition);
  line-height:1.5;
}
.chat-input:focus { border-color:var(--accent) }
.chat-send-btn {
  width:38px; height:38px; border-radius:50%; background:var(--accent);
  border:none; color:#fff; cursor:pointer; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:all var(--transition);
}
.chat-send-btn:hover { background:var(--accent-2); box-shadow:0 0 14px rgba(37,99,235,.4) }
.chat-date-divider { text-align:center; font-size:.7rem; color:var(--text-3); margin:.25rem 0; position:relative }
.chat-date-divider::before,.chat-date-divider::after { content:''; position:absolute; top:50%; width:35%; height:1px; background:var(--border) }
.chat-date-divider::before { left:0 }
.chat-date-divider::after { right:0 }
.typing-indicator { display:flex; gap:4px; padding:.65rem 1rem; align-items:center }
.typing-dot { width:7px; height:7px; border-radius:50%; background:var(--text-3); animation:typing-bounce .8s infinite }
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typing-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

/* ── Settings ────────────────────────────────────────────── */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.25rem }
.avatar-preview { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid var(--border); background:var(--bg-panel); display:flex; align-items:center; justify-content:center; overflow:hidden }
.avatar-preview img { width:100%; height:100%; object-fit:cover }
.avatar-initials { font-size:1.6rem; font-weight:700; color:var(--text-3) }
.avatar-upload-area { display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.theme-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.75rem; background:var(--bg-panel); border-radius:var(--radius-sm); border:1px solid var(--border) }
.toggle { position:relative; width:44px; height:24px }
.toggle input { opacity:0; width:0; height:0 }
.toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:12px; cursor:pointer; transition:var(--transition) }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:var(--transition) }
.toggle input:checked + .toggle-slider { background:var(--accent) }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px) }

/* ── Updates / Activity ──────────────────────────────────── */
.update-item { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.9rem 1.1rem }
.update-item-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; flex-wrap:wrap; gap:.4rem }
.update-item-head strong { font-size:.875rem }
.update-date { font-size:.725rem; color:var(--text-3) }
.update-content { font-size:.85rem; color:var(--text-2); line-height:1.6 }

/* Activity timeline */
.activity-list { display:flex; flex-direction:column; gap:0 }
.activity-item { display:flex; gap:.85rem; padding:.75rem 0; border-bottom:1px solid var(--border); position:relative }
.activity-item:last-child { border-bottom:none }
.activity-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0 }
.activity-dot.green  { background:var(--success) }
.activity-dot.blue   { background:var(--accent-2) }
.activity-dot.yellow { background:var(--warning) }
.activity-dot.red    { background:var(--danger) }
.activity-text { font-size:.835rem; color:var(--text-2); flex:1 }
.activity-time { font-size:.725rem; color:var(--text-3); flex-shrink:0; padding-top:2px }

/* Quick actions */
.quick-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; margin-bottom:1.25rem }
.quick-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; transition:all var(--transition);
  text-decoration:none; color:var(--text-2); font-size:.8rem; font-weight:500;
}
.quick-action-btn:hover { border-color:var(--border-glow); background:var(--accent-soft); color:var(--text-1); box-shadow:var(--glow) }
.quick-action-btn svg { color:var(--accent-2) }

/* ── Live Console ────────────────────────────────────────── */
.console-box {
  background:#0a0a0a; border:1px solid #1a2a1a; border-radius:var(--radius);
  font-family:"Cascadia Code","Fira Code","Courier New",monospace; font-size:.8rem;
  padding:1rem; height:420px; overflow-y:auto;
}
.console-line { padding:.15rem 0; display:flex; gap:.75rem; align-items:baseline }
.console-ts   { color:#4a6741; flex-shrink:0; font-size:.72rem }
.console-src  { color:#6b7280; flex-shrink:0; min-width:80px }
.console-msg.info    { color:#86efac }
.console-msg.warning { color:#fde68a }
.console-msg.error   { color:#fca5a5 }
.console-msg.success { color:#6ee7b7 }
.console-toolbar { display:flex; gap:.6rem; margin-bottom:.75rem; align-items:center; flex-wrap:wrap }

/* ── Misc ────────────────────────────────────────────────── */
.inline-warn { display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--warning) }
.inline-warn svg { flex-shrink:0 }
.divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0 }
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--text-3) }
.empty-state svg { margin:0 auto .65rem; opacity:.25; display:block }
.empty-state p { font-size:.85rem }
.admin-bar { background:rgba(239,68,68,.07); border-bottom:1px solid rgba(239,68,68,.2); padding:.35rem 0; text-align:center; font-size:.75rem; color:#f87171; font-weight:600; letter-spacing:.04em }
.admin-badge { background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.3); border-radius:999px; padding:.12rem .55rem; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase }
.supporter-badge { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); border-radius:999px; padding:.12rem .55rem; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase }

/* KI Chat Widget */
.ai-widget { position:fixed; bottom:24px; right:24px; z-index:500 }
.ai-toggle-btn { width:52px; height:52px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,99,235,.5); transition:all var(--transition) }
.ai-toggle-btn:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(37,99,235,.6) }
.ai-panel { position:absolute; bottom:64px; right:0; width:320px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:none }
.ai-panel.open { display:flex; flex-direction:column }
.ai-panel-head { padding:.8rem 1rem; background:var(--accent); color:#fff; display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600 }
.ai-messages { flex:1; overflow-y:auto; padding:.85rem; display:flex; flex-direction:column; gap:.6rem; max-height:320px; min-height:200px }
.ai-msg { padding:.55rem .8rem; border-radius:10px; font-size:.825rem; line-height:1.5 }
.ai-msg.ai  { background:var(--bg-panel); border:1px solid var(--border); color:var(--text-2); align-self:flex-start; max-width:85% }
.ai-msg.user{ background:var(--accent); color:#fff; align-self:flex-end; max-width:85% }
.ai-input-row { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--border) }
.ai-input { flex:1; background:var(--bg-panel); border:1px solid var(--border); color:var(--text-1); padding:.5rem .75rem; border-radius:20px; font-family:var(--font); font-size:.825rem; outline:none }
.ai-input:focus { border-color:var(--accent) }
.ai-send { width:32px; height:32px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); flex-shrink:0 }
.ai-send:hover { background:var(--accent-2) }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .footer-grid { grid-template-columns:1fr 1fr }
  .footer-brand { grid-column:1/-1 }
}
@media(max-width:768px){
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-dark); border-bottom:1px solid var(--border); padding:.75rem 0 }
  .nav-links.open { display:flex }
  .nav-links a { padding:.65rem 1.25rem }
  .nav-cta { display:none }
  .hamburger { display:flex }
  .dash-wrapper { flex-direction:column }
  .sidebar { width:100%; min-width:unset; height:auto; position:static; border-right:none; border-bottom:1px solid var(--border) }
  .sidebar-links-group { flex-direction:row; flex-wrap:wrap; gap:.25rem }
  .sidebar-label { display:none }
  .sidebar-sep { display:none }
  .dash-main { padding:1rem; max-width:100vw }
  .chat-wrapper { height:calc(100vh - 160px) }
  .ai-panel { width:290px }
  .stat-grid { grid-template-columns:1fr 1fr }
  footer .footer-grid { grid-template-columns:1fr }
}
@media(max-width:480px){
  .stat-grid { grid-template-columns:1fr }
  .auth-box { padding:1.5rem 1.1rem }
}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease forwards}
.fade-up-1{animation-delay:.08s;opacity:0}
.fade-up-2{animation-delay:.16s;opacity:0}
.fade-up-3{animation-delay:.24s;opacity:0}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}