:root{
  --bg:#040404;
  --panel:rgba(255,255,255,0.04);
  --panel2:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);
  --text:#f5f5f5;
  --muted:rgba(255,255,255,0.55);
  --orange:#ff7a18;
  --orange2:#ff9a3d;
  --white:#ffffff;
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --radius:16px;
  --radius2:20px;
}

*{box-sizing:border-box;}
html,body{height:100%; margin:0; font-family:"Space Grotesk", sans-serif; color:var(--text); background:var(--bg);}
.mono{font-family:"JetBrains Mono", monospace;}

.bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(255,154,61,0.08), transparent 55%),
    radial-gradient(900px 700px at 82% 24%, rgba(255,122,24,0.08), transparent 60%),
    #030303;
}

.blackhole{
  position:absolute;
  width:620px;
  height:620px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.98) 0 26%, rgba(0,0,0,0.7) 35%, rgba(255,255,255,0.08) 44%, rgba(255,154,61,0.2) 58%, rgba(255,122,24,0.1) 62%, transparent 72%),
    conic-gradient(from 0deg, rgba(255,255,255,0.08), rgba(255,154,61,0.18), rgba(255,122,24,0.12), rgba(255,255,255,0.06));
  filter: blur(1px);
  opacity:0.8;
  animation: spin 22s linear infinite, pulse 9s ease-in-out infinite;
}
.blackhole::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.98) 0 65%, rgba(255,255,255,0.05) 80%, transparent 100%);
  box-shadow: 0 0 60px rgba(0,0,0,0.85) inset;
}
.bh1{left:-120px; top:-80px; transform: rotate(8deg);}
.bh2{right:-160px; bottom:-140px; width:560px; height:560px; animation-duration: 26s;}

.glow{
  position:absolute;
  width:900px;
  height:900px;
  border-radius:999px;
  filter: blur(60px);
  opacity:0.7;
  mix-blend-mode:screen;
  animation: drift 12s ease-in-out infinite alternate;
}
.glow.g1{left:-200px; top:-220px; background: radial-gradient(circle at 40% 40%, rgba(255,122,24,0.45), transparent 60%);}
.glow.g2{right:-260px; bottom:-260px; background: radial-gradient(circle at 40% 40%, rgba(255,154,61,0.35), transparent 60%); animation-duration: 16s;}

@keyframes drift{
  from{transform: translate(0,0) scale(1);}
  to{transform: translate(110px,80px) scale(1.08);}
}
@keyframes spin{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
@keyframes pulse{
  0%,100%{filter: blur(1px); opacity:0.75;}
  50%{filter: blur(3px); opacity:0.95;}
}
.noise{
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.08;
  pointer-events:none;
}

.layout{position:relative; z-index:1; height:100%; display:flex;}
.sidebar{
  width:270px; min-width:270px;
  padding:18px 14px;
  border-right:1px solid var(--border);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  display:flex; flex-direction:column;
}
.brand{display:flex; align-items:center; gap:10px; padding:10px 10px 14px;}
.dot{width:10px; height:10px; border-radius:999px; background:var(--orange); box-shadow:0 0 18px rgba(255,122,24,.55);}
.brand-title{font-weight:700; letter-spacing:.3px;}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px;}

.session{padding:0 10px 12px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  color:var(--muted);
  font-size:12px;
}
.search{padding:0 10px 14px;}
.search input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:var(--text);
  outline:none;
}
.search input::placeholder{color:rgba(255,255,255,0.35);}

.nav{display:flex; flex-direction:column; gap:6px; padding:0 6px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  border:1px solid transparent;
  background: transparent;
  color:rgba(255,255,255,0.85);
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  transition: .18s ease;
}
.nav-item img{
  width:18px; height:18px;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
  opacity:.85;
}
.nav-item:hover{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.05);
}
.nav-item.active{
  background: rgba(255,122,24,0.12);
  border-color: rgba(255,122,24,0.35);
}
.nav-item.active img{
  filter: invert(62%) sepia(76%) saturate(2190%) hue-rotate(351deg) brightness(105%) contrast(101%);
  opacity:1;
}

.sidebar-footer{padding:10px 8px 6px; border-top:1px solid var(--border);}
.userline{display:flex; align-items:center; gap:10px; padding:10px; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);}
.avatar{width:34px; height:34px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); background-size:cover; background-position:center;}
.usertext{flex:1; min-width:0;}
.uname{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.usub{font-size:11px; color:var(--muted);}
.role{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,122,24,0.35); background:rgba(255,122,24,0.10); color:rgba(255,200,170,0.95);}

.footer-actions{display:flex; gap:10px; padding:10px 2px 0;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,122,24,0.35);
  background: rgba(255,122,24,0.16);
  color:rgba(255,245,235,0.95);
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  transition:.18s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,122,24,0.22);}
.btn.ghost{border-color: var(--border); background: rgba(255,255,255,0.04); color:rgba(255,255,255,0.9);}
.btn.ghost:hover{background: rgba(255,255,255,0.06);}
.btn.danger{border-color: rgba(255,80,80,0.35); background: rgba(255,80,80,0.14);}
.btn.danger:hover{background: rgba(255,80,80,0.22);}

.btn.small{padding:8px 12px; border-radius:12px; font-size:12px;}
.small{font-size:12px;}

.main{flex:1; padding:22px; overflow:auto;}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px;}
.topbar-actions{display:flex; align-items:center; gap:12px;}
.meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.75);
  font-size:12px;
}
.badge.subtle{
  border-color: rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.6);
}

.banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:14px;
  border:1px solid rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.1);
}
.banner-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,80,80,0.9);
  box-shadow:0 0 14px rgba(255,80,80,0.5);
}
.banner-title{font-weight:700;}
.banner-sub{font-size:12px; color:rgba(255,255,255,0.7); margin-top:2px;}
h1{margin:0; font-size:28px; letter-spacing:.2px;}
p{margin:6px 0 0; color:var(--muted);}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:16px;
  backdrop-filter: blur(10px);
}
.card.wide{grid-column: span 4;}
.hero-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  background:
    radial-gradient(600px 200px at 10% 0%, rgba(255,122,24,0.12), transparent 60%),
    rgba(0,0,0,0.35);
  border:1px solid rgba(255,122,24,0.2);
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.hero-title{
  font-size: 24px;
  font-weight:700;
  margin-top:8px;
}
.hero-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top:6px;
}
.hero-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:220px;
}
.meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.meta-label{font-size:11px; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:.7px;}
.meta-value{font-weight:700; font-size:13px;}
.meta-inline{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.btn.tiny{padding:6px 10px; border-radius:10px; font-size:11px;}

.spark{
  margin-top:10px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.spark svg{width:100%; height:100%;}

.stat .label{color:var(--muted); font-weight:700; font-size:12px;}
.stat .value{font-size:22px; font-weight:700; margin-top:10px;}
.stat-sub{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,0.6);
}

.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.title{font-weight:700;}
.muted{color:var(--muted); font-size:12px; margin-top:4px;}

.toolbar{display:flex; gap:10px; align-items:center;}
.input{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.35);
  color:var(--text);
  outline:none;
}
.input::placeholder{color:rgba(255,255,255,0.35);}

.table{border:1px solid rgba(255,255,255,0.06); border-radius:14px; overflow:hidden;}
.thead, .rowline{display:grid; gap:10px; padding:10px 12px;}
.table.cols-4 .thead,
.table.cols-4 .rowline{grid-template-columns: 1.1fr 1.6fr 1fr .8fr;}
.table.cols-3 .thead,
.table.cols-3 .rowline{grid-template-columns: 1.6fr 1.2fr .8fr;}
.thead{background: rgba(255,255,255,0.03); font-size:11px; color:rgba(255,255,255,0.65); font-weight:700;}
.tbody{padding:10px 12px;}
.rowline{border-bottom:1px solid rgba(255,255,255,0.05);}
.rowline:last-child{border-bottom:0;}
.rowline.selectable{cursor:pointer;}
.rowline.selectable:hover{background: rgba(255,255,255,0.03);}
.rowline.active{background: rgba(255,122,24,0.12);}
.right{text-align:right;}
.empty{
  color:rgba(255,255,255,0.55);
  font-size:13px;
  padding:12px 0;
  display:flex;
  align-items:center;
  gap:12px;
}
.empty-illu{
  width:28px;
  height:28px;
  border-radius:10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,122,24,0.5), transparent 60%),
    rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  font-size:11px;
  color:rgba(255,255,255,0.75);
  text-transform:capitalize;
}
.status-pill.success{border-color: rgba(80,200,120,0.35); background: rgba(80,200,120,0.15); color:rgba(170,255,210,0.9);}
.status-pill.warn{border-color: rgba(255,200,80,0.35); background: rgba(255,200,80,0.12); color:rgba(255,235,190,0.9);}
.status-pill.bad{border-color: rgba(255,80,80,0.35); background: rgba(255,80,80,0.12); color:rgba(255,200,200,0.9);}

.actions{display:flex; gap:10px; flex-wrap:wrap;}
.placeholder{padding:16px; color:rgba(255,255,255,0.55); border:1px dashed rgba(255,255,255,0.10); border-radius:14px;}
.settings{display:flex; flex-direction:column; gap:12px;}
.settings .row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03);}
.audit-list{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,0.25);
}
.audit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:12px;
}
.audit-row:last-child{border-bottom:0;}
.audit-action{font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:11px;}
.audit-meta{color:rgba(255,255,255,0.6);}

.toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:80;
}
.toast{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,10,0.9);
  color:rgba(255,255,255,0.85);
  font-size:12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  transform: translateY(6px);
  opacity:0;
  animation: toast-in .2s ease forwards;
}
.toast.success{border-color: rgba(80,200,120,0.35);}
.toast.error{border-color: rgba(255,80,80,0.35);}
@keyframes toast-in{
  to{transform: translateY(0); opacity:1;}
}
.charts-card{padding:16px;}
.chart-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.chart-controls{
  display:flex;
  gap:8px;
  margin:8px 0 12px;
  align-items:center;
  flex-wrap:wrap;
}
.chart-zoom{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-size:12px;
  color:rgba(255,255,255,0.6);
}
.chart-zoom input[type="range"]{
  width:140px;
  accent-color: var(--orange);
}
.chart-range.active{
  border-color: rgba(255,122,24,0.45);
  background: rgba(255,122,24,0.18);
  color: rgba(255,235,215,0.95);
}
.chart-box{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  position:relative;
}
.chart-title{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:8px;
}
canvas{width:100%; display:block;}
.chart-tooltip{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.65);
  font-size:11px;
  color:rgba(255,255,255,0.8);
  pointer-events:none;
  opacity:0;
  transition: opacity .12s ease;
}
.chart-tooltip.show{opacity:1;}
.chart-legend{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,0.65);
}
.legend-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}
.legend-dot.revenue{background: rgba(255,122,24,0.9);}
.legend-dot.orders{background: rgba(120,200,255,0.9);}

.chart-insights{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.insight{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px;
  background: rgba(255,255,255,0.03);
}
.insight-label{
  font-size:11px;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  letter-spacing:.7px;
}
.insight-value{
  margin-top:6px;
  font-weight:700;
  font-size:13px;
}

.tickets-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:16px;
}
.ticket-detail{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  min-height: 420px;
}
.ticket-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ticket-title{font-weight:700;}
.ticket-meta{font-size:12px; color:rgba(255,255,255,0.6);}
.ticket-body{margin-top:12px; display:flex; flex-direction:column; gap:10px; flex:1;}
.ticket-summary{font-size:12px; color:rgba(255,255,255,0.75);}
.ticket-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.ticket-avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  background-size:cover;
  background-position:center;
}
.ticket-user-name{font-weight:700;}
.ticket-user-sub{font-size:12px; color:rgba(255,255,255,0.6);}
.ticket-participants{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:11px;
  color:rgba(255,255,255,0.7);
}
.ticket-search{
  display:flex;
  gap:8px;
  align-items:center;
}
.ticket-chip{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.ticket-transcript{
  flex:1;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  overflow:hidden;
  background: rgba(0,0,0,0.4);
}
.ticket-transcript iframe{
  width:100%;
  height:100%;
  border:0;
  background: #0a0a0a;
}
.ticket-actions{display:flex; gap:10px; margin-top:12px;}
.ticket-type-stats{
  margin-top:14px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,0.03);
}
.ticket-type-title{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:8px;
}
.ticket-type-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ticket-type-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  font-size:12px;
  color:rgba(255,255,255,0.8);
}
.access-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.access-item{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,0.04);
}
.access-label{
  font-size:11px;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  letter-spacing:.7px;
}
.access-value{
  margin-top:8px;
  font-weight:700;
}

.hidden{display:none;}

.loading .stat .value,
.loading .meta-value,
.loading .access-value{
  color: transparent;
  background: rgba(255,255,255,0.08);
  border-radius:8px;
}
.loading .stat .value{height:20px;}
.loading .meta-value,
.loading .access-value{height:14px;}
.loading .spark{opacity:0.35;}

.skeleton-line{
  height:10px;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position: 0% 0;}
  100%{background-position: -200% 0;}
}

.mobile-nav{
  display:none;
  position:fixed;
  inset:auto 0 0 0;
  padding:10px 12px 14px;
  background: rgba(0,0,0,0.8);
  border-top:1px solid var(--border);
  backdrop-filter: blur(12px);
  gap:8px;
  z-index:60;
}
.mobile-nav .nav-item{
  flex:1;
  justify-content:center;
  font-size:11px;
  padding:8px 6px;
}

@media (max-width: 1100px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .card.wide{grid-column: span 2;}
  .hero-card{flex-direction:column;}
  .hero-meta{width:100%;}
  .access-grid{grid-template-columns: 1fr;}
  .chart-grid{grid-template-columns: 1fr;}
  .chart-insights{grid-template-columns: repeat(2, minmax(0,1fr));}
  .tickets-grid{grid-template-columns: 1fr;}
}
@media (max-width: 980px){
  .sidebar{display:none;}
  .grid{grid-template-columns: 1fr;}
  .card.wide{grid-column: span 1;}
  .topbar{flex-direction:column; align-items:flex-start;}
  .topbar-actions{width:100%; justify-content:space-between;}
  .main{padding-bottom:92px;}
  .mobile-nav{display:flex;}
}