/* Panel-only modern tactical layer (v3). Neutral/warm charcoal + orange. Scoped to #app-view. */
:root {
  --pst-bg: #08080a;        /* neutral near-black, no blue bias */
  --pst-bg-2: #0d0d0f;
  --pst-surface: rgba(19, 19, 21, 0.92);
  --pst-surface-2: rgba(26, 25, 27, 0.86);
  --pst-line: rgba(255, 255, 255, 0.08);
  --pst-line-hot: rgba(255, 92, 26, 0.30);
  --pst-orange: #ff5c1a;
  --pst-orange-2: #ff8a3d;
  --pst-red: #ff4d35;
  --pst-green: #43d17c;
  --pst-yellow: #f5b642;
  --pst-text: #f6f4f1;      /* warm white, not blue-white */
  --pst-muted: #a39c93;     /* warm gray */
  --pst-muted-2: #6f6a62;
  --pst-radius: 9px;        /* sharper = more tactical */
  --pst-radius-sm: 6px;
  --pst-shadow: 0 18px 45px rgba(0, 0, 0, 0.40);
}

/* Background + tactical grid */
body.app-shell {
  background:
    radial-gradient(circle at 15% -2%, rgba(255, 92, 26, 0.11), transparent 30rem),
    radial-gradient(circle at 92% 6%, rgba(255, 138, 61, 0.05), transparent 34rem),
    linear-gradient(180deg, var(--pst-bg) 0%, var(--pst-bg-2) 55%, var(--pst-bg) 100%) !important;
  color: var(--pst-text) !important;
}
body.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 92, 26, 0.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 92, 26, 0.028) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.12));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.12));
}

/* ===== Sidebar ===== */
#app-view .sidebar {
  background: linear-gradient(180deg, rgba(11,11,13,.97), rgba(8,8,10,.94)) !important;
  border-right: 1px solid rgba(255, 92, 26, 0.12) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.02) !important;
}
#app-view .sidebar-header,
#app-view .ig-tactical-sidebar__head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#app-view .sidebar-brand,
#app-view .ig-tactical-sidebar__title {
  color: var(--pst-text) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#app-view .nav-section-title {
  color: var(--pst-muted-2) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
}
#app-view .nav-item {
  position: relative;
  margin: 2px 10px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: var(--pst-radius-sm) !important;
  color: rgba(246, 244, 241, 0.64) !important;
  background: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
#app-view .nav-item .nav-icon { opacity: .8 !important; }
#app-view .nav-item:hover {
  color: var(--pst-text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
#app-view .sidebar .nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255, 92, 26, 0.22), rgba(255, 92, 26, 0.03)) !important;
  border-color: rgba(255, 92, 26, 0.30) !important;
  box-shadow: inset 3px 0 0 var(--pst-orange) !important;
}
#app-view .sidebar .nav-item.active::before { display: none !important; }
#app-view .sidebar .nav-item.active .nav-icon { opacity: 1 !important; color: var(--pst-orange-2) !important; }

/* ===== Page header / titles ===== */
#app-view .page-header {
  margin-bottom: 1.1rem !important;
  padding-bottom: .9rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
#app-view .page-title,
#app-view h1 {
  color: var(--pst-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}
#app-view .page-subtitle,
#app-view .text-muted { color: var(--pst-muted) !important; }

/* ===== Cards ===== */
#app-view .card,
#app-view .stat-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--pst-surface) !important;
  border: 1px solid var(--pst-line) !important;
  border-radius: var(--pst-radius) !important;
  box-shadow: var(--pst-shadow) !important;
}
/* tactical corner bracket (top-right) on cards */
#app-view .card::after {
  content: "" !important;
  position: absolute !important;
  top: 8px; right: 8px;
  width: 12px; height: 12px;
  border-top: 2px solid rgba(255, 92, 26, 0.45) !important;
  border-right: 2px solid rgba(255, 92, 26, 0.45) !important;
  opacity: .7 !important;
  pointer-events: none !important;
}
#app-view .card:hover {
  border-color: rgba(255, 92, 26, 0.22) !important;
}
#app-view .stat-card {
  overflow: hidden !important;
  transition: border-color .15s ease, transform .15s ease !important;
}
#app-view .stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 92, 26, 0.30) !important;
}
#app-view .stat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 2px !important;
  background: linear-gradient(90deg, var(--pst-orange), transparent 72%) !important;
  opacity: .9 !important;
}
#app-view .stat-card::after { display: none !important; }
#app-view .card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#app-view .card-title {
  color: var(--pst-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}
#app-view .card-title::before {
  content: "// " !important;
  color: var(--pst-orange) !important;
  font-weight: 800 !important;
}
#app-view .stat-value { color: var(--pst-text) !important; font-weight: 850 !important; }
#app-view .stat-label {
  color: var(--pst-muted) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: .68rem !important;
}
#app-view .stat-icon.blue   { color: var(--pst-orange-2) !important; }
#app-view .stat-icon.green  { color: var(--pst-green) !important; }
#app-view .stat-icon.red    { color: var(--pst-red) !important; }
#app-view .stat-icon.yellow { color: var(--pst-yellow) !important; }

/* ===== Bars / progress ===== */
#app-view .progress,
#app-view .bar-track,
#app-view [class*="track"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 2px !important;
}
#app-view .bar-fill,
#app-view .progress-bar,
#app-view .progress > span {
  background: linear-gradient(90deg, var(--pst-orange), var(--pst-orange-2)) !important;
  box-shadow: 0 0 12px rgba(255, 92, 26, 0.22) !important;
  border-radius: 2px !important;
}

/* ===== Tables ===== */
#app-view .data-table th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--pst-muted) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}
#app-view .data-table td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(246, 244, 241, 0.86) !important;
}
#app-view .data-table tbody tr:hover td {
  background: rgba(255, 92, 26, 0.045) !important;
}

/* ===== Buttons ===== */
#app-view .btn {
  border-radius: 6px !important;
  font-weight: 740 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .78rem !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}
#app-view .btn:hover { transform: translateY(-1px) !important; }
#app-view .btn-primary {
  color: #160904 !important;
  background: linear-gradient(180deg, #ff7b39 0%, var(--pst-orange) 100%) !important;
  border: 1px solid rgba(255, 138, 61, 0.50) !important;
  box-shadow: 0 10px 24px rgba(255, 92, 26, 0.20) !important;
}
#app-view .btn-secondary,
#app-view .btn-outline,
#app-view .btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: var(--pst-text) !important;
}
#app-view .btn-secondary:hover,
#app-view .btn-outline:hover,
#app-view .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 92, 26, 0.26) !important;
}

/* ===== Forms ===== */
#app-view input,
#app-view select,
#app-view textarea,
#app-view .form-control {
  background: rgba(6, 6, 8, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: var(--pst-text) !important;
  border-radius: 6px !important;
}
#app-view input:focus,
#app-view select:focus,
#app-view textarea:focus,
#app-view .form-control:focus {
  outline: 2px solid rgba(255, 92, 26, 0.22) !important;
  border-color: rgba(255, 92, 26, 0.45) !important;
}

/* ===== Badges ===== */
#app-view .badge,
#app-view .pill,
#app-view .tag {
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: .68rem !important;
}

/* ===== Scrollbars ===== */
#app-view *::-webkit-scrollbar { width: 10px; height: 10px; }
#app-view *::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
#app-view *::-webkit-scrollbar-thumb {
  background: rgba(255, 92, 26, .45);
  border: 2px solid rgba(6, 6, 8, .85);
  border-radius: 2px;
}
#app-view *::-webkit-scrollbar-thumb:hover { background: rgba(255, 92, 26, .65); }

@media (max-width: 860px) {
  body.app-shell::before { background-size: 40px 40px; opacity: .32; }
  #app-view .card::after { display: none !important; }
}
/* ===== Override: remove filled background behind stat cards ===== */
#app-view .stat-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#app-view .stat-card:hover {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 92, 26, 0.26) !important;
}
/* ===== Override: remove full-width band/panel behind content (stat-card row) ===== */
#app-view .main-content {
  background: transparent !important;
}
#app-view .page-content {
  background: transparent !important;
}
#app-view .stats-grid {
  background: transparent !important;
}
/* ===== Override: strip the frame/box behind stat cards (keep only content) ===== */
#app-view .stat-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.35rem 0.25rem !important;
}
#app-view .stat-card::before,
#app-view .stat-card::after { display: none !important; }
#app-view .stat-card:hover {
  background: transparent !important;
  border: none !important;
  transform: none !important;
}
/* ===== Override: kill any gray panel/wrapper behind the stat row (id-level specificity) ===== */
body.app-shell #app-view .app-layout,
body.app-shell #app-view .main-content,
body.app-shell #app-view #page-content,
body.app-shell #app-view .page-content,
body.app-shell #app-view .stats-grid {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Absolutely ensure stat cards stay frameless */
body.app-shell #app-view .stat-card,
body.app-shell #app-view .stats-grid .stat-card {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
body.app-shell #app-view .stat-card::before,
body.app-shell #app-view .stat-card::after { display: none !important; content: none !important; }
/* ============================================================
   v4 — Modern tactical sidebar + shell (scoped, high specificity)
   ============================================================ */

/* ---- Sidebar container ---- */
body.app-shell #app-view .sidebar {
  background: linear-gradient(180deg, rgba(13,13,16,.99), rgba(8,8,10,.99)) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset -1px 0 0 rgba(255,92,26,.10), 2px 0 26px rgba(0,0,0,.45) !important;
  padding: 0 !important;
}

/* ---- Sidebar header / brand ---- */
body.app-shell #app-view .sidebar-header {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body.app-shell #app-view .sidebar-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--pst-orange);
  box-shadow: 0 0 10px rgba(255,92,26,.5);
}
body.app-shell #app-view .ig-tactical-sidebar__logo img {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(255,92,26,.25), 0 6px 16px rgba(0,0,0,.5) !important;
}
body.app-shell #app-view .ig-tactical-sidebar__title {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 !important;
  font-size: 1.02rem !important; font-weight: 850 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  color: var(--pst-text) !important;
}
body.app-shell #app-view .ig-tactical-badge {
  font-size: .54rem !important; font-weight: 800 !important; letter-spacing: .12em !important;
  padding: 2px 6px !important; border-radius: 4px !important;
  background: rgba(255,92,26,.16) !important; color: var(--pst-orange-2) !important;
  border: 1px solid rgba(255,92,26,.32) !important;
}
body.app-shell #app-view .ig-tactical-sidebar__sub {
  display: flex !important; align-items: center !important; gap: 6px !important;
  margin-top: 3px !important;
  font-size: .62rem !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--pst-muted-2) !important;
}
body.app-shell #app-view .ig-status-led {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: var(--pst-green) !important;
  box-shadow: 0 0 8px var(--pst-green) !important;
  display: inline-block !important;
  animation: pst-led 2.4s ease-in-out infinite;
}
@keyframes pst-led { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---- Nav ---- */
body.app-shell #app-view .sidebar-nav { padding: 12px 0 !important; }
body.app-shell #app-view .nav-section { padding: 0 !important; margin: 2px 0 12px !important; }
body.app-shell #app-view .nav-section-title {
  padding: 8px 20px 6px !important; margin: 0 !important;
  font-size: .6rem !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--pst-muted-2) !important; font-weight: 800 !important;
}
body.app-shell #app-view .nav-item {
  position: relative;
  display: flex !important; align-items: center !important; gap: 11px !important;
  margin: 1px 10px !important; padding: 9px 12px !important;
  border-radius: 8px !important; border: 1px solid transparent !important;
  color: rgba(244,246,250,.60) !important;
  font-size: .82rem !important; font-weight: 600 !important; letter-spacing: .005em !important;
  text-transform: none !important; cursor: pointer;
  transition: color .15s ease, background .15s ease, padding-left .15s ease, border-color .15s ease !important;
}
body.app-shell #app-view .nav-item .nav-icon {
  width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  opacity: .68 !important;
  transition: opacity .15s ease, color .15s ease !important;
}
body.app-shell #app-view .nav-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,.045) !important;
  padding-left: 16px !important;
}
body.app-shell #app-view .nav-item:hover .nav-icon { opacity: 1 !important; color: var(--pst-orange-2) !important; }
body.app-shell #app-view .sidebar .nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255,92,26,.20), rgba(255,92,26,.015)) !important;
  border-color: rgba(255,92,26,.22) !important;
  box-shadow: none !important;
}
body.app-shell #app-view .sidebar .nav-item.active::before {
  content: "" !important; display: block !important;
  position: absolute !important; left: -1px !important; top: 6px !important; bottom: 6px !important;
  width: 3px !important; border-radius: 0 3px 3px 0 !important;
  background: var(--pst-orange) !important;
  box-shadow: 0 0 10px rgba(255,92,26,.65) !important;
}
body.app-shell #app-view .sidebar .nav-item.active .nav-icon { opacity: 1 !important; color: var(--pst-orange) !important; }
body.app-shell #app-view .nav-item .notification-badge {
  background: var(--pst-orange) !important; color: #160904 !important;
  font-weight: 800 !important; border-radius: 999px !important;
}

/* ---- Sidebar footer / user ---- */
body.app-shell #app-view .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 10px 0 12px !important;
}
body.app-shell #app-view .sidebar-external-links a { color: var(--pst-muted-2) !important; transition: color .15s; }
body.app-shell #app-view .sidebar-external-links a:hover { color: var(--pst-orange-2) !important; }
body.app-shell #app-view .sidebar-user {
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 6px 10px 0 !important; padding: 9px 11px !important;
  border-radius: 10px !important; border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.02) !important;
  transition: border-color .15s ease, background .15s ease !important;
}
body.app-shell #app-view .sidebar-user:hover {
  border-color: rgba(255,92,26,.28) !important;
  background: rgba(255,92,26,.05) !important;
}
body.app-shell #app-view .user-avatar {
  width: 34px !important; height: 34px !important; border-radius: 8px !important;
  background: linear-gradient(145deg, var(--pst-orange-2), #c43d10) !important;
  color: #160904 !important; font-weight: 850 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body.app-shell #app-view .user-name { color: var(--pst-text) !important; font-weight: 700 !important; font-size: .82rem !important; }
body.app-shell #app-view .user-role {
  color: var(--pst-muted) !important; font-size: .64rem !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
}

/* ---- Top header bar ---- */
body.app-shell #app-view .main-header,
body.app-shell #app-view .ig-tactical-header {
  background: rgba(8,8,10,.72) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
body.app-shell #app-view .ig-tactical-header__kicker {
  display: flex !important; align-items: center !important; gap: 7px !important;
  font-size: .62rem !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--pst-muted-2) !important;
}
body.app-shell #app-view .ig-tactical-header__page,
body.app-shell #app-view #page-title {
  color: var(--pst-text) !important; font-weight: 800 !important; letter-spacing: -.01em !important;
}
body.app-shell #app-view .header-notify-btn .notification-badge {
  background: var(--pst-orange) !important; color: #160904 !important; font-weight: 800 !important;
}

/* ---- Page header polish (all views) ---- */
body.app-shell #app-view .page-header { position: relative; }
body.app-shell #app-view .page-header .page-title::before {
  content: "" ;
  display: inline-block;
  width: 3px; height: 1em;
  margin-right: 10px;
  vertical-align: -2px;
  background: var(--pst-orange);
  box-shadow: 0 0 8px rgba(255,92,26,.5);
}
/* ============================================================
   v5 — Restyle top stat cards (consistent with content panels)
   Supersedes the earlier "strip frame" overrides.
   ============================================================ */
body.app-shell #app-view .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 1.15rem !important;
  background: transparent !important;
}
body.app-shell #app-view .stat-card,
body.app-shell #app-view .stats-grid .stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 17px 18px !important;
  min-height: 84px !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)), var(--pst-surface) !important;
  border: 1px solid var(--pst-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
body.app-shell #app-view .stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,92,26,.28) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
/* orange top hairline */
body.app-shell #app-view .stat-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--pst-orange), transparent 72%) !important;
  opacity: .9 !important;
}
body.app-shell #app-view .stat-card::after { display: none !important; content: none !important; }

/* Icon tile */
body.app-shell #app-view .stat-card .stat-icon {
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 11px !important;
  background: rgba(255,92,26,.10) !important;
  border: 1px solid rgba(255,92,26,.18) !important;
  margin: 0 !important;
}
body.app-shell #app-view .stat-card .stat-icon svg {
  width: 21px !important; height: 21px !important;
}
body.app-shell #app-view .stat-card .stat-icon.blue   { color: var(--pst-orange-2) !important; background: rgba(255,92,26,.10) !important; border-color: rgba(255,92,26,.20) !important; }
body.app-shell #app-view .stat-card .stat-icon.green  { color: var(--pst-green)  !important; background: rgba(67,209,124,.10) !important; border-color: rgba(67,209,124,.22) !important; }
body.app-shell #app-view .stat-card .stat-icon.red    { color: var(--pst-red)    !important; background: rgba(255,77,53,.10)  !important; border-color: rgba(255,77,53,.22)  !important; }
body.app-shell #app-view .stat-card .stat-icon.yellow { color: var(--pst-yellow) !important; background: rgba(245,182,66,.10) !important; border-color: rgba(245,182,66,.22) !important; }

/* Value + label */
body.app-shell #app-view .stat-card .stat-body {
  display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important;
}
body.app-shell #app-view .stat-card .stat-value {
  font-size: 1.6rem !important; font-weight: 850 !important; line-height: 1.02 !important;
  color: var(--pst-text) !important; letter-spacing: -.01em !important;
}
body.app-shell #app-view .stat-card .stat-label {
  font-size: .66rem !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--pst-muted) !important;
}

@media (max-width: 900px) {
  body.app-shell #app-view .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 540px) {
  body.app-shell #app-view .stats-grid { grid-template-columns: 1fr !important; }
}
/* ===== Center the hCaptcha widget on the auth (login/register) screen ===== */
#login-view .captcha-container:has(iframe) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
#login-view .captcha-container iframe { margin: 0 auto !important; }
/* ===== v1.5.23 detection-report + webhook modal ===== */

#app-view .dr-nextrun{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-secondary,#9aa);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:.35rem .7rem;border-radius:6px;margin-bottom:1rem}
#app-view .dr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin-bottom:1.25rem}
#app-view .dr-tile{display:flex;align-items:center;gap:.75rem;background:var(--surface-1,#15161a);border:1px solid rgba(255,255,255,.06);border-top:2px solid rgba(255,92,26,.5);border-radius:8px;padding:.85rem .9rem}
#app-view .dr-tile-icon{width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,92,26,.1);color:var(--accent,#ff5c1a);flex-shrink:0}
#app-view .dr-tile-icon.green{background:rgba(61,214,140,.12);color:var(--success,#3dd68c)}
#app-view .dr-tile-icon.red{background:rgba(255,77,90,.12);color:var(--danger,#ff4d5a)}
#app-view .dr-tile-icon.yellow{background:rgba(255,176,32,.12);color:var(--warning,#ffb020)}
#app-view .dr-tile-icon.neutral{background:rgba(255,255,255,.06);color:var(--text-secondary,#9aa)}
#app-view .dr-tile-value{font-size:1.45rem;font-weight:800;line-height:1;letter-spacing:-.5px}
#app-view .dr-tile-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary,#8b8f98);margin-top:.3rem}
#app-view .dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
#app-view .dr-card{background:var(--surface-1,#15161a);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:1rem 1.1rem;transition:border-color .15s,transform .15s}
#app-view .dr-card:hover{border-color:rgba(255,92,26,.35);transform:translateY(-2px)}
#app-view .dr-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:.85rem}
#app-view .dr-card-title{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem}
#app-view .dr-card-date{font-size:.7rem;color:var(--text-secondary,#8b8f98)}
#app-view .dr-card-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.85rem}
#app-view .dr-metric{display:flex;flex-direction:column;gap:.25rem;text-align:center;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:7px;padding:.55rem .25rem}
#app-view .dr-metric-v{font-size:1.15rem;font-weight:800;line-height:1}
#app-view .dr-metric-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary,#8b8f98)}
#app-view .dr-card-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.82rem;padding:.5rem 0;border-top:1px dashed rgba(255,255,255,.06)}
#app-view .dr-row-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-secondary,#9aa);font-weight:600}
#app-view .dr-row-val{color:var(--text-primary,#eee);font-weight:600}
#app-view .dr-card-mods{padding-top:.6rem;border-top:1px dashed rgba(255,255,255,.06)}
#app-view .dr-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
#app-view .dr-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:.2rem .55rem;color:var(--text-secondary,#cfd2d6)}
#app-view .dr-chip-n{font-weight:800;color:var(--accent,#ff5c1a)}
.wh-form{display:flex;flex-direction:column;gap:1.1rem}
.wh-field{display:flex;flex-direction:column;gap:.4rem}
.wh-req{color:var(--accent,#ff5c1a)}
.wh-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.wh-hint{font-size:.72rem;color:var(--text-secondary,#8b8f98)}
.wh-form .form-label svg,.wh-form .form-label .ig-lucide{vertical-align:-2px;margin-right:.15rem;color:var(--accent,#ff5c1a)}
.wh-events-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.wh-events-tools{display:flex;gap:.4rem}
.wh-tool{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary,#cfd2d6);border-radius:5px;padding:.2rem .55rem;cursor:pointer}
.wh-tool:hover{border-color:var(--accent,#ff5c1a);color:var(--accent,#ff5c1a)}
.wh-events{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.wh-group{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:.6rem .65rem}
.wh-group-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary,#8b8f98);margin-bottom:.5rem;font-weight:700}
.wh-event{display:flex;align-items:center;gap:.5rem;padding:.32rem .15rem;cursor:pointer;font-size:.82rem;color:var(--text-secondary,#cfd2d6);position:relative}
.wh-event input{position:absolute;opacity:0;width:0;height:0}
.wh-event-box{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0;transition:all .12s}
.wh-event.is-on .wh-event-box{background:var(--accent,#ff5c1a);border-color:var(--accent,#ff5c1a);color:#0b0c0e}
.wh-event.is-on{color:var(--text-primary,#fff)}
@media(max-width:560px){.wh-events{grid-template-columns:1fr}}
#app-view .steam-id-actions{position:relative;z-index:3}
#app-view .steam-id-copy,#app-view .steam-id-ext{pointer-events:auto;cursor:pointer}

/* ===== v1.5.24 settings prefs ===== */

body.ig-compact #app-view .card-body{padding:.85rem 1rem}
body.ig-compact #app-view .data-table th,body.ig-compact #app-view .data-table td{padding-top:.45rem;padding-bottom:.45rem}
body.ig-compact #app-view .page-content{font-size:.94rem}
body.ig-compact #app-view .dr-tile,body.ig-compact #app-view .stat-card{padding:.6rem .7rem}
body.ig-reduce-motion #app-view *,body.ig-reduce-motion .modal,body.ig-reduce-motion .toast{transition:none!important;animation:none!important}
body.ig-reduce-motion .changelog-item,body.ig-reduce-motion .changelog-entries{opacity:1!important;transform:none!important}
.profile-prefs{display:flex;flex-direction:column;gap:.1rem}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;margin:0}
.pref-row:last-child{border-bottom:none}
.pref-title{display:block;font-weight:600;font-size:.9rem;color:var(--text-primary,#eee)}
.pref-sub{display:block;font-size:.74rem;color:var(--text-secondary,#8b8f98);margin-top:.15rem}
.pref-switch{position:relative;flex-shrink:0;width:42px;height:24px}
.pref-switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pref-slider{position:absolute;inset:0;background:rgba(255,255,255,.14);border-radius:24px;transition:.18s}
.pref-slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s}
.pref-switch input:checked+.pref-slider{background:var(--accent,#ff5c1a)}
.pref-switch input:checked+.pref-slider::before{transform:translateX(18px)}
.profile-copy{display:inline-flex;align-items:center;gap:.45rem}
.profile-copy-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary,#9aa);border-radius:5px;padding:.12rem .32rem;cursor:pointer;display:inline-flex;align-items:center;line-height:1}
.profile-copy-btn:hover{border-color:var(--accent,#ff5c1a);color:var(--accent,#ff5c1a)}

/* ===== v1.5.25 server-card status placement ===== */

#app-view .server-card-header{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:.6rem !important}
#app-view .server-card-title-block{flex:1 1 auto !important;min-width:0 !important}
#app-view .server-name-row{display:flex;align-items:center;gap:.5rem;min-width:0;flex-wrap:wrap}
#app-view .server-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#app-view .server-card-header > .badge{flex:0 0 auto;margin-top:3px;white-space:nowrap;align-self:flex-start}

/* ===== v1.5.26 logo clean (panel wins last) ===== */

body.app-shell #app-view .ig-tactical-sidebar__logo,
body.app-shell #app-view .sidebar-logo {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
}
body.app-shell #app-view .ig-tactical-sidebar__logo img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}