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

/* =====================================================================
   Hypoza Admin — Glass UI
   Same brand palette (navy + electric blue + violet), same class names
   and CSS variables as before, so every page keeps working untouched.
   ===================================================================== */
:root {
  /* brand colours (unchanged) */
  --bg-0: #080b16;
  --bg-1: #0a0e1a;
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --accent-gradient: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  /* text (a touch lighter than before so it reads well on glass) */
  --text-primary: #eef1f8;
  --text-secondary: #a6b0c8;
  --text-muted: #7784a3;

  /* surfaces are now translucent */
  --bg-2: rgba(255, 255, 255, 0.06);
  --bg-card: rgba(255, 255, 255, 0.06);
  --card-bg: var(--bg-card);
  --bg-alt: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* glass tokens */
  --glass: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-hover-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(168, 85, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --blur: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--bg-0);
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Ambient background: fixed layer of soft blue / violet / cyan glows */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(59, 130, 246, 0.24), transparent 62%),
    radial-gradient(820px 640px at 4% 108%, rgba(168, 85, 247, 0.22), transparent 62%),
    radial-gradient(640px 420px at 48% 42%, rgba(6, 182, 212, 0.06), transparent 70%),
    linear-gradient(160deg, #0a0e1a 0%, #080b16 55%, #0b0a1d 100%);
}
::selection { background: rgba(168, 85, 247, 0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.6); background-clip: padding-box; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
option { background: #111726; color: var(--text-primary); }

/* ---------- Layout: floating sidebar + frosted main panel ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  min-height: 100vh;
}
.admin-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 14px 12px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  padding: 10px 12px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-brand::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16), 0 0 18px rgba(124, 77, 255, 0.7);
}
.admin-brand span {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-sidebar nav a,
.admin-sidebar nav button.nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 3px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.admin-sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.admin-sidebar nav a.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.88), rgba(168, 85, 247, 0.82));
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 26px -8px rgba(124, 77, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.admin-sidebar nav button.nav-link { font-size: 14px; margin-top: 6px; }
.admin-sidebar nav button.nav-link:hover { background: rgba(239, 68, 68, 0.14) !important; color: #fca5a5; }

.admin-main {
  min-width: 0;
  width: 100%;
  max-width: 1240px;
  min-height: calc(100vh - 32px);
  padding: 28px 30px 64px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: glass-in .45s var(--ease) backwards;
}
@keyframes glass-in { from { opacity: 0; transform: translateY(8px); } }
.admin-main > h1, .admin-main > h2, .dash-head h1, .dash-head h2 {
  margin-top: 0;
  font-size: 26px;
  font-weight: 800;
}

/* ---------- Glass surfaces ---------- */
.card, .stat-box, .life-card, .kpi, .filter-bar, .security-card, .auth-box {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
}
.card { position: relative; border-radius: var(--radius-lg); padding: 22px; margin-bottom: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-box { border-radius: var(--radius-md); padding: 16px 18px; }
.stat-box .label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.stat-box .value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-box .value.accent { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* number cards lift on hover */
.stat-box, .life-card, .kpi, .security-card {
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.stat-box:hover, .life-card:hover, .kpi:hover, .security-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: var(--glass-hover-shadow);
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; border-bottom-color: rgba(255, 255, 255, 0.14); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), filter .2s, background .2s, border-color .2s, box-shadow .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--accent-gradient); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(124, 77, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 14px 30px -8px rgba(124, 77, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
.btn-success { background: rgba(34, 197, 94, 0.14); color: #4ade80; border-color: rgba(34, 197, 94, 0.32); }
.btn-success:hover { background: rgba(34, 197, 94, 0.24); }
.btn-danger { background: rgba(239, 68, 68, 0.14); color: #f87171; border-color: rgba(239, 68, 68, 0.32); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.24); }
.btn-outline { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: var(--text-primary); text-decoration: none; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.26); }

/* ---------- Form controls ---------- */
input, select, textarea {
  width: 100%; padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 11, 22, 0.45);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 255, 255, 0.24); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(96, 140, 250, 0.85);
  background: rgba(8, 11, 22, 0.62);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-purple); }
input[type="file"]::file-selector-button {
  margin-inline-end: 12px; padding: 6px 14px; border: none; border-radius: 999px;
  background: var(--accent-gradient); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.field { margin-bottom: 14px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.1);
}
.badge.pending::before, .badge.active::before, .badge.approved::before, .badge.paid::before,
.badge.rejected::before, .badge.banned::before, .badge.failed::before, .badge.paused::before,
.badge.confirmed::before, .badge.cancelled::before, .badge.expired::before, .badge.held::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-inline-end: 6px; vertical-align: middle; box-shadow: 0 0 8px currentColor;
}
.badge.pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.badge.active, .badge.approved, .badge.paid { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
.badge.rejected, .badge.banned, .badge.failed { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.badge.paused { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }

.settings-group { margin-bottom: 28px; }
.settings-group h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Login / 2FA ---------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; padding: 20px; }
.auth-box {
  width: 100%; max-width: 400px; border-radius: 28px; padding: 36px;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 0 80px -30px rgba(124, 77, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.alert-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.32); color: #f87171; padding: 10px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; }
.alert-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.32); color: #4ade80; padding: 10px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; }

/* ---------- Toggle switch (real on/off settings) ---------- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 14px; color: var(--text-primary); text-transform: none; margin-bottom: 0; }
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; transition: background .25s, border-color .25s, box-shadow .25s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); top: 3px; right: 3px; transition: transform .25s var(--ease), background .25s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.toggle-switch input:checked + .toggle-slider { background: linear-gradient(135deg, rgba(59, 130, 246, 0.75), rgba(168, 85, 247, 0.75)); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 18px -2px rgba(124, 77, 255, 0.6); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(-20px); background: #fff; }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35); }

/* ---------- Focus states for keyboard navigation ---------- */
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid rgba(168, 85, 247, 0.85); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* =====================================================================
   Reports dashboard (dashboard.php)
   ===================================================================== */
.muted { color: var(--text-muted); font-weight: 400; }
.small { font-size: 12px; margin: 10px 0 0; }
.hint { font-style: normal; color: var(--text-muted); cursor: help; font-size: 12px; }

.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.range-note { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.queue-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-secondary); font-size: 12.5px; text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.chip:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.chip strong { color: var(--text-primary); }
.chip-warn { background: rgba(245, 158, 11, 0.13); border-color: rgba(245, 158, 11, 0.42); color: #fbbf24; }
.chip-warn strong { color: #fbbf24; }

.filter-bar { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 18px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--text-secondary); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; transition: all .2s var(--ease); }
.pill:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); }
.pill.active { color: #fff; background: var(--accent-gradient); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(124, 77, 255, 0.7); }
.custom-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-secondary); font-size: 13px; }
.custom-range label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; }
.custom-range input[type="date"] { width: auto; background: rgba(8, 11, 22, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-primary); border-radius: var(--radius-sm); padding: 6px 10px; font-family: inherit; color-scheme: dark; }
.tools { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; flex-wrap: wrap; }
.tools .live { white-space: nowrap; font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.section-title { font-size: 15px; font-weight: 700; margin: 26px 0 12px; color: var(--text-primary); }

.lifetime { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.life-card { position: relative; border-radius: var(--radius-md); padding: 16px 18px; overflow: hidden; }
.life-card::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--kc); box-shadow: 0 0 16px var(--kc); }
.life-label { color: var(--text-secondary); font-size: 13px; }
.life-value { font-size: 25px; font-weight: 800; margin: 6px 0 2px; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.life-sub { color: var(--text-muted); font-size: 12.5px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { position: relative; border-radius: var(--radius-md); padding: 14px 16px 0; overflow: hidden; display: flex; flex-direction: column; min-height: 150px; }
.kpi::after { content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--kc); opacity: .9; box-shadow: 0 0 14px var(--kc); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-label { color: var(--text-secondary); font-size: 13px; }
.kpi-value { font-size: 25px; font-weight: 800; margin-top: 8px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.spark-wrap { position: relative; height: 42px; margin: auto -16px 0; }

.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; direction: ltr; }
.delta.good { color: #4ade80; background: rgba(34, 197, 94, 0.15); }
.delta.bad { color: #f87171; background: rgba(239, 68, 68, 0.15); }
.delta.flat { color: var(--text-muted); background: rgba(148, 163, 184, 0.13); }

.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 14px; }
.dash-grid > .card { margin: 0; min-width: 0; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head .more { font-size: 12.5px; color: #8ab4ff; text-decoration: none; }
.card-head .more:hover { color: #c4b5fd; }
.chart-box { position: relative; height: 310px; direction: ltr; }
.chart-box.sm { height: 230px; }
.dash-grid > .card.col { display: flex; flex-direction: column; }
.chart-box.grow { flex: 1 1 auto; height: auto; min-height: 310px; overflow: hidden; }

.today-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.today-stats > div { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.today-stats span { color: var(--text-muted); font-size: 12px; }
.today-stats strong { font-size: 17px; }

.peak-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.peak-list li { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.peak-list li:last-child { border-bottom: none; padding-bottom: 0; }
.peak-list span { color: var(--text-muted); font-size: 12.5px; }
.peak-list strong { font-size: 15px; }

.heatmap { display: grid; grid-template-columns: 74px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.hm-hour { text-align: center; font-size: 11px; color: var(--text-muted); }
.hm-day { font-size: 12px; color: var(--text-secondary); text-align: right; padding-inline-end: 8px; white-space: nowrap; }
.hm-cell { aspect-ratio: 1.6 / 1; min-height: 22px; border-radius: 6px; background: rgba(168, 85, 247, calc(0.07 + var(--v) * 0.93)); transition: transform .12s; }
.hm-cell:hover { transform: scale(1.25); outline: 1px solid rgba(255, 255, 255, .5); position: relative; z-index: 1; }
.hm-legend { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.hm-legend i { display: block; width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.07), rgba(168, 85, 247, 1)); }

.mini-table { font-size: 13px; }
.mini-table th, .mini-table td { padding: 8px 8px; }

/* =====================================================================
   Traffic page (traffic.php) + SEO page (seo.php)
   ===================================================================== */
.alert-warn { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.42); color: #fbbf24; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: 13.5px; line-height: 1.7; }
.live-chip { color: #4ade80; border-color: rgba(34, 197, 94, 0.38); background: rgba(34, 197, 94, 0.1); }
.live-chip strong { color: #4ade80; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: livepulse 1.8s infinite; display: inline-block; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.table-scroll { overflow-x: auto; }
.flag { display: inline-block; min-width: 1.4em; font-size: 16px; }
.bar { position: relative; height: 18px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, #8b5cf6, #a855f7); border-radius: 999px; box-shadow: 0 0 14px rgba(168, 85, 247, 0.5); }
.bar.green > i { background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 0 14px rgba(34, 197, 94, 0.45); }
.bar.blue > i { background: linear-gradient(90deg, #2563eb, #3b82f6); box-shadow: 0 0 14px rgba(59, 130, 246, 0.5); }
.bar > em { position: relative; font-style: normal; font-size: 11px; padding-inline: 8px; line-height: 18px; color: #fff; }

.map-wrap { position: relative; width: 100%; aspect-ratio: 2 / 1; background: radial-gradient(ellipse at 50% 40%, rgba(59, 130, 246, 0.10), transparent 70%); border-radius: var(--radius-md); overflow: hidden; }
.world-map { width: 100%; height: 100%; display: block; }
.world-map .country { fill: rgba(255, 255, 255, 0.09); stroke: rgba(148, 163, 184, 0.28); stroke-width: 0.4; transition: stroke .1s; }
.world-map .country:hover { stroke: #fff; stroke-width: 1; }
.world-map .marker { fill: #3a4468; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.4; }
.world-map .marker.has-data { stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.8; }
.map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; }
.map-tip { position: absolute; z-index: 2; pointer-events: none; background: rgba(12, 16, 32, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 8px 12px; font-size: 12.5px; line-height: 1.7; color: #e5e9f5; direction: rtl; text-align: right; min-width: 120px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7); }
.map-legend { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.map-legend i { display: block; width: 140px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 1)); }

.track-form { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-primary); }
.field input[type="number"], .field input[type="text"], .field input[type="url"], .field textarea, .field select { background: rgba(8, 11, 22, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-primary); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 14px; }
.field textarea { resize: vertical; min-height: 78px; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(96, 140, 250, 0.85); }
.privacy-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; }
.privacy-list a { color: #8ab4ff; }
.countries-table td { vertical-align: middle; }

.check input[type="checkbox"], .field input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.track-form .btn, .seo-form .btn { align-self: flex-start; }

/* ---- SEO page ---- */
.seo-health { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.score-ring { --c: #22c55e; flex: none; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(148, 163, 184, 0.18) 0); position: relative; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent)); }
.score-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #0f1527; }
.score-ring span { position: relative; font-size: 30px; font-weight: 800; }
.score-ring small { font-size: 14px; opacity: .7; }
.score-ring.mid { --c: #f59e0b; } .score-ring.low { --c: #ef4444; }
.health-body { flex: 1; min-width: 280px; }
.health-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.health-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.health-list .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.health-list .ok .dot { background: rgba(34, 197, 94, .18); color: #4ade80; }
.health-list .warn .dot { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.health-list .bad .dot { background: rgba(239, 68, 68, .18); color: #f87171; }

.seo-page { margin-bottom: 12px; padding: 0; }
.seo-page > summary { cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 12px; list-style: none; }
.seo-page > summary::-webkit-details-marker { display: none; }
.seo-page > summary::before { content: '▸'; color: var(--text-muted); transition: transform .2s var(--ease); }
.seo-page[open] > summary::before { transform: rotate(90deg); }
.seo-page[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.seo-page-body { padding: 16px 18px 18px; }
.seo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.seo-col { display: flex; flex-direction: column; gap: 12px; }
.seo-col-title { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.seo-fields { display: flex; flex-direction: column; gap: 14px; }
.seo-fields.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.field > span:first-child { color: var(--text-secondary); font-size: 13px; }
.counter { font-size: 12px; color: var(--text-muted); }
.counter.ok { color: #4ade80; } .counter.warn { color: #fbbf24; } .counter.bad { color: #f87171; }

.serp-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; }
.lang-tabs { display: inline-flex; gap: 4px; }
.lang-tab { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-secondary); border-radius: 999px; padding: 3px 13px; font-size: 12px; cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s; }
.lang-tab:hover { background: rgba(255, 255, 255, 0.1); }
.lang-tab.active { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.serp { background: #fff; border-radius: 12px; padding: 14px 18px; max-width: 620px; font-family: Arial, 'Noto Sans', sans-serif; }
.serp-url { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #202124; margin-bottom: 4px; }
.serp-fav { width: 22px; height: 22px; border-radius: 50%; background: #f1f3f4; display: grid; place-items: center; font-size: 12px; }
.serp-site { color: #4d5156; }
.serp-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin-bottom: 3px; }
.serp-desc { color: #4d5156; font-size: 14px; line-height: 1.58; }
.og-card { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; overflow: hidden; max-width: 520px; background: rgba(255, 255, 255, 0.05); }
.og-img { aspect-ratio: 1.91 / 1; background: rgba(8, 11, 22, 0.6); display: grid; place-items: center; color: var(--text-muted); font-size: 13px; overflow: hidden; }
.og-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-text { padding: 12px 16px; }
.og-domain { font-size: 11px; color: #8b95b3; letter-spacing: .5px; }
.og-title { font-size: 16px; font-weight: 600; margin: 3px 0; color: #e8ecf8; }
.og-desc { font-size: 13px; color: #9aa4c2; line-height: 1.5; }
.save-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 12px 18px; margin-top: 22px; background: rgba(14, 19, 36, 0.72); border: 1px solid var(--glass-border); border-radius: 999px; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7); }
@media (max-width: 900px) { .seo-cols, .seo-fields.cols-2, .health-list { grid-template-columns: 1fr; } }

/* =====================================================================
   Review counters + security pieces
   ===================================================================== */
.admin-sidebar nav a:has(.admin-nav-badge) { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.admin-nav-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #fff; font-family: inherit; font-size: 11px; line-height: 1; font-weight: 700; box-shadow: 0 2px 10px rgba(124, 77, 255, .35); direction: ltr; font-variant-numeric: tabular-nums; }
.admin-nav-badge[hidden] { display: none !important; }
.admin-sidebar nav a.active .admin-nav-badge { background: rgba(255, 255, 255, 0.26); box-shadow: none; }
a[href="/security-center.php"] .admin-nav-badge { background: #d94155; box-shadow: 0 2px 10px rgba(217, 65, 85, .4); }
.admin-sidebar nav a[href="/security-center.php"].active .admin-nav-badge { background: #d94155; }
.badge.confirmed { background: rgba(34, 197, 94, .15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
.badge.cancelled, .badge.expired { background: rgba(239, 68, 68, .15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.badge.held { background: rgba(245, 158, 11, .14); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.security-card { border-radius: var(--radius-md); padding: 18px; }
.security-card strong { display: block; font-size: 22px; color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.security-card span { font-size: 12px; color: var(--text-secondary); }
.security-note { padding: 12px 15px; background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .3); border-radius: 14px; font-size: 13px; color: var(--text-secondary); }
.security-table { overflow: auto; }
.security-table table { min-width: 520px; }

/* Urgent security banner */
.security-urgent { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 18px; margin-bottom: 18px; background: linear-gradient(120deg, rgba(59, 130, 246, .18), rgba(168, 85, 247, .16)); border: 1px solid rgba(168, 85, 247, .55); border-inline-start: 4px solid #fb7185; border-radius: 18px; color: #eef1f8; font-size: 13px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 34px -14px rgba(168, 85, 247, 0.55); }
.security-urgent strong { color: #fda4af; }
.security-urgent a { margin-inline-start: auto; color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; }
.security-urgent[hidden] { display: none !important; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1150px) {
  .kpi-grid, .lifetime { grid-template-columns: repeat(2, 1fr); }
  .span-8, .span-6, .span-4, .span-3 { grid-column: span 12; }
}
@media (max-width: 860px) {
  :root { --blur: 10px; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .admin-sidebar {
    position: sticky; top: 10px; z-index: 50; height: auto;
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 8px 10px; border-radius: 20px;
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  }
  .admin-brand { margin: 0; padding: 6px 10px; border-bottom: none; white-space: nowrap; font-size: 17px; }
  .admin-sidebar nav { display: flex; gap: 4px; }
  .admin-sidebar nav a, .admin-sidebar nav button.nav-link { white-space: nowrap; margin: 0; }
  .admin-main { padding: 18px 14px 44px; border-radius: 22px; min-height: auto; max-width: none; }
  .admin-main > h1, .admin-main > h2 { font-size: 22px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-box:hover, .life-card:hover, .kpi:hover, .security-card:hover { transform: none; }
}
@media (max-width: 640px) {
  .kpi-grid, .lifetime { grid-template-columns: 1fr; }
  .chart-box { height: 260px; }
  .tools { margin-inline-start: 0; }
  .heatmap { grid-template-columns: 58px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .map-wrap { aspect-ratio: 1.6 / 1; }
  .save-bar { border-radius: 22px; flex-wrap: wrap; }
}

/* Wide layouts (reports / traffic) */
.admin-main.wide { max-width: 1600px; }

/* Browsers without backdrop-filter: use denser solid-ish glass so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat-box, .life-card, .kpi, .filter-bar, .security-card, .auth-box, .admin-sidebar, .save-bar {
    background: rgba(18, 24, 44, 0.92);
  }
}
/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* V29 — live center: consistent with original blue/violet glass dashboard. */
.live-header,.live-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.live-header h1{margin:0 0 4px}.live-header p{color:var(--text-secondary);margin:0 0 16px;font-size:13px}
.live-status{padding:7px 14px;border-radius:18px;background:rgba(148,163,184,.12);border:1px solid var(--border);font-size:12px}
.live-status.good{color:#86efac;background:rgba(34,197,94,.12)}.live-status.bad{color:#fda4af;background:rgba(239,68,68,.12)}
.live-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.live-card,.live-panel{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:19px;padding:17px}
.live-card{display:flex;flex-direction:column;gap:4px}.live-card>span{font-size:13px;color:var(--text-secondary)}.live-card>strong{font-size:25px;color:#fff;font-variant-numeric:tabular-nums}.live-card>small{color:var(--text-muted);font-size:11px}
.live-split{display:grid;grid-template-columns:1fr 1.35fr;align-items:start;gap:18px}.live-panel{min-width:0}.live-panel-head h2{font-size:18px;margin:0}.live-panel-head span{font-size:11px;color:var(--text-muted)}
.live-health,.live-events{display:flex;flex-direction:column;gap:9px;margin-top:15px;max-height:720px;overflow-y:auto}
.live-check{display:flex;gap:12px;padding:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:12px;align-items:flex-start}
.live-check div{flex:1;min-width:0}.live-check strong{display:block;font-size:12px;overflow-wrap:anywhere}.live-check small{display:block;color:var(--text-secondary);font-size:12px;margin-top:4px;overflow-wrap:anywhere}
.live-check-time{font-size:10px;color:var(--text-muted);white-space:nowrap}.live-dot{display:block;width:9px;height:9px;flex-shrink:0;border-radius:50%;margin-top:5px;background:#60a5fa}.live-check.ok .live-dot{background:#22c55e}.live-check.warning .live-dot{background:#f59e0b}.live-check.critical .live-dot{background:#f43f5e}
.live-filters{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.live-filters label{font-size:12px;color:var(--text-secondary);flex:1;min-width:110px}.live-filters select,.live-filters input{display:block;width:100%;margin-top:4px;background:#151d34;color:#fff;border:1px solid var(--border);border-radius:9px;padding:9px;font:inherit}
.live-event{border:1px solid var(--border);border-right:3px solid #60a5fa;border-radius:13px;background:rgba(255,255,255,.03);padding:12px}.live-event.error{border-right-color:#fb7185}.live-event.critical{border-right-color:#ef4444;background:rgba(239,68,68,.07)}.live-event.warning{border-right-color:#f59e0b}
.live-event-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}.live-event-head strong{overflow-wrap:anywhere}.live-severity-tag{font-weight:700;font-size:11px;padding:3px 7px;border-radius:8px;color:#93c5fd;background:rgba(59,130,246,.2)}.live-severity-tag.critical,.live-severity-tag.error{color:#fda4af;background:rgba(239,68,68,.19)}.live-severity-tag.warning{color:#fcd34d;background:rgba(245,158,11,.2)}.live-occur{margin-inline-start:auto;color:#a5b4fc}
.live-event-message{margin:8px 0;color:#e8eaf4;font-size:12px;overflow-wrap:anywhere}.live-event-detail summary{cursor:pointer;color:#93c5fd;font-size:12px}.live-event-detail pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow-y:auto;direction:ltr;text-align:left;color:#cbd5e1;background:rgba(0,0,0,.2);padding:10px;border-radius:8px;font-size:11px}
.live-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}.live-actions>span{margin-inline-end:auto;color:var(--text-muted);font-size:11px}.live-action{background:rgba(59,130,246,.15);border:1px solid rgba(96,165,250,.25);border-radius:8px;color:#bfdbfe;cursor:pointer;font:inherit;font-size:11px;padding:6px 10px}.live-action:hover{background:rgba(59,130,246,.3)}.live-action:disabled{opacity:.45}
.live-note{margin-top:18px;font-size:12px;color:var(--text-secondary)}
.live-nav-badge{background:#dc2626!important;box-shadow:0 0 14px rgba(220,38,38,.5)!important}.live-toast{position:fixed;bottom:20px;left:20px;z-index:9999;background:#33151e;color:#fff;border:1px solid #fb7185;border-radius:14px;padding:14px 18px;box-shadow:0 12px 30px #0009;max-width:350px}.live-toast a{color:#fecdd3}
@media(max-width:1100px){.live-split{grid-template-columns:1fr}}@media(max-width:700px){.live-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.live-header h1{font-size:23px}.live-check-time{display:none}}