:root{
  --bg0:#050814; --bg1:#070d18; --card:#0b1220;
  --cyan: rgba(0,255,255,.85);
  --cyan2: rgba(0,255,255,.18);
  --red: rgba(255,0,72,.9);
  --yellow: rgba(255,200,0,.9);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --shadow: 0 12px 30px rgba(0,255,255,.08);
}

body{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(0,255,255,.06), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(255,0,72,.06), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

.page, .panel, .layout{
  animation: fadeSlide .35s ease;
}

@keyframes fadeSlide{
  from{opacity:0; transform: translateY(8px)}
  to{opacity:1; transform:none}
}

.dashboard-grid{
  margin: 14px 0 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 980px){
  .dashboard-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .dashboard-grid{grid-template-columns: 1fr;}
}

.dash-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(0,255,255,.12);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.dash-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(500px 120px at 10% 0%, rgba(0,255,255,.18), transparent 60%);
  pointer-events:none;
}

.dash-label{font-size:.78rem; color: var(--muted); letter-spacing:.2px}
.dash-value{font-size: 1.65rem; font-weight: 750; margin-top:4px; color: var(--text);}
.dash-sub{font-size:.75rem; color: rgba(255,255,255,.55); margin-top:2px}

.chaos-glow{
  border-color: rgba(255,0,72,.35);
  box-shadow: 0 14px 35px rgba(255,0,72,.10);
}
.chaos-glow:before{
  background: radial-gradient(500px 140px at 12% 0%, rgba(255,0,72,.20), transparent 65%);
}

.live-row{
  display:flex; align-items:center; gap:10px;
  margin: 6px 0 14px;
  font-size: .82rem; color: var(--muted);
}
.live-dot{
  width:10px; height:10px; border-radius:99px;
  background: rgba(0,255,110,.9);
  box-shadow: 0 0 18px rgba(0,255,110,.22);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%,100%{transform: scale(1); opacity:.9}
  50%{transform: scale(1.25); opacity:1}
}
.btn-mini{
  margin-left:auto;
  padding:6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,255,.18);
  background: rgba(0,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: .18s ease;
}
.btn-mini:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-mini:active{ transform: translateY(0px); }

/* Toast */
#toast-stack{
  position: fixed;
  top: 14px; right: 14px;
  display:flex; flex-direction:column; gap:10px;
  z-index: 9999;
}
.toast{
  min-width: 260px;
  max-width: 380px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(0,255,255,.16);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  animation: toastIn .22s ease;
}
.toast .t-title{font-weight: 700; font-size:.86rem; margin-bottom:2px}
.toast .t-msg{font-size:.82rem; color: var(--muted); line-height:1.25}
.toast.ok{ border-color: rgba(0,255,255,.18); }
.toast.warn{ border-color: rgba(255,200,0,.28); }
.toast.err{ border-color: rgba(255,0,72,.28); }
@keyframes toastIn{ from{opacity:0; transform: translateY(-8px)} to{opacity:1; transform:none} }
@keyframes toastOut{ to{opacity:0; transform: translateY(-8px)} }

/* Command palette */
.cmdk.hidden{display:none}
.cmdk{ position:fixed; inset:0; z-index:10000; }
.cmdk-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.cmdk-modal{
  position: relative;
  width: min(720px, calc(100% - 24px));
  margin: 8vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(0,255,255,.16);
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(7,13,24,.92));
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.cmdk-header{display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; color: var(--muted); font-size:.82rem;}
.cmdk-title{font-weight:700; color: var(--text);}
.cmdk-input{
  width:100%;
  border:0; outline:0;
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 12px 14px;
  font-size: .95rem;
  border-top: 1px solid rgba(0,255,255,.10);
  border-bottom: 1px solid rgba(0,255,255,.10);
}
.cmdk-list{ max-height: 52vh; overflow:auto; padding: 8px; }
.cmdk-item{
  display:flex; justify-content:space-between; gap:12px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  border:1px solid transparent;
  color: var(--text);
}
.cmdk-item:hover, .cmdk-item.active{
  background: rgba(0,255,255,.06);
  border-color: rgba(0,255,255,.14);
}
.cmdk-meta{ color: var(--muted); font-size:.8rem; }

/* Timeline */
.timeline{ margin-top: 10px; position:relative; }
.timeline:before{
  content:"";
  position:absolute; left: 14px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(0,255,255,.35), rgba(0,255,255,.02));
}
.timeline-item{
  position:relative;
  padding-left: 44px !important;
}
.timeline-item:before{
  content:"";
  position:absolute; left: 8px; top: 14px;
  width: 14px; height: 14px; border-radius: 99px;
  background: rgba(0,255,255,.9);
  box-shadow: 0 0 18px rgba(0,255,255,.22);
}
.timeline-item.is-playing{
  animation: glowRow .45s ease;
  outline: 1px solid rgba(0,255,255,.22);
  border-radius: 14px;
}
@keyframes glowRow{
  from{ background: rgba(0,255,255,.02); }
  to{ background: transparent; }
}
.replay-head{display:flex; justify-content:space-between; align-items:center}
.replay-actions{display:flex; gap:8px}
.pre-log{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(0,255,255,.12);
  padding: 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.85);
}


/* Skeleton Loader */
.skeleton{ position:relative; overflow:hidden; background:rgba(255,255,255,.06); border-radius:14px; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

/* Timeline */
.timeline{ position:relative; padding-left:18px; }
.timeline::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:rgba(255,255,255,.10); border-radius:2px; }
.t-item{ position:relative; display:flex; gap:12px; margin:12px 0; }
.t-dot{ width:12px; height:12px; border-radius:999px; background:rgba(0,255,255,.7); box-shadow:0 0 0 6px rgba(0,255,255,.08); margin-top:10px; flex:0 0 auto; }
.t-card{ padding:12px 14px; width:100%; }
.pre{ margin:10px 0 0; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.25); color:rgba(255,255,255,.85); overflow:auto; }

/* Domain Cards */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.card{ grid-column:span 12; }
@media(min-width:900px){ .card{ grid-column:span 6; } }
.domain-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.domain-row{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.dot{ width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.35); box-shadow:0 0 0 6px rgba(255,255,255,.06); }
.dot.ok{ background:rgba(0,255,120,.9); box-shadow:0 0 0 6px rgba(0,255,120,.10); }
.dot.bad{ background:rgba(255,0,72,.9); box-shadow:0 0 0 6px rgba(255,0,72,.10); }
.pulse{ animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }

.shake{ animation:shake .45s ease-in-out; }
@keyframes shake{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
  100%{ transform:translateX(0); }
}


/* ====== RP 2025 Revamp Additions ====== */
:root{
  --radius: 18px;
  --radius-sm: 14px;
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(0,255,255,.14);
  --glass: rgba(10,14,26,.55);
  --glass2: rgba(10,14,26,.32);
  --blur: 14px;
  --ok: rgba(0,255,255,.95);
  --warn: rgba(255,200,0,.95);
  --bad: rgba(255,0,72,.92);
  --shadow2: 0 18px 60px rgba(0,0,0,.55);
}

/* Optional Light Theme (toggle adds .theme-light to body) */
body.theme-light, html.theme-light body{
  --bg0:#f6f7fb; --bg1:#eef2f7; --card: rgba(255,255,255,.75);
  --text: rgba(10,14,26,.92);
  --muted: rgba(10,14,26,.62);
  --cyan: rgba(0,120,255,.92);
  --cyan2: rgba(0,120,255,.16);
  --shadow: 0 12px 32px rgba(0,0,0,.10);
  background: radial-gradient(900px 520px at 12% 12%, rgba(0,120,255,.10), transparent 55%),
              radial-gradient(880px 520px at 82% 18%, rgba(255,0,72,.07), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Typography polish */
.h1{ letter-spacing:.2px; }
.subtitle{ opacity:.9 }
.muted{ color: var(--muted); }

/* Sticky topbar */
.topbar{
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.06));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.theme-light, html.theme-light body .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.50));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Better cards */
.card,.glass,.dash-card,.panel,.row{
  border-radius: var(--radius);
}
.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

/* Inputs */
.input, input[type="text"], input[type="password"], input[type="number"], select{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
body.theme-light, html.theme-light body .input, body.theme-light, html.theme-light body input[type="text"], body.theme-light, html.theme-light body input[type="password"], body.theme-light, html.theme-light body input[type="number"], body.theme-light, html.theme-light body select{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
}
.input:focus, input:focus, select:focus{
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 0 0 4px rgba(0,255,255,.12);
}

/* Buttons refinement */
.btn{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 650;
}
.btn-small{ padding: 8px 10px; border-radius: 12px; }
.btn:active{ transform: translateY(1px); }

/* Tables */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.table th{
  text-align:left;
  font-size:.78rem;
  color: var(--muted);
  padding: 6px 10px;
}
.table td{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 10px;
}
.table tr td:first-child{ border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.table tr td:last-child{ border-top-right-radius: 14px; border-bottom-right-radius: 14px; }

/* Status badges with animated change */
.badge{
  border-radius: 999px;
}
.badge.status-ok{ border-color: rgba(0,255,255,.25); color: rgba(0,255,255,.92); background: rgba(0,255,255,.08); }
.badge.status-warn{ border-color: rgba(255,200,0,.22); color: rgba(255,200,0,.95); background: rgba(255,200,0,.08); }
.badge.status-bad{ border-color: rgba(255,0,72,.22); color: rgba(255,0,72,.92); background: rgba(255,0,72,.08); }

@keyframes statusFlash{
  0%{ transform: translateY(0); filter: brightness(1); }
  40%{ transform: translateY(-1px); filter: brightness(1.35); }
  100%{ transform: translateY(0); filter: brightness(1); }
}
.status-flash{ animation: statusFlash .55s ease; }

/* Skeleton Loader */
.skel{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.skel::after{
  content:"";
  position:absolute; inset:-40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-60%);
  animation: skelShine 1.1s ease-in-out infinite;
}
@keyframes skelShine{ to{ transform: translateX(60%); } }

/* Command palette hint */
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.85);
}
body.theme-light, html.theme-light body .kbd{ background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.10); color: rgba(10,14,26,.75); }


/* ============================
   WOW AESTHETIC UPGRADE (v11)
   - Glassmorphism
   - Mobile-first polish
   - Skeleton shimmer refinement
   - Toast animation refinement
   - Micro-interactions
   ============================ */

:root{
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.12);
  --glass-blur: 14px;
  --lift: translateY(-2px);
}

/* Glass surfaces */
.card,
.table,
.panel,
.topbar,
.nav,
.header,
.kpi,
.toast{
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
}

/* Light theme: keep glass but brighter */
body.theme-light, html.theme-light body .card{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  border-color: rgba(10,14,26,.10);
}

/* Micro interaction: lift on hover */
.card:hover{
  transform: var(--lift);
  box-shadow: var(--shadow2);
}

/* Buttons feel clickable */
.btn, button, a.btn{
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}
.btn:hover, button:hover, a.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn:active, button:active, a.btn:active{
  transform: translateY(0px) scale(.98);
}

/* Focus ring (accessibility) */
:where(button, a, input, select, textarea):focus-visible{
  outline: 2px solid rgba(56,189,248,.55);
  outline-offset: 2px;
  border-radius: 14px;
}

/* Skeleton: smoother shimmer + theme-aware */
.skeleton{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
body.theme-light, html.theme-light body .skeleton{
  background: linear-gradient(180deg, rgba(10,14,26,.06), rgba(10,14,26,.03));
}
.skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: shimmer 1.05s infinite;
}
body.theme-light, html.theme-light body .skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(10,14,26,.10), transparent);
}

/* Toast container + animations */
.toast-wrap{
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 28px));
}
.toast{
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.70));
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
  display:flex; gap:10px; align-items:flex-start;
  transform: translateX(18px);
  opacity: 0;
  animation: toastIn .22s ease forwards;
}
body.theme-light, html.theme-light body .toast{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-color: rgba(10,14,26,.10);
  box-shadow: 0 16px 60px rgba(0,0,0,.12);
}
.toast .t-ic{
  width: 34px; height: 34px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(56,189,248,.14);
  border: 1px solid rgba(56,189,248,.22);
  flex:0 0 auto;
}
.toast .t-body{ flex:1 1 auto; min-width:0; }
.toast .t-title{ font-weight:700; line-height:1.1; }
.toast .t-msg{ font-size:.92rem; color: var(--muted); margin-top:2px; }
.toast .t-x{
  border:0; background:transparent; color: var(--muted);
  cursor:pointer; padding:6px; border-radius: 10px;
  transition: background .15s ease, transform .12s ease;
}
.toast .t-x:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
body.theme-light, html.theme-light body .toast .t-x:hover{ background: rgba(10,14,26,.06); }
.toast.out{ animation: toastOut .18s ease forwards; }

@keyframes toastIn{
  to{ transform: translateX(0); opacity:1; }
}
@keyframes toastOut{
  to{ transform: translateX(18px); opacity:0; }
}

/* Mobile-first improvements */
@media (max-width: 900px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .topbar{ flex-direction: column; align-items: stretch; }
  .topbar .actions, .topbar .nav-actions{ justify-content: flex-start; flex-wrap: wrap; }
  .grid{ grid-template-columns: 1fr !important; }
  .table{ overflow-x:auto; }
  table{ min-width: 720px; }
  .badge{ align-self:flex-start; }
}

/* Small phones */
@media (max-width: 520px){
  .btn{ width: 100%; justify-content:center; }
  .toast-wrap{ left: 12px; right: 12px; }
  .toast{ border-radius: 16px; }
}