/* ═══════════════════════════════════════════════════════════════
   MEETWAY FUTURISTIC CYBER ADMIN DESIGN SYSTEM
   Hard-coded Cyberpunk Design Tokens & Ambient Glowing Glass
═══════════════════════════════════════════════════════════════ */

:root {
  --cyan:    #00F0FF;
  --green:   #00FF66;
  --purple:  #9933FF;
  --red:     #FF3333;
  --amber:   #FFB800;
  
  --bg:      #0B0F19;
  --bg-deep: #070A12;
  --glass:   rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-cyber: rgba(0, 240, 255, 0.12);

  --text:     #F0F4FF;
  --text-dim: rgba(240, 244, 255, 0.65);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-cyan:   0 0 30px rgba(0, 240, 255, 0.25);
  --shadow-green:  0 0 30px rgba(0, 255, 102, 0.25);
  --shadow-purple: 0 0 30px rgba(153, 51, 255, 0.25);
  --shadow-red:    0 0 30px rgba(255, 51, 51, 0.25);

  --font: 'Plus Jakarta Sans', 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

svg:not(.svg-sprite) {
  max-width: 100%;
  vertical-align: middle;
  flex-shrink: 0;
}

.svg-sprite {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image: 
    radial-gradient(ellipse 80% 80% at 50% -20%, rgba(0, 240, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(153, 51, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 50%, rgba(0, 255, 102, 0.08), transparent 70%),
    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 .6rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
h1 {
  font-size: 1.85rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-right: 0.15em;
  max-width: 100%;
  word-break: keep-all;
}
h2 {
  font-size: 1.3rem;
  color: var(--text);
}
h3 { font-size: 1.05rem; }
p { margin: 0 0 .85rem; }
code, pre { font-family: var(--mono); font-size: .875em; }

a {
  color: var(--cyan);
  text-decoration: none;
  transition: all 0.2s ease;
}
a:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}

/* Keyboard Accessibility */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-cyan);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  padding: .75rem 1.25rem;
  z-index: 100;
  font-weight: 800;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-cyan);
}
.skip-link:focus { left: 1rem; top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Layout & Top Nav Bar */

.layout {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.top-nav-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--cyan);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-toggle-btn:hover {
  background: rgba(0,240,255,0.08);
  border-color: rgba(0,240,255,0.3);
}

/* ---- Header Search Trigger (click-to-open command palette) ---- */
.header-search-trigger {
  flex: 1;
  max-width: 32rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 42px;
  padding: 0 1rem 0 1rem;
  border-radius: 100px;
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.18);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.header-search-trigger:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12), inset 0 0 20px rgba(0, 240, 255, 0.04);
  background: rgba(7, 10, 18, 0.95);
}
.search-trigger-icon { font-size: .9rem; opacity: .6; }
.search-trigger-placeholder {
  flex: 1;
  font-size: .84rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-trigger-shortcut {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  opacity: .55;
}
.search-trigger-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  line-height: 1.5;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-left: auto;
}

/* ---- Provider Status Badge ---- */
.provider-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.25);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.15);
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.status-text { font-size: .75rem; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ---- Quick Action Buttons ---- */
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.quick-action-btn:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25), 0 4px 12px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  color: #fff;
  text-shadow: 0 0 10px rgba(0,240,255,0.6);
}
.quick-action-btn:active { transform: translateY(0); }

/* ---- Shortcuts Button ---- */
.shortcuts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.22s ease;
  cursor: pointer;
}
.shortcuts-btn:hover {
  color: var(--cyan);
  background: rgba(0,240,255,0.08);
  border-color: rgba(0,240,255,0.3);
  box-shadow: 0 0 14px rgba(0,240,255,0.2);
}


/* ================================================================
   PREMIUM CUSTOM DROPDOWNS — Shop Switcher & Currency Picker
   ================================================================ */

/* ---- Base dropdown container ---- */
.shop-switcher-dd,
.currency-picker-dd {
  position: relative;
  z-index: 200;
}

/* ---- Shop Switcher Trigger ---- */
.shop-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 12px 6px 10px;
  height: 36px;
  border-radius: 100px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #FCD34D;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shop-switcher-trigger:hover,
.shop-switcher-dd[data-open] .shop-switcher-trigger {
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.6);
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.25);
  transform: translateY(-1px);
}
.shop-sw-icon { font-size: 1rem; line-height: 1; }
.shop-sw-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.sw-chevron {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: .7;
}
.shop-switcher-dd[data-open] .sw-chevron,
.currency-picker-dd[data-open] .sw-chevron {
  transform: rotate(180deg);
}

/* ---- Shop Switcher Menu ---- */
.shop-switcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: rgba(9, 14, 26, 0.97);
  backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: var(--radius-md);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(234, 179, 8, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: .5rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}
.shop-switcher-dd[data-open] .shop-switcher-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Menu shared elements ---- */
.sw-menu-section-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.35);
  padding: .45rem .65rem .2rem;
}
.sw-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: .4rem 0;
}

/* ---- Menu option rows ---- */
.sw-menu-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  color: var(--text);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.sw-menu-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateX(3px);
}
.sw-menu-option:hover .sw-opt-icon { transform: scale(1.15); }

/* Switcher rows that submit rather than navigate. Impersonating and leaving
   impersonation both change server state, so they are POST forms; these two
   rules let a <button> wear .sw-menu-option without the browser's own button
   chrome showing through. Kept in the stylesheet rather than on the element
   because the admin CSP drops style attributes entirely. */
.sw-menu-form {
  margin: 0;
}
.sw-tenant-note {
  padding: .55rem .65rem;
  font-size: .8rem;
  color: var(--text-dim);
}

.sw-option-danger:hover {
  background: rgba(255, 51, 51, 0.1);
  border-color: rgba(255, 51, 51, 0.25);
  color: var(--red);
}

.sw-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.sw-icon-gold { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.25); }
.sw-icon-blue { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.25); }
.sw-icon-green { background: rgba(0,255,102,0.1); border-color: rgba(0,255,102,0.2); }

.sw-opt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sw-opt-title { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-opt-sub  { font-size: .71rem; color: var(--text-dim); margin-top: 1px; }

.sw-opt-badge {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(0,255,102,0.12);
  border: 1px solid rgba(0,255,102,0.25);
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ---- Currency Picker Trigger ---- */
.currency-trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 5px 10px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.currency-trigger:hover,
.currency-picker-dd[data-open] .currency-trigger {
  background: rgba(0,240,255,0.08);
  border-color: rgba(0,240,255,0.35);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,240,255,0.12);
}
.currency-flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.currency-flag-icon .curr-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
}
.currency-option .curr-flag {
  width: 20px;
  height: 14px;
  border-radius: 2.5px;
  flex-shrink: 0;
}
.currency-label { font-size: .78rem; letter-spacing: .02em; }

/* ---- Currency Menu ---- */
.currency-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: rgba(9, 14, 26, 0.97);
  backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(0,240,255,0.18);
  border-radius: var(--radius-md);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(0, 240, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: .4rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}
.currency-picker-dd[data-open] .currency-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.currency-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .48rem .65rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
}
.currency-option:hover {
  background: rgba(0,240,255,0.07);
  border-color: rgba(0,240,255,0.15);
  color: #fff;
}
.currency-option.is-selected {
  background: rgba(0,240,255,0.1);
  border-color: rgba(0,240,255,0.25);
  color: var(--cyan);
  font-weight: 700;
}
.curr-code { font-weight: 800; font-size: .82rem; min-width: 32px; color: var(--text); }
.curr-name { font-size: .75rem; color: var(--text-dim); flex: 1; }
.currency-option:hover .curr-code,
.currency-option.is-selected .curr-code { color: var(--cyan); }

/* ---- FX Rate Widget & Pill ---- */
.fx-rate-widget {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.fx-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(153,51,255,0.08);
  border: 1px solid rgba(153,51,255,0.2);
  font-size: .76rem;
  font-weight: 700;
  color: var(--text-dim);
  transition: all 0.2s ease;
}
.fx-rate-pill:hover {
  border-color: rgba(153,51,255,0.4);
  box-shadow: 0 0 12px rgba(153,51,255,0.15);
}
.fx-rate-text { font-size: .75rem; font-variant-numeric: tabular-nums; }
.fx-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.fx-refresh-btn:hover {
  color: var(--purple);
  transform: rotate(180deg);
}

/* ---- Screen-reader only (for hidden native selects) ---- */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}


/* Stat Header & Trend Badges */
.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .4rem;
}

.stat-trend {
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.trend-up, .trend-ok {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.25);
}

.trend-warn {
  background: rgba(255, 184, 0, 0.12);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.25);
}

.trend-bad {
  background: rgba(255, 51, 51, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.25);
}

.trend-cyan {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.trend-neutral {
  background: rgba(240, 244, 255, 0.12);
  color: var(--text-dim);
  border: 1px solid rgba(240, 244, 255, 0.25);
}

/* One-Click Copy Indicator */
[data-copy], code {
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-copy]:hover, code:hover {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.copied-badge {
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.5) !important;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  width: 265px;
  flex: 0 0 265px;
  background: rgba(7, 10, 18, 0.85);
  backdrop-filter: blur(24px) saturate(1.4);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  border-right: 1px solid var(--glass-border);
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 0 1.5rem 1.5rem;
  color: var(--text);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 1.25rem;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: var(--bg-deep);
  font-size: 1.15rem;
  box-shadow: var(--shadow-cyan);
}
.brand-text {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 60%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.brand-lg {
  justify-content: center;
  padding-bottom: 1.5rem;
  font-size: 1.4rem;
  border-bottom: 0;
  margin-bottom: 0;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0 0.85rem;
  flex: 1;
}
.nav li {
  margin-bottom: 4px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 1rem;
  color: var(--text-dim);
  font-size: .92rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav a:hover {
  background: var(--glass);
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.2);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  transform: translateX(4px);
}
.nav a[aria-current="page"] {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.3);
  font-weight: 700;
  box-shadow: var(--shadow-cyan);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* Nav Icon Cyber Badges */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 1.05rem;
  border: 1px solid var(--glass-border);
  transition: transform 0.25s ease;
}
.nav a:hover .nav-icon {
  transform: scale(1.15) rotate(-3deg);
}

.icon-dashboard { background: rgba(0, 255, 102, 0.1); border-color: rgba(0, 255, 102, 0.25); }
.icon-providers { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.25); }
.icon-offers { background: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.25); }
.icon-categories { background: rgba(153, 51, 255, 0.1); border-color: rgba(153, 51, 255, 0.25); }
.icon-services { background: rgba(255, 51, 153, 0.1); border-color: rgba(255, 51, 153, 0.25); }
.icon-orders { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.25); }
.icon-deposits { background: rgba(0, 255, 102, 0.1); border-color: rgba(0, 255, 102, 0.25); }
.icon-customers { background: rgba(255, 51, 51, 0.1); border-color: rgba(255, 51, 51, 0.25); }
.icon-reports { background: rgba(153, 51, 255, 0.1); border-color: rgba(153, 51, 255, 0.25); }
.icon-announcements { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.25); }
.icon-settings { background: rgba(240, 244, 255, 0.1); border-color: rgba(240, 244, 255, 0.25); }
.icon-audit { background: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.25); }
.icon-inbox { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.25); position: relative; }
.sidebar-inbox-link.has-pending .icon-inbox,
.sidebar-inbox-link.has-unread .icon-inbox {
  background: rgba(255, 0, 85, 0.18);
  border-color: rgba(255, 0, 85, 0.5);
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.35);
}

/* Sidebar User Card */
.sidebar-foot {
  padding: 1.25rem 1rem 0;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}
.user-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  margin-bottom: .85rem;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  box-shadow: var(--shadow-cyan);
}
.user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.who-label {
  font-size: .7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.who-name {
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.quiet-link {
  color: var(--text-dim);
  font-size: .82rem;
  text-align: center;
  transition: color 0.2s ease;
}
.quiet-link:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }

/* Main Workspace Content */
.content {
  flex: 1;
  min-width: 0;
  padding: 2.25rem 2.75rem 4rem;
  position: relative;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border);
}
.page-head h1 {
  margin: 0;
}

/* ---------------------------------------------------------------- Cyber Cards */

.card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.08);
}
.card.narrow { max-width: 34rem; }
.card.narrow-wide { max-width: 56rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.75rem;
}
.stat {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

/* Glowing Neon Top Borders for Stat Cards */
.stat:nth-child(1)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); box-shadow: var(--shadow-green); }
.stat:nth-child(2)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); }
.stat:nth-child(3)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cyan); box-shadow: var(--shadow-cyan); }
.stat:nth-child(4)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--purple); box-shadow: var(--shadow-purple); }
.stat:nth-child(5)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); box-shadow: var(--shadow-red); }
.stat:nth-child(6)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cyan); }

.stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--text-dim);
  margin: 0 0 .4rem;
}
.stat-value {
  font-size: 2.3rem;
  font-weight: 850;
  margin: 0;
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.stat-value-sm {
  font-size: 1.3rem;
  font-weight: 750;
}
.stat-note {
  font-size: .84rem;
  color: var(--text-dim);
  margin: .45rem 0 0;
}
.stat-note a {
  font-weight: 700;
}

.muted { color: var(--text-dim); }
.hint { font-size: .88rem; color: var(--text-dim); margin: -.25rem 0 1rem; }
/* Two utilities the templates have always asked for and never had: `class="nowrap"`
   appears 55 times across the panel and `class="mono"` nine, and neither was defined, so
   every one of them was inert. The cells that matter are timestamps, order codes and
   transaction hashes -- exactly the values that become unreadable when they wrap
   mid-token. Safe to switch on now because the wide tables all sit inside
   `.table-scroll`, which owns the horizontal overflow. */
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
/* ---------------------------------------------------------------- Cyber Selection Bar & Pagination */

.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.25rem;
  background: rgba(7, 10, 18, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.selection-actions,
.selection-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1.4rem;
  background: linear-gradient(135deg, rgba(13, 18, 30, 0.85), rgba(7, 10, 18, 0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(0, 240, 255, 0.04);
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pager:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 25px rgba(0, 240, 255, 0.08);
}

.pager-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pager-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.45rem 1rem;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 100px;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
  letter-spacing: 0.01em;
}

.pager-status-icon {
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
  animation: pulse-icon 2.5s infinite ease-in-out;
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.9)); }
}

.pager-status strong {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.pager-count-divider {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.pager-range {
  color: #f1f5f9;
  font-weight: 700;
}

.pager-per-page {
  display: flex;
  align-items: center;
}

.pager-per-page-select {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pager-per-page-select:hover {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.pager-per-page-select:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.pager-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.pager-btn:not(.is-disabled):hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00f0ff;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25);
}

.pager-btn:not(.is-disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.2);
}

.pager-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.05);
}

.pager-btn-arrow {
  font-size: 1.1rem;
  line-height: 1;
}

.pager-numbers {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pager-num {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.pager-num:hover:not(.is-active) {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.15);
}

.pager-num.is-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.28), rgba(139, 92, 246, 0.35));
  border: 1px solid #00f0ff;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4), inset 0 0 8px rgba(0, 240, 255, 0.2);
  transform: scale(1.05);
}

.pager-ellipsis {
  padding: 0 0.2rem;
  color: #64748b;
  font-size: 0.9rem;
  user-select: none;
}

.pager-jump-form {
  display: flex;
  align-items: center;
}

.pager-jump-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
  transition: all 0.2s ease;
}

.pager-jump-group:focus-within,
.pager-jump-group:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.pager-jump-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  user-select: none;
}

.pager-jump-input {
  width: 52px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  color: #00f0ff;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.25rem 0.35rem;
  outline: none;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}

.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pager-jump-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
}

.pager-jump-btn {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 6px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pager-jump-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

@media (max-width: 768px) {
  .pager {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
  }
  .pager-left,
  .pager-controls,
  .pager-jump-form {
    justify-content: center;
    width: 100%;
  }
}

/* ---------------------------------------------------------------- Cyber Tables */

.table-scroll {
  overflow-x: auto;
  margin: 0 -1.75rem;
  padding: 0 1.75rem;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}
th, td {
  text-align: left;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}
th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan);
  font-weight: 800;
  background: rgba(0, 240, 255, 0.05);
  border-top: 1px solid var(--glass-border);
}
th:first-child { border-top-left-radius: var(--radius-sm); }
th:last-child { border-top-right-radius: var(--radius-sm); }

tbody tr {
  transition: all 0.2s ease;
}
tbody tr.row-selectable {
  cursor: pointer;
}
tbody tr.row-selectable input,
tbody tr.row-selectable select,
tbody tr.row-selectable textarea,
tbody tr.row-selectable button,
tbody tr.row-selectable a {
  cursor: auto;
}
tbody tr.row-selectable a,
tbody tr.row-selectable button,
tbody tr.row-selectable input[type="checkbox"] {
  cursor: pointer;
}
tbody tr:hover {
  background: rgba(0, 240, 255, 0.06);
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 20px rgba(0, 240, 255, 0.1);
}
td code {
  background: rgba(0, 240, 255, 0.1);
  padding: .25rem .6rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
pre {
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: .5rem 0 .85rem;
  max-width: 48rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------- Cyber Forms & Inputs */

label {
  display: block;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.1rem 0 .45rem;
  color: var(--cyan);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="image"]),
select,
textarea,
.form-control,
.custom-select-trigger {
  width: 100%;
  height: 46px;
  padding: 0 1.15rem;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(13, 19, 33, 0.88) 0%, rgba(7, 11, 20, 0.95) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 240, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
}

textarea {
  height: auto;
  min-height: 90px;
  padding: 0.75rem 1.15rem;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: rgba(240, 244, 255, 0.42);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.55;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="image"]):hover,
select:hover,
textarea:hover,
.custom-select-trigger:hover {
  border-color: rgba(0, 240, 255, 0.55);
  background: linear-gradient(180deg, rgba(18, 27, 46, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.08);
  transform: translateY(-1px);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="image"]):focus,
select:focus,
textarea:focus,
.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--cyan);
  outline: none;
  background: linear-gradient(180deg, rgba(9, 14, 25, 0.98) 0%, rgba(5, 8, 15, 1) 100%);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.4), inset 0 0 14px rgba(0, 240, 255, 0.15), 0 0 0 3px rgba(0, 240, 255, 0.15);
  transform: translateY(0);
}

/* Form Containers & Filter Bars */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 240, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.field {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.field label {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.field .hint {
  margin: 0.45rem 0 0 0;
}
.field-actions {
  display: flex;
  gap: .75rem;
  flex: 0 0 auto;
  align-items: center;
  margin-top: 1.84rem;
}

/* Filter Tabs / Links Segment Bar */
.view-tabs-wrapper {
  margin: 1.25rem 0 1.5rem;
}

.filters-inline,
.view-tabs-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 6px;
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  width: fit-content;
}

.filters-inline strong,
.filters-inline b,
.view-tab.active-view-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 22px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.16);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.filters-inline a,
.filters-inline a.quiet-link,
.view-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 22px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.filters-inline a:hover,
.filters-inline a.quiet-link:hover,
.view-tab:hover:not(.active-view-tab) {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.tab-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 900;
  background: var(--cyan);
  color: #0B0F19;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.tab-count-badge-warn {
  background: var(--amber);
  color: #0B0F19;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
}

/* ------------------------------------------------------------ Cyber Order Code Chip & Cells */

.order-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.order-code-chip:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.order-code-chip code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--cyan);
  font-size: 0.85rem;
}

.chip-copy-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--cyan);
  opacity: 0.6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.order-code-chip:hover .chip-copy-btn {
  opacity: 1;
}

.user-cell-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.3));
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  font-weight: 800;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.customer-link {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.customer-link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.service-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.service-name-text {
  color: var(--text);
  font-weight: 500;
}

.quantity-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--mono);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
}

.charged-cell .usd-amount {
  font-weight: 700;
  color: var(--text);
}

.refund-note {
  color: var(--red);
  font-size: 0.78rem;
  opacity: 0.9;
}

/* ------------------------------------------------------------ Status Pulse Animations */

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pulse-ok {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulseGlow 2s infinite ease-in-out;
}

.pulse-warn {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulseGlow 1.5s infinite ease-in-out;
}

.pulse-bad {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulseGlow 2.5s infinite ease-in-out;
}

.pulse-info {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulseGlow 2s infinite ease-in-out;
}

.btn-open-order {
  height: 34px;
  padding: 0 1.15rem;
  font-size: 0.82rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-open-order:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.5);
  color: var(--cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.search-kbd-hint {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--cyan);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: var(--mono);
  pointer-events: none;
  line-height: 1;
}

.empty-orders-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  margin: 1.5rem 0;
}

.empty-orders-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.3));
}

/* Futuristic Cyber Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1.75rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: var(--bg-deep);
  box-shadow: var(--shadow-cyan);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.55);
  color: var(--bg-deep);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.btn-quiet:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}

.sidebar .btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-border);
  color: var(--text);
}
.sidebar .btn-quiet:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.15);
  color: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

.btn-danger {
  background: linear-gradient(135deg, var(--red) 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: var(--shadow-red);
}
.btn-danger:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 35px rgba(255, 51, 51, 0.5);
}

.btn-secondary {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: var(--bg-deep);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.45);
}
.btn-secondary:active { transform: translateY(0); }

.btn-sm {
  height: 38px;
  padding: 0 1.2rem;
  font-size: .84rem;
  border-radius: 10px;
}

.btn-block { display: flex; width: 100%; margin-top: 1.25rem; }
.btn.is-disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------------------------------------------------------------- Cyber Flash Messages */

.flash {
  border-radius: var(--radius-md);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.75rem;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(20px);
}

.flash::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 900;
  flex-shrink: 0;
}

.flash-success, .flash-info {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.15), rgba(0, 240, 255, 0.08));
  border-color: rgba(0, 255, 102, 0.4);
  color: var(--green);
  box-shadow: var(--shadow-green);
}
.flash-success::before, .flash-info::before {
  content: "✓";
  background: rgba(0, 255, 102, 0.2);
  border: 1px solid var(--green);
}

.flash-error {
  background: linear-gradient(135deg, rgba(255, 51, 51, 0.18), rgba(255, 51, 51, 0.08));
  border-color: rgba(255, 51, 51, 0.4);
  color: var(--red);
  box-shadow: var(--shadow-red);
}
.flash-error::before {
  content: "✕";
  background: rgba(255, 51, 51, 0.2);
  border: 1px solid var(--red);
}

.flash-warn {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.18), rgba(255, 184, 0, 0.08));
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--amber);
  box-shadow: 0 0 25px rgba(255, 184, 0, 0.25);
}
.flash-warn::before {
  content: "⚠";
  background: rgba(255, 184, 0, 0.2);
  border: 1px solid var(--amber);
}

/* ------------------------------------------------------------------- Auth Page */

body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background-color: #070A12;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(0, 240, 255, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  position: relative;
  overflow-x: hidden;
}

body.centered::before {
  content: '';
  position: fixed;
  top: -120px;
  left: -120px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, rgba(0, 240, 255, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: floatOrb1 12s ease-in-out infinite alternate;
}

body.centered::after {
  content: '';
  position: fixed;
  bottom: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: floatOrb2 14s ease-in-out infinite alternate;
}

@keyframes floatOrb1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

@keyframes floatOrb2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, -40px) scale(1.08); }
}

.auth-card-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
}

.auth-card {
  width: 100%;
  max-width: 27rem;
  margin: 0;
  padding: 2.75rem 2.25rem 2.25rem;
  border-radius: 24px;
  border: 1px solid rgba(0, 240, 255, 0.22);
  box-shadow: 
    0 30px 60px -12px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(0, 240, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  background: rgba(13, 19, 32, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.auth-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 
    0 35px 70px -12px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(0, 240, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00F0FF, #9933FF, #10B981, #00F0FF);
  background-size: 200% 100%;
  animation: neonBarShift 6s linear infinite;
}

@keyframes neonBarShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.auth-title {
  text-align: center;
  margin-bottom: .35rem;
  font-size: 1.85rem;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.02em;
}

.auth-card .hint {
  text-align: center;
  margin-bottom: 1.75rem;
  color: #94A3B8;
  font-size: 0.9rem;
}

/* Form Groups & Inputs */
.form-group {
  margin-bottom: 1.35rem;
}

.input-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #00F0FF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
}

.label-user::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.4rem;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300F0FF' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.label-lock::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.4rem;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300F0FF' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.input-field-group {
  position: relative;
  display: flex;
  align-items: center;
}

.field-user .auth-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.field-lock .auth-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
}

.auth-input {
  width: 100%;
  height: 48px;
  padding: 0 1rem 0 2.85rem;
  background-color: rgba(18, 25, 41, 0.85);
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 18px 18px;
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 14px;
  color: #F8FAFC;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.auth-input::placeholder {
  color: #475569;
}

.auth-input:hover {
  border-color: rgba(0, 240, 255, 0.4);
}

.auth-input:focus {
  border-color: #00F0FF;
  background-color: rgba(22, 31, 52, 0.95);
  box-shadow: 
    0 0 22px rgba(0, 240, 255, 0.38),
    inset 0 0 10px rgba(0, 240, 255, 0.08);
}

.field-user .auth-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300F0FF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.field-lock .auth-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300F0FF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
}

/* Submit Button */
.btn-auth-submit {
  width: 100%;
  height: 50px;
  margin-top: 0.75rem;
  border: none;
  border-radius: 100px;
  background: linear-gradient(135deg, #00E5FF 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 28px rgba(0, 229, 255, 0.4),
    0 0 16px rgba(124, 58, 237, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-auth-submit::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 55%
  );
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-auth-submit:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 12px 35px rgba(0, 229, 255, 0.55),
    0 0 22px rgba(124, 58, 237, 0.45);
}

.btn-auth-submit:hover::before {
  transform: rotate(30deg) translateX(100%);
}

.btn-auth-submit:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

/* ------------------------------------------------------------ Status Pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.pill-ok {
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.25);
}
.pill-warn {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: var(--amber);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.25);
}
.pill-bad {
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.3);
  color: var(--red);
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.25);
}

.pill:not(:has(.status-pulse))::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 2px;
}

.pill-ok:not(:has(.status-pulse))::before {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulseGlow 2s infinite ease-in-out;
}

.pill-warn:not(:has(.status-pulse))::before {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
  animation: pulseGlow 1.5s infinite ease-in-out;
}

.pill-bad:not(:has(.status-pulse))::before {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: pulseGlow 2.5s infinite ease-in-out;
}

/* Phase List */
.phase-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: .92rem;
}
.phase {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--glass-border);
}
.phase:last-child { border-bottom: 0; }
.phase-mark {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass);
  color: var(--text-dim);
  font-size: .85rem;
  font-weight: 800;
}
.phase-done .phase-mark {
  background: rgba(0, 255, 102, 0.15);
  color: var(--green);
  box-shadow: var(--shadow-green);
}
.phase-name { flex: 1; color: var(--text-dim); }
.phase-done .phase-name { font-weight: 700; color: var(--text); }
.phase-state {
  font-size: .75rem;
  font-weight: 800;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: var(--glass);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.phase-done .phase-state {
  background: rgba(0, 255, 102, 0.15);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

/* -------------------------------------------------- Live Product Preview & Shortcuts Modal */

.service-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start;
}

.live-preview-box {
  position: sticky;
  top: 2rem;
}

.preview-badge {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.cyber-preview-card {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  box-shadow: var(--shadow-cyan);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
}

.preview-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.preview-price {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

.preview-desc {
  font-size: .84rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.preview-pill {
  font-size: .72rem;
  font-weight: 800;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.preview-buy-btn {
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 800;
  border: none;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  cursor: pointer;
}

dialog:not([open]) {
  display: none !important;
}

/* Cyber Dialog / Shortcuts Modal */
.cyber-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 9999;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 32rem;
  width: 90%;
  height: fit-content;
  max-height: calc(100vh - 3rem);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), var(--shadow-cyan);
  color: var(--text);
}

.cyber-dialog::backdrop {
  background: rgba(7, 10, 18, 0.8);
  backdrop-filter: blur(8px);
}

.cyber-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
}

.cyber-dialog-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.close-dialog-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
}

.close-dialog-btn:hover { color: var(--red); }

.cyber-dialog-body {
  padding: 1.5rem;
}

/* Custom Cyber Confirm & Alert Modal Dialog */
.cyber-confirm-modal {
  max-width: 28.5rem;
  width: 92%;
  border-radius: var(--radius-lg);
  background: rgba(11, 15, 27, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.22);
  overflow: hidden;
  animation: cyberModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-confirm-modal[open] {
  display: flex;
  flex-direction: column;
}

.cyber-confirm-modal::backdrop {
  background: rgba(7, 10, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cyber-dialog-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cyber-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  font-size: 1.1rem;
  box-shadow: var(--shadow-cyan);
  flex-shrink: 0;
}

.cyber-dialog-message {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}

.cyber-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.25rem;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--glass-border);
}

/* Variant Styles */
.cyber-confirm-modal.variant-warning {
  border-color: rgba(255, 184, 0, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 184, 0, 0.25);
}
.cyber-confirm-modal.variant-warning .cyber-dialog-icon {
  background: rgba(255, 184, 0, 0.15);
  border-color: rgba(255, 184, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
}

.cyber-confirm-modal.variant-danger {
  border-color: rgba(255, 51, 51, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), var(--shadow-red);
}
.cyber-confirm-modal.variant-danger .cyber-dialog-icon {
  background: rgba(255, 51, 51, 0.15);
  border-color: rgba(255, 51, 51, 0.4);
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.3);
}
.cyber-confirm-modal.variant-danger [data-dialog-confirm] {
  background: linear-gradient(135deg, #FF3333 0%, #B30000 100%);
  border-color: #FF3333;
  box-shadow: var(--shadow-red);
  color: #FFFFFF;
}

@keyframes cyberModalIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .88rem;
  color: var(--text);
}

kbd {
  display: inline-block;
  padding: .2rem .55rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 240, 255, 0.2);
}

@media (max-width: 960px) {
  .service-form-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ─── NATIVE SELECT APPEARANCE RESET ─── */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.custom-select-trigger .trigger-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--cyan);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  user-select: none;
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

select option {
  background-color: #0b0f19;
  color: #f8fafc;
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* Field Label & Tooltip Container */
label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 .4rem 0;
  color: var(--cyan);
  /* min-height, not height: this selector matches every label in the panel, and a
     fixed box silently overlaps the next row for any label taller than one line. */
  min-height: 22px;
  line-height: 22px;
}

.field label {
  margin-top: 0;
  margin-bottom: .4rem;
  height: 22px;
}

.field-label-wrapper,
.label-with-tooltip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  height: 22px;
}

.field-label-wrapper label,
.label-with-tooltip label,
label.has-tooltip {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 22px;
}

/* Floating Tooltip Component */
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.custom-select-option.hidden {
  display: none !important;
}

/* Select Search Filter Input inside Custom Dropdown */
.select-search-wrapper {
  position: sticky;
  top: -6px;
  background: rgba(11, 15, 27, 0.98);
  padding: 4px 4px 8px 4px;
  z-index: 10;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.select-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(7, 10, 18, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.select-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.custom-select-option.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM SERVICE CREATION & MANAGEMENT SCREEN STYLES
   ═══════════════════════════════════════════════════════════════ */

.service-form-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .service-form-wrapper {
    grid-template-columns: 1fr;
  }
}

.service-form-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Glassmorphic Section Cards */
.form-section-card {
  background: rgba(11, 15, 25, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: visible;
}

.form-section-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 240, 255, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.section-icon {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  flex-shrink: 0;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 2px 0 0 0;
}

/* Fields & Grids */
.field-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.01em;
}

.field-group label .req {
  color: var(--cyan);
}

.field-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Inputs & Form Controls */
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="image"]),
.field-group select,
.field-group textarea,
.input-with-symbol input {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(13, 19, 33, 0.88) 0%, rgba(7, 11, 20, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 240, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.field-group input:hover,
.field-group select:hover,
.field-group textarea:hover,
.input-with-symbol input:hover {
  border-color: rgba(0, 240, 255, 0.55);
  background: linear-gradient(180deg, rgba(18, 27, 46, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 240, 255, 0.22);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.input-with-symbol input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.4), inset 0 0 12px rgba(0, 240, 255, 0.15);
  background: linear-gradient(180deg, rgba(9, 14, 25, 0.98) 0%, rgba(5, 8, 15, 1) 100%);
  outline: none;
}

/* A line in a product note is a unit of meaning, so the editor shows line boundaries
   rather than hiding them: monospace and no wrapping-away of leading markers, because a
   stray space before "!" is the difference between a warning and a plain line. */
.field-group textarea.note-editor {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.65;
  tab-size: 2;
  min-height: 190px;
  resize: vertical;
}

.field-group .note-editor + .hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: var(--cyan);
}

.input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}

.input-symbol {
  position: absolute;
  left: 14px;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.95rem;
  pointer-events: none;
}

.input-with-symbol input {
  padding-left: 28px;
}

/* Card Image field
   The file input is excluded from the input rule above, because a browser draws its button
   itself and the padded, glowing box those rules produce would frame the button rather than
   replace it. What is styled here is the row it sits in and the thumbnail of what is
   already stored. */
.field-group input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  background: rgba(13, 19, 33, 0.6);
  border: 1px dashed rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.field-group input[type="file"]:hover {
  border-color: rgba(0, 240, 255, 0.55);
  background: rgba(18, 27, 46, 0.75);
}

.field-group input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 5px 12px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 6px;
  color: var(--cyan);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.image-current {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.75rem;
}

.image-current-thumb {
  width: 132px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-deep);
}

/* Scoped to beat ``.field-group label``, which is the more specific selector and would
   otherwise impose its own colour, size and bottom margin on this one. */
.field-group .image-remove {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
}

.field-group .image-remove input {
  cursor: pointer;
}

/* Hint Text */
.hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: -0.5rem 0 1.25rem 0;
  line-height: 1.4;
}

/* Live Profit Margin Badge */
.margin-status-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.15);
  transition: all 0.25s ease;
}

.margin-status-badge.loss {
  background: rgba(255, 51, 51, 0.1);
  border-color: rgba(255, 51, 51, 0.3);
  color: var(--red);
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.15);
}

.margin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Interactive Pricing Flow Studio */
.pricing-flow-container {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr auto 1fr;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pricing-step-card {
  background: rgba(10, 15, 26, 0.65);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 8px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.25s ease;
}

.pricing-step-card:focus-within,
.pricing-step-card:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.08);
}

.pricing-step-card.markup-step {
  background: rgba(0, 240, 255, 0.03);
  border: 1px dashed rgba(0, 240, 255, 0.25);
}

.pricing-step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-step-header.flex-between {
  justify-content: space-between;
}

.step-title-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-badge-highlight {
  background: var(--cyan);
  color: var(--bg-deep);
  border-color: var(--cyan);
}

.step-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-bright, #fff);
  margin-bottom: 0;
  white-space: nowrap;
}

.pricing-flow-operator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--cyan);
  opacity: 0.7;
  padding: 0 0.1rem;
  user-select: none;
}

.markup-input-row {
  width: 100%;
}

.markup-input-row input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(6, 9, 15, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-bright, #fff);
  font-weight: 600;
  font-size: 0.95rem;
}

.markup-presets-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.markup-presets-inline .markup-pill-btn {
  padding: 2px 8px;
  font-size: 0.72rem;
  border-radius: 4px;
}

.hint-pricing-footer {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .pricing-flow-container {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .pricing-flow-operator {
    display: none;
  }
}

.mode-toggle-group {
  display: flex;
  background: rgba(11, 15, 25, 0.9);
  padding: 3px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
}

.mode-pill {
  cursor: pointer;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: 100px;
  transition: all 0.2s ease;
  user-select: none;
}

.mode-pill input {
  display: none;
}

.mode-pill:has(input:checked) {
  background: var(--cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.markup-pill-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.markup-pill-btn:hover {
  background: var(--cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* ─── VISUAL SCHEMA BUILDER & CUSTOMER FIELDS ─── */
.visual-schema-wrapper {
  background: rgba(7, 10, 18, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.schema-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.85rem;
}

.schema-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.schema-main-label {
  font-size: 0.92rem !important;
  color: var(--text-bright, #fff) !important;
  margin-bottom: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.field-count-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
}

.schema-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.json-valid-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--green);
}

.json-valid-badge.empty {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
}

.json-valid-badge.invalid {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.3);
  color: var(--red);
}

.schema-mode-switcher {
  display: flex;
  background: rgba(11, 15, 25, 0.9);
  padding: 3px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
}

.mode-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mode-tab-btn:hover {
  color: #fff;
}

.mode-tab-btn.active {
  background: var(--cyan);
  color: var(--bg-deep, #070a12);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

/* Quick Add Toolbar */
.schema-quick-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 8px 12px;
  background: rgba(11, 16, 28, 0.8);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-sm);
}

.preset-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.preset-pill-btn:hover:not(.disabled) {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.25);
}

.preset-pill-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* View Panes */
.schema-view-pane {
  display: none;
}

.schema-view-pane.active {
  display: block;
}

/* Empty State Card */
.empty-fields-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(11, 15, 25, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}

.empty-fields-icon {
  font-size: 1.8rem;
  opacity: 0.8;
}

.empty-fields-content h4 {
  font-size: 0.95rem;
  margin: 0 0 0.2rem 0;
  color: var(--text-bright, #fff);
}

.empty-fields-content p {
  font-size: 0.82rem;
  margin: 0;
  color: var(--text-dim);
  line-height: 1.45;
}

/* Visual Field Cards */
.field-cards-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.field-builder-card {
  background: rgba(11, 16, 28, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.field-builder-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.12);
}

.builder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.builder-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drag-handle {
  color: var(--text-dim);
  font-size: 1rem;
  cursor: grab;
  user-select: none;
}

.field-index-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
}

.field-type-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}

.builder-header-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.card-toggle-pill {
  cursor: pointer;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
  transition: all 0.2s ease;
  user-select: none;
  height: auto !important;
  line-height: 1 !important;
}

.card-toggle-pill.active {
  background: rgba(255, 184, 0, 0.15);
  border-color: rgba(255, 184, 0, 0.4);
  color: #ffb800;
}

.card-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-action-btn:hover:not(:disabled) {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: #fff;
}

.card-action-btn.delete-btn:hover:not(:disabled) {
  background: rgba(255, 51, 51, 0.2);
  border-color: rgba(255, 51, 51, 0.5);
  color: #ff3333;
}

.card-action-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.builder-card-body {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 800px) {
  .builder-card-body {
    grid-template-columns: 1fr;
  }
}

.builder-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.builder-input-group.full-width {
  grid-column: 1 / -1;
}

.builder-label {
  font-size: 0.72rem !important;
  color: var(--cyan) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

.builder-input,
.builder-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.84rem;
  background: rgba(6, 9, 15, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-bright, #fff);
  transition: border-color 0.2s ease;
}

.builder-input:focus,
.builder-select:focus {
  border-color: var(--cyan);
  outline: none;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

/* Dropdown Options Manager */
.builder-options-manager {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.options-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.option-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 3px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(153, 51, 255, 0.15);
  border: 1px solid rgba(153, 51, 255, 0.35);
  color: #d8b4fe;
  border-radius: 6px;
}

.remove-chip-btn {
  font-weight: 800;
  cursor: pointer;
  color: #ff9999;
  padding: 0 2px;
  transition: color 0.2s ease;
}

.remove-chip-btn:hover {
  color: #ff3333;
}

.add-option-inline-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.opt-add-input {
  max-width: 220px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.btn-add-opt {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-opt:hover {
  background: var(--cyan);
  color: var(--bg-deep, #070a12);
}

/* Raw JSON View */
.raw-json-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.raw-hint-text {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.schema-footer-hint {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Form Actions Bar */
.form-actions-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(11, 15, 25, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------- Interactive Preview Box */
.live-preview-box {
  position: sticky;
  top: 1.5rem;
}

.preview-card-wrapper {
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-cyber);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-cyan);
}

.preview-header-bar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--glass-border);
}

.preview-badge-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.preview-tabs {
  display: flex;
  background: rgba(7, 10, 18, 0.9);
  padding: 4px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
}

.preview-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.preview-tab-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}

.preview-viewport {
  display: none;
}

.preview-viewport.active {
  display: block;
}

/* Cyber Storefront Preview Card */
.cyber-preview-card {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(7, 10, 18, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.preview-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.preview-price-wrapper {
  text-align: right;
  white-space: nowrap;
}

.preview-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

.preview-basis-tag {
  display: block;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.preview-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 1rem;
  min-height: 2.6rem;
}

.preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.preview-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
}

.preview-pill.qty-pill {
  background: rgba(153, 51, 255, 0.1);
  border-color: rgba(153, 51, 255, 0.3);
  color: var(--purple);
}

.preview-fields-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.field-preview-badge {
  font-size: 0.76rem;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
}

.preview-footer {
  margin-top: 0.5rem;
}

.preview-buy-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-cyan);
  transition: all 0.25s ease;
}

.preview-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
}

/* Telegram Bot Preview Box */
.telegram-bot-preview {
  background: #17212b;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tg-msg-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.tg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #242f3d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.tg-bot-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tg-bot-name {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 600;
}

.tg-bot-badge {
  background: #2b5278;
  color: #64b5f6;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: lowercase;
}

.tg-msg-bubble {
  background: #242f3d;
  border-radius: 12px;
  padding: 10px 14px;
  color: #f5f5f5;
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.tg-msg-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #64b5f6;
  margin-bottom: 0.4rem;
}

/* Telegram renders a photo caption as one message with the picture flush to the bubble's
   edges, so the negative margins cancel the bubble's padding rather than sitting inside it.
   The width has to be stated: an <img> is replaced content, so ``width: auto`` would be its
   intrinsic size and the negative margins alone would not stretch it. */
.tg-msg-photo {
  display: block;
  width: calc(100% + 28px);
  max-height: 168px;
  object-fit: cover;
  margin: -10px -14px 0.55rem;
  border-radius: 12px 12px 0 0;
  background: #1b2430;
}

/* ``display: block`` above beats the [hidden] attribute's own display: none, so a product
   with no picture would show an empty strip without this. */
.tg-msg-photo[hidden] {
  display: none;
}

.tg-msg-price {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.tg-msg-desc {
  color: #d1d5db;
  margin-bottom: 0.4rem;
}

.tg-msg-delivery {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-bottom: 0.3rem;
}

.tg-msg-fields {
  font-size: 0.78rem;
  color: #64b5f6;
}

.tg-inline-keyboard {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tg-btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: #2b5278;
  color: #64b5f6;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tg-btn:hover {
  background: #376492;
}

.tg-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #b0bec5;
}

.preview-tip-footer {
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM PROVIDER LIST & FILTER TOOLBAR STYLES
   ═══════════════════════════════════════════════════════════════ */
.provider-list-card {
  padding: 1.5rem 1.75rem;
}

.provider-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.provider-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 5px;
  background: rgba(7, 10, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 100px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.25);
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-dim, rgba(240, 244, 255, 0.65));
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-tab:hover {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

.filter-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(153, 51, 255, 0.25) 100%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: currentColor;
}

.filter-tab.active .tab-badge {
  background: rgba(0, 240, 255, 0.3);
  color: #ffffff;
}

.status-ok-badge { color: #00ff66; }
.status-warn-badge { color: #ffb703; }
.status-muted-badge { color: #94a3b8; }

.provider-search-box {
  min-width: 220px;
}

.provider-search-box input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #f8fafc);
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s ease;
}

.provider-search-box input:focus {
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  background: rgba(15, 23, 42, 0.95);
}

.provider-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.provider-row {
  transition: background 0.2s ease, transform 0.1s ease;
}

.provider-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.provider-row.row-disabled {
  opacity: 0.85;
  background: rgba(255, 183, 3, 0.02);
}

.provider-row.row-archived {
  opacity: 0.65;
  background: rgba(255, 255, 255, 0.01);
}

.provider-name-link {
  color: var(--text, #f8fafc);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.provider-name-link:hover {
  color: var(--cyan, #00f0ff);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.endpoint-url {
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

.endpoint-url code {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  color: var(--cyan, #00f0ff);
  word-break: break-all;
  display: inline-block;
  font-family: var(--mono);
}

.pill-type {
  background: rgba(153, 51, 255, 0.15);
  border: 1px solid rgba(153, 51, 255, 0.3);
  color: #d8b4fe;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.service-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  text-decoration: none;
  transition: all 0.2s ease;
}

.service-count-badge:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-active {
  color: #00ff66;
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.25);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
}

.badge-disabled {
  color: #ffb703;
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.25);
  box-shadow: 0 0 10px rgba(255, 183, 3, 0.12);
}

.badge-paused {
  color: #ff7b00;
  background: rgba(255, 123, 0, 0.12);
  border: 1px solid rgba(255, 123, 0, 0.25);
}

/* Templates ask for these two by name -- the customer Web Tools cards use them for the
   active/inactive state -- but nothing defined them, so both states rendered as the same
   bare pill and the emoji was carrying the whole distinction. Aliases rather than new
   colours, so the palette stays the three above. */
.badge-success {
  color: #00ff66;
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.25);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
}

.badge-muted {
  color: rgba(240, 244, 255, 0.55);
  background: rgba(240, 244, 255, 0.06);
  border: 1px solid rgba(240, 244, 255, 0.14);
}

.badge-archived {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.dot-green { background: #00ff66; box-shadow: 0 0 8px #00ff66; animation: pulse 2s infinite; }
.dot-amber { background: #ffb703; box-shadow: 0 0 8px #ffb703; }
.dot-orange { background: #ff7b00; box-shadow: 0 0 8px #ff7b00; }
.dot-gray { background: #94a3b8; }

.btn-group-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.btn-action {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-enable {
  background: rgba(0, 255, 102, 0.12);
  color: #00ff66;
  border-color: rgba(0, 255, 102, 0.3);
}

.btn-enable:hover {
  background: rgba(0, 255, 102, 0.25);
  border-color: #00ff66;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

.btn-disable {
  background: rgba(255, 183, 3, 0.12);
  color: #ffb703;
  border-color: rgba(255, 183, 3, 0.3);
}

.btn-disable:hover {
  background: rgba(255, 183, 3, 0.25);
  border-color: #ffb703;
  box-shadow: 0 0 10px rgba(255, 183, 3, 0.3);
}

.btn-restore {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.3);
}

.btn-restore:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.btn-review {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #00F0FF;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(0, 140, 255, 0.12) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 
    0 4px 15px rgba(0, 240, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 240, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

/* Shimmer Light Beam Effect */
.btn-review::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transition: 0.5s ease;
  z-index: -1;
}

.btn-review:hover::before {
  left: 100%;
}

.btn-review:hover {
  color: #070B14;
  background: linear-gradient(135deg, #00F0FF 0%, #0088FF 100%);
  border-color: #00F0FF;
  box-shadow: 
    0 0 25px rgba(0, 240, 255, 0.8),
    0 6px 20px rgba(0, 136, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px) scale(1.06);
}

.btn-review:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
}

.btn-review .review-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 0.8rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-review:hover .review-badge-icon {
  transform: translateX(3px) scale(1.2);
}

.btn-archive {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-archive:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #ffffff;
}

.btn-test {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim, #94a3b8);
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-test:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text, #f8fafc);
}

.service-count-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f8fafc);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.service-count-badge:hover {
  background: rgba(0, 240, 255, 0.15);
  color: var(--cyan, #00f0ff);
}

.btn-warn-quiet {
  color: #ffb703 !important;
  border-color: rgba(255, 183, 3, 0.3) !important;
}

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-icon {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
  opacity: 0.8;
}

.empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════
   OFFER REVIEW DECISION HUB - FUTURISTIC STYLING
   ═══════════════════════════════════════════════════════════════ */

.head-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.head-actions .quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.head-actions .quiet-link:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* Stepper Workflow Header */
.offer-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(7, 10, 18, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.4rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
  overflow-x: auto;
}

.stepper-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.stepper-step.active {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.stepper-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.stepper-step.active .stepper-num {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  border: none;
  box-shadow: var(--shadow-cyan);
}

.stepper-arrow {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
}

/* 2-Column Responsive Offer Grid */
.offer-detail-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .offer-detail-layout {
    grid-template-columns: 1fr;
  }
}

/* Supplier Stat Grid Component */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 0;
}

.stat-grid > div {
  background: rgba(7, 10, 18, 0.65);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-grid > div:hover {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  transform: translateY(-2px);
}

.stat-grid dt {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.stat-grid dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.stat-grid dd a {
  color: var(--cyan);
  font-weight: 700;
}

/* Live Attribute Signature Tags Bar */
.live-sig-container {
  background: rgba(7, 10, 18, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
  box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

.live-sig-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--green) 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.live-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.live-sig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.live-sig-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #ffffff;
  transition: all 0.2s ease;
}

.live-sig-chip:hover {
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.1);
  transform: translateY(-1px);
}

.live-sig-chip .chip-label {
  color: var(--cyan);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* Attribute Form Input Grid */
.attr-fields-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(145deg, rgba(13, 19, 32, 0.75) 0%, rgba(7, 11, 20, 0.92) 100%);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.attr-fields-grid .field {
  margin-bottom: 0;
  transition: transform 0.2s ease;
}

.attr-fields-grid .field label {
  margin-top: 0;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--cyan);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.attr-fields-grid .field:focus-within label {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}

/* An attribute the listing does not state yet. Marked in place because the banner
   naming it is at the top of a seven-field grid, and "set the delivery mechanism"
   is only actionable if the reviewer can see which box that is. Amber rather than
   red: nothing is wrong, something is simply unanswered. */
.attr-fields-grid .field-missing input:not([type="checkbox"]),
.attr-fields-grid .field-missing select {
  border-color: rgba(255, 184, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.2), 0 0 14px rgba(255, 184, 0, 0.12);
}

.attr-fields-grid .field-missing label {
  color: var(--amber);
}

.attr-fields-grid .field-missing:focus-within label {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 184, 0, 0.6);
}

.field-missing-note {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--amber);
}

/* Shown by the mark rather than by its own presence, so the browser can retract the
   note the moment the reviewer answers without having to remove the element. */
.field-missing .field-missing-note {
  display: block;
}

/* The "no fixed term" tick sits in a grid cell whose labels are styled as field
   captions -- heavy, cyan, wide-tracked. A whole sentence wearing that styling read
   as a second heading rather than as a choice, which is why the third duration state
   looked like a rendering fault instead of the option it is. */
.attr-fields-grid .field label.checkbox-inline,
.attr-fields-grid .field:focus-within label.checkbox-inline {
  align-items: flex-start;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  text-shadow: none;
}

.attr-fields-grid .field label.checkbox-inline input[type="checkbox"] {
  margin-top: 0.12rem;
}

.checkbox-inline-text {
  line-height: 1.4;
}

.checkbox-inline .label-hint {
  opacity: 0.75;
}

.attr-fields-grid .field:nth-child(7) {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .attr-fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .attr-fields-grid .field:nth-child(7) {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .attr-fields-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .attr-fields-grid .field:nth-child(7) {
    grid-column: span 1;
  }
}

/* Action Hub Tab Navigation */
.action-hub-tabs {
  display: flex;
  gap: 0.35rem;
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.action-tab-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(0, 180, 255, 0.12));
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.08);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.action-tab-btn[data-tab="variant"].active {
  background: linear-gradient(135deg, rgba(153, 51, 255, 0.18), rgba(120, 40, 220, 0.12));
  border-color: rgba(153, 51, 255, 0.4);
  color: var(--purple);
  box-shadow: 0 0 20px rgba(153, 51, 255, 0.2), inset 0 0 10px rgba(153, 51, 255, 0.08);
  text-shadow: 0 0 10px rgba(153, 51, 255, 0.5);
}

.action-tab-btn[data-tab="reject"].active {
  background: linear-gradient(135deg, rgba(255, 51, 51, 0.18), rgba(200, 40, 40, 0.12));
  border-color: rgba(255, 51, 51, 0.4);
  color: var(--red);
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.2), inset 0 0 10px rgba(255, 51, 51, 0.08);
  text-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
}

.action-tab-panel {
  display: none;
}

.action-tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick Reason Chips */
.quick-reasons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 1.4rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 51, 51, 0.04);
  border: 1px dashed rgba(255, 51, 51, 0.18);
  border-radius: 12px;
}

.quick-reason-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 650;
  background: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.22);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-reason-chip:hover {
  background: rgba(255, 51, 51, 0.22);
  border-color: var(--red);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 51, 51, 0.2);
}

.quick-reason-chip:active {
  transform: translateY(0) scale(0.97);
}

/* Code Viewer Box */
.code-viewer-card {
  position: relative;
}

.btn-copy-code {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-code:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* ==========================================================================
   Real-Time Foreign Exchange (FX) & Side-by-Side Dual Currency Styling
   ========================================================================== */
.fx-rate-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.currency-selector-dropdown {
  background: rgba(13, 18, 30, 0.85);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.currency-selector-dropdown:hover,
.currency-selector-dropdown:focus {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.currency-selector-dropdown option {
  background: #0d121e;
  color: #ffffff;
}

.fx-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.fx-rate-text {
  font-family: var(--font-mono, monospace);
  color: #00F0FF;
  font-weight: 700;
}

.fx-refresh-btn {
  background: transparent;
  border: none;
  color: #00F0FF;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.fx-refresh-btn:hover {
  transform: rotate(180deg) scale(1.15);
}

.fx-refresh-btn.spinning {
  animation: spinFX 0.8s linear infinite;
}

@keyframes spinFX {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Side-by-Side Dual Currency Pills & Tags */
.dual-price-tag,
.currency-pill-pkr,
.fx-alt-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.15) 0%, rgba(0, 240, 255, 0.1) 100%);
  border: 1px solid rgba(0, 255, 204, 0.35);
  color: #00FFCC;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 3px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 6px rgba(0, 255, 204, 0.35);
  transition: all 0.25s ease;
}

.dual-price-tag-cost {
  background: linear-gradient(135deg, rgba(255, 77, 77, 0.18) 0%, rgba(255, 107, 107, 0.1) 100%) !important;
  border-color: rgba(255, 77, 77, 0.4) !important;
  color: #ff6b6b !important;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.2) !important;
  text-shadow: 0 0 6px rgba(255, 77, 77, 0.35) !important;
}

.dual-price-tag-sell {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(0, 200, 255, 0.1) 100%) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.35) !important;
}

.dual-price-tag-profit {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.18) 0%, rgba(0, 230, 90, 0.1) 100%) !important;
  border-color: rgba(0, 255, 102, 0.4) !important;
  color: #00FF66 !important;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.2) !important;
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.35) !important;
}

.converted-pkr-hint {
  font-size: 0.82rem;
  color: #00FFCC;
  background: rgba(0, 255, 204, 0.1);
  border: 1px solid rgba(0, 255, 204, 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  font-weight: 700;
  margin-top: 5px;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 255, 204, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-PREMIUM CUSTOM SELECT DROPDOWNS & TOOLTIPS DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 46px;
  padding: 0.75rem 1.15rem;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(13, 18, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.curr-flag {
  width: 20px;
  height: 14px;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
}

[data-theme="light"] .curr-flag {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.custom-select-trigger .trigger-label,
.custom-select-option .opt-label-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.custom-select-trigger .trigger-arrow {
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.08);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.98);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 12px rgba(0, 240, 255, 0.15);
  border-radius: 12px;
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.2);
  max-height: 290px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
}

.custom-select-wrapper.open .custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-panel::-webkit-scrollbar {
  width: 6px;
}
.custom-select-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}

.custom-select-option {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid transparent;
}

.custom-select-option:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateX(3px);
}

.custom-select-option.selected {
  background: rgba(0, 240, 255, 0.18);
  border-left: 3px solid var(--cyan);
}

.option-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 650;
  color: #ffffff;
}

.option-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.85;
}

.dual-price-tag-cost {
  background: rgba(255, 77, 77, 0.15) !important;
  border-color: rgba(255, 77, 77, 0.35) !important;
  color: #FF4D4D !important;
}

.text-cost {
  color: #FF4D4D !important;
  font-weight: 600;
}

.text-profit {
  color: #00FF66 !important;
  font-weight: 600;
}

/* Customized Table Columns Visibility */
.col-hidden {
  display: none !important;
}

.col-customizer-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.col-customizer-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-card, rgba(13, 18, 30, 0.8));
  border: 1px solid var(--border-color, rgba(0, 240, 255, 0.2));
  border-radius: 8px;
  color: var(--text-main, #E2E8F0);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.col-customizer-btn:hover {
  border-color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.col-count-badge {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.col-customizer-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1050;
  min-width: 210px;
  background: #0D121E;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.18);
  padding: 12px;
  backdrop-filter: blur(12px);
}

.col-customizer-dropdown.open .col-customizer-menu {
  display: block;
  animation: colMenuFadeIn 0.2s ease;
}

@keyframes colMenuFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.col-customizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: #94A3B8;
}

.btn-text-action {
  background: none;
  border: none;
  color: #00F0FF;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}
.btn-text-action:hover {
  opacity: 0.8;
  text-decoration: underline;
}


.col-customizer-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}

/* Specificity here must clear `.filter-form-grid .field label`, which would
   otherwise style these rows as uppercase filter labels with a fixed height. */
.col-customizer-dropdown .col-customizer-options .col-customizer-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  margin: 0;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.83rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  color: #E2E8F0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.col-customizer-dropdown .col-customizer-options .col-customizer-opt:hover {
  background: rgba(0, 240, 255, 0.1);
  color: #ffffff;
}

.col-customizer-opt input[type="checkbox"] {
  accent-color: #00F0FF;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-PREMIUM CUSTOM SELECT DROPDOWNS & TOOLTIPS DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Elevate card & form container stacking context when dropdown is active */
/* Elevate card & form container stacking context when dropdown is active */
.card, .filters, .field, .field-group, .field-grid, .form-section-card, .form-card, .glass-card, .price-modal-card, .cyber-preview-card {
  position: relative;
}

.card:has(.custom-select-wrapper.open),
.filters:has(.custom-select-wrapper.open),
.field:has(.custom-select-wrapper.open),
.field-group:has(.custom-select-wrapper.open),
.field-grid:has(.custom-select-wrapper.open),
.form-section-card:has(.custom-select-wrapper.open),
.form-card:has(.custom-select-wrapper.open),
.glass-card:has(.custom-select-wrapper.open),
.price-modal-card:has(.custom-select-wrapper.open),
.cyber-preview-card:has(.custom-select-wrapper.open),
.card:has(.col-customizer-dropdown.open),
.filters:has(.col-customizer-dropdown.open),
.field:has(.col-customizer-dropdown.open),
.field-group:has(.col-customizer-dropdown.open),
.field-grid:has(.col-customizer-dropdown.open),
.form-section-card:has(.col-customizer-dropdown.open),
.form-card:has(.col-customizer-dropdown.open),
.glass-card:has(.col-customizer-dropdown.open) {
  z-index: 100 !important;
  overflow: visible !important;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
  z-index: 1;
}

.custom-select-wrapper.open {
  z-index: 1000 !important;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 46px;
  padding: 0.75rem 1.15rem;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(13, 18, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.custom-select-trigger .trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.custom-select-trigger .trigger-arrow {
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.08);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.98);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 12px rgba(0, 240, 255, 0.15);
  border-radius: 12px;
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1001;
  background: rgba(11, 15, 25, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.25);
  max-height: 290px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
}

.custom-select-wrapper.open .custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-panel::-webkit-scrollbar {
  width: 6px;
}
.custom-select-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}

.select-search-wrapper {
  padding: 8px 10px 8px 10px;
  position: sticky;
  top: -6px;
  margin: -6px -6px 6px -6px;
  z-index: 10;
  background: #0B0F19;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 13px 13px 0 0;
}

.select-search-input {
  width: 100%;
  height: 38px;
  padding: 0 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.select-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.custom-select-option {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid transparent;
}

.custom-select-option:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateX(3px);
}

.custom-select-option.selected {
  background: rgba(0, 240, 255, 0.18);
  border-left: 3px solid var(--cyan);
}

.option-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 650;
  color: #ffffff;
}

.option-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.85;
}

/* Tooltip Styling */
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info-tooltip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
  margin-left: 4px;
}

.info-tooltip-btn:hover {
  background: var(--cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transform: scale(1.15);
}

.info-tooltip-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 230px;
  padding: 0.75rem 0.9rem;
  background: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.2);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1100;
  text-align: left;
}

.info-tooltip-popup strong {
  display: block;
  color: var(--cyan);
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.info-tooltip-wrapper:hover .info-tooltip-popup,
.info-tooltip-wrapper:focus-within .info-tooltip-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Utility: hidden option in dropdown filter */
.custom-select-option.hidden {
  display: none !important;
}

/* Hide the native <select> when custom wrapper is active */
.custom-select-wrapper select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
}

/* Improved button states */
.btn-primary {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: var(--bg-deep);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.45);
  color: var(--bg-deep);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, #FF3333 0%, #cc2222 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 51, 51, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-danger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}

.btn-danger:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 51, 51, 0.45);
}

.btn-danger:active {
  transform: translateY(0) scale(0.98);
}

/* Flash message improvements */
.flash {
  border-radius: 14px;
}

/* ---------------------------------------------------------------- Dual Currency (USD & PKR) & FX Banner */

.fx-rate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.fx-rate-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--cyan);
}

.fx-rate-chip .fx-icon {
  font-size: 1.1rem;
}

.pkr-subtext,
.dual-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
  vertical-align: middle;
  line-height: 1.35;
}

.dual-price-tag-cost {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.35);
  color: var(--amber);
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.2);
}

.dual-price-tag-profit {
  background: rgba(0, 255, 102, 0.12);
  border-color: rgba(0, 255, 102, 0.35);
  color: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
}

.currency-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.currency-prefix {
  position: absolute;
  left: 0.65rem;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9rem;
  pointer-events: none;
}

.currency-suffix-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 240, 255, 0.14);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  font-weight: 800;
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 6px;
  pointer-events: none;
  font-family: var(--mono);
}

/* ---------------------------------------------------------------- Record a Deposit UI */

.deposit-new-card {
  margin-top: 0.5rem;
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.deposit-new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 1.5rem;
}

.deposit-header-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.deposit-title-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.25));
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

.deposit-header-sub {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.deposit-info-callout {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.85rem;
}

.deposit-info-callout .hint {
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.deposit-info-callout .hint:last-child {
  margin-bottom: 0;
}

.highlight-hint strong {
  color: var(--cyan);
}

.deposit-form-section {
  background: rgba(7, 10, 18, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.35rem;
  transition: all 0.25s ease;
}

.deposit-form-section:focus-within {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.08);
}

.section-badge-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.section-num-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  font-weight: 900;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-label-text {
  margin: 0;
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.field-subhint {
  margin: 0.45rem 0 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.customer-matches-card {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md);
}

.match-select-title {
  display: block;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.customer-match-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customer-match-item {
  margin: 0;
}

.customer-match-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
}

.customer-match-label:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.15);
}

.customer-match-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.3));
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.customer-match-details {
  flex: 1;
  min-width: 0;
}

.match-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.88rem;
}

.match-id-badge {
  color: var(--cyan);
  font-size: 0.78rem;
  background: rgba(0, 240, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.match-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.customer-balance-chip {
  color: var(--green);
  font-weight: 700;
}

.deposit-form-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-record-deposit {
  height: 48px;
  padding: 0 2.2rem;
  font-size: 0.95rem;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.currency-input-wrapper .price-input {
  padding-left: 1.5rem !important;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   OFFER REVIEW SCREEN & DECISION WORKFLOW DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* 1. 3-Step Decision Workflow Tracker */
.offer-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.75rem;
  margin-bottom: 1.75rem;
  background: rgba(13, 18, 30, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 240, 255, 0.05);
  flex-wrap: wrap;
}

.stepper-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-dim);
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.stepper-step.active {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}

.stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: var(--bg-deep);
  font-weight: 850;
  font-size: 0.88rem;
  box-shadow: var(--shadow-cyan);
  flex-shrink: 0;
}

.stepper-arrow {
  color: var(--cyan);
  font-size: 1.1rem;
  opacity: 0.6;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

@media (max-width: 768px) {
  .offer-stepper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .stepper-arrow {
    display: none;
  }
}

/* 2. 2-Column Main & Sidebar Layout */
.offer-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.75rem;
  align-items: start;
}

.offer-main-col {
  min-width: 0;
}

.offer-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

@media (max-width: 1024px) {
  .offer-detail-layout {
    grid-template-columns: 1fr;
  }
}

/* 3. 7 Attribute Form Grid */
.attr-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* 4. Live Offer Signature Tag Bar */
.live-sig-container {
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.75rem;
  box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.live-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

.live-sig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.live-sig-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  font-size: 0.82rem;
  color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.live-sig-chip:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.live-sig-chip .chip-label {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.live-sig-chip strong {
  color: var(--cyan);
  font-weight: 800;
}

/* 5. Interactive Decision Hub Tabs */
.action-hub-tabs {
  display: flex;
  gap: 0.6rem;
  background: rgba(7, 10, 18, 0.75);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(0, 240, 255, 0.15);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.action-tab-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.8rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font);
}

.action-tab-btn:hover {
  background: rgba(0, 240, 255, 0.08);
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.2);
}

.action-tab-btn.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.1);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.action-tab-panel {
  display: none;
}

.action-tab-panel.active {
  display: block;
  animation: fadeInTab 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 6. Quick Rejection Reason Suggestion Chips */
.quick-reasons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.quick-reason-chip {
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 650;
  background: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.22);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font);
}

.quick-reason-chip:hover {
  background: rgba(255, 51, 51, 0.22);
  border-color: var(--red);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 51, 51, 0.25);
}

.quick-reason-chip:active {
  transform: translateY(0) scale(0.97);
}

/* 7. Searchable Custom Select Dropdowns */
.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 46px;
  padding: 0.75rem 1.15rem;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(13, 18, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.custom-select-trigger .trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.custom-select-trigger .trigger-arrow {
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.08);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.98);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 12px rgba(0, 240, 255, 0.15);
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.2);
  max-height: 290px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
}

.custom-select-wrapper.open .custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-panel::-webkit-scrollbar {
  width: 6px;
}
.custom-select-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 100px;
}
.custom-select-panel::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}

.select-search-wrapper {
  padding: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(11, 15, 25, 0.98);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 10px 10px 0 0;
}

.select-search-input {
  width: 100%;
  height: 38px;
  padding: 0 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.select-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.custom-select-option {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid transparent;
}

.custom-select-option:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateX(3px);
}

.custom-select-option.selected {
  background: rgba(0, 240, 255, 0.18);
  border-left: 3px solid var(--cyan);
}

.custom-select-option.hidden {
  display: none !important;
}

.option-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 650;
  color: #ffffff;
}

.option-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.85;
}

/* 8. Floating Info Tooltips */
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info-tooltip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
  margin-left: 4px;
}

.info-tooltip-btn:hover {
  background: var(--cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transform: scale(1.15);
}

.info-tooltip-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 230px;
  padding: 0.75rem 0.9rem;
  background: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.2);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1100;
  text-align: left;
}

.info-tooltip-popup strong {
  display: block;
  color: var(--cyan);
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.info-tooltip-wrapper:hover .info-tooltip-popup,
.info-tooltip-wrapper:focus-within .info-tooltip-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 9. Sidebar Definition Grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin: 0;
}

.stat-grid dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.stat-grid dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

/* 10. Code Viewer Box & Raw JSON Block */
.code-viewer-card {
  position: relative;
}

.btn-copy-code {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 750;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
  z-index: 2;
}

.btn-copy-code:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.raw-json-block {
  background: rgba(7, 10, 18, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: #00FF66;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 0.85rem;
  max-height: 320px;
  overflow-y: auto;
}

/* Loaded last on purpose: this file contains a duplicated block of
   offer-detail rules near the end (a second .stat-grid, .offer-detail-layout
   and .attr-fields-grid). These classes replace style attributes, which used
   to beat every rule regardless of order, so they have to win the cascade the
   same way -- by coming after the duplicates. */

/* ==========================================================================
   Presentation classes for markup that cannot carry a style attribute
   --------------------------------------------------------------------------
   The admin CSP is `style-src 'self'` with no 'unsafe-inline' (see
   _ADMIN_CSP in app/web/security.py). A `style="..."` attribute in an admin
   template is therefore parsed and then discarded by the browser, silently
   apart from a console violation -- the same is true of `el.style.cssText`
   in app.js. Every rule below replaces one that was being dropped that way.

   Reach for a class here instead of a style attribute; the attribute will not
   work. Direct property assignment (`el.style.display = "none"`) is fine --
   CSSOM setters are not governed by style-src.
   ========================================================================== */

/* Offer detail -- heading and card title rows */
.heading-byline {
  font-size: 0.75em;
  font-weight: 500;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.card-title-sm {
  font-size: 1.1rem;
}

/* Offer detail -- note and flash spacing */
.stat-note-lead { margin-bottom: 1.25rem; }
.stat-note-panel { margin-bottom: 1rem; }
.stat-note-panel-tight { margin-bottom: 0.75rem; }
.stat-note-routing { margin-bottom: 0.85rem; }
.stat-note-flush { margin: 0; }
.stat-note-after-action { margin-top: 0.6rem; }
.flash-lead { margin-bottom: 1.25rem; }
.flash-panel { margin-bottom: 1rem; }
.field-lead { margin-bottom: 1.25rem; }

.stat-note-divided {
  border-top: 1px solid var(--glass-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

/* Offer detail -- inline hint inside a field label, e.g. "(blank = Global)" */
.label-hint {
  display: inline;
  text-transform: none;
}

/* Offer detail -- form action rows and controls */
.form-actions-end {
  display: flex;
  justify-content: flex-end;
}

.form-actions-end-spaced {
  margin-top: 1.75rem;
}

.textarea-reason {
  min-height: 90px;
  resize: vertical;
}

.quick-reasons-label {
  width: 100%;
  margin: 0 0 0.3rem;
}

.btn-wide {
  padding: 0 2rem;
  height: 48px;
  font-size: 0.9rem;
}

.btn-wide-sm {
  padding: 0 2rem;
  height: 46px;
}

/* Offer detail -- "save and map" bar under the target product select */
.map-action-bar {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: rgba(7, 10, 18, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.map-action-note {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* Offer detail -- supplier stat grid modifiers */
.stat-grid-full { grid-column: 1 / -1; }
.stat-grid-dd-spaced { margin-top: 0.25rem; }

.stat-grid-stacked {
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

/* Offer detail -- raw supplier payload viewer */
.raw-details { margin-top: 0.75rem; }

.raw-summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cyan);
}

/* Provider import -- FX banner note and the filter row beneath it */
.fx-rate-banner .stat-note { margin: 0; }
.filters-spaced { margin-top: 1rem; }

/* Custom select -- selected-option tick, created in app.js */
.option-check {
  color: var(--cyan);
  font-weight: bold;
}

/* Custom select -- "no matching options" row, created in app.js */
.no-results-msg {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}

/* Toasts -- created in app.js; the container lives in base.html */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  padding: 10px 16px;
  background: rgba(13, 18, 30, 0.95);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 8px;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
  transition: opacity 0.3s ease;
}

.toast-success {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 4px 15px rgba(0, 255, 102, 0.3);
}

.toast-error {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM PROVIDER FORM & CONFIGURATION CARD STYLES
   ═══════════════════════════════════════════════════════════════ */

.provider-form-card {
  max-width: 56rem;
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 240, 255, 0.04);
  transition: all 0.3s ease;
}

.provider-form-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 240, 255, 0.08);
}

.provider-form-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.provider-header-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(153, 51, 255, 0.15));
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: var(--shadow-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
}

.provider-header-meta h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.provider-header-meta p {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.45;
}

.provider-form-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cyber-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  font-size: 0.84rem;
  color: rgba(240, 244, 255, 0.88);
  line-height: 1.45;
  backdrop-filter: blur(8px);
}

.cyber-hint strong {
  color: var(--cyan);
}

.cyber-hint-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.checkbox-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.25rem;
  background: rgba(0, 255, 102, 0.05);
  border: 1px solid rgba(0, 255, 102, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.checkbox-card:hover {
  background: rgba(0, 255, 102, 0.1);
  border-color: rgba(0, 255, 102, 0.45);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.18);
}

.checkbox-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}

.checkbox-card span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------------------------------------------------------------- Services Action Controls & Table Styling */

.action-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.btn-action-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.btn-action-menu-toggle:hover,
.btn-action-menu-toggle:focus-visible,
.action-dropdown-wrapper.active .btn-action-menu-toggle,
.action-dropdown-wrapper.is-open .btn-action-menu-toggle {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.6);
  color: var(--cyan, #00f0ff);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  transform: scale(1.05);
}

.action-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: linear-gradient(145deg, rgba(15, 22, 38, 0.98), rgba(9, 13, 24, 0.99));
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(0, 240, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.45rem;
  z-index: 99999;
  text-align: left;
  backdrop-filter: blur(24px);
  transform-origin: top right;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.action-dropdown-menu.is-open,
.action-dropdown-menu.is-portaled,
.cyber-action-menu.is-open,
.cyber-action-menu.is-portaled {
  display: flex !important;
  flex-direction: column !important;
  animation: actionMenuPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.action-dropdown-menu.is-open-upward,
.cyber-action-menu.is-open-upward {
  transform-origin: bottom right;
  animation: actionMenuPopInUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

tr:has(.action-dropdown-wrapper.active),
tr.menu-active {
  position: relative;
  z-index: 100;
}

@keyframes actionMenuPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes actionMenuPopInUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.row-actions-group,
.action-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}

.inline-action-form {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: #e2e8f0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.action-dropdown-item > * {
  pointer-events: none;
}

.action-dropdown-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background: var(--cyan);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transform: scaleY(0.4);
  transition: all 0.18s ease;
}

.action-dropdown-item:hover:not(:disabled),
.action-dropdown-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(3px);
}

.action-dropdown-item:hover:not(:disabled)::before,
.action-dropdown-item:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.action-dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin: 0.35rem 0;
}

.action-dropdown-item .action-icon {
  font-size: 0.95rem;
  line-height: 1;
  width: 18px;
  text-align: center;
  display: inline-block;
}

.action-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.action-icon-badge .action-svg {
  width: 15px;
  height: 15px;
}

/* Individual Cyber Colors & Badges */
.badge-deactivate {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.badge-activate {
  background: rgba(0, 255, 102, 0.14);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: #00ff66;
}

.badge-restore {
  background: rgba(0, 240, 255, 0.14);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
}

.badge-price {
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #eab308;
}

.badge-attributes {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.badge-view {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.badge-edit {
  background: rgba(129, 140, 248, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.3);
  color: #818cf8;
}

.badge-delete {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.badge-test {
  background: rgba(6, 182, 212, 0.14);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #06b6d4;
}

.badge-feature {
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover effects with micro-animations & glow */
.action-dropdown-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.action-dropdown-item.item-test:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
}
.action-dropdown-item.item-test:hover .badge-test {
  background: rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.action-dropdown-item.item-deactivate:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.action-dropdown-item.item-deactivate:hover .badge-deactivate {
  background: rgba(245, 158, 11, 0.3);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.action-dropdown-item.item-activate:hover:not(:disabled) {
  background: rgba(0, 255, 102, 0.15);
  color: #00ff66;
}
.action-dropdown-item.item-activate:hover .badge-activate {
  background: rgba(0, 255, 102, 0.3);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

.action-dropdown-item.item-restore:hover:not(:disabled) {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
}
.action-dropdown-item.item-restore:hover .badge-restore {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.action-dropdown-item.item-price:hover:not(:disabled) {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
}
.action-dropdown-item.item-price:hover .badge-price {
  background: rgba(234, 179, 8, 0.3);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.action-dropdown-item.item-attributes:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
}
.action-dropdown-item.item-attributes:hover .badge-attributes {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.action-dropdown-item.item-view:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
}
.action-dropdown-item.item-view:hover .badge-view {
  background: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.action-dropdown-item.item-edit:hover:not(:disabled) {
  background: rgba(129, 140, 248, 0.15);
  color: #a5b4fc;
}
.action-dropdown-item.item-edit:hover .badge-edit {
  background: rgba(129, 140, 248, 0.3);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}

.badge-whatsapp {
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #25d366;
}

.action-dropdown-item.item-whatsapp:hover:not(:disabled) {
  background: rgba(37, 211, 102, 0.15);
  color: #86efac;
}
.action-dropdown-item.item-whatsapp:hover .badge-whatsapp {
  background: rgba(37, 211, 102, 0.3);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.4);
}

.action-dropdown-item.item-security:hover:not(:disabled) {
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
}
.action-dropdown-item.item-security:hover .badge-deactivate {
  background: rgba(244, 63, 94, 0.3);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
}

.action-dropdown-item.item-profile:hover:not(:disabled) {
  background: rgba(0, 240, 255, 0.15);
  color: #a5f3fc;
}
.action-dropdown-item.item-profile:hover .badge-view {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.action-dropdown-item.item-delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.action-dropdown-item.item-delete:hover .badge-delete {
  background: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.action-dropdown-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix {
  position: absolute;
  left: 0.75rem;
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  pointer-events: none;
  font-family: monospace;
}

.input-with-prefix .cyber-input {
  padding-left: 1.85rem !important;
}

.password-generator-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.password-generator-input-group .cyber-input {
  flex: 1;
}

.credentials-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.credentials-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.cred-label {
  color: #94a3b8;
  font-weight: 600;
}

.cred-val {
  color: #f8fafc;
  font-weight: 700;
}

.cred-val-highlight {
  color: var(--cyan, #00f0ff);
}

.cred-val-password {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 1px;
}

.action-dropdown-divider {
  height: 1px;
  background: var(--glass-border, rgba(255, 255, 255, 0.1));
  margin: 0.3rem 0;
}

.btn-action-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  background: var(--glass);
  color: var(--text);
  line-height: 1.2;
}

.btn-action-sm:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-action-sm:active:not(:disabled) {
  transform: translateY(0);
}

.btn-action-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Activate Button */
.btn-activate {
  background: rgba(0, 255, 102, 0.12);
  border-color: rgba(0, 255, 102, 0.35);
  color: #00FF66;
}

.btn-activate:hover:not(:disabled) {
  background: rgba(0, 255, 102, 0.25);
  border-color: #00FF66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
  color: #ffffff;
}

/* Deactivate Button */
.btn-deactivate {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.35);
  color: #FFB800;
}

.btn-deactivate:hover:not(:disabled) {
  background: rgba(255, 184, 0, 0.25);
  border-color: #FFB800;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.35);
  color: #ffffff;
}

/* Delete Button */
.btn-delete {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.35);
  color: #FF5555;
}

.btn-delete:hover:not(:disabled) {
  background: rgba(255, 51, 51, 0.28);
  border-color: #FF3333;
  box-shadow: 0 0 14px rgba(255, 51, 51, 0.4);
  color: #ffffff;
}

/* Restore Button */
.btn-restore {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: var(--cyan);
}

.btn-restore:hover:not(:disabled) {
  background: rgba(0, 240, 255, 0.25);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  color: #ffffff;
}

/* Edit Button */
.btn-edit {
  background: rgba(153, 51, 255, 0.12);
  border-color: rgba(153, 51, 255, 0.35);
  color: #D199FF;
}

.btn-edit:hover:not(:disabled) {
  background: rgba(153, 51, 255, 0.25);
  border-color: #9933FF;
  box-shadow: 0 0 12px rgba(153, 51, 255, 0.35);
  color: #ffffff;
}

/* Enhanced State Badges */
.pill-active {
  background: rgba(0, 255, 102, 0.15) !important;
  color: #00FF66 !important;
  border: 1px solid rgba(0, 255, 102, 0.4) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #00FF66;
  box-shadow: 0 0 8px #00FF66;
  animation: pulse-glow 1.8s infinite ease-in-out;
}

@keyframes pulse-glow {
  0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px #00FF66; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #00FF66; }
  100% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px #00FF66; }
}

.pill-inactive {
  background: rgba(255, 184, 0, 0.15) !important;
  color: #FFB800 !important;
  border: 1px solid rgba(255, 184, 0, 0.4) !important;
}

.pill-unavailable {
  background: rgba(255, 51, 51, 0.15) !important;
  color: #FF6666 !important;
  border: 1px solid rgba(255, 51, 51, 0.4) !important;
}

.pill-archived {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(240, 244, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Bulk Actions Toolbar */
.bulk-actions-toolbar {
  margin-bottom: 1rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(11, 15, 25, 0.95), rgba(7, 10, 18, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(12px);
  animation: slide-down-fade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-down-fade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bulk-toolbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bulk-selected-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cyan);
}

.bulk-actions-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Table Multi-Select Checkboxes */
.col-cb-th, .col-cb-td {
  width: 40px;
  text-align: center;
  padding-left: 0.75rem !important;
  padding-right: 0.5rem !important;
}

.service-select-cb, #select-all-services {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
  border-radius: 4px;
}

.service-title-link {
  font-weight: 600;
  color: #ffffff;
}

.service-title-link:hover {
  color: var(--cyan);
}

/* Row Deleting Animation */
tr.row-deleting {
  opacity: 0;
  transform: scale(0.98);
  transition: all 0.35s ease;
}

/* Interactive Price Edit Modal & Card Enhancements */
.stat-interactive {
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-interactive:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

.stat-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn-stat-action {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan, #00f0ff);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-stat-action:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.btn-action-sm.btn-price {
  background: rgba(0, 240, 255, 0.1);
  color: var(--cyan, #00f0ff);
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.btn-action-sm.btn-price:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM INTERACTIVE PRICE EDIT MODAL STYLES
═══════════════════════════════════════════════════════════════ */

dialog.price-modal {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 500px;
  width: 92vw;
  max-height: calc(100vh - 2rem);
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 16px;
  color: #ffffff;
}

dialog.price-modal::backdrop {
  background: rgba(8, 12, 22, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.price-modal-card {
  position: relative;
  background: linear-gradient(150deg, rgba(20, 27, 45, 0.97), rgba(10, 14, 26, 0.99)) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.15) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2.5rem);
}

.price-modal-card #price-edit-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.price-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00f0ff, #7000ff, #00f0ff);
  background-size: 200% 100%;
  animation: cyber-glow-bar 4s linear infinite;
  z-index: 10;
}

@keyframes cyber-glow-bar {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.price-modal-card .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.35rem 1.5rem 1.15rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.price-modal-card .modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.price-modal-card .modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  font-size: 1.35rem;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.15), 0 0 15px rgba(0, 240, 255, 0.1);
  flex-shrink: 0;
}

.price-modal-card .modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.price-modal-card .modal-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 400;
}

.price-modal-card .modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.price-modal-card .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
  transform: rotate(90deg);
}

.price-modal-card .modal-body {
  padding: 1.35rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 14rem);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.35) rgba(15, 22, 38, 0.6);
}

.price-modal-card .modal-body::-webkit-scrollbar {
  width: 6px;
}

.price-modal-card .modal-body::-webkit-scrollbar-track {
  background: rgba(15, 22, 38, 0.6);
  border-radius: 4px;
}

.price-modal-card .modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.35);
  border-radius: 4px;
}

.price-modal-card .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.7);
}

.price-comparison-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  background: rgba(15, 22, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.35rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.price-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.price-meta-item .meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #64748b;
}

.text-cost {
  color: #f87171 !important;
  font-size: 1.05rem;
  font-weight: 700;
}

#price-modal-current-sell-display {
  color: #38bdf8;
  font-size: 1.05rem;
  font-weight: 700;
}

.pill-quiet {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.price-modal-card .field {
  margin-bottom: 1.25rem;
}

.price-modal-card .field label {
  font-size: 0.825rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 0.45rem;
  display: block;
}

.price-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-symbol {
  position: absolute;
  left: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #00f0ff;
  pointer-events: none;
  z-index: 2;
}

.price-input-field {
  padding-left: 2.5rem !important;
  padding-right: 1rem !important;
  height: 48px;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: #ffffff !important;
  background: rgba(8, 13, 24, 0.85) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.3) !important;
  border-radius: 10px !important;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.price-input-field::-webkit-outer-spin-button,
.price-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.price-input-field[type=number] {
  -moz-appearance: textfield;
}

.price-input-field:focus {
  border-color: #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 8px rgba(0, 240, 255, 0.15) !important;
  outline: none !important;
}

.price-presets-group {
  margin-top: 1.15rem;
}

.preset-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  display: block;
  margin-bottom: 0.5rem;
}

.preset-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-preset {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 0.45rem 0.85rem;
  font-size: 0.825rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.btn-preset:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00f0ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.2);
}

.btn-preset:active, .btn-preset.active {
  transform: translateY(0);
  background: rgba(0, 240, 255, 0.25);
  border-color: #00f0ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.live-calc-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(112, 0, 255, 0.04));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 0.95rem 1.15rem;
  margin-top: 1.35rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.live-calc-card.pulse {
  animation: card-pulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

@keyframes card-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.live-calc-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.08), transparent 60%);
  pointer-events: none;
}

.calc-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
}

.calc-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.calc-val {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.text-profit {
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}

.calc-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
}

.price-modal-card .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.15rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 22, 0.5);
  flex-shrink: 0;
}

.price-modal-card .btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-modal-card .btn-quiet:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.price-modal-card .btn-primary {
  background: linear-gradient(135deg, #00f0ff, #0072ff);
  border: none;
  color: #070a12;
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.price-modal-card .btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 22px rgba(0, 240, 255, 0.5);
  filter: brightness(1.08);
}

.price-modal-card .btn-primary:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   PRICE MODAL REAL-TIME CURRENCY & CONVERSION STYLING
   ═══════════════════════════════════════════════════════════════ */

.fx-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(10, 16, 30, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 12px;
  padding: 0.65rem 0.95rem;
  margin-bottom: 1.15rem;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}

.fx-bar-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #94a3b8;
  white-space: nowrap;
}

.fx-bar-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  color: #64748b;
}

.fx-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: fx-pulse-glow 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes fx-pulse-glow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.fx-rate-badge {
  font-weight: 700;
  color: #00f0ff;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  background: rgba(0, 240, 255, 0.1);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  letter-spacing: -0.01em;
}

.fx-currency-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fx-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.fx-pill:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  transform: translateY(-1px);
}

.fx-pill.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(112, 0, 255, 0.25));
  border-color: #00f0ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.meta-fx-subtext {
  font-size: 0.73rem;
  color: #38bdf8;
  font-weight: 600;
  margin-top: 0.15rem;
  opacity: 0.9;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.field-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.btn-toggle-reverse {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-toggle-reverse:hover {
  color: #00f0ff;
  text-decoration: underline;
  transform: translateX(-1px);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.reverse-help-text {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.35rem;
  display: block;
}

/* Local symbols ("Rs", "AED") are wider than the "$" the base padding fits. */
#price-modal-reverse-input,
#form-reverse-input {
  padding-left: 3.4rem !important; /* .price-input-field sets it !important */
}

/* Service Form Pricing & Cost Field Integration */
.form-fx-bar {
  margin-top: 0.5rem;
  margin-bottom: 1.15rem;
}

.input-with-symbol-cost {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
}

.symbol-cost {
  position: absolute;
  left: 0.65rem;
  font-weight: 700;
  color: #f87171;
  font-size: 1rem;
  pointer-events: none;
  z-index: 2;
}

.input-cost-field {
  padding-left: 1.6rem !important;
  padding-right: 0.6rem !important;
  height: 38px;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #f87171 !important;
  background: rgba(8, 13, 24, 0.9) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.3) !important;
  border-radius: 8px !important;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.input-cost-field:focus {
  border-color: #f87171 !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.35) !important;
  outline: none !important;
}

.text-sell-current {
  color: #38bdf8;
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  margin-top: 0.25rem;
}

.pricing-rules-details {
  margin-top: 1.25rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.pricing-rules-details[open] {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(0, 240, 255, 0.2);
}

.pricing-rules-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  user-select: none;
  list-style: none;
}

.pricing-rules-summary::-webkit-details-marker {
  display: none;
}

.pricing-rules-summary:hover {
  color: #00f0ff;
}

.rules-summary-toggle {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.pricing-rules-details[open] .rules-summary-toggle {
  transform: rotate(90deg);
}

.pricing-rules-body {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rules-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.65rem;
}

.rule-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rule-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-rule-field {
  width: 140px;
  height: 36px;
  padding: 0.35rem 0.65rem;
  font-size: 0.95rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background: rgba(8, 13, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
}

.input-rule-field:focus {
  border-color: #00f0ff;
  outline: none;
}

.calc-fx-subtext {
  font-size: 0.73rem;
  color: #34d399;
  font-weight: 600;
  margin-top: 0.1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

@media (max-width: 520px) {
  .fx-modal-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .fx-currency-pills {
    width: 100%;
    justify-content: flex-start;
  }
  .field-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRICE MODAL VOLUME DISCOUNTS / TIERS STYLING
   ═══════════════════════════════════════════════════════════════ */

.price-modal-tiers-wrapper {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.price-modal-tiers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.tiers-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tiers-header-icon {
  font-size: 1.1rem;
}

.tiers-header-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
}

.tiers-header-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  display: block;
}

.btn-add-modal-tier {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-modal-tier:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00f0ff;
  transform: translateY(-1px);
}

.price-modal-tiers-empty {
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
  padding: 0.3rem 0;
}

.price-modal-tiers-max {
  font-size: 0.7rem;
  color: #f87171;
  font-weight: 500;
  margin-top: 0.3rem;
}

.price-modal-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.price-modal-tier-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(8, 12, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  transition: all 0.2s ease;
}

.tier-row-main {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: flex-end;
}

.tier-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 18px;
}

.tier-profit-badge {
  font-size: 0.72rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  transition: all 0.2s ease;
}

.tier-profit-badge.tier-profit-positive {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.tier-profit-badge.tier-profit-danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-weight: 600;
}

.tier-price-below-cost {
  border-color: #ef4444 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
}

.tier-field-sub {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #94a3b8;
  display: block;
  margin-bottom: 0.2rem;
}

.tier-input-group {
  display: flex;
  flex-direction: column;
}

.tier-input {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.5rem !important;
  font-size: 0.8rem !important;
  color: #f8fafc !important;
  height: 32px;
  width: 100%;
}

.tier-input:focus {
  border-color: #00f0ff !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25) !important;
}

.input-with-symbol-sm {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-symbol-sm .symbol {
  position: absolute;
  left: 0.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 1; /* the input otherwise paints over its own symbol */
}

.input-with-symbol-sm input {
  padding-left: 1.25rem !important;
}

.btn-remove-modal-tier {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-remove-modal-tier:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBERPUNK FILTER CARD DESIGN SYSTEM
═══════════════════════════════════════════════════════════════ */



.filter-card-cyber {
  position: relative;
  background: linear-gradient(145deg, rgba(13, 19, 32, 0.95) 0%, rgba(7, 11, 20, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: var(--radius-md, 16px);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 25px rgba(0, 240, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.3);
  overflow: visible;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-card-cyber:hover {
  border-color: rgba(0, 240, 255, 0.38);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 35px rgba(0, 240, 255, 0.12);
}

/* Header Row */
.filter-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.filter-card-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.filter-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.2));
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  font-size: 0.95rem;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.filter-title-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filter-active-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--bg-deep, #070a12);
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: var(--shadow-cyan);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }
  100% { box-shadow: 0 0 20px rgba(0, 255, 102, 0.7); }
}

.filter-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(240, 244, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  text-decoration: none;
}

.filter-reset-link:hover {
  color: var(--red);
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.35);
  box-shadow: var(--shadow-red);
}

/* Quick Filter Tags Bar */
.filter-quick-tags-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.quick-tags-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(240, 244, 255, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.quick-tags-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quick-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(240, 244, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.quick-filter-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.quick-filter-chip.is-active {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.16);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.28);
}

.quick-filter-chip.chip-review:hover,
.quick-filter-chip.chip-review.is-active {
  color: var(--amber);
  background: rgba(255, 184, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.28);
}

.quick-filter-chip.chip-unavailable:hover,
.quick-filter-chip.chip-unavailable.is-active {
  color: var(--red);
  background: rgba(255, 51, 51, 0.14);
  border-color: rgba(255, 51, 51, 0.5);
  box-shadow: 0 0 16px rgba(255, 51, 51, 0.28);
}

.quick-filter-chip.chip-active:hover,
.quick-filter-chip.chip-active.is-active {
  color: var(--green);
  background: rgba(0, 255, 102, 0.14);
  border-color: rgba(0, 255, 102, 0.5);
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.28);
}

.quick-filter-chip.chip-featured:hover,
.quick-filter-chip.chip-featured.is-active {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.14);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.28);
}

.quick-filter-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.quick-filter-chip .chip-dot.dot-warn {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

.quick-filter-chip .chip-dot.dot-bad {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}

.quick-filter-chip .chip-dot.dot-ok {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.quick-filter-chip .chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 2px;
}

.quick-filter-chip .chip-badge.badge-warn {
  background: rgba(255, 184, 0, 0.25);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.45);
}

/* Grid Layout for Form Fields */
.filter-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.1rem;
  align-items: end;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (min-width: 1024px) {
  .filter-form-grid {
    grid-template-columns: minmax(200px, 1.8fr) repeat(4, minmax(120px, 1fr)) auto auto;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .filter-form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .filter-form-grid .field-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .filter-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-form-grid .field-search {
    grid-column: 1 / -1;
  }
}

.filter-form-grid .field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}

.filter-form-grid select,
.filter-form-grid .custom-select-trigger,
.filter-form-grid .col-customizer-btn {
  height: 42px;
  border-radius: var(--radius-sm, 10px);
  box-sizing: border-box;
}

.filter-form-grid .field label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.field-label-icon {
  font-size: 0.9rem;
  opacity: 0.9;
}

.filter-form-grid .field:hover label {
  color: var(--text);
}

.filter-form-grid .field.field-active label {
  color: var(--cyan);
}

/* Glowing Accent when Field Has Active Selection */
.filter-form-grid .field.field-active input,
.filter-form-grid .field.field-active select,
.filter-form-grid .field.field-active .custom-select-trigger {
  border-color: rgba(0, 240, 255, 0.55) !important;
  background: rgba(0, 240, 255, 0.1) !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Embedded Search Input Group */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-icon-inside {
  position: absolute;
  left: 14px;
  font-size: 0.9rem;
  color: var(--text-dim);
  pointer-events: none;
  transition: color 0.25s ease;
}

.search-input-wrapper input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(7, 11, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-input-wrapper input:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(7, 11, 20, 0.95);
}

.search-input-wrapper input:focus {
  border-color: var(--cyan);
  background: rgba(11, 16, 28, 1);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 8px rgba(0, 240, 255, 0.1);
  outline: none;
}

.search-input-wrapper input:focus ~ .search-icon-inside {
  color: var(--cyan);
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-clear-btn:hover {
  background: var(--red);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: var(--shadow-red);
}

/* Actions Field Group */
.filter-form-grid .field-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-top: 0 !important;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .filter-form-grid .field-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
  }
}

.filter-form-grid .field-actions .btn {
  height: 42px;
  padding: 0 1.25rem;
  border-radius: var(--radius-sm, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
}

.filter-form-grid .field-actions .btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim, rgba(255, 255, 255, 0.7));
  transition: all 0.25s ease;
}

.filter-form-grid .field-actions .btn-quiet:hover {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.4);
  color: #ff6b6b;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.25);
  transform: translateY(-2px);
}

.btn-glow {
  position: relative;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

.btn-glow:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 15px rgba(153, 51, 255, 0.4) !important;
}

.btn-glow:active {
  transform: translateY(0) scale(0.98);
}

.btn-glow .btn-icon {
  font-size: 0.9rem;
  margin-right: 0.2rem;
}

/* Active Filter Pills Bar */
.active-filters-pills-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(0, 240, 255, 0.18);
  flex-wrap: wrap;
}

.active-pills-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cyan);
}

.active-pills-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 4px 10px 4px 12px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.active-filter-pill:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

.active-filter-pill strong {
  color: var(--cyan);
  font-weight: 700;
}

.pill-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  line-height: 1;
}

.pill-remove-btn:hover {
  background: var(--red);
  color: #ffffff;
  transform: scale(1.15);
}




/* "No fixed term" sits under the day box it overrides, reading as a modifier of
   that field rather than as a seventh attribute of its own. */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: none;
  cursor: pointer;
}

.checkbox-inline .label-hint {
  margin-left: 0.15rem;
}

/* A day count needs room for four digits, not for a category name. */
.narrow-input {
  width: 5.5rem;
  display: inline-block;
}

/* Initial visibility, as a class rather than a style attribute.
   The admin surface sends `style-src 'self'` with no `unsafe-inline`, so a
   `style="display:none"` written into admin markup is parsed, reported as a CSP
   violation, and never applied -- the element renders visible. That is how the Save
   Price button carried a permanently visible ⏳ spinner and the services filter card
   opened showing "0 Active Filters" and a Reset link with nothing to reset.

   Scripted HIDING is unaffected: `element.style.display = "none"` is a CSSOM write,
   which CSP does not block, and that inline declaration outranks this class.

   Scripted SHOWING is not. `element.style.display = ""` deletes the inline declaration
   rather than setting a visible value, so the class underneath takes over again and the
   element stays hidden -- which is how the create-customer modal came to hide its form
   panel on success and then show an empty shell where the credentials should have been.
   To reveal an element that starts with this class, remove the class:
   `element.classList.remove("is-hidden")`. */
.is-hidden {
  display: none;
}

/* Submit row: buttons in a line with a little air above them. */
.form-actions-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

/* A second line tucked under the figure it belongs to, inside a table cell. */
.stat-note-tight {
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER CONTROL SUITE - SUPPLIER CATALOGUE REORGANIZATION
   ═══════════════════════════════════════════════════════════════ */

.cyber-control-suite {
  background: linear-gradient(135deg, rgba(11, 15, 25, 0.95), rgba(15, 23, 42, 0.85));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 0 1px rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-suite-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border);
}

.cyber-suite-title-area {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cyber-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.cyber-suite-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cyber-suite-note {
  margin: 0.2rem 0 0;
  font-size: 0.83rem;
  color: var(--text-dim);
}

.cyber-suite-metrics {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.1);
}

.metric-pill.alt {
  background: rgba(153, 51, 255, 0.06);
  border-color: rgba(153, 51, 255, 0.2);
  box-shadow: 0 0 12px rgba(153, 51, 255, 0.1);
}

.metric-value {
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--mono);
}

.metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 700;
}

/* Controls Grid */
.cyber-controls-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 992px) {
  .cyber-controls-grid {
    grid-template-columns: 1fr;
  }
}

/* Panel Containers */
.cyber-panel {
  background: rgba(7, 10, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 1.15rem;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cyber-panel:hover {
  border-color: rgba(0, 240, 255, 0.2);
}

.cyber-panel-refetch {
  background: linear-gradient(145deg, rgba(7, 10, 18, 0.8), rgba(0, 240, 255, 0.03));
  border: 1px solid rgba(0, 240, 255, 0.18);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.05);
}

.cyber-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.panel-icon {
  font-size: 1.05rem;
}

.cyber-panel-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
  line-height: 1.45;
}

/* Field Layout */
.filter-fields-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .filter-fields-row {
    grid-template-columns: 1fr;
  }
}

.field-cyber {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-cyber label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.field-icon {
  font-size: 0.85rem;
  opacity: 0.8;
}

.input-wrapper, .select-wrapper {
  position: relative;
  width: 100%;
}

.field-cyber input[type="text"],
.field-cyber select {
  width: 100%;
  height: 40px;
  padding: 0 0.85rem;
  background: rgba(11, 15, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 0.88rem;
  font-family: var(--font);
  transition: all 0.25s ease;
  outline: none;
}

.field-cyber select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300F0FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.field-cyber input[type="text"]:focus,
.field-cyber select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3);
  background: rgba(7, 10, 18, 0.95);
}

.filter-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cyber-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--cyan) 0%, #0099ff 100%);
  color: #070a12;
  font-weight: 800;
  border: none;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-cyan);
  transition: all 0.25s ease;
  font-size: 0.88rem;
}

.cyber-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
  color: #000000;
}

.cyber-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  font-size: 0.88rem;
  font-weight: 700;
}

.cyber-btn-quiet:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.btn-cyber-sync {
  width: 100%;
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(153, 51, 255, 0.2) 100%);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #ffffff;
  font-weight: 800;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  font-size: 0.88rem;
}

.btn-cyber-sync:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(153, 51, 255, 0.35) 100%);
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
}

.cyber-sync-note {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* Status Filter Tabs */
.cyber-status-tabs-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.status-tabs-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}

.cyber-status-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cyber-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
  text-decoration: none;
  transition: all 0.25s ease;
}

.cyber-tab:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.cyber-tab.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
}

.cyber-tab:hover .tab-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.tab-dot.active {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.tab-count {
  font-size: 0.76rem;
  opacity: 0.75;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY MANAGEMENT ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.cat-header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.cat-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cat-search-box {
  position: relative;
  min-width: 260px;
}

.cat-search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.4rem;
  border-radius: var(--radius-md);
  background: var(--glass-cyber);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.88rem;
  transition: all 0.25s ease;
}

.cat-search-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.08);
}

.cat-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.9rem;
  pointer-events: none;
}

.cat-seed-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(153, 51, 255, 0.25) 100%);
  border: 1px solid var(--cyan);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
  transition: all 0.25s ease;
  text-decoration: none;
}

.cat-seed-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35) 0%, rgba(153, 51, 255, 0.45) 100%);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.45);
  transform: translateY(-2px);
  color: #ffffff;
}

.cat-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.85rem;
  min-height: 34px;
}

.cat-emoji-badge {
  font-size: 1.15rem;
  line-height: 1;
}

.order-stepper-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--glass-deep, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.order-stepper-wrap input {
  width: 50px !important;
  text-align: center;
  border: none !important;
  background: transparent !important;
  font-weight: 700;
  font-family: var(--mono);
  padding: 0.2rem !important;
}

.stepper-btn {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--text-dim);
  width: 22px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stepper-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  color: var(--cyan);
}

.cat-service-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.25);
  color: var(--green);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cat-service-count-pill:hover {
  background: rgba(0, 255, 102, 0.25);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
  transform: translateY(-1px);
  color: #ffffff;
}

.cat-service-count-zero {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}

.cat-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.06) 0%, rgba(153, 51, 255, 0.06) 100%);
  border: 1px solid rgba(0, 240, 255, 0.18);
  margin-top: 1.5rem;
}

.cat-info-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cyan);
}

.cat-info-content h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.92rem;
  color: var(--cyan);
}

.cat-info-content p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER FILTER SUITE & SELECTION BAR ENHANCEMENTS
═══════════════════════════════════════════════════════════════ */

.field-cyber {
  transition: all 0.25s ease;
}

.field-cyber.field-active label {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.field-cyber.field-active .select-wrapper select,
.field-cyber.field-active input {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.select-wrapper select option {
  background: #0b0f19;
  color: #f0f4ff;
  padding: 8px 12px;
}

.select-wrapper select option:checked {
  background: rgba(0, 240, 255, 0.25) !important;
  color: var(--cyan) !important;
  font-weight: 700;
}

.cyber-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.07) 0%, rgba(153, 51, 255, 0.05) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.btn-cyber-select {
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  color: var(--cyan) !important;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.btn-cyber-select:hover {
  background: rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn-cyber-clear {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text-dim) !important;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.btn-cyber-clear:hover {
  background: rgba(255, 51, 51, 0.15) !important;
  border-color: rgba(255, 51, 51, 0.3) !important;
  color: #ff6666 !important;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.25);
  transform: translateY(-1px);
}

.cyber-pager-status {
  font-size: 0.92rem;
  color: var(--text);
  margin-right: 1rem;
}

.cyber-pager-status strong {
  color: var(--cyan);
  font-size: 1.1rem;
}

.btn-filter-clear-active {
  background: rgba(255, 51, 51, 0.1) !important;
  border: 1px solid rgba(255, 51, 51, 0.25) !important;
  color: #ff6666 !important;
}

.btn-filter-clear-active:hover {
  background: rgba(255, 51, 51, 0.25) !important;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
}



/* ==========================================================================
   Category management page
   --------------------------------------------------------------------------
   These rules replace 32 inline `style="..."` attributes that the admin CSP
   stripped, so none of them was ever applied. Converting them therefore
   *changes* how the page renders -- that is the point, not a side effect. The
   most visible one: the "Add a Category" live-preview pill carried
   `style="display:none"` and so was permanently on screen, showing an empty
   badge before anything had been typed. It is `.is-hidden` now, which the
   picker script toggles as it always intended to.
   ========================================================================== */

.cat-metrics-bar {
  margin-bottom: 1.5rem;
}

/* A form that exists only to wrap a button must not add the block spacing a
   standalone form gets, or the button sits out of line with its toolbar. */
.cat-flush-form {
  margin: 0;
}

.cat-add-card {
  border: 1px solid var(--glass-cyber);
  background: var(--glass-cyber);
}

/* Title on the left, status pill on the right. Wraps rather than overflowing:
   the pill grows with whatever category name is being previewed. */
.cat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-card-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The add form's three inputs share one row. Preset is widest because its
   options are whole sentences; emoji is fixed because it holds one glyph. */
.cat-field-preset {
  flex: 1.5;
}

.cat-field-name {
  flex: 1.2;
}

.cat-field-emoji {
  width: 100px;
}

/* Used by the add form and by every row's inline emoji input. A single glyph
   centred and set slightly larger than the surrounding text. */
.cat-emoji-input {
  text-align: center;
  font-size: 1.1rem;
}

.cat-add-btn {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.cat-count-badge {
  margin: 0;
}

/* Table column widths. Set on the `th` so the browser sizes the column once
   from the header rather than from whichever row happens to be widest. */
.cat-col-order {
  width: 110px;
}

.cat-col-emoji {
  width: 90px;
  text-align: center;
}

.cat-col-items {
  width: 140px;
  text-align: center;
}

.cat-col-active {
  width: 100px;
  text-align: center;
}

.cat-col-actions {
  width: 160px;
  text-align: right;
}

.cat-cell-center {
  text-align: center;
}

/* Actions must not wrap: Save and Delete breaking onto two lines makes the row
   taller than every other one and the table looks broken. */
.cat-cell-actions {
  text-align: right;
  white-space: nowrap;
}

.cat-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cat-row-emoji {
  font-size: 1.25rem;
}

.cat-name-input {
  font-weight: 600;
}

.cat-checkbox-center {
  justify-content: center;
}

.cat-save-btn {
  margin-right: 0.35rem;
}

/* Destructive but quiet: red on the text and border only. Deliberately not
   `.btn-danger`, which is a filled red button -- a per-row Delete rendered that
   loudly turns a table of categories into a wall of warnings. */
.cat-delete-btn {
  color: var(--red);
  border-color: rgba(255, 51, 51, 0.3);
}

.cat-empty-state {
  text-align: center;
  padding: 3rem 1rem;
}

.cat-empty-text {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Inline-block so the centring on the parent applies to the form itself. */
/* Inline-block so the centring on the parent applies to the form itself. */
.cat-empty-form {
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER CATEGORY TABLE & 3-DOT ACTION MENUS
   ═══════════════════════════════════════════════════════════════ */

.cat-table-card {
  position: relative;
  overflow: visible !important;
}

.cat-table-card .table-scroll {
  overflow-x: auto;
  overflow-y: visible !important;
  position: relative;
}

.cat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.cat-row {
  position: relative;
  background: rgba(13, 18, 32, 0.7);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-row td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

.cat-row:hover {
  background: rgba(0, 240, 255, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.cat-row.menu-active,
.cat-row:has(.action-dropdown-wrapper.active),
.cat-row.is-editing {
  position: relative !important;
  z-index: 500 !important;
  background: rgba(0, 240, 255, 0.08) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.15) !important;
}

.cat-info-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cat-avatar-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16) 0%, rgba(153, 51, 255, 0.16) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.15);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cat-row:hover .cat-avatar-icon {
  transform: scale(1.08);
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.4);
}

.cat-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-title-text {
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.cat-id-subtext {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-family: var(--mono);
}

.cat-order-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cat-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  font-family: var(--mono, monospace);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--cyan, #00f0ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cat-order-steppers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-step-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.cat-step-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

/* Status Toggle Switch */
.cat-status-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.cat-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.cat-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cat-toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px; width: 14px;
  left: 3px; bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-toggle-switch input:checked + .cat-toggle-slider {
  background-color: rgba(0, 255, 102, 0.3);
  border-color: rgba(0, 255, 102, 0.6);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
}

.cat-toggle-switch input:checked + .cat-toggle-slider:before {
  transform: translateX(18px);
  background-color: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.8);
}

.cat-status-badge {
  font-size: 0.8rem;
  font-weight: 700;
}

.cat-status-badge.is-active {
  color: var(--green);
}

.cat-status-badge.is-inactive {
  color: var(--text-dim);
}

/* 3-Dot Action Button & Popover */
.cat-cell-actions {
  min-width: 170px;
  text-align: right;
  vertical-align: middle;
  position: relative;
  z-index: 1000;
}

.cat-3dot-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-3dot-btn:hover, .action-dropdown-wrapper.active .cat-3dot-btn {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.cat-3dot-icon {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

.cat-dropdown-popover {
  min-width: 220px !important;
  /* Placement is inherited from .action-dropdown-menu and overridden by the portal
     when the menu is open. Repeating it here with !important beat the script's own
     coordinates, which is why this menu used to land in the corner of the screen. */
  border-radius: 14px !important;
  background: rgba(11, 15, 27, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.2) !important;
  z-index: 99999 !important;
  padding: 8px !important;
}

.cat-dropdown-popover .action-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.cat-dropdown-popover .action-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.14) !important;
  color: #00f0ff !important;
  transform: translateX(3px) !important;
}

.cat-dropdown-popover .action-dropdown-item.item-danger:hover {
  background: rgba(255, 51, 51, 0.14) !important;
  color: #ff4d4d !important;
}

/* Inline Edit Mode Elements */
.cat-edit-field-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cat-edit-emoji-input {
  width: 54px !important;
  text-align: center;
  font-size: 1.1rem;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  background: rgba(11, 15, 27, 0.9) !important;
  color: #ffffff !important;
}

.cat-edit-name-input {
  flex: 1;
  font-weight: 600;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  background: rgba(11, 15, 27, 0.9) !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
}

.cat-edit-notes {
  width: 100%;
  margin-top: 0.6rem;
  min-height: 110px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  background: rgba(11, 15, 27, 0.9) !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  resize: vertical;
}

.cat-edit-notes-hint {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.cat-edit-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.cat-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #00f0ff 0%, #7000ff 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cat-save-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5) !important;
}

.cat-cancel-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cat-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER SELECTION SUITE & ROW HIGHLIGHT DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.cyber-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.4rem;
  margin-bottom: 1.25rem;
  background: rgba(11, 15, 27, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.08);
  flex-wrap: wrap;
}

.selection-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-cyber-select {
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  color: var(--cyan) !important;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-cyber-select:hover {
  background: rgba(0, 240, 255, 0.22) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
  transform: translateY(-2px);
}

.btn-cyber-clear {
  background: rgba(255, 77, 77, 0.08) !important;
  border: 1px solid rgba(255, 77, 77, 0.25) !important;
  color: #ff6b6b !important;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-cyber-clear:hover {
  background: rgba(255, 77, 77, 0.2) !important;
  border-color: #ff6b6b !important;
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.35) !important;
  transform: translateY(-2px);
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cyber-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(145deg, rgba(13, 20, 36, 0.95), rgba(8, 12, 22, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.15);
  margin-bottom: 1rem;
}

.selection-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-cyber-select,
.btn-cyber-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cyber-select:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.btn-cyber-clear:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: #f43f5e;
  color: #f43f5e;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cyber-pager-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 100px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: all 0.25s ease;
}

.cyber-pager-status strong[data-selection-count] {
  color: var(--cyan);
  font-weight: 800;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.btn-glow {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: cyber-pulse 2.5s infinite;
}

@keyframes cyber-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
  }
}

.cyber-table-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  border-radius: 5px !important;
  background: rgba(11, 15, 27, 0.8) !important;
  cursor: pointer !important;
  position: relative;
  transition: all 0.2s ease;
  display: inline-block;
  vertical-align: middle;
  padding: 0 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.cyber-table-checkbox:hover {
  border-color: var(--cyan, #00f0ff) !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
}

.cyber-table-checkbox:checked {
  background: linear-gradient(135deg, #00f0ff, #0099ff) !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6) !important;
}

.cyber-table-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 900;
  color: #0b0f1b;
}

/* Row selection highlight styling */
.import-table tbody tr.is-selected,
.import-table tbody tr.row-selected,
#services-table tbody tr.is-selected,
#services-table tbody tr.row-selected {
  background: rgba(0, 240, 255, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--cyan);
  transition: background-color 0.2s ease;
}

.import-table tbody tr.row-selectable,
#services-table tbody tr.row-selectable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.import-table tbody tr.row-selectable:hover {
  background: rgba(0, 240, 255, 0.04);
}

/* Already on the shelf.

   The edge marker is set on the first cell rather than the row so it does not
   fight the row-level inset shadow that .is-selected uses -- an imported row that
   the operator has also ticked needs to show both, and a row-level rule would let
   whichever loaded last silently win. */
.import-table tbody tr.row-imported > td:first-child {
  box-shadow: inset 3px 0 0 var(--green);
}

.row-imported-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: .4rem;
}

.row-imported-tag .stat-note {
  color: var(--green);
  font-weight: 700;
}

/* "Same item, different name" candidates on the offer detail screen. */
.link-candidates {
  margin: .75rem 0 1rem;
}

.link-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.04);
}

.link-candidate + .link-candidate {
  margin-top: .5rem;
}

.link-candidate-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}

/* The listing's seven attributes beside the target product's. Sits between the
   product picker and the map button because it is what the button is about to be
   judged on. */
.sig-compare {
  margin: 1rem 0 0;
  padding: .9rem 1rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.03);
}

.sig-compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}

.sig-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.sig-compare-table th,
.sig-compare-table td {
  padding: .35rem .5rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.sig-compare-table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.sig-compare-table tbody th {
  font-weight: 500;
  opacity: .75;
  white-space: nowrap;
}

.sig-compare-table [data-mark] {
  width: 1.5rem;
  text-align: center;
}

/* Only the rows that block the mapping are coloured. Marking agreement as loudly as
   disagreement would leave seven highlighted rows and nothing to look at first. */
.sig-row-differs td,
.sig-row-differs th {
  color: var(--red);
}

.sig-compare [data-compare-note] {
  margin: .6rem 0 0;
}

/* What correcting a product's attributes costs: the suppliers it may detach. Warn
   colouring rather than the panel's usual cyan, because this block exists to be
   read before the button beneath it is pressed. */
.sig-suppliers {
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 184, 0, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(255, 184, 0, 0.06);
}

.sig-suppliers .stat-note {
  margin: 0 0 .5rem;
}

/* ==========================================================================
   Real-Time Sharp Autocomplete Engine & Search Filter Enhancements
   ========================================================================== */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input-wrapper input {
  width: 100%;
  padding-right: 2.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-clear-btn {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim, rgba(240, 244, 255, 0.6));
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.search-clear-btn:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.15);
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.4);
}

.search-clear-btn.is-hidden {
  display: none !important;
}

/* Floating Autocomplete Suggestions Dropdown */
.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: rgba(13, 22, 38, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 240, 255, 0.18);
  max-height: 340px;
  overflow-y: auto;
  padding: 0.4rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
}

.search-suggestions-dropdown.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-PREMIUM CUSTOM SELECT DROPDOWNS & TOOLTIPS DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Targeted overflow-visible elevation for dropdown ancestors.
   IMPORTANT: We must NOT apply these overrides to modal or scrollable containers
   (.cyber-modal-backdrop, .cyber-modal, .cyber-modal-body, .modal-body, .drawer-body, body, html)
   because forcing overflow:visible on them destroys their scroll container and breaks layout. */
.has-open-dropdown:not(.cyber-modal-backdrop):not(.cyber-modal):not(.cyber-modal-body):not(.modal-body):not(.drawer-body):not(body):not(html):not(.sidebar):not(.main-content-wrapper):not(.page-wrapper),
.field:has(.custom-select-wrapper.open),
.field-group:has(.custom-select-wrapper.open),
.form-grid-2:has(.custom-select-wrapper.open),
.form-grid-3:has(.custom-select-wrapper.open),
.cyber-form:has(.custom-select-wrapper.open),
.form-section-card:has(.custom-select-wrapper.open),
.form-card:has(.custom-select-wrapper.open),
.card:has(.custom-select-wrapper.open),
.filters:has(.custom-select-wrapper.open),
.glass-card:has(.custom-select-wrapper.open),
.price-modal-card:has(.custom-select-wrapper.open),
.cyber-preview-card:has(.custom-select-wrapper.open),
.field:has(.search-suggestions-dropdown.is-active),
.field:has(.cyber-search-suggestions.is-active),
.field:has(.cyber-search-suggestions:not([hidden])),
.field:has(.col-customizer-dropdown.open),
.card:has(.col-customizer-dropdown.open),
.filters:has(.col-customizer-dropdown.open),
.card:has(.col-customizer-menu.is-active),
.field:has(.lang-dropdown.open),
.field:has(.dropdown-wrapper.open),
.field:has(.custom-dropdown.open) {
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
  z-index: 10;
}

.custom-select-wrapper.open {
  z-index: 100000 !important;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  height: 44px;
  padding: 0.65rem 1.1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(13, 18, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.custom-select-trigger .trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.custom-select-trigger .trigger-arrow {
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 800;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: rgba(0, 240, 255, 0.55);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.1);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.98);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(0, 240, 255, 0.2);
  border-radius: 12px;
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 100001 !important;
  background: #0d1526 !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.96), 0 0 35px rgba(0, 240, 255, 0.3);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
}

.custom-select-wrapper.open .custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-wrapper.open-upward .custom-select-panel {
  top: auto;
  bottom: calc(100% + 5px);
  transform: translateY(8px) scale(0.98);
}

.custom-select-wrapper.open.open-upward .custom-select-panel {
  transform: translateY(0) scale(1);
}

.suggestion-header {
  padding: 0.4rem 0.85rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan, #00f0ff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
}

.suggestion-item {
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-left: 3px solid transparent;
  color: var(--text, #f0f4ff);
  text-decoration: none;
}

.suggestion-item:hover,
.suggestion-item.is-selected {
  background: rgba(0, 240, 255, 0.14);
  border-left-color: var(--cyan, #00f0ff);
}

.suggestion-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.suggestion-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta {
  font-size: 0.75rem;
  color: var(--text-dim, rgba(240, 244, 255, 0.65));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.suggestion-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--cyan, #00f0ff);
  white-space: nowrap;
}

.suggestion-highlight,
mark.search-highlight {
  background: rgba(0, 240, 255, 0.25);
  color: #00f0ff;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.suggestion-empty {
  padding: 1rem 0.85rem;
  text-align: center;
  font-size: 0.83rem;
  color: var(--text-dim, rgba(240, 244, 255, 0.6));
}

.search-results-counter {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  margin-left: auto;
  transition: all 0.2s ease;
}

/* Cyber Search Interactive Upgrades */
.cyber-search-wrapper {
  position: relative;
  width: 100%;
}

.cyber-search-wrapper input {
  padding-right: 2.5rem !important;
}

.cyber-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim, rgba(240, 244, 255, 0.6));
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.cyber-search-clear:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.2);
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}

.cyber-search-spinner {
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 240, 255, 0.25);
  border-top-color: var(--cyan, #00f0ff);
  border-radius: 50%;
  animation: cyber-spin 0.6s linear infinite;
  z-index: 5;
}

@keyframes cyber-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.cyber-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 240, 255, 0.25);
  max-height: 360px;
  overflow-y: auto;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.cyber-search-suggestions.is-active,
.cyber-search-suggestions:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block !important;
}

.cyber-suggestion-item,
.cyber-search-suggestions .suggestion-item {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
  color: var(--text, #f0f4ff);
}

.cyber-suggestion-item:hover,
.cyber-suggestion-item.is-selected,
.cyber-search-suggestions .suggestion-item:hover,
.cyber-search-suggestions .suggestion-item.is-selected {
  background: rgba(0, 240, 255, 0.15);
  border-left-color: var(--cyan, #00f0ff);
}

.cyber-suggestion-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

.cyber-suggestion-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan, #00f0ff);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.cyber-highlight,
mark.cyber-highlight {
  background: rgba(0, 240, 255, 0.28);
  color: #ffffff;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 3px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

/* Dynamic Live Table Update Loading Feedback */
.is-loading-catalogue {
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM SUPPLIER CATALOGUE & OFFERS MATRIX DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.import-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.55rem;
  margin-top: 0.5rem;
}

.import-table thead th {
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(12px);
  padding: 0.85rem 1rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cyan, #00f0ff);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  white-space: nowrap;
}

.import-table thead th:first-child {
  border-left: 1px solid rgba(0, 240, 255, 0.2);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 44px;
  text-align: center;
}

.import-table thead th:last-child {
  border-right: 1px solid rgba(0, 240, 255, 0.2);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.import-table tbody tr {
  background: linear-gradient(180deg, rgba(14, 20, 36, 0.75) 0%, rgba(9, 13, 24, 0.88) 100%);
  border: 1px solid rgba(0, 240, 255, 0.14);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.import-table tbody td {
  padding: 0.95rem 1rem;
  border-top: 1px solid rgba(0, 240, 255, 0.1);
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  vertical-align: middle;
  background: transparent;
}

.import-table tbody tr td:first-child {
  border-left: 1px solid rgba(0, 240, 255, 0.1);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  text-align: center;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.import-table tbody tr td:last-child {
  border-right: 1px solid rgba(0, 240, 255, 0.1);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.import-table tbody tr:hover {
  background: linear-gradient(180deg, rgba(16, 26, 48, 0.9) 0%, rgba(11, 18, 34, 0.96) 100%);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 240, 255, 0.15);
  transform: translateY(-1px);
}

.import-table tbody tr.is-selected,
.import-table tbody tr.row-selected {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12) 0%, rgba(7, 24, 44, 0.88) 100%) !important;
  border-color: var(--cyan, #00f0ff) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.08) !important;
}

.import-table tbody tr.is-selected td:first-child,
.import-table tbody tr.row-selected td:first-child {
  box-shadow: inset 4px 0 0 var(--cyan, #00f0ff);
}

.import-table tbody tr.row-imported td:first-child {
  box-shadow: inset 4px 0 0 #10b981;
}

/* Item Column Styling */
.cell-item {
  min-width: 320px;
  max-width: 440px;
}

.catalog-item-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.row-imported-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  font-size: 0.78rem;
}

.item-product-link {
  font-weight: 700;
  color: #34d399 !important;
  text-decoration: none;
}

.item-product-link:hover {
  text-decoration: underline;
}

.imported-price-tag {
  color: #a7f3d0;
  font-weight: 600;
}

.catalog-item-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.catalog-name-input-wrapper {
  position: relative;
  width: 100%;
}

.catalog-name-input {
  width: 100%;
  height: 38px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: rgba(11, 15, 27, 0.7) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 8px !important;
  padding: 0 0.85rem !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.catalog-name-input:focus {
  background: rgba(13, 20, 36, 0.95) !important;
  border-color: var(--cyan, #00f0ff) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35), inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
}

.catalog-item-name-static {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.catalog-item-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.pill-suppliers {
  background: rgba(255, 184, 0, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(255, 184, 0, 0.3);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}

.pill-savings {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.pill-shelf {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}

.catalog-meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.73rem;
  color: var(--text-dim, #94a3b8);
  font-weight: 600;
}

.catalog-chip .chip-icon {
  font-size: 0.8rem;
}

.catalog-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.catalog-note-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  background: rgba(15, 23, 42, 0.6);
  border-left: 3px solid rgba(0, 240, 255, 0.4);
  border-radius: 0 6px 6px 0;
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

.catalog-note-chip .note-bullet {
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Suppliers Column Styling */
.cell-suppliers {
  min-width: 220px;
}

.catalog-suppliers-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.catalog-supplier-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.65rem;
  background: rgba(11, 16, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.catalog-supplier-row:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(0, 240, 255, 0.2);
}

.supplier-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.supplier-name-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: #f1f5f9;
  text-decoration: none;
  transition: color 0.15s ease;
}

.supplier-name-link:hover {
  color: var(--cyan, #00f0ff);
  text-decoration: underline;
}

.supplier-cost-tag {
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.supplier-cost-tag.is-cheapest {
  color: #34d399;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.supplier-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pill-micro {
  font-size: 0.66rem !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

.stock-count-text {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

/* Pricing Display & Input Cards */
.price-display-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.price-usd {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.price-pkr-pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim, #94a3b8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-price-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 120px;
}

.catalog-price-input-group .currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.catalog-price-input-group .currency-prefix {
  position: absolute;
  left: 0.75rem;
  color: var(--cyan, #00f0ff);
  font-weight: 800;
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 2;
}

.catalog-price-input {
  width: 100% !important;
  height: 38px !important;
  padding-left: 1.6rem !important;
  padding-right: 0.65rem !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(11, 15, 27, 0.7) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  border-radius: 8px !important;
  font-variant-numeric: tabular-nums !important;
}

.catalog-price-input:focus {
  border-color: var(--cyan, #00f0ff) !important;
  background: rgba(13, 20, 36, 0.95) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35) !important;
}

/* Markup Pill Badge */
.markup-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--cyan, #00f0ff);
  font-variant-numeric: tabular-nums;
}

.row-warn .markup-pill-badge {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* Category Select */
.cell-category {
  min-width: 170px;
}

.category-select-wrapper select,
.catalog-category-select {
  height: 38px !important;
  font-size: 0.85rem !important;
  padding: 0 0.85rem !important;
  border-radius: 8px !important;
  background: rgba(11, 15, 27, 0.7) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
}

/* Status Column */
.status-cell-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.catalog-quick-link {
  font-size: 0.76rem;
  color: var(--cyan, #00f0ff);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.15s ease;
}

.catalog-quick-link:hover {
  text-decoration: underline;
  transform: translateX(2px);
}

.table-scroll {
  overflow-x: auto;
  padding-bottom: 2rem;
}

.cyber-action-dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
}

.btn-cyber-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.32);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.btn-cyber-action:hover,
.btn-cyber-action.is-active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--cyan, #00f0ff);
  color: #ffffff;
  box-shadow: var(--shadow-cyan, 0 0 15px rgba(0, 240, 255, 0.35));
  transform: translateY(-1px);
}

.action-caret {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.btn-cyber-action.is-active .action-caret {
  transform: rotate(180deg);
}

.cyber-action-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 999999;
  width: 290px;
  max-width: 340px;
  box-sizing: border-box;
  background: #0b0f1b;
  background: linear-gradient(145deg, rgba(15, 22, 38, 0.98), rgba(9, 13, 24, 0.99));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0.65rem;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  transform-origin: top right;
}

.cyber-action-menu.is-open,
.cyber-action-menu.is-portaled {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: actionMenuPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.cyber-action-menu.is-open-upward {
  transform-origin: bottom right;
  animation: actionMenuPopInUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.action-menu-header {
  padding: 0.4rem 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.action-menu-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-bright, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.action-menu-pill {
  font-size: 0.68rem;
  padding: 2px 6px;
}

.action-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-dim, #94a3b8);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.18s ease;
}

.action-menu-item:hover {
  background: rgba(0, 240, 255, 0.08);
  color: var(--text-bright, #ffffff);
  border-color: rgba(0, 240, 255, 0.2);
  transform: translateX(2px);
}

.action-menu-item.action-menu-primary {
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.18);
  color: var(--cyan, #00f0ff);
}

.action-menu-item.action-menu-primary:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.action-menu-item.action-menu-danger {
  color: #f87171;
}

.action-menu-item.action-menu-danger:hover {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.35);
  color: #ff4d4d;
}

.action-item-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.action-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.action-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.action-item-sub {
  font-size: 0.72rem;
  color: var(--text-dim, #64748b);
  line-height: 1.25;
  margin-top: 2px;
  white-space: normal;
}

.action-item-arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.action-menu-item:hover .action-item-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.action-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0;
}

.action-menu-form {
  display: block;
  margin: 0;
  padding: 0;
}

button.action-menu-item {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: left;
  background: transparent;
}

.action-menu-item.action-menu-success {
  color: #34d399;
}

.action-menu-item.action-menu-success:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.seller-table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cell-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.btn-cyber-direct-import {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(124, 58, 237, 0.35));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 240, 255, 0.2);
  white-space: nowrap;
}

.btn-cyber-direct-import:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.38), rgba(124, 58, 237, 0.55));
  border-color: var(--cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.5), 0 0 25px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.btn-cyber-direct-import:active {
  transform: translateY(0);
}

.btn-cyber-direct-import.is-loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: wait;
}

.catalog-quick-import-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cyan, #00f0ff);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}

.catalog-quick-import-link:hover {
  color: #ffffff;
  text-decoration: underline;
  transform: translateX(2px);
}

.action-menu-item.action-menu-import {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(0, 240, 255, 0.32);
  color: #ffffff;
}

.action-menu-item.action-menu-import:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(124, 58, 237, 0.35));
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.action-menu-subtitle {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim, #64748b);
  padding: 0.25rem 0.65rem 0.1rem;
}

.action-menu-suppliers-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 140px;
  overflow-y: auto;
}

.action-menu-subitem {
  padding: 0.4rem 0.65rem;
}



/* ═══════════════════════════════════════════════════════════════
   HIGHLY INTERACTIVE PREMIUM COPY BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(112, 0, 255, 0.08)) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 10px !important;
  color: #00f0ff !important;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0;
  outline: none !important;
  overflow: visible !important;
}

.copy-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(112, 0, 255, 0.18)) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(0, 240, 255, 0.25) !important;
}

.copy-btn:active {
  transform: translateY(0) scale(0.93) !important;
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.3) !important;
}

.copy-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 18px;
  height: 18px;
}

.copy-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.copy-btn [data-icon="copy"],
.copy-btn .copy-icon {
  display: inline-block;
}

.copy-btn [data-icon="done"],
.copy-btn .done-icon {
  display: none;
  color: #34d399;
}

/* Floating "Copied!" Badge / Tooltip */
.copy-badge {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.85);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  letter-spacing: 0.03em;
}

.copy-badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #059669 transparent transparent transparent;
}

/* Copied Active State */
.copy-btn.copied {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(52, 211, 153, 0.15)) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.55), inset 0 0 10px rgba(52, 211, 153, 0.2) !important;
  animation: copy-pulse-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copy-btn.copied [data-icon="copy"],
.copy-btn.copied .copy-icon {
  display: none !important;
}

.copy-btn.copied [data-icon="done"],
.copy-btn.copied .done-icon {
  display: inline-block !important;
  animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.copy-btn.copied .copy-badge {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

@keyframes copy-pulse-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes check-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT ATTRIBUTE EDITOR MODAL
   The seven attributes of one product, opened over the services table
   or the offer review page. Shares the price modal's shell; everything
   below it exists to price the edit while it is being made.
═══════════════════════════════════════════════════════════════ */

dialog.attrs-modal {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 760px;
  width: 94vw;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 18px;
  color: #ffffff;
}

dialog.attrs-modal::backdrop {
  background: rgba(8, 12, 22, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.attrs-modal-card {
  position: relative;
  background: linear-gradient(150deg, rgba(20, 27, 45, 0.97), rgba(10, 14, 26, 0.99));
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.15);
  border-radius: 18px;
  overflow: hidden;
  animation: cyberModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.attrs-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00f0ff, #9933ff, #00f0ff);
  background-size: 200% 100%;
  animation: cyber-glow-bar 4s linear infinite;
  z-index: 10;
}

.attrs-modal-card .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.attrs-modal-card .modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.attrs-modal-card .modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  font-size: 1.35rem;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.15), 0 0 15px rgba(0, 240, 255, 0.1);
  flex-shrink: 0;
}

.attrs-modal-card .modal-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.attrs-modal-card .modal-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.attrs-modal-card .modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.attrs-modal-card .modal-close-btn:hover {
  background: rgba(255, 51, 51, 0.15);
  border-color: rgba(255, 51, 51, 0.35);
  color: #f87171;
  transform: rotate(90deg);
}

.attrs-modal-card .modal-body {
  padding: 1.25rem 1.5rem;
  max-height: min(66vh, 660px);
  overflow-y: auto;
}

/* Ensure dropdown stacking context inside attrs-modal-card */
.attrs-modal-card .custom-select-wrapper.open {
  z-index: 1000;
}

/* --- Loading state ------------------------------------------------- */

.attrs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.attrs-loading-failed {
  color: #fca5a5;
  text-align: center;
  display: block;
}

.attrs-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-top-color: var(--cyan);
  animation: attrs-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes attrs-spin {
  to { transform: rotate(360deg); }
}

/* --- Completeness meter -------------------------------------------- */

.attrs-status-card {
  border: 1px solid rgba(255, 184, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.07), rgba(7, 10, 18, 0.6));
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.attrs-status-card.is-complete {
  border-color: rgba(0, 255, 102, 0.32);
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.07), rgba(7, 10, 18, 0.6));
}

.attrs-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.attrs-status-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--amber);
  letter-spacing: -0.01em;
}

.attrs-status-card.is-complete .attrs-status-verdict {
  color: var(--green);
}

.attrs-verdict-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: attrs-dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes attrs-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.attrs-status-count {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.attrs-meter {
  position: relative;
  height: 5px;
  margin: 0.7rem 0 0.6rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.attrs-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber), #ffd166);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.5);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.attrs-status-card.is-complete .attrs-meter-fill {
  background: linear-gradient(90deg, var(--green), #7dffb4);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.5);
}

.attrs-status-note {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* --- Adopt the listing's account of itself ------------------------- */

.attrs-adopt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(153, 51, 255, 0.4);
  background: rgba(153, 51, 255, 0.07);
}

.attrs-adopt-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 260px;
  font-size: 0.84rem;
}

.attrs-adopt-text .stat-note {
  line-height: 1.45;
}

.btn-adopt {
  border-color: rgba(153, 51, 255, 0.45) !important;
  color: #d8b4fe !important;
  white-space: nowrap;
}

.btn-adopt:hover {
  background: rgba(153, 51, 255, 0.18) !important;
  box-shadow: 0 0 16px rgba(153, 51, 255, 0.3);
}

/* --- The seven fields, inside the modal ---------------------------- */

.attrs-modal-grid {
  margin-top: 1.1rem;
  margin-bottom: 0;
  padding: 1.15rem 1.2rem;
}

.attrs-modal-grid .field input[type="text"],
.attrs-modal-grid .field input[type="number"] {
  width: 100%;
}

.attrs-modal-grid .checkbox-inline {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}

.required-star {
  color: var(--red);
  margin-left: 0.15rem;
}

.attrs-live-sig {
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
}

/* --- Impact: which suppliers survive the edit ---------------------- */

.attrs-impact {
  margin-top: 1.1rem;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 14px;
  background: rgba(7, 10, 18, 0.75);
  overflow: hidden;
}

.attrs-impact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.05rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--cyan);
}

.attrs-impact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.attrs-impact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.attrs-impact-row:last-child {
  border-bottom: none;
}

.attrs-impact-row.is-detaching {
  background: rgba(255, 51, 51, 0.06);
}

.attrs-impact-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--green);
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.3);
  flex-shrink: 0;
}

.attrs-impact-row.is-detaching .attrs-impact-mark {
  color: #f87171;
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.35);
}

.attrs-impact-what {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
  font-size: 0.85rem;
}

.attrs-impact-what .stat-note {
  font-size: 0.74rem;
  line-height: 1.4;
}

/* --- The confirmation the server insists on ------------------------ */

.attrs-confirm {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 51, 51, 0.35);
  background: rgba(255, 51, 51, 0.07);
}

.attrs-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
}

.attrs-confirm-label > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.attrs-confirm-label .stat-note {
  font-size: 0.75rem;
  line-height: 1.45;
}

.attrs-confirm.needs-attention {
  animation: attrs-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: var(--red);
  box-shadow: 0 0 22px rgba(255, 51, 51, 0.35);
}

@keyframes attrs-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

#attrs-modal-alert {
  margin-top: 0.9rem;
}

/* --- Footer -------------------------------------------------------- */

.attrs-modal-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.attrs-footer-spacer {
  flex: 1;
}

/* --- Entry points -------------------------------------------------- */

.action-dropdown-item.item-attributes:hover:not(:disabled) {
  background: rgba(153, 51, 255, 0.15);
  color: #d8b4fe;
}

/* A row whose identity was just corrected, so the click has somewhere to land
   on a table that shows no attribute of its own. */
.row-saved > td {
  animation: attrs-row-flash 1.6s ease-out;
}

@keyframes attrs-row-flash {
  0% { background-color: rgba(0, 255, 102, 0.22); }
  100% { background-color: transparent; }
}

@media (max-width: 720px) {
  .attrs-modal-card .modal-body {
    padding: 1rem;
    max-height: 72vh;
  }

  .attrs-modal-grid {
    padding: 1rem;
  }

  .attrs-modal-footer {
    flex-wrap: wrap;
    padding: 0.9rem 1rem 1rem;
  }

  .attrs-footer-spacer {
    display: none;
  }

  .attrs-modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEPOSIT DETAIL PREMIUM PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

.deposit-heading-group {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.deposit-title-text {
  font-size: 1.85rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.deposit-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-icon-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Status Badges & Pulses */
.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 5px 16px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.cyber-badge-warn {
  background: rgba(255, 184, 0, 0.12);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.35);
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.25);
}

.cyber-badge-ok {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.35);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.25);
}

.cyber-badge-bad {
  background: rgba(255, 51, 51, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.35);
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.25);
}

.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: depositPulse 2s infinite;
}

.pulse-warn { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pulse-ok { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pulse-bad { background: var(--red); box-shadow: 0 0 10px var(--red); }

@keyframes depositPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Deposit Hero Card */
.deposit-hero-card {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(11, 15, 25, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(16px);
}

.deposit-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .deposit-hero-grid {
    grid-template-columns: 1fr;
  }
}

.deposit-hero-stat-box {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(153, 51, 255, 0.06) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-stat-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.hero-stat-amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.amount-value {
  font-size: 2.3rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.amount-currency {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--cyan);
}

.hero-stat-verified {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.hero-stat-verified strong {
  color: var(--green);
}

.hero-stat-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

/* Tags sitting directly under a value inside a detail cell, where the cell has
   already supplied the vertical rhythm and the default gap reads as a gap. */
.hero-stat-tags-tight {
  margin-top: 0.3rem;
}

/* A form that must not break the line it sits on -- a button rendered inside a
   card header beside the title. */
.inline-form {
  display: inline-block;
}

.stat-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tag-network {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.tag-type {
  background: rgba(240, 244, 255, 0.08);
  color: var(--text-dim);
  border: 1px solid rgba(240, 244, 255, 0.15);
}

.deposit-customer-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.box-header-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.customer-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.customer-name-link {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.customer-name-link:hover {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.customer-handle-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--cyan);
}

.customer-balance-badge {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  background: rgba(240, 244, 255, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  width: fit-content;
}

.balance-amount {
  font-weight: 700;
  color: var(--text);
}

/* Details Grid */
.deposit-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-border);
}

.detail-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cell-full-width {
  grid-column: 1 / -1;
}

.cell-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.label-ok { color: var(--green); }
.label-bad { color: var(--red); }

.cell-value-with-copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  word-break: break-all;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.btn-copy-chip {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.btn-copy-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.btn-explorer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(153, 51, 255, 0.15);
  border: 1px solid rgba(153, 51, 255, 0.35);
  color: #d8b4fe;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.btn-explorer-link:hover {
  background: rgba(153, 51, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(153, 51, 255, 0.4);
}

.stat-note-badge {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-dim);
}

.rejection-text {
  color: #ff9999;
  font-weight: 600;
  background: rgba(255, 51, 51, 0.08);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 51, 51, 0.2);
}

.ledger-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #99ffbb;
}

/* Actions Grid (Approve & Reject Side-by-Side) */
.deposit-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .deposit-actions-grid {
    grid-template-columns: 1fr;
  }
}

.deposit-action-card {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-approve {
  border-top: 3px solid var(--green);
  box-shadow: 0 0 25px rgba(0, 255, 102, 0.08);
}

.card-reject {
  border-top: 3px solid var(--red);
  box-shadow: 0 0 25px rgba(255, 51, 51, 0.08);
}

/* Stands where the approve card would be, for a deposit nothing has been submitted
   against. Amber rather than green: the action it offers records a reference, it does not
   credit anything, and it should not read as the same kind of button. */
.card-attach {
  border-top: 3px solid var(--amber);
  box-shadow: 0 0 25px rgba(255, 184, 0, 0.08);
}

.card-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.action-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-title h2 {
  margin: 0;
  font-size: 1.25rem;
}

.shortcut-pill {
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  padding: 3px 8px;
  border-radius: 6px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.btn-quick-fill {
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.35);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-quick-fill:hover {
  background: rgba(0, 255, 102, 0.25);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
  transform: translateY(-1px);
}

.input-with-currency {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-currency input {
  width: 100%;
  padding-right: 4.5rem;
}

.input-currency-tag {
  position: absolute;
  right: 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--cyan);
  pointer-events: none;
}

.cyber-input {
  background: rgba(7, 10, 18, 0.9);
  border: 1px solid var(--glass-border);
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.cyber-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  outline: none;
}

/* Live Match Status Box */
.live-match-box {
  margin-top: 0.6rem;
  min-height: 28px;
}

.live-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
}

.match-exact {
  background: rgba(0, 255, 102, 0.15);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.35);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

.match-diff {
  background: rgba(255, 184, 0, 0.15);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.35);
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.2);
}

.match-invalid {
  background: rgba(255, 51, 51, 0.15);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.35);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.2);
}

/* Preset Chips */
.preset-chips-container {
  margin-bottom: 0.85rem;
}

.preset-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.preset-chips-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.preset-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-chip:hover {
  background: rgba(255, 51, 51, 0.15);
  color: #ffffff;
  border-color: rgba(255, 51, 51, 0.35);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-approve-submit {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.85) 0%, rgba(0, 240, 255, 0.85) 100%);
  color: #070a12;
  border: none;
  box-shadow: 0 0 25px rgba(0, 255, 102, 0.3);
}

.btn-approve-submit:hover {
  box-shadow: 0 0 35px rgba(0, 255, 102, 0.5);
  transform: translateY(-2px);
  color: #000000;
}

.btn-reject-submit {
  background: rgba(255, 51, 51, 0.15);
  color: #ff8888;
  border: 1px solid rgba(255, 51, 51, 0.35);
}

.btn-reject-submit:hover {
  background: rgba(255, 51, 51, 0.35);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(255, 51, 51, 0.4);
  transform: translateY(-2px);
}

.pill-event-code {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: rgba(0, 240, 255, 0.08);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.2);
}


/* Recent wallet movements, shown inside the "Adjust balance" card.

   The full ledger is further down the page. This is a three-row summary in the card
   that is about to add a fourth, so that an operator re-entering an adjustment that
   already went through sees it without scrolling. */
.recent-movements {
  margin-bottom: 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.04);
}

.recent-movements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.recent-movements-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.recent-movements-list .stat-note {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ORDER DETAILS SCREEN REDESIGN STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Cyber Status Badges */
.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.cyber-badge-ok {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.35);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

.cyber-badge-warn {
  background: rgba(255, 184, 0, 0.12);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.35);
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.2);
}

.cyber-badge-bad {
  background: rgba(255, 51, 51, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.35);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.2);
}

.cyber-badge-purple {
  background: rgba(153, 51, 255, 0.12);
  color: #b366ff;
  border: 1px solid rgba(153, 51, 255, 0.35);
  box-shadow: 0 0 15px rgba(153, 51, 255, 0.2);
}

.cyber-badge-info {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.cyber-badge-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  border: 1px solid var(--glass-border);
}

/* Status Pulsing Dot */
.status-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.pulse-ok {
  background-color: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-glow-green 1.8s infinite ease-in-out;
}

.pulse-warn {
  background-color: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse-glow-amber 1.8s infinite ease-in-out;
}

.pulse-bad {
  background-color: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse-glow-red 1.8s infinite ease-in-out;
}

.pulse-info {
  background-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-glow-cyan 1.8s infinite ease-in-out;
}

@keyframes pulse-glow-green {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--green); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--green); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--green); }
}

@keyframes pulse-glow-amber {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--amber); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--amber); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--amber); }
}

@keyframes pulse-glow-red {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--red); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--red); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--red); }
}

@keyframes pulse-glow-cyan {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--cyan); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--cyan); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--cyan); }
}

/* Header & Title Layout */
.order-heading-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.order-title-text {
  font-size: 1.85rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.order-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Stat Cards Enhanced Styling */
.stat-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.stat-kpi-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-kpi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.1);
}

.stat-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cyan);
}

.stat-kpi-card.kpi-status::before { background: var(--green); box-shadow: var(--shadow-green); }
.stat-kpi-card.kpi-charged::before { background: var(--amber); }
.stat-kpi-card.kpi-margin::before { background: var(--cyan); box-shadow: var(--shadow-cyan); }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.kpi-value {
  font-size: 2.1rem;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
}

.kpi-subtext {
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.margin-positive {
  color: var(--green);
  font-weight: 750;
}

.margin-negative {
  color: var(--red);
  font-weight: 750;
}

/* 2-Column Cyber Grid Details Layout */
.order-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.order-detail-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: all 0.3s ease;
}

.order-detail-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.08);
}

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.25rem;
}

.order-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffffff;
}

.order-card-icon {
  font-size: 1.15rem;
}

/* Detail Cell Cards */
.detail-cell-v2 {
  background: rgba(7, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: all 0.25s ease;
}

.detail-cell-v2:hover {
  border-color: rgba(0, 240, 255, 0.25);
  background: rgba(7, 10, 18, 0.8);
}

.cell-label-v2 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cell-value-v2 {
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cell-value-v2 strong {
  color: #ffffff;
  font-weight: 750;
}

/* Copy Chip Button */
.btn-copy-chip {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: var(--cyan);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.btn-copy-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.btn-copy-chip.copied {
  background: rgba(0, 255, 102, 0.25) !important;
  border-color: rgba(0, 255, 102, 0.5) !important;
  color: var(--green) !important;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.4) !important;
}

/* Fulfillment Progress Bar */
.fulfillment-meter-box {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fulfillment-bar {
  height: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fulfillment-fill {
  height: 100%;
  /* Starts empty. The width is a per-order figure, so it is set from
     ``data-fill-percent`` by app.js -- the admin CSP has no 'unsafe-inline', which
     silently drops a style attribute and would leave the meter reading whatever
     this rule says. Zero is the honest default: an unwired bar shows nothing
     rather than claiming the order is fully delivered. */
  width: 0;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 100%);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Customer Answers Grid */
.answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
  margin-top: 0.4rem;
}

.answer-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  word-break: break-all;
}

.answer-key {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cyan);
  letter-spacing: 0.05em;
}

.answer-value {
  font-size: 0.88rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Preset Refund Chips */
.preset-refund-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.preset-percent-btn {
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-percent-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  color: #ffffff;
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

/* Live Refund Calculation Box */
.live-calc-box {
  margin-top: 0.85rem;
  padding: 0.8rem 1rem;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.84rem;
}

.live-calc-text {
  color: var(--text);
  font-weight: 600;
}

.live-calc-sub {
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* Warning & Failure Callouts */
.callout-box {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.callout-box-warn {
  background: rgba(255, 184, 0, 0.08);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: #ffda79;
}

.callout-box-danger {
  background: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.3);
  color: #ff9999;
}

.callout-box-note {
  background: rgba(153, 51, 255, 0.08);
  border: 1px solid rgba(153, 51, 255, 0.3);
  color: #d1a3ff;
}

.callout-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Target Status Description Pill */
.target-desc-box {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Financial Ledger Table Enhancements */
.cyber-table-styled {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cyber-table-styled th {
  background: rgba(7, 10, 18, 0.8);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.cyber-table-styled td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
}

.cyber-table-styled tr:hover td {
  background: rgba(0, 240, 255, 0.03);
}

.amount-positive {
  color: var(--green);
  font-weight: 750;
}

.amount-negative {
  color: var(--cyan);
  font-weight: 750;
}

@media (max-width: 768px) {
  .order-details-grid {
    grid-template-columns: 1fr;
  }
  .stat-kpi-grid {
    grid-template-columns: 1fr;
  }
  .order-heading-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Print Order Receipt View (@media print) */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .sidebar, .top-nav-bar, .skip-link, .head-actions, .form-actions, form, .preset-refund-group, .live-calc-box, button, a.btn, .toast-container, dialog {
    display: none !important;
  }
  .layout {
    display: block !important;
  }
  .card, .order-detail-card, .stat-kpi-card, .detail-cell-v2 {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    break-inside: avoid;
  }
  .order-title-text, h1, h2, h3, strong {
    color: #000000 !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
  }
  .cyber-badge {
    border: 1px solid #999999 !important;
    color: #000000 !important;
    background: #eeeeee !important;
  }
  .cell-label-v2, .kpi-title, .stat-note {
    color: #666666 !important;
  }
}

/* Telegram Contact Modal & Support Templates Styles */
dialog.tg-contact-modal {
  background: linear-gradient(150deg, rgba(12, 16, 27, 0.97) 0%, rgba(18, 25, 41, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 240, 255, 0.12);
  backdrop-filter: blur(24px);
  overflow: hidden;
  color: var(--text);
  padding: 0;
  max-width: 44rem;
}

dialog.tg-contact-modal::backdrop {
  background: rgba(6, 9, 16, 0.82);
  backdrop-filter: blur(10px);
}

.tg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tg-modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.tg-modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.25) 0%, rgba(0, 240, 255, 0.2) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
  flex-shrink: 0;
}

.tg-modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.tg-modal-subtitle {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

.tg-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tg-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

.tg-modal-body {
  padding: 1.5rem;
}

.tg-customer-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.08) 0%, rgba(0, 240, 255, 0.04) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.tg-customer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc 0%, #24A1DE 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 136, 204, 0.4);
  flex-shrink: 0;
}

.tg-customer-avatar.anonymous {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  box-shadow: none;
}

.tg-customer-info {
  flex: 1;
  min-width: 0;
}

.tg-customer-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tg-customer-name {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.tg-handle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #00f0ff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tg-handle-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.2);
}

.tg-customer-sub {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.tg-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  background: linear-gradient(135deg, #0088cc 0%, #24A1DE 100%);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 136, 204, 0.4);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.tg-chat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.6);
  filter: brightness(1.08);
}

.tg-btn-arrow {
  transition: transform 0.2s ease;
}

.tg-chat-btn:hover .tg-btn-arrow {
  transform: translate(2px, -2px);
}

.tg-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tg-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tg-tab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tg-tab-btn:hover {
  color: #f8fafc;
}

.tg-tab-btn.active {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.18);
}

.tg-hint-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.telegram-templates-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.telegram-template-card {
  background: rgba(15, 22, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.25 ease;
}

.telegram-template-card.is-hidden {
  display: none !important;
}

.telegram-template-card:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(18, 26, 43, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.telegram-template-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tg-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.tg-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tag-processing {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
}
.tag-processing .tg-tag-dot { background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }

.tag-completed {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.tag-completed .tg-tag-dot { background: #10b981; box-shadow: 0 0 6px #10b981; }

.tag-refund {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.tag-refund .tg-tag-dot { background: #c084fc; box-shadow: 0 0 6px #c084fc; }

.tg-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 7px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00f0ff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tg-copy-chip:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: rgba(0, 240, 255, 0.45);
  transform: translateY(-1px);
}

.tg-copy-chip.copied {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #10b981 !important;
}

.telegram-template-body {
  position: relative;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #e2e8f0;
  background: rgba(7, 10, 18, 0.65);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  transition: all 0.2s ease;
}

.telegram-template-body:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 240, 255, 0.35);
}

.telegram-template-body:focus {
  outline: 2px solid rgba(0, 240, 255, 0.4);
  outline-offset: 1px;
}

.tg-copy-overlay {
  position: absolute;
  top: 6px;
  right: 8px;
  opacity: 0;
  transform: translateY(2px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.tg-copy-overlay span {
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(0, 240, 255, 0.2);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  padding: 0.15rem 0.55rem;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}

.telegram-template-body:hover .tg-copy-overlay {
  opacity: 1;
  transform: translateY(0);
}

.telegram-template-body.copied-active {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.telegram-template-body.copied-active .tg-copy-overlay span {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.6);
  color: #10b981;
}

@media (max-width: 640px) {
  .tg-customer-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .tg-chat-btn {
    width: 100%;
    justify-content: center;
  }
  .tg-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .tg-filter-tabs {
    overflow-x: auto;
  }
}

/* Order Action Cards & Management Control Dashboard */
.order-action-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.section-title-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, rgba(168, 85, 247, 0.04) 100%);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 14px;
}

.banner-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(168, 85, 247, 0.18) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.18);
  flex-shrink: 0;
}

.section-heading {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.section-subtext {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
}

.order-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 1.25rem;
}

.action-card {
  background: linear-gradient(145deg, rgba(14, 20, 32, 0.88) 0%, rgba(18, 26, 42, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  transition: all 0.25s ease;
}

.action-card:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 240, 255, 0.08);
}

.action-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.action-header-title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.action-header-title h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
}

.action-sub {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.2rem;
  line-height: 1.35;
}

.action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.icon-notes { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); }
.icon-refund { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); }
.icon-resolve { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); }
.icon-status { background: rgba(0, 240, 255, 0.15); border: 1px solid rgba(0, 240, 255, 0.3); }

.max-refundable-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  white-space: nowrap;
}

.action-card-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cyber-field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
}

.label-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: normal;
}

.required-star {
  color: #ef4444;
  font-weight: bold;
}

.label-with-presets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preset-refund-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.preset-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}

.preset-percent-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #00f0ff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-percent-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.preset-percent-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
  border-color: #00f0ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.cyber-input, .cyber-select {
  width: 100%;
  background: rgba(8, 12, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  color: #f8fafc;
  transition: all 0.2s ease;
}

.cyber-input::placeholder {
  color: #64748b;
}

.cyber-input:hover, .cyber-select:hover {
  border-color: rgba(0, 240, 255, 0.3);
}

.cyber-input:focus, .cyber-select:focus {
  outline: none;
  border-color: #00f0ff;
  background: rgba(10, 15, 26, 0.9);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}

.input-currency-symbol {
  position: absolute;
  left: 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #00f0ff;
  pointer-events: none;
}

.input-with-symbol .cyber-input {
  padding-left: 2rem;
}

.live-calc-box {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.calc-icon-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #00f0ff;
}

.live-calc-text {
  font-size: 0.85rem;
  color: #f1f5f9;
}

.live-calc-sub {
  font-size: 0.76rem;
  color: #94a3b8;
}

.cyber-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: #e2e8f0;
  cursor: pointer;
  /* Overrides the shared field-label sizing above: these rows wrap a title and a
     description, so they size to their content instead of one 22px line. */
  height: auto;
  min-height: 0;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

.cyber-checkbox-label input[type="checkbox"] {
  accent-color: #00f0ff;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-actions-bar {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.action-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
}

.btn-notes {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.btn-notes:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

.btn-refund {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.btn-refund:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.55);
}

.btn-resolve {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.btn-resolve:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.55);
}

.btn-status {
  background: linear-gradient(135deg, #0284c7 0%, #00f0ff 100%);
  color: #0b0f19 !important;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35);
}
.btn-status:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.55);
}

@media (max-width: 768px) {
  .order-action-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM WARRANTY CLAIMS QUEUE STYLING
═══════════════════════════════════════════════════════════════ */

/* Summary Stats Cards Grid */
.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.wc-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.wc-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 240, 255, 0.12);
}

.wc-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.wc-stat-open .wc-stat-icon {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.2);
}

.wc-stat-resolved .wc-stat-icon {
  background: rgba(0, 255, 102, 0.12);
  border-color: rgba(0, 255, 102, 0.3);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

.wc-stat-rejected .wc-stat-icon {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.3);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.2);
}

.wc-stat-total .wc-stat-icon {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.wc-stat-body {
  display: flex;
  flex-direction: column;
}

.wc-stat-value {
  font-size: 2.1rem;
  font-weight: 850;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.03em;
}

.wc-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

.wc-stat-pulse {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: wcPulseGlow 1.8s infinite ease-in-out;
}

@keyframes wcPulseGlow {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 6px var(--amber); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px var(--amber); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 6px var(--amber); }
}

/* Filter Navigation Bar */
.wc-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.75rem;
}

.wc-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wc-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.wc-filter-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-border);
}

.wc-filter-tab.is-active {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.wc-filter-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-weight: 800;
}

.wc-badge-open {
  background: rgba(255, 184, 0, 0.25);
  color: #FFE600;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
}

.wc-badge-resolved {
  background: rgba(0, 255, 102, 0.2);
  color: var(--green);
}

.wc-badge-rejected {
  background: rgba(255, 51, 51, 0.2);
  color: var(--red);
}

.wc-filter-summary {
  font-size: 0.88rem;
  color: var(--text-dim);
}

.wc-filter-active-label {
  color: var(--cyan);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
}

/* Claims List Cards */
.wc-claims-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wc-claim-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.wc-claim-card:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.1);
}

.wc-claim-open {
  border-left: 4px solid var(--amber);
}

.wc-claim-resolved {
  border-left: 4px solid var(--green);
}

.wc-claim-rejected {
  border-left: 4px solid var(--red);
}

/* Card Header Bar */
.wc-claim-header {
  display: grid;
  grid-template-columns: 60px 1.5fr 160px 120px 1fr 40px;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.015);
  transition: background 0.2s ease;
}

.wc-claim-header:hover {
  background: rgba(0, 240, 255, 0.04);
}

.wc-claim-id {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--cyan);
}

.wc-claim-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wc-order-link code {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.wc-order-link:hover code {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.wc-claim-service {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dim);
}

.wc-claim-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-family: var(--mono);
}

.wc-pill-pulse {
  animation: wcPillGlow 2s infinite ease-in-out;
}

@keyframes wcPillGlow {
  0% { box-shadow: 0 0 8px rgba(255, 184, 0, 0.3); }
  50% { box-shadow: 0 0 18px rgba(255, 184, 0, 0.6); }
  100% { box-shadow: 0 0 8px rgba(255, 184, 0, 0.3); }
}

.wc-reason-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wc-reason-preview-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.wc-reason-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-expand-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-expand-btn:hover {
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.wc-claim-card.is-expanded .wc-expand-icon {
  transform: rotate(180deg);
}

.wc-expand-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.7rem;
}

/* Expandable Detail Section */
.wc-claim-detail {
  display: none;
  padding: 1.5rem;
  border-top: 1px solid var(--glass-border);
  background: rgba(7, 10, 18, 0.45);
  animation: wcSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-claim-card.is-expanded .wc-claim-detail {
  display: block;
}

@keyframes wcSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wc-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
}

.wc-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}

.wc-section-icon {
  font-size: 1.1rem;
}

/* Customer's Claim Reason Speech Box */
.wc-reason-box {
  margin: 0 0 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(153, 51, 255, 0.05) 100%);
  border-left: 4px solid var(--cyan);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  border-right: 1px solid rgba(0, 240, 255, 0.1);
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25), inset 0 0 20px rgba(0, 240, 255, 0.03);
}

.wc-reason-box p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #F8FAFC;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
}

.wc-reason-box-empty {
  border-left-color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
}

/* Order Info Card Sub-Grid */
.wc-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.wc-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wc-info-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}

.wc-info-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

/* Timeline Components */
.wc-timeline-section {
  margin-bottom: 1.5rem;
}

.wc-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0.5rem;
  position: relative;
}

.wc-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 11px;
  width: 2px;
  background: var(--glass-border);
}

.wc-timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.wc-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--text-dim);
  margin-top: 2px;
  flex-shrink: 0;
}

.wc-timeline-done .wc-timeline-dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.wc-timeline-success .wc-timeline-dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.wc-timeline-rejected .wc-timeline-dot {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 10px var(--red);
}

.wc-timeline-active .wc-timeline-dot {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: wcPulseGlow 1.8s infinite ease-in-out;
}

.wc-timeline-content {
  display: flex;
  flex-direction: column;
}

.wc-timeline-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.wc-timeline-date {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--mono);
}

.wc-timeline-note {
  font-size: 0.85rem;
  color: #CBD5E1;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--glass-border);
  margin-top: 0.4rem;
}

.wc-text-amber {
  color: var(--amber);
  font-weight: 600;
}

/* Action Section & Inputs */
.wc-action-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.6);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.wc-action-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wc-action-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-dim);
}

.wc-action-textarea {
  width: 100%;
  background: rgba(7, 10, 18, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  resize: vertical;
  transition: all 0.2s ease;
}

.wc-action-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.wc-action-buttons {
  display: flex;
  gap: 0.75rem;
}

.wc-btn-resolve {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.wc-btn-reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.wc-settled-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.wc-settled-icon {
  font-size: 1.2rem;
}

.wc-settled-text {
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Empty State */
.wc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(20px);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.wc-empty-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  opacity: 0.8;
  filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.3));
}

.wc-empty-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.wc-empty-desc {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 400px;
}

.wc-empty-link {
  color: var(--cyan);
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .wc-claim-header {
    grid-template-columns: 50px 1fr auto 40px;
  }
  .wc-claim-time, .wc-reason-preview {
    display: none;
  }
  .wc-detail-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL SPOTLIGHT COMMAND PALETTE & TOPBAR TRIGGER STYLES
   ═══════════════════════════════════════════════════════════════ */

.header-search-trigger {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  min-width: 280px;
  max-width: 440px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-search-trigger:hover,
.header-search-trigger:focus-visible {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--text);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.search-trigger-icon {
  font-size: 0.9rem;
  opacity: 0.8;
}

.search-trigger-placeholder {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.search-trigger-shortcut {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.search-trigger-shortcut kbd,
.cmd-key-badge kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--cyan);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Command Palette Backdrop Overlay */
.cmd-palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 10, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(8vh, 40px);
  padding-bottom: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.cmd-palette-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Command Palette Main Dialog */
.cmd-palette-dialog {
  width: 92%;
  max-width: 780px;
  background: #0B0F19;
  background-image: 
    radial-gradient(ellipse 90% 90% at 50% -10%, rgba(0, 240, 255, 0.15), transparent 70%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(153, 51, 255, 0.12), transparent 70%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 
    0 30px 100px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(0, 240, 255, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
}

.cmd-palette-backdrop.is-open .cmd-palette-dialog {
  transform: scale(1) translateY(0);
}

/* Header & Search Input Box */
.cmd-palette-header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.7);
}

.cmd-palette-search-box {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.4rem;
  gap: 0.9rem;
  position: relative;
}

.cmd-search-icon {
  font-size: 1.3rem;
  opacity: 0.85;
}

.cmd-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
}

.cmd-palette-input::placeholder {
  color: rgba(240, 244, 255, 0.4);
}

.cmd-palette-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cmd-palette-close-btn:hover {
  background: rgba(255, 51, 51, 0.15);
  border-color: var(--red);
  color: #fff;
}

/* Filter Tabs Bar */
.cmd-palette-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(7, 10, 18, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cmd-palette-filter-tabs::-webkit-scrollbar {
  display: none;
}

.cmd-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.cmd-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.cmd-tab-btn.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.cmd-tab-count {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  font-size: 0.7rem;
  font-family: var(--mono);
}

.cmd-tab-btn.active .cmd-tab-count {
  background: rgba(0, 240, 255, 0.25);
  color: #fff;
}

/* Spinner Loading */
.cmd-palette-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: cmdSpin 0.7s linear infinite;
}

@keyframes cmdSpin {
  to { transform: rotate(360deg); }
}

/* Body & Results List */
.cmd-palette-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 480px;
}

/* History Section */
.cmd-history-section {
  padding: 0.5rem 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--glass-border);
}

.cmd-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.cmd-clear-history-btn {
  background: none;
  border: none;
  color: var(--cyan);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
}

.cmd-history-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cmd-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cmd-chip:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
}

/* Result Groups & Cards */
.cmd-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.cmd-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--cyan);
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease-out;
  text-decoration: none;
  color: inherit;
}

.cmd-item:hover,
.cmd-item.is-selected {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.12) 0%, rgba(153, 51, 255, 0.06) 100%);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 3px 0 0 var(--cyan);
}

.cmd-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.cmd-item.is-selected .cmd-item-icon {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan);
}

.cmd-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cmd-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-item-title mark {
  background: rgba(0, 240, 255, 0.3);
  color: #fff;
  border-radius: 3px;
  padding: 0 0.2rem;
}

.cmd-item-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Category Badges */
.cmd-badge {
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

.cmd-badge-nav { background: rgba(0, 240, 255, 0.12); color: var(--cyan); border: 1px solid rgba(0, 240, 255, 0.3); }
.cmd-badge-action { background: rgba(255, 184, 0, 0.15); color: var(--amber); border: 1px solid rgba(255, 184, 0, 0.3); }
.cmd-badge-success { background: rgba(0, 255, 102, 0.15); color: var(--green); border: 1px solid rgba(0, 255, 102, 0.3); }
.cmd-badge-warning { background: rgba(255, 184, 0, 0.15); color: var(--amber); border: 1px solid rgba(255, 184, 0, 0.3); }
.cmd-badge-danger { background: rgba(255, 51, 51, 0.15); color: var(--red); border: 1px solid rgba(255, 51, 51, 0.3); }
.cmd-badge-purple { background: rgba(153, 51, 255, 0.15); color: var(--purple); border: 1px solid rgba(153, 51, 255, 0.3); }
.cmd-badge-cyan { background: rgba(0, 240, 255, 0.15); color: var(--cyan); border: 1px solid rgba(0, 240, 255, 0.3); }
.cmd-badge-secondary { background: rgba(255, 255, 255, 0.1); color: var(--text-dim); border: 1px solid var(--glass-border); }

.cmd-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cmd-copy-btn:hover {
  background: var(--cyan);
  color: var(--bg);
}

/* Empty Results State */
.cmd-empty-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-dim);
}

.cmd-empty-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.cmd-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
}

/* Footer Bar */
.cmd-palette-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(7, 10, 18, 0.85);
  border-top: 1px solid var(--glass-border);
}

.cmd-footer-keys {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cmd-key-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.cmd-footer-brand {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 240, 255, 0.6);
}

.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN MEDIA LIBRARY & MEDIA PICKER STYLES
   ═══════════════════════════════════════════════════════════════ */

.media-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.media-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(13, 18, 32, 0.95), rgba(20, 30, 55, 0.9));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.media-header-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.media-header-icon {
  font-size: 2.5rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
}

.media-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: #ffffff;
}

.media-header-subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.media-stats-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 0.6rem 1.25rem;
}

.media-stats-badge .stats-count {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cyan);
}

.media-stats-badge .stats-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* Upload Dropzone */
.media-upload-card {
  position: relative;
  background: rgba(10, 15, 28, 0.8);
  border: 2px dashed rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: all 0.25s ease;
}

.media-upload-card.drag-over {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.25);
}

.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.dropzone-icon {
  font-size: 3rem;
}

.dropzone-text strong {
  display: block;
  font-size: 1.1rem;
  color: #fff;
}

.dropzone-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.dropzone-file-input {
  display: none;
}

.paste-hint-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--cyan);
}

.paste-hint-banner kbd {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
}

/* Toolbar & Search */
.media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.media-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 450px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
}

.media-search-input {
  width: 100%;
  padding-left: 2.25rem;
  padding-right: 2rem;
  background: rgba(15, 22, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
}

.btn-clear-search {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  text-decoration: none;
}

.media-bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid rgba(255, 51, 51, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: #ff6666;
  font-size: 0.9rem;
}

/* Media Grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.media-card {
  position: relative;
  background: rgba(13, 18, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.media-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.media-card-select {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
}

.media-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

.media-card-thumb-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  overflow: hidden;
}

.media-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-card-thumb-wrapper:hover .media-card-thumb {
  transform: scale(1.05);
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-card-thumb-wrapper:hover .thumb-overlay {
  opacity: 1;
}

.overlay-icon {
  font-size: 1.5rem;
  color: #fff;
}

.media-card-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.media-card-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-card-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.4rem;
}

.media-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-action-icon {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

.btn-action-icon:hover {
  background: rgba(0, 240, 255, 0.1);
}

.btn-action-icon.danger {
  color: var(--red);
}

.btn-action-icon.danger:hover {
  background: rgba(255, 51, 51, 0.15);
}

/* Service Form Image Section */
.service-image-group {
  background: rgba(13, 18, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

.image-upload-options {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.upload-or-divider {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}

.media-attached-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.88rem;
}

.btn-clear-attached {
  background: transparent;
  border: none;
  color: #ff6666;
  font-size: 1rem;
  cursor: pointer;
}

.form-paste-hint {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--cyan);
}

.form-paste-hint kbd {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Media Picker Modal Dialog Overrides */
.cyber-dialog.media-picker-modal {
  max-width: 52rem;
  width: 94vw;
  max-height: 85vh;
  height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(10, 14, 26, 0.98);
  backdrop-filter: blur(24px);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.15);
  overflow: hidden;
  margin: auto;
}

.media-picker-modal .cyber-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.7);
  flex-shrink: 0;
}

.media-picker-modal .picker-header-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.media-picker-modal .picker-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.picker-search-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.picker-search-bar .media-search-input {
  flex: 1;
  padding: 0.65rem 1rem;
  background: rgba(15, 22, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.picker-search-bar .media-search-input:focus {
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  outline: none;
}

.picker-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(6, 10, 18, 0.7);
  align-content: start;
}

.picker-grid-container::-webkit-scrollbar {
  width: 6px;
}
.picker-grid-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.picker-grid-container::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 3px;
}

.picker-card {
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  user-select: none;
}

.picker-card:hover {
  border-color: rgba(0, 240, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.2);
}

.picker-card.selected {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.5), inset 0 0 10px rgba(0, 240, 255, 0.2);
}

.picker-card.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: #00f0ff;
  color: #0b0f19;
  font-weight: 900;
  font-size: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.picker-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.picker-card:hover .picker-card-thumb img {
  transform: scale(1.06);
}

.picker-card-name {
  padding: 0.4rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  background: rgba(10, 15, 25, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.picker-loading,
.picker-empty,
.picker-error {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-dim, #94a3b8);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 200px;
}

.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.7);
  flex-shrink: 0;
  gap: 1rem;
}

.picker-selected-label {
  font-size: 0.88rem;
  color: #00f0ff;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 55%;
}

.picker-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   SUPPLIER LISTS
   The per-item supplier stack on the catalogue page and the routing panel on the
   product page. Both markups have always carried this class; nothing ever defined
   it, so a comparison meant to read as one line per supplier drew browser bullets
   with a 40px indent inside a table cell.
   ═══════════════════════════════════════════════════════════════ */

.supplier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.supplier-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Reasons and review notes take the full width under the supplier they belong to,
   rather than trailing off the end of its line. */
.supplier-list > li > div {
  flex-basis: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM INTERACTIVE SERVICE DETAIL PAGE
   Hero Banner, Interactive Profit Calculator, Live Order Form Mockup & Signature Gauge
   ═══════════════════════════════════════════════════════════════ */

.svc-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Service Hero Banner */
.svc-hero-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.svc-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green));
}

.svc-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.svc-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.svc-id-pill {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.svc-id-pill:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.svc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.svc-status-active {
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.4);
  color: var(--green);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}

.svc-status-active .status-dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-dot 2s infinite;
}

.svc-status-inactive {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: var(--amber);
}

.svc-status-archived {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-dim);
}

.svc-status-stranded {
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.4);
  color: var(--red);
}

.svc-status-featured {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.25);
}

.pill-featured-star {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
  vertical-align: middle;
  line-height: 1;
}

/* Featured Products (Pinned to top) styling */
.row-featured {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 20%, transparent 60%) !important;
  border-left: 3px solid #ffd700 !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
}

.row-featured:hover {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.04) 25%, transparent 60%) !important;
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.06) !important;
}

.service-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.star-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  flex-shrink: 0;
}

.star-toggle-btn .star-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
  opacity: 0.35;
  filter: grayscale(80%);
  transition: all 0.2s ease;
}

.star-toggle-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.45);
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.star-toggle-btn:hover .star-icon {
  opacity: 1;
  filter: grayscale(0%) drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

.star-toggle-btn.is-active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(245, 158, 11, 0.12));
  border: 1px solid rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 0 6px rgba(255, 215, 0, 0.12);
}

.star-toggle-btn.is-active .star-icon {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85));
  animation: star-gentle-glow 3s infinite alternate ease-in-out;
}

.featured-pos-pill {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #ffd700;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  line-height: 1.2;
}

.star-toggle-btn.is-animating {
  animation: star-pop-sparkle 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes star-pop-sparkle {
  0% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.25) rotate(15deg); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes star-gentle-glow {
  0% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.95)); }
}

.btn-feature-glow {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
  transition: all 0.2s ease;
}

.btn-feature-glow:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(245, 158, 11, 0.25));
  border-color: #ffd700;
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
  transform: translateY(-1px);
}

.action-dropdown-item.item-feature:hover {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}
.action-dropdown-item.item-feature:hover .badge-feature {
  background: rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.action-dropdown-item.item-unfeature:hover {
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
}
.action-dropdown-item.item-unfeature:hover .badge-feature {
  background: rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Interactive Profit Simulator Card */
.svc-calc-card {
  background: linear-gradient(135deg, rgba(11, 15, 25, 0.9), rgba(20, 28, 48, 0.95));
  border: 1px solid rgba(153, 51, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  position: relative;
}

.svc-calc-card::after {
  content: '⚡ LIVE SIMULATOR';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 0.1em;
  background: rgba(153, 51, 255, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(153, 51, 255, 0.25);
}

.svc-calc-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.svc-calc-qty-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.svc-calc-qty-input input {
  width: 90px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.svc-calc-qty-input input:focus {
  outline: none;
}

.svc-calc-preset-btns {
  display: flex;
  gap: 0.4rem;
}

.svc-calc-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.svc-calc-btn:hover, .svc-calc-btn.active {
  background: rgba(153, 51, 255, 0.25);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 0 10px rgba(153, 51, 255, 0.3);
}

.svc-calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-calc-metric {
  display: flex;
  flex-direction: column;
}

.svc-calc-metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.svc-calc-metric-val {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 800;
  margin-top: 0.2rem;
}

/* Tabbed Container for Order Form Preview */
.svc-tab-card {
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.svc-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-tab-nav {
  display: flex;
  gap: 0.5rem;
}

.svc-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.svc-tab-btn:hover {
  color: var(--text);
}

.svc-tab-btn.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  background: rgba(0, 240, 255, 0.05);
}

.svc-tab-body {
  padding: 1.5rem;
}

.svc-tab-pane {
  display: none;
}

.svc-tab-pane.active {
  display: block;
}

/* Telegram / Web Order Form Interactive Mockup */
.svc-order-form-mockup {
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(180deg, #161F33 0%, #0D1322 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  position: relative;
}

.svc-mockup-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-mockup-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.svc-mockup-title {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

.svc-mockup-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.svc-mockup-field {
  margin-bottom: 1.1rem;
}

.svc-mockup-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.svc-mockup-label .req {
  color: var(--red);
  margin-left: 0.2rem;
}

.svc-mockup-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  color: #fff;
  font-family: var(--font);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.svc-mockup-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  outline: none;
}

.svc-mockup-help {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.svc-mockup-summary {
  background: rgba(0, 240, 255, 0.06);
  border: 1px dashed rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1.25rem;
}

.svc-mockup-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 800;
}

.svc-mockup-buy-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--cyan), #0099FF);
  border: none;
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.75rem;
  border-radius: 12px;
  margin-top: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
  transition: all 0.2s ease;
}

.svc-mockup-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
}

/* Signature Completeness Bar */
.svc-sig-card {
  position: relative;
}

.svc-sig-bar-wrap {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.svc-sig-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.svc-sig-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 0.4s ease;
}

.svc-schema-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.svc-sig-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

/* The fill width has to be stated here rather than as a style="width: N%" on the
   element. The admin CSP sends style-src 'self' with no unsafe-inline, so an inline
   width is parsed, reported as a violation and never applied -- the bar sat at the
   100% height rule above it and showed nothing. Selecting on the attribute keeps the
   number declarative and needs no script. One step per attribute in
   signature_form.ATTRIBUTE_FIELDS; 0 and 1 are unreachable today because tier and
   region are always answerable, and are written out so a new gap cannot land the bar
   on no rule at all. */
.svc-sig-fill[data-known="0"] {
  width: 0;
}

.svc-sig-fill[data-known="1"] {
  width: 14.3%;
}

.svc-sig-fill[data-known="2"] {
  width: 28.6%;
}

.svc-sig-fill[data-known="3"] {
  width: 42.9%;
}

.svc-sig-fill[data-known="4"] {
  width: 57.1%;
}

.svc-sig-fill[data-known="5"] {
  width: 71.4%;
}

.svc-sig-fill[data-known="6"] {
  width: 85.7%;
}

.svc-sig-fill[data-known="7"] {
  width: 100%;
}

/* Price History Timeline Table */
.svc-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.4rem;
}

.svc-history-table tr {
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

.svc-history-table tr:hover {
  background: rgba(0, 240, 255, 0.04);
}

.svc-history-table td, .svc-history-table th {
  padding: 0.75rem 1rem;
}

.svc-history-table td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.svc-history-table td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-left: 0.4rem;
}

.delta-positive {
  background: rgba(0, 255, 102, 0.15);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.delta-negative {
  background: rgba(255, 51, 51, 0.15);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.3);
}

/* Premium Details Section Grid */
.svc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.svc-detail-tile {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.svc-detail-tile:hover {
  background: rgba(0, 240, 255, 0.04);
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.svc-detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.svc-detail-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.svc-desc-box {
  background: linear-gradient(135deg, rgba(13, 19, 34, 0.95), rgba(20, 29, 48, 0.9));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-top: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.svc-desc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-desc-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.svc-desc-content {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(240, 244, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER CUSTOMER DETAILS & SLIDE-OVER DRAWER
   ═══════════════════════════════════════════════════════════════ */

.customer-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(22, 31, 51, 0.95), rgba(13, 19, 34, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.customer-hero-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.customer-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #00f0ff, #7000ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  flex-shrink: 0;
}

.customer-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.customer-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.customer-id-tag {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.customer-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  color: #cbd5e1;
}

.btn-copy-mini {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-copy-mini:hover {
  opacity: 1;
}

.stats-grid-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card-glow {
  background: rgba(13, 19, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem;
  transition: all 0.25s ease;
}

.stat-card-glow:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.stat-icon {
  font-size: 1.2rem;
}

.text-glow-cyan { color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }
.text-glow-green { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
.text-glow-purple { color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
.text-glow-warn { color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
.text-glow-muted { color: #94a3b8; }
.text-positive { color: #10b981; font-weight: 700; }
.text-negative { color: #f87171; font-weight: 700; }

/* TABS SYSTEM */
.customer-tabs-wrapper {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.customer-tab-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.customer-tab-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: #94a3b8;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.customer-tab-btn:hover {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.05);
}

.customer-tab-btn.is-active {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 -2px 10px rgba(0, 240, 255, 0.15);
}

.customer-tab-pane {
  display: none;
}

.customer-tab-pane.is-active {
  display: block;
  animation: fadeInPane 0.25s ease;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-badge-warn {
  background: #f59e0b;
  color: #000;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 800;
}

.grid-two-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.presets-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  flex-wrap: wrap;
}

.preset-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00f0ff;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #ffffff;
}

.tool-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.tool-access-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-access-card.is-granted {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-access-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* CUSTOMER LIST TABLE & SLIDE-OVER DRAWER */
.customer-cell-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.avatar-mini {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00f0ff 0%, #7000ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.92rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.customer-name-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.customer-name-link:hover {
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.customer-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 22, 0.75);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.customer-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.customer-drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  background: linear-gradient(180deg, #121a2d 0%, #0c1322 45%, #080d18 100%);
  border-left: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.85), -2px 0 25px rgba(0, 240, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.customer-drawer-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00f0ff 0%, #a855f7 50%, #10b981 100%);
  z-index: 10;
}

.customer-drawer-backdrop.is-open .customer-drawer-content {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(18, 26, 44, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  position: relative;
  z-index: 2;
  gap: 1rem;
}

.drawer-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1;
}

.drawer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #00f0ff 0%, #7000ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}

.drawer-title-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.drawer-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.drawer-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 30%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.drawer-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #94a3b8;
}

.drawer-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  color: #cbd5e1;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.drawer-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.drawer-body::-webkit-scrollbar {
  width: 6px;
}

.drawer-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.drawer-body::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.25);
  border-radius: 4px;
}

.drawer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

/* SKELETON / LOADING */
.drawer-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem;
  gap: 1rem;
  color: #00f0ff;
  font-weight: 700;
  text-align: center;
}

.drawer-pulse-ring {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(0, 240, 255, 0.2);
  border-top-color: #00f0ff;
  border-right-color: #7000ff;
  border-radius: 50%;
  animation: cyberSpin 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

@keyframes cyberSpin {
  to { transform: rotate(360deg); }
}

/* KPI GRID IN DRAWER */
.drawer-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.drawer-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.drawer-kpi-card:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.04);
  transform: translateY(-1px);
}

.drawer-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.drawer-kpi-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.drawer-kpi-icon {
  font-size: 1rem;
}

.drawer-kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono, monospace);
  display: block;
  letter-spacing: -0.02em;
}

.drawer-kpi-value.cyan {
  color: #00f0ff;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

.drawer-kpi-value.green {
  color: #10b981;
  text-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.drawer-kpi-value.purple {
  color: #c084fc;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.4);
}

.drawer-kpi-value.amber {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.4);
}

.drawer-kpi-sub {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.2rem;
  display: block;
}

/* SECTION CARDS IN DRAWER */
.drawer-section-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.1rem;
  transition: border-color 0.2s ease;
}

.drawer-section-card.highlight {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.04) 0%, rgba(112, 0, 255, 0.04) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.25);
}

.drawer-section-title {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f1f5f9;
  margin: 0 0 0.85rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-section-title .section-icon {
  color: #00f0ff;
  font-size: 1rem;
}

/* QUICK ADJUST FORM */
.drawer-adjust-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drawer-direction-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-direction-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.drawer-direction-btn.is-active.credit {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.drawer-direction-btn.is-active.debit {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.drawer-presets-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.drawer-preset-btn {
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #00f0ff;
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--mono, monospace);
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-preset-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.drawer-input-group {
  display: flex;
  align-items: center;
  position: relative;
}

.drawer-input-suffix {
  position: absolute;
  right: 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #00f0ff;
  font-family: var(--mono, monospace);
  pointer-events: none;
}

.btn-drawer-submit {
  background: linear-gradient(135deg, #00f0ff 0%, #7000ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-drawer-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(0, 240, 255, 0.5);
  filter: brightness(1.1);
}

/* RECENT ACTIVITY LISTS */
.drawer-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.84rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.drawer-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 240, 255, 0.2);
}

.drawer-item-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.drawer-item-title {
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-item-time {
  font-size: 0.72rem;
  color: #64748b;
}

.drawer-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}

.drawer-item-amount {
  font-family: var(--mono, monospace);
  font-weight: 800;
  font-size: 0.88rem;
}

.drawer-item-amount.positive { color: #10b981; }
.drawer-item-amount.negative { color: #f87171; }
.drawer-item-amount.neutral { color: #00f0ff; }

/* DRAWER FOOTER / ACTION LINKS */
.drawer-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MEETWAY PREMIUM CYBER SETTINGS COCKPIT SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.settings-cockpit-banner {
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.9) 0%, rgba(20, 14, 38, 0.8) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 240, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.settings-cockpit-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00F0FF, #9933FF, #00FF66);
}

.settings-cockpit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.settings-title-group h1 {
  margin: 0 0 0.35rem 0;
  font-size: 2.1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFFFFF 0%, #00F0FF 50%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.settings-title-group p {
  color: var(--text-dim, #94a3b8);
  margin: 0;
  font-size: 0.95rem;
}

.settings-cockpit-kpi-bar {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cockpit-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #cbd5e1;
}

.cockpit-kpi-pill .kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF66;
  box-shadow: 0 0 10px #00FF66;
}

/* Quick Search Container */
.settings-search-container {
  position: relative;
  min-width: 280px;
  max-width: 440px;
  flex: 1;
}

.settings-search-input {
  width: 100%;
  height: 46px;
  padding: 0 1rem 0 2.8rem;
  background: rgba(5, 8, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.92rem;
  transition: all 0.25s ease;
}

.settings-search-input:focus {
  outline: none;
  border-color: #00F0FF;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(0, 240, 255, 0.1);
  background: rgba(5, 8, 18, 0.95);
}

.settings-search-icon-wrap {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #00F0FF;
  pointer-events: none;
  font-size: 1rem;
}

/* Navigation Tabs Bar */
.settings-nav-bar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem;
  margin-bottom: 2rem;
  scrollbar-width: none;
}
.settings-nav-bar::-webkit-scrollbar { display: none; }

.settings-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.3rem;
  background: rgba(11, 16, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.settings-nav-pill:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
}

.settings-nav-pill.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(153, 51, 255, 0.2) 100%);
  border-color: #00F0FF;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}

.settings-nav-pill .pill-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}

.settings-nav-pill.active .pill-badge {
  background: rgba(0, 240, 255, 0.3);
  color: #00F0FF;
}

/* Section Cards & Responsive Grid */
.settings-section-card {
  background: rgba(11, 16, 30, 0.75);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 1.85rem;
  margin-bottom: 2rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.settings-section-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 240, 255, 0.08);
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.settings-section-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(153, 51, 255, 0.15) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.settings-section-title-wrap {
  flex: 1;
}

.settings-section-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.4rem;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.settings-section-blurb {
  margin: 0;
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Multi-Column Grid System */
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.35rem;
}

.settings-field-item.full-width {
  grid-column: 1 / -1;
}

.settings-field-item {
  background: rgba(5, 8, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.settings-field-item:focus-within {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(5, 8, 18, 0.85);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12);
}

.settings-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 750;
  font-size: 0.94rem;
  color: #f8fafc;
  margin-bottom: 0.65rem;
}

/* Input Addons & Suffixes */
.cyber-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cyber-input-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: #00F0FF;
  font-size: 0.88rem;
  font-weight: 750;
  flex-shrink: 0;
}

.cyber-input-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: none;
  border-radius: 0 12px 12px 0;
  color: #00F0FF;
  font-size: 0.88rem;
  font-weight: 750;
  flex-shrink: 0;
}

.cyber-input-group .cyber-input {
  border-radius: 0;
  height: 44px;
}

.cyber-input-group .cyber-input:first-child {
  border-radius: 12px 0 0 12px;
}

.cyber-input-group .cyber-input:last-child {
  border-radius: 0 12px 12px 0;
}

.cyber-input-group .cyber-input:only-child {
  border-radius: 12px;
}

/* ── Premium Embedded Currency Dropdown & Unified Amount Field ── */
.cyber-amount-currency-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.24);
  border-radius: 12px;
  padding: 0 6px 0 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cyber-amount-currency-group:hover {
  border-color: rgba(0, 240, 255, 0.42);
}

.cyber-amount-currency-group:focus-within {
  border-color: #00F0FF;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.16), 0 0 16px rgba(0, 240, 255, 0.14);
}

.cyber-amount-currency-group .cyber-input,
.cyber-amount-currency-group .form-input,
.cyber-amount-currency-group .cyber-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 8px 0 0 !important;
  margin: 0 !important;
  color: #f8fafc !important;
  font-family: 'JetBrains Mono', 'Fira Code', var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 42px;
}

.cyber-currency-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Embedded Dropdown Trigger Pill (inside input right side) */
.cyber-currency-pill-dropdown {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 25;
}

/* The currency an entitlement is recorded in, stated rather than offered. Sized and
   coloured like .currency-pill-btn so the amount row keeps its shape, but flat: no
   hover, no chevron, no cursor: pointer. A control that looks clickable and is not is
   worse than a label, and this one used to be a picker that the header's display
   switcher quietly rewrote. */
.currency-static-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: #94a3b8;
  font-family: var(--font, inherit);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  user-select: none;
  flex-shrink: 0;
}

.currency-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.09);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: #00F0FF;
  font-family: var(--font, inherit);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.currency-pill-btn:hover,
.cyber-currency-pill-dropdown[data-open] .currency-pill-btn,
.cyber-currency-pill-dropdown.is-open .currency-pill-btn {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.6);
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.currency-pill-chevron {
  width: 10px;
  height: 6px;
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.9;
}

.cyber-currency-pill-dropdown[data-open] .currency-pill-chevron,
.cyber-currency-pill-dropdown.is-open .currency-pill-chevron {
  transform: rotate(180deg);
}

/* Floating Dropdown Popover */
.currency-pill-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 155px;
  background: rgba(9, 14, 26, 0.98);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(0, 240, 255, 0.26);
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(0, 240, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 6px;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cyber-currency-pill-dropdown[data-open] .currency-pill-menu,
.cyber-currency-pill-dropdown.is-open .currency-pill-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.currency-pill-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #e2e8f0;
  font-family: var(--font, inherit);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  outline: none;
}

.currency-pill-option:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.2);
  color: #00F0FF;
}

.currency-pill-option.is-selected,
.currency-pill-option[aria-selected="true"] {
  background: rgba(0, 240, 255, 0.16);
  border-color: rgba(0, 240, 255, 0.38);
  color: #00F0FF;
  font-weight: 750;
}

.currency-opt-info {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.currency-opt-name {
  font-weight: 750;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.currency-opt-sub {
  font-size: 0.74rem;
  opacity: 0.65;
}

.currency-opt-check {
  width: 14px;
  height: 14px;
  stroke: #00F0FF;
  stroke-width: 2.5;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.currency-pill-option.is-selected .currency-opt-check,
.currency-pill-option[aria-selected="true"] .currency-opt-check {
  opacity: 1;
  transform: scale(1);
}

/* ── Light Theme & Skins Adaptation ── */
[data-theme="light"] .cyber-amount-currency-group {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .cyber-amount-currency-group:hover {
  border-color: #94a3b8;
}

[data-theme="light"] .cyber-amount-currency-group:focus-within {
  border-color: #e11d48;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cyber-amount-currency-group .cyber-input,
[data-theme="light"] .cyber-amount-currency-group .form-input,
[data-theme="light"] .cyber-amount-currency-group .cyber-amount-input {
  color: #0f172a !important;
}

[data-theme="light"] .currency-static-badge {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.28);
  color: #475569;
}

[data-theme="light"] .currency-pill-btn {
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.26);
  color: #e11d48;
}

[data-theme="light"] .currency-pill-btn:hover,
[data-theme="light"] .cyber-currency-pill-dropdown[data-open] .currency-pill-btn,
[data-theme="light"] .cyber-currency-pill-dropdown.is-open .currency-pill-btn {
  background: rgba(225, 29, 72, 0.14);
  border-color: rgba(225, 29, 72, 0.5);
  color: #e11d48;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.18);
}

[data-theme="light"] .currency-pill-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(225, 29, 72, 0.2);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.12),
    0 0 20px rgba(225, 29, 72, 0.06);
}

[data-theme="light"] .currency-pill-option {
  color: #1e293b;
}

[data-theme="light"] .currency-pill-option:hover {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.18);
  color: #e11d48;
}

[data-theme="light"] .currency-pill-option.is-selected,
[data-theme="light"] .currency-pill-option[aria-selected="true"] {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.3);
  color: #e11d48;
}

[data-theme="light"] .currency-opt-check {
  stroke: #e11d48;
}

[data-theme="light"] .currency-pill-option:hover {
  background: rgba(225, 29, 72, 0.06);
  border-color: rgba(225, 29, 72, 0.15);
  color: #0f172a;
}

[data-theme="light"] .currency-pill-option.is-selected,
[data-theme="light"] .currency-pill-option[aria-selected="true"] {
  background: rgba(225, 29, 72, 0.10);
  border-color: rgba(225, 29, 72, 0.25);
  color: #e11d48;
}

[data-theme="light"] .currency-pill-option.is-selected .currency-opt-check,
[data-theme="light"] .currency-pill-option[aria-selected="true"] .currency-opt-check {
  stroke: #e11d48;
}

/* ── Legacy fallback compatibility for cyber-currency-select ── */
.cyber-currency-select {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 0.65rem 0 0.55rem;
  min-width: 78px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-left: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 0 12px 12px 0;
  color: #00F0FF;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300F0FF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 1.4rem;
  flex-shrink: 0;
}

.cyber-currency-select:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.38);
}

.cyber-currency-select:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.18), 0 0 12px rgba(0, 240, 255, 0.10);
}

.cyber-currency-select option {
  background: #0a0e1a;
  color: #f0f6fc;
  font-weight: 600;
}

.cyber-textarea {
  width: 100%;
  background: rgba(5, 8, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.92rem;
  line-height: 1.6;
  transition: all 0.25s ease;
}

.cyber-textarea:focus {
  outline: none;
  border-color: #00F0FF;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  background: rgba(5, 8, 18, 0.95);
}

/* Neon Cyber Switch Toggles */
.cyber-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: 0.25rem 0;
}

.cyber-switch-text {
  font-weight: 750;
  color: #f8fafc;
  font-size: 0.94rem;
}

.cyber-switch-pill {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.cyber-switch-pill::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input[type="checkbox"]:checked + .cyber-switch-pill {
  background: rgba(0, 255, 102, 0.22);
  border-color: #00FF66;
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.35);
}

input[type="checkbox"]:checked + .cyber-switch-pill::after {
  transform: translateX(24px);
  background: #00FF66;
  box-shadow: 0 0 10px #00FF66;
}

/* Secret Key Vault Cards */
.secret-vault-card {
  position: relative;
}

.secret-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secret-toggle-btn:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.secret-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: rgba(0, 255, 102, 0.14);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: #00FF66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.2);
}

.dormant-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFB800;
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.3);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  margin-top: 0.6rem;
}

/* Crypto Network Tiles Grid */
.crypto-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.crypto-network-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: rgba(5, 8, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.crypto-network-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
  transform: translateY(-2px);
}

.crypto-network-card.checked {
  border-color: #00F0FF;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(153, 51, 255, 0.2) 100%);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}

/* Floating Cockpit Control Footer */
.settings-floating-actions {
  position: sticky;
  bottom: 1.5rem;
  z-index: 100;
  background: rgba(7, 10, 18, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 1.1rem 1.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 240, 255, 0.2);
  margin-top: 2.5rem;
}

.settings-floating-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.92rem;
  color: #94a3b8;
}

.settings-floating-info code {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  font-weight: 750;
}

.unsaved-badge {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  background: rgba(255, 184, 0, 0.18);
  border: 1px solid #FFB800;
  color: #FFB800;
  font-weight: 850;
  font-size: 0.84rem;
  animation: pulse 2s infinite;
}

.unsaved-badge.visible {
  display: inline-flex;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(255, 184, 0, 0.4); }
  100% { opacity: 0.8; }
}

.text-right {
  text-align: right;
}

.field-banned-wrapper {
  align-self: flex-end;
  padding-bottom: 8px;
}

.label-checkbox-flex {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-note-block {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   MEETWAY ULTRA-PREMIUM CYBER CUSTOMER & UI DESIGN SYSTEM
   Cyber Glass Hero, Ambient Stat Cards, Capsule Tabs & Controls
   ═══════════════════════════════════════════════════════════════ */

/* --- Hero Banner Card --- */
.customer-hero-card {
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.85) 0%, rgba(20, 14, 38, 0.75) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 240, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

.customer-hero-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.customer-hero-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.customer-avatar-large {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  padding: 2.5px;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.customer-avatar-large:hover {
  transform: scale(1.08) rotate(4deg);
}

.customer-avatar-large span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #070A14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.customer-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.customer-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.customer-title {
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #FFFFFF 0%, #00F0FF 50%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  line-height: 1.15;
}

.customer-id-tag {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.glowing-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill-ok {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 102, 0.35);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

.pill-bad {
  background: rgba(255, 51, 51, 0.12);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.35);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.2);
}

.customer-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: var(--text-dim);
  transition: all 0.25s ease;
}

.meta-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 240, 255, 0.25);
  color: var(--text);
}

.chip-link {
  color: var(--cyan);
  font-weight: 700;
}

.btn-copy-mini {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-copy-mini:hover {
  opacity: 1;
  transform: scale(1.2);
}

.customer-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* --- Stat Metric Grid & Glow Cards --- */
.stats-grid-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card-glow {
  background: rgba(11, 16, 30, 0.78);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card-glow:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.12);
}

.stat-card-glow::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.stat-card-glow:nth-child(1)::before { background: var(--cyan); box-shadow: var(--shadow-cyan); }
.stat-card-glow:nth-child(2)::before { background: var(--green); box-shadow: var(--shadow-green); }
.stat-card-glow:nth-child(3)::before { background: var(--purple); box-shadow: var(--shadow-purple); }
.stat-card-glow:nth-child(4)::before { background: var(--amber); box-shadow: 0 0 20px rgba(255, 184, 0, 0.4); }

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.1rem;
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 850;
  margin: 0.4rem 0 0.2rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-unit {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* Glowing Text Utilities */
.text-glow-cyan {
  color: #00F0FF !important;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.text-glow-green {
  color: #00FF66 !important;
  text-shadow: 0 0 20px rgba(0, 255, 102, 0.5);
}

.text-glow-purple {
  color: #C084FC !important;
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.5);
}

.text-glow-warn {
  color: #FFB800 !important;
  text-shadow: 0 0 20px rgba(255, 184, 0, 0.5);
}

.text-glow-muted {
  color: var(--text-dim) !important;
}

/* --- Capsule Cyber Tabs --- */
.customer-tabs-wrapper {
  background: rgba(6, 10, 20, 0.85);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 6px;
  margin-bottom: 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 15px 35px rgba(0, 0, 0, 0.4);
}

.customer-tab-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.customer-tab-nav::-webkit-scrollbar {
  display: none;
}

.customer-tab-btn {
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.customer-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.customer-tab-btn.is-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(153, 51, 255, 0.18) 100%);
  color: #00F0FF;
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.tab-badge-warn {
  background: rgba(255, 184, 0, 0.2);
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.4);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* --- Tab Panes --- */
.customer-tab-pane {
  display: none;
}

.customer-tab-pane.is-active {
  display: block;
  animation: paneFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* --- Cyber Form Controls & Quick Presets --- */
.cyber-input, .cyber-select {
  width: 100%;
  height: 46px;
  background: rgba(5, 8, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.25s ease;
}

.cyber-input:focus, .cyber-select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(0, 240, 255, 0.1);
}

.cyber-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300F0FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.presets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.preset-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preset-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preset-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
}

.preset-btn:active {
  transform: scale(0.95);
}

/* --- Standing & Status Banners --- */
.active-status-banner, .banned-status-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.active-status-banner {
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.25);
}

.banned-status-banner {
  background: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.25);
}

.status-icon {
  font-size: 1.8rem;
}

.recent-movements-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.recent-movements-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-movements-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   IN-PANEL MANAGED WEB TOOLS // FUTURISTIC CYBER DECK SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.mwt-viewport {
  position: relative;
  width: 100%;
}

.mwt-header-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(6, 11, 25, 0.97) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 26px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
}
.mwt-header-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--red) 100%);
  box-shadow: 0 0 15px var(--cyan);
}

.mwt-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--green);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: var(--shadow-green);
}
.mwt-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: mwtPulse 1.8s infinite;
}
@keyframes mwtPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px var(--green); }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.mwt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.mwt-stat-panel {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.mwt-stat-panel:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 240, 255, 0.15);
}
.mwt-stat-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  flex-shrink: 0;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.2);
}
.mwt-stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.mwt-stat-label {
  font-size: 0.76rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-top: 2px;
}

.mwt-control-dock {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(16px);
}
.mwt-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 280px;
}
.mwt-search-input {
  width: 100%;
  background: rgba(7, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 18px 12px 42px;
  color: var(--text);
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.mwt-search-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}
.mwt-search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.6;
}
.mwt-cat-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mwt-cat-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.mwt-cat-tab:hover, .mwt-cat-tab.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}

.btn-mwt-deploy {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  color: #030712;
  font-weight: 800;
  font-size: 0.9rem;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-cyan);
  position: relative;
  overflow: hidden;
}
.btn-mwt-deploy:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.55);
}

.mwt-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.mwt-tool-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 26, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 22px;
  position: relative;
  backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.mwt-tool-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.12);
}
.mwt-card-glow-bar {
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  transition: all 0.3s ease;
}

.mwt-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.mwt-avatar-box {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.mwt-card-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mwt-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px 0;
}
.mwt-card-sub {
  font-size: 0.8rem;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 12px;
}
.mwt-card-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 38px;
}

.mwt-seat-box {
  background: rgba(6, 11, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.mwt-seat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}
.mwt-seat-meter-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.mwt-seat-meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.mwt-card-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
.btn-mwt-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-mwt-icon:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-mwt-icon.danger:hover {
  background: rgba(255, 51, 51, 0.2);
  border-color: var(--red);
  color: #FCA5A5;
}

.mwt-edit-drawer {
  display: none;
  background: rgba(6, 11, 22, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}
.mwt-edit-drawer.open {
  display: block;
}
.mwt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.mwt-field label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
.mwt-input {
  background: rgba(3, 7, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
  transition: all 0.2s ease;
}
.mwt-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.mwt-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.mwt-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.mwt-modal {
  background: linear-gradient(135deg, #0B132B 0%, #050B14 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 24px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), var(--shadow-cyan);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mwt-modal-backdrop.active .mwt-modal {
  transform: scale(1);
}

.mwt-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.mwt-preset-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.mwt-preset-card:hover, .mwt-preset-card.selected {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.2);
}
.mwt-preset-icon-box {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

#mwt-toast {
  position: fixed;
  bottom: 28px; right: 28px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%);
  color: #030712;
  font-weight: 800;
  padding: 14px 26px;
  border-radius: 12px;
  box-shadow: var(--shadow-cyan);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#mwt-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER DECK CONTROL MATRIX 2.0 // ULTRA-PREMIUM INTERACTIVE DESIGN
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cyber-bg: #030712;
  --cyber-panel: rgba(15, 23, 42, 0.75);
  --cyber-panel-border: rgba(0, 240, 255, 0.18);
  --cyber-cyan: #00F0FF;
  --cyber-blue: #3B82F6;
  --cyber-purple: #8B5CF6;
  --cyber-pink: #EC4899;
  --cyber-emerald: #10B981;
  --cyber-amber: #F59E0B;
  --cyber-red: #EF4444;
  --cyber-text-main: #F8FAFC;
  --cyber-text-sub: #94A3B8;
  --cyber-card-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 26, 0.95) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   CYBER DECK CONTROL MATRIX - ULTRA PREMIUM SAAS STYLES
   ═══════════════════════════════════════════════════════════════ */

.cyber-viewport {
  position: relative;
  background: radial-gradient(circle at 10% 10%, rgba(0, 240, 255, 0.06) 0%, transparent 45%),
              radial-gradient(circle at 90% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
              var(--cyber-bg);
  border-radius: 28px;
  padding: 12px;
}

#cyber-toast {
  position: fixed;
  bottom: 32px; right: 32px;
  background: linear-gradient(135deg, var(--cyber-cyan) 0%, var(--cyber-emerald) 100%);
  color: #030712;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 14px 26px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 240, 255, 0.4), 0 0 20px rgba(16, 185, 129, 0.3);
  z-index: 10000;
  transform: translateY(120px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#cyber-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.cyber-flash {
  border-radius: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--cyber-emerald);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}
.cyber-flash.flash-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
}
.flash-close-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.flash-close-btn:hover { opacity: 1; }

/* Hero Deck Header */
.cyber-deck-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 11, 24, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 38px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(28px) saturate(180%);
}
.cyber-deck-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00F0FF 0%, #8B5CF6 50%, #EC4899 100%);
  box-shadow: 0 0 25px #00F0FF, 0 0 35px #8B5CF6;
}

.cyber-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.cyber-flex-row-12 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cyber-flex-row-8 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cyber-flex-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cyber-mb-6 { margin-bottom: 6px; }
.cyber-flex-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cyber-flex-wrap-8 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cyber-header-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #FFFFFF 0%, #00F0FF 55%, #C4B5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cyber-header-desc {
  color: var(--cyber-text-sub, #94A3B8);
  font-size: 0.95rem;
  margin: 8px 0 0 0;
  max-width: 780px;
  line-height: 1.6;
}

.cyber-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--cyber-emerald, #10B981);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.cyber-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyber-emerald, #10B981);
  box-shadow: 0 0 10px var(--cyber-emerald, #10B981);
  animation: cyberPulse 1.8s infinite ease-in-out;
}
@keyframes cyberPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 16px var(--cyber-emerald, #10B981); }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Spacious Telemetry Stat Panels */
.cyber-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}
.cyber-stat-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(20px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}
.cyber-stat-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cyber-stat-panel:hover {
  border-color: rgba(0, 240, 255, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 240, 255, 0.2);
}
.cyber-stat-panel:hover::before { opacity: 1; }
.cyber-stat-panel.active-filter {
  border-color: var(--cyber-cyan, #00F0FF);
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.28), inset 0 0 18px rgba(0, 240, 255, 0.06);
}
.cyber-stat-panel.active-filter::before {
  opacity: 1;
  background: var(--cyber-cyan, #00F0FF);
}

.cyber-stat-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyber-cyan, #00F0FF);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
  transition: transform 0.3s ease;
}
.cyber-stat-panel:hover .cyber-stat-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}
.cyber-stat-icon-wrap.stat-green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--cyber-emerald, #10B981);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.2);
}
.cyber-stat-icon-wrap.stat-purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: var(--cyber-purple, #8B5CF6);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.2);
}
.cyber-stat-icon-wrap.stat-red {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--cyber-red, #EF4444);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.2);
}

.cyber-stat-value {
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cyber-text-main, #F8FAFC);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.cyber-stat-label {
  font-size: 0.78rem;
  color: var(--cyber-text-sub, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 700;
  margin-top: 6px;
}

/* Control Dock & Filter Tabs */
.cyber-control-dock {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.cyber-search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.cyber-search-input {
  width: 100%;
  height: 52px;
  background: rgba(6, 11, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 0 100px 0 52px;
  color: var(--cyber-text-main, #F8FAFC);
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.cyber-search-input:focus {
  outline: none;
  border-color: var(--cyber-cyan, #00F0FF);
  background: rgba(6, 11, 24, 0.98);
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.3);
}
.cyber-search-icon {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  opacity: 0.7;
  pointer-events: none;
  z-index: 5;
}
.cyber-search-keyhint {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cyber-text-sub, #94A3B8);
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  pointer-events: none;
  z-index: 5;
  line-height: 1;
}

.cyber-cat-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.cyber-cat-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--cyber-text-sub, #94A3B8);
  padding: 10px 20px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cyber-cat-tab:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #FFF;
  transform: translateY(-1px);
}
.cyber-cat-tab.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--cyber-cyan, #00F0FF);
  color: var(--cyber-cyan, #00F0FF);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}
.cyber-cat-badge {
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Bulk Dock */
.cyber-bulk-dock {
  display: none;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 14, 28, 0.99) 100%);
  border: 1px solid var(--cyber-cyan, #00F0FF);
  border-radius: 20px;
  padding: 20px 28px;
  margin-bottom: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 16px 45px rgba(0, 240, 255, 0.3);
  animation: bulkSlide 0.3s ease;
}
.cyber-bulk-dock.show {
  display: flex;
}
@keyframes bulkSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cyber-bulk-info {
  font-weight: 800;
  color: var(--cyber-cyan, #00F0FF);
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBERNETIC & INTERACTIVE BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Full Reset for all Cyber Button Elements */
button.btn-cyber-deploy,
button.btn-cyber-secondary,
button.btn-cyber-primary,
button.btn-cyber-primary-sm,
button.btn-cyber-icon,
button.sim-view-btn,
button.cyber-close-btn,
button.btn-seat-step,
a.btn-cyber-secondary,
a.btn-cyber-deploy,
a.btn-cyber-primary {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Flexbox Layout Helpers for Control Headers & Modals */
.cyber-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cyber-flex-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cyber-flex-wrap-8 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cyber-flex-end-mt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cyber-json-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Primary Electric Deploy CTA Button */
.btn-cyber-deploy,
.btn-cyber-primary {
  background: linear-gradient(135deg, #00F0FF 0%, #3B82F6 50%, #8B5CF6 100%);
  background-size: 200% 200%;
  color: #030712 !important;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  border: none;
  border-radius: 14px;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 22px rgba(0, 240, 255, 0.42), 0 0 30px rgba(139, 92, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cyber-deploy::after,
.btn-cyber-primary::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-cyber-deploy:hover::after,
.btn-cyber-primary:hover::after {
  transform: rotate(30deg) translateX(100%);
}
.btn-cyber-deploy:hover,
.btn-cyber-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.68), 0 0 45px rgba(139, 92, 246, 0.55);
  background-position: 100% 0;
  color: #030712 !important;
}
.btn-cyber-deploy:active,
.btn-cyber-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 14px rgba(0, 240, 255, 0.4);
}
.btn-cyber-deploy.btn-large {
  width: 100%;
  justify-content: center;
  padding: 16px 32px;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Secondary Glassmorphism Action Button */
.btn-cyber-secondary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #F1F5F9 !important;
  border-radius: 14px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cyber-secondary:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%);
  border-color: rgba(0, 240, 255, 0.65);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.35), 0 0 18px rgba(139, 92, 246, 0.25);
}
.btn-cyber-secondary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.2);
}

.btn-cyber-primary-sm {
  background: linear-gradient(135deg, var(--cyber-cyan, #00F0FF) 0%, var(--cyber-purple, #8B5CF6) 100%);
  color: #030712 !important;
  font-weight: 800;
  font-size: 0.82rem;
  border: none;
  border-radius: 12px;
  padding: 9px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}
.btn-cyber-primary-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
  color: #030712 !important;
}

/* Save Bar */
.cyber-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 28px 36px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 11, 24, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(28px);
  flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Modal Close Button (✕) */
.cyber-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #EF4444;
  color: #FF8080;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}
.cyber-close-btn.sm {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

/* Hologram Customer Portal View Simulator Header & Toggle Pill Controls */
.cyber-sim-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sim-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(3, 7, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px;
  border-radius: 30px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.sim-view-btn {
  background: transparent;
  border: none;
  outline: none;
  color: #94A3B8;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.sim-view-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.sim-view-btn.active#btnSimDesktop,
.sim-view-btn.active[data-view="desktop"] {
  background: linear-gradient(135deg, #00F0FF 0%, #0072FF 100%);
  color: #030712 !important;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.52);
  transform: scale(1.03);
}
.sim-view-btn.active#btnSimMobile,
.sim-view-btn.active[data-view="mobile"] {
  background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.52);
  transform: scale(1.03);
}

/* Simulator Output Viewport & Card Preview */
.cyber-sim-viewport {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 12px;
  background: rgba(3, 7, 18, 0.6);
  border-radius: 20px;
  margin: 16px 0;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: auto;
  margin-right: auto;
}
.cyber-sim-card {
  width: 100%;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(8, 14, 28, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.15);
}
.cyber-sim-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cyber-avatar-box-lg {
  width: 58px; height: 58px;
  font-size: 1.8rem;
  border-radius: 18px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.cyber-badge-pill {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cyber-sim-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 4px 0;
}
.cyber-sim-category {
  font-size: 0.82rem;
  color: #00F0FF;
  font-weight: 700;
  margin-bottom: 12px;
}
.cyber-sim-desc {
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.5;
  margin-bottom: 20px;
}
.cyber-sim-launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #00F0FF 0%, #3B82F6 100%);
  color: #030712 !important;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4);
}
.cyber-sim-launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 240, 255, 0.6);
  color: #030712 !important;
}

/* Settings Cockpit Promo Card */
.managed-tools-promo-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 11, 25, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 22px 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 25px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}
.managed-tools-promo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #00F0FF 0%, #8B5CF6 100%);
}
.promo-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.promo-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0;
  letter-spacing: -0.2px;
}
.active-matrix-badge {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.6px;
}
.promo-hint {
  color: #94A3B8;
  font-size: 0.88rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SPACIOUS ULTRA-PREMIUM MODULE CARDS GRID (420px min-width)
   ═══════════════════════════════════════════════════════════════ */

.cyber-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 28px;
  margin-bottom: 36px;
}
@media (max-width: 480px) {
  .cyber-cards-container {
    grid-template-columns: 1fr;
  }
}

.cyber-tool-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(6, 11, 24, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 30px;
  position: relative;
  backdrop-filter: blur(20px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  overflow: visible;
}
.cyber-tool-card:hover {
  border-color: rgba(0, 240, 255, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.2);
}

.cyber-card-glow-bar {
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  transition: all 0.3s ease;
}

.cyber-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}
.cyber-drag-handle {
  cursor: grab;
  color: var(--cyber-text-sub, #94A3B8);
  font-size: 1.3rem;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.cyber-drag-handle:hover { opacity: 1; color: var(--cyber-cyan, #00F0FF); }
.cyber-card-select-checkbox {
  width: 20px; height: 20px;
  accent-color: var(--cyber-cyan, #00F0FF);
  cursor: pointer;
}

.cyber-avatar-box {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.3s ease;
}
.cyber-tool-card:hover .cyber-avatar-box {
  transform: scale(1.08) rotate(3deg);
}

.cyber-card-header-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Quick Active Toggle Switch */
.cyber-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}
.cyber-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cyber-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 28px;
  transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #EF4444;
  border-radius: 50%;
  transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}
input:checked + .cyber-toggle-slider {
  background-color: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.6);
}
input:checked + .cyber-toggle-slider:before {
  transform: translateX(24px);
  background-color: #10B981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.9);
}

.cyber-card-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cyber-text-main, #F8FAFC);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.cyber-card-sub {
  font-size: 0.8rem;
  color: var(--cyber-cyan, #00F0FF);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cyber-card-sub-cat {
  background: rgba(0, 240, 255, 0.12);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
}
.cyber-card-sub-id {
  font-family: 'JetBrains Mono', monospace;
  color: var(--cyber-text-sub, #94A3B8);
}
.cyber-card-sub-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #C4B5FD;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.cyber-card-desc {
  font-size: 0.9rem;
  color: var(--cyber-text-sub, #94A3B8);
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 44px;
}

/* Seat Meter Box & Stepper */
.cyber-seat-box {
  background: rgba(6, 11, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.cyber-seat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--cyber-text-sub, #94A3B8);
  font-weight: 700;
}
.cyber-seat-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.seat-pct-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--cyber-text-main, #F8FAFC);
}
.btn-seat-step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cyber-text-main, #F8FAFC);
  width: 28px; height: 28px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  user-select: none;
}
.btn-seat-step:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: var(--cyber-cyan, #00F0FF);
  color: var(--cyber-cyan, #00F0FF);
  transform: scale(1.1);
}

.cyber-seat-meter-bg {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}
.cyber-seat-meter-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
}

/* Quick Action Toolbar Buttons */
.cyber-card-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}
.btn-cyber-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--cyber-text-main, #F8FAFC);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.btn-cyber-icon:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--cyber-cyan, #00F0FF);
  color: var(--cyber-cyan, #00F0FF);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}
.btn-cyber-icon.active {
  background: rgba(0, 240, 255, 0.25);
  border-color: var(--cyber-cyan, #00F0FF);
  color: var(--cyber-cyan, #00F0FF);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
}
.btn-cyber-icon.text-green { color: var(--cyber-emerald, #10B981); }
.btn-cyber-icon.text-red { color: #FCA5A5; }
.btn-cyber-icon.danger:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: var(--cyber-red, #EF4444);
  color: #FCA5A5;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
}

/* Collapsible Cyber Edit Drawer */
.cyber-edit-drawer {
  display: none;
  background: rgba(5, 10, 20, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 24px;
  margin-top: 20px;
  animation: drawerSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-edit-drawer.open {
  display: block;
}
@keyframes drawerSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cyber-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Managed-tool seat controls.
   Real classes rather than inline style attributes: the admin CSP has no
   'unsafe-inline' for styles, so a style="" here renders as an unstyled block. */
.cyber-field-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(240, 244, 255, 0.45);
}
.cyber-readout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(0, 196, 204, 0.25);
  border-radius: 10px;
  background: rgba(0, 196, 204, 0.06);
  font-size: 0.82rem;
  color: rgba(240, 244, 255, 0.75);
}
.cyber-readout strong {
  color: #00C4CC;
  font-size: 1rem;
}
.cyber-readout-link {
  margin-left: auto;
  color: #00C4CC;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cyber-readout-link:hover {
  text-decoration: underline;
}
.cyber-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(240, 244, 255, 0.7);
  cursor: pointer;
}
.cyber-switch-row input {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Seat register table. */
.row-flagged {
  background: rgba(255, 170, 0, 0.07);
}
.claim-identity {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  word-break: break-all;
}
.claim-kind {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.4);
}
/* A user-agent string is unbounded and only skimmed for "fifteen identical browsers",
   so it is clamped to one column's worth with the full value on the title attribute. */
.claim-ua {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: rgba(240, 244, 255, 0.45);
}

/* Reconciliation panel on the seat register. Every class here is ``claim-``-prefixed for
   the reason this file keeps relearning: the stylesheet is one flat namespace, so a
   plausible generic name like ``.reconcile-form`` would silently restyle whatever else
   ever wants that name. */
.claim-reconcile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
/* `max-width` rather than `width`, because `width` here is unwinnable. The base input rule
   is `input:not([type="checkbox"]):not([type="radio"])...` -- eight `:not([type])` clauses,
   each scoring as an attribute selector, so it lands at (0,8,1) and sets `width: 100%`. No
   reasonable class chain outranks that, and the failure is silent: a four-digit number gets
   a full-width box and the Compare button wraps onto its own line. `max-width` is not in
   that contest at all -- it clamps the used value whichever `width` rule wins -- and it is
   how the rest of this file constrains widths. */
.claim-reconcile .claim-reconcile-input {
  max-width: 7rem;
  flex: 0 0 auto;
}
.claim-reconcile-result {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  line-height: 1.5;
}
.claim-drift-ok {
  background: rgba(0, 200, 120, 0.08);
  border-color: rgba(0, 200, 120, 0.28);
}
.claim-drift-bad {
  background: rgba(255, 80, 80, 0.08);
  border-color: rgba(255, 80, 80, 0.3);
}
.claim-drift-warn {
  background: rgba(255, 170, 0, 0.08);
  border-color: rgba(255, 170, 0, 0.3);
}
.cyber-grid-2col-12 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.cyber-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cyber-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.cyber-field.no-mb { margin-bottom: 0; }
.cyber-field label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cyber-text-sub, #94A3B8);
}
.cyber-input {
  background: rgba(3, 7, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--cyber-text-main, #F8FAFC);
  font-size: 0.88rem;
  width: 100%;
  transition: all 0.25s ease;
}
.cyber-input.mono-font {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}
.cyber-input.color-picker {
  height: 42px;
  padding: 3px 6px;
  cursor: pointer;
}
.cyber-input:focus {
  outline: none;
  border-color: var(--cyber-cyan, #00F0FF);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

/* Floating Unsaved Changes Footer Dock */
.cyber-dirty-dock {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(140px);
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--cyber-cyan, #00F0FF);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 20px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  z-index: 999;
  backdrop-filter: blur(28px);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 90%;
  max-width: 820px;
}
.cyber-dirty-dock.show {
  transform: translateX(-50%) translateY(0);
}
.cyber-dirty-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cyber-dirty-icon {
  font-size: 1.6rem;
}
.cyber-dirty-title {
  font-weight: 800;
  color: var(--cyber-text-main, #F8FAFC);
  font-size: 0.98rem;
}
.cyber-dirty-subtitle {
  color: var(--cyber-text-sub, #94A3B8);
  font-size: 0.82rem;
}
.cyber-dirty-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER MODAL SYSTEM & PROVISIONING SUITE
   ═══════════════════════════════════════════════════════════════ */

.cyber-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
}

.cyber-modal-backdrop.active,
.cyber-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cyber-modal {
  background: linear-gradient(160deg, rgba(13, 22, 42, 0.96) 0%, rgba(6, 11, 24, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 22px;
  width: 100%;
  max-width: 640px;
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.85),
    0 0 45px rgba(0, 240, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 20px rgba(0, 240, 255, 0.03);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin: auto;
}

.cyber-modal-backdrop.active .cyber-modal,
.cyber-modal-backdrop.is-open .cyber-modal {
  transform: scale(1) translateY(0);
}

/* Modal Sizes */
.cyber-modal.modal-sm {
  max-width: 480px;
}
.cyber-modal.modal-md {
  max-width: 640px;
}
.cyber-modal.modal-lg {
  max-width: 860px;
}
.cyber-modal.modal-xl {
  max-width: 1040px;
}

/* Header */
.cyber-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  flex-shrink: 0;
}

.cyber-modal-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.4) 0%, rgba(153, 51, 255, 0.4) 50%, transparent 100%);
}

.modal-header-icon-group {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.modal-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(153, 51, 255, 0.22) 100%);
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.cyber-modal-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 40%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

.cyber-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.84rem;
  font-weight: 450;
  color: #94A3B8;
  line-height: 1.45;
}

.cyber-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.cyber-close-btn:hover {
  background: rgba(255, 51, 51, 0.15);
  border-color: rgba(255, 51, 51, 0.4);
  color: #FF4D4D;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
}

/* Modal Body & Custom Scrollbar */
.cyber-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cyber-modal-body::-webkit-scrollbar {
  width: 6px;
}
.cyber-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.cyber-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.2);
  border-radius: 10px;
}
.cyber-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.45);
}

/* Modal Form Styles */
.cyber-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  align-items: start;
}

@media (max-width: 620px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.field-label {
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.15rem;
}

.stat-note {
  font-size: 0.76rem;
  color: #64748B;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* Inputs, Selects inside Cyber Form */
.cyber-input,
.cyber-select,
.cyber-form input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
.cyber-form select {
  width: 100%;
  height: 44px;
  padding: 0 1rem;
  background: rgba(8, 14, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #F8FAFC;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.22s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.cyber-input:hover,
.cyber-select:hover,
.cyber-form input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):hover,
.cyber-form select:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(12, 20, 38, 0.92);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cyber-input:focus,
.cyber-select:focus,
.cyber-form input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):focus,
.cyber-form select:focus {
  outline: none;
  border-color: #00F0FF;
  background: rgba(6, 12, 24, 0.98);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.cyber-input::placeholder {
  color: rgba(148, 163, 184, 0.45);
  font-weight: 400;
  font-style: normal;
}

/* Suffix & Prefix Inputs */
.input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-with-suffix .cyber-input,
.input-with-suffix input {
  padding-right: 68px !important;
}
.input-suffix {
  position: absolute;
  right: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.28);
  padding: 4px 8px;
  border-radius: 7px;
  pointer-events: none;
  line-height: 1;
}

.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-with-prefix .cyber-input,
.input-with-prefix input {
  padding-left: 32px !important;
}
.input-prefix {
  position: absolute;
  left: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #00F0FF;
  pointer-events: none;
  line-height: 1;
}

/* Password Generator Input Group */
.password-generator-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.password-generator-input-group .cyber-input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 0.94rem;
}

.btn-generate-pw {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  color: #00F0FF !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  flex-shrink: 0 !important;
}

.btn-generate-pw:hover {
  background: rgba(0, 240, 255, 0.24) !important;
  border-color: #00F0FF !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.4) !important;
}

.btn-generate-pw:active .btn-icon {
  animation: spinDice 0.4s ease-in-out;
}

@keyframes spinDice {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.btn-toggle-pw,
.btn-copy-input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.btn-toggle-pw:hover,
.btn-copy-input:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.pw-highlight-flash {
  animation: pwFlash 0.45s ease;
}

@keyframes pwFlash {
  0%, 100% { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
  50% { border-color: #00F0FF; box-shadow: 0 0 25px rgba(0, 240, 255, 0.7); background: rgba(0, 240, 255, 0.1); }
}

/* Expandable Initial Grant Section */
.initial-grant-toggle-container {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 6px;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.25rem;
}

.initial-grant-toggle-container:focus-within,
.initial-grant-toggle-container.is-active {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.08);
}

.initial-grant-fields-panel {
  padding: 18px 16px 12px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  animation: grantSlideIn 0.3s ease-out;
}

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

.preset-chips-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: 12px;
}

.preset-chips-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00F0FF;
}

.preset-chips-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-preset-chip {
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #F8FAFC;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.btn-preset-chip:hover {
  background: #00F0FF;
  border-color: #00F0FF;
  color: #070A12;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* Interactive Modern Checkbox Cards (FIXES OVERLAPPING TEXT) */
.field-checkboxes-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0.25rem;
}

.cyber-checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  color: inherit !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.cyber-checkbox-label:hover {
  background: rgba(0, 240, 255, 0.06) !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

.cyber-checkbox-label:has(.cyber-checkbox:checked),
.cyber-checkbox-label.is-checked {
  background: rgba(0, 240, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12) !important;
}

.cyber-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 6px !important;
  background: rgba(8, 14, 28, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  flex-shrink: 0 !important;
}

.cyber-checkbox:hover {
  border-color: #00F0FF !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

.cyber-checkbox:checked {
  background: #00F0FF !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6) !important;
}

.cyber-checkbox:checked::after {
  content: '✓';
  position: absolute;
  color: #070A12;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox-custom {
  display: none !important;
}

.checkbox-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.checkbox-title,
.checkbox-text strong {
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  display: block !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.checkbox-desc,
.checkbox-text small,
.checkbox-text .stat-note {
  font-size: 0.78rem !important;
  font-weight: 450 !important;
  color: #94A3B8 !important;
  line-height: 1.45 !important;
  display: block !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Modal Footer */
.cyber-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
  margin-top: 0;
}

.cyber-modal-footer .btn {
  margin: 0;
  height: 44px;
}

.btn-modal-cancel,
.cyber-modal-footer .btn-secondary {
  padding: 0 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
  transition: all 0.2s ease;
}

.btn-modal-cancel:hover,
.cyber-modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-modal-submit,
.cyber-modal-footer .btn-primary {
  padding: 0 24px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #00F0FF 0%, #8B5CF6 100%);
  color: #070A12 !important;
  border: none;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-modal-submit:hover,
.cyber-modal-footer .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.65), 0 6px 20px rgba(0, 0, 0, 0.4);
  color: #070A12 !important;
}

.btn-modal-submit:active,
.cyber-modal-footer .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Success Panel & Credentials Manifest */
.cred-success-badge {
  text-align: center;
  padding: 16px 12px 20px;
}

.cred-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.2) 0%, rgba(0, 240, 255, 0.2) 100%);
  border: 1px solid rgba(0, 255, 102, 0.4);
  box-shadow: 0 0 25px rgba(0, 255, 102, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 12px;
}

.cred-success-title {
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  color: #00FF66;
  text-shadow: 0 0 20px rgba(0, 255, 102, 0.4);
  margin: 0 0 6px;
  text-transform: uppercase;
}

.cred-success-sub {
  font-size: 0.88rem;
  color: #94A3B8;
  margin: 0;
}

.credentials-card {
  background: rgba(7, 12, 24, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 240, 255, 0.04);
  margin-bottom: 16px;
}

.credentials-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cred-card-tag {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.cred-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.credentials-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cred-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.cred-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cred-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  flex-shrink: 0;
}

.cred-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #F8FAFC;
  text-align: right;
  word-break: break-all;
}

.cred-val-highlight {
  color: #00F0FF !important;
  font-weight: 800;
}

.cred-val-password {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  color: #00F0FF !important;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.cred-link {
  color: #00F0FF;
  text-decoration: underline;
}

.credentials-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 12px;
  font-size: 0.8rem;
  color: #94A3B8;
  line-height: 1.45;
  margin-bottom: 18px;
}

/* Blueprint Grid */
.cyber-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 24px 0;
}
.cyber-preset-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  user-select: none;
}
.cyber-preset-card:hover, .cyber-preset-card.selected {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyber-cyan);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.2);
}
.cyber-preset-icon-box {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS & SYSTEM COCKPIT STYLES
   ═══════════════════════════════════════════════════════════════ */

.settings-cockpit-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(6, 11, 25, 0.96) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.settings-cockpit-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00F0FF 0%, #8B5CF6 100%);
}
.settings-cockpit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-subtitle {
  color: #94A3B8;
  font-size: 0.92rem;
  margin: 0;
}
.settings-search-container {
  position: relative;
  min-width: 280px;
}
.settings-search-icon-wrap {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.6;
}
.settings-search-input {
  width: 100%;
  background: rgba(3, 7, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 16px 10px 40px;
  color: #F8FAFC;
  font-size: 0.88rem;
  transition: all 0.25s ease;
}
.settings-search-input:focus {
  outline: none;
  border-color: #00F0FF;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.settings-cockpit-kpi-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cockpit-kpi-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cockpit-kpi-pill strong {
  color: #F8FAFC;
}
.kpi-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.managed-tools-promo-card {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-left: 4px solid #00F0FF;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  flex-wrap: wrap;
  gap: 16px;
}
.promo-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.promo-title {
  margin: 0; color: #00F0FF; font-weight: 800; font-size: 1.15rem;
}
.active-matrix-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 12px;
  text-transform: uppercase;
}
.promo-hint {
  margin: 0; color: #94A3B8; font-size: 0.88rem;
}
.btn-cyber-primary {
  padding: 10px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00F0FF 0%, #8B5CF6 100%);
  color: #030712 !important;
  font-weight: 800;
  border: none;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-cyber-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.55);
}

.settings-nav-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 24px;
  scrollbar-width: thin;
}
.settings-nav-pill {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-nav-pill:hover, .settings-nav-pill.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}
.pill-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 800;
}

.settings-section-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease;
}
.settings-section-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.settings-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-section-icon-badge {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.settings-section-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #F8FAFC;
}
.settings-section-blurb {
  margin: 2px 0 0 0;
  font-size: 0.85rem;
  color: #94A3B8;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.settings-field-item.full-width {
  grid-column: 1 / -1;
}

.secret-vault-card {
  background: rgba(6, 11, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
}
.secret-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 8px;
}
.secret-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.secret-toggle-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border-color: #00F0FF;
}

.settings-floating-actions {
  position: sticky;
  bottom: 20px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(20px);
  z-index: 900;
  margin-top: 24px;
}
.settings-floating-btn-group {
  margin: 0; display: flex; gap: 0.75rem;
}
.settings-floating-btn-group .btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 800;
}
.unsaved-badge {
  color: #F59E0B;
  font-weight: 800;
  font-size: 0.78rem;
  margin-left: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER DETAILS & OPERATIONS HUB STYLES
   ═══════════════════════════════════════════════════════════════ */

.customer-hero-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(6, 11, 25, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.customer-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00F0FF 0%, #10B981 100%);
}

.customer-hero-main {
  display: flex;
  align-items: center;
  gap: 20px;
}
.customer-avatar-large {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #00F0FF 0%, #8B5CF6 100%);
  color: #030712;
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.35);
  flex-shrink: 0;
}
.customer-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.customer-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: #F8FAFC;
}
.customer-id-tag {
  color: #00F0FF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
}
.glowing-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.customer-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.meta-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-copy-mini {
  background: transparent;
  border: none;
  color: #00F0FF;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.btn-copy-mini:hover {
  transform: scale(1.2);
}

.customer-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-grid-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card-glow {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease;
}
.stat-card-glow:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.text-glow-cyan {
  color: #00F0FF;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.text-glow-green {
  color: #10B981;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}
.text-glow-purple {
  color: #8B5CF6;
  text-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.customer-tabs-wrapper {
  margin-bottom: 24px;
}
.customer-tab-nav {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.customer-tab-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.customer-tab-btn:hover, .customer-tab-btn.is-active {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
}

.customer-tab-pane {
  display: none;
}
.customer-tab-pane.is-active {
  display: block;
  animation: tabFadeIn 0.3s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.presets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.preset-label {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 700;
}
.preset-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #00F0FF;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.preset-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   CYBER DECK – CSP-COMPLIANT UTILITY CLASSES
   Replaces all inline style="" attributes in managed_tools.html
   ═══════════════════════════════════════════════════════════════ */

/* Layout utilities */
/* Helper utilities */
.icon-sm-svg { width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex-shrink: 0; }
.icon-arrow-svg { width: 10px; height: 6px; min-width: 10px; margin-left: 2px; color: var(--cyan); flex-shrink: 0; }
.form-no-margin { margin: 0; }
.pilot-avatar-badge.badge-md { width: 38px; height: 38px; font-size: 1rem; }

.cyber-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cyber-flex-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cyber-flex-row-12 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cyber-flex-row-10 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cyber-flex-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cyber-flex-wrap-8 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cyber-flex-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.cyber-flex-end-mt {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.cyber-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cyber-grid-2col-12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.cyber-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.cyber-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.cyber-mb-6 { margin-bottom: 6px; }

/* Header elements */
.cyber-header-title {
  margin: 0;
  font-size: 1.55rem;
  color: #F8FAFC;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.cyber-header-desc {
  margin: 0;
  color: var(--cyber-text-sub);
  font-size: 0.9rem;
}

/* Dynamic Color Variable Mappings */
.cyber-tool-card, .tool-card-item { --tool-c: #00C4CC; }
.cyber-tool-card[data-color="#00C4CC"], .tool-card-item[data-color="#00C4CC"] { --tool-c: #00C4CC; }
.cyber-tool-card[data-color="#FF642D"], .tool-card-item[data-color="#FF642D"] { --tool-c: #FF642D; }
.cyber-tool-card[data-color="#10A37F"], .tool-card-item[data-color="#10A37F"] { --tool-c: #10A37F; }
.cyber-tool-card[data-color="#15C39A"], .tool-card-item[data-color="#15C39A"] { --tool-c: #15C39A; }
.cyber-tool-card[data-color="#7C3AED"], .tool-card-item[data-color="#7C3AED"] { --tool-c: #7C3AED; }
.cyber-tool-card[data-color="#D97706"], .tool-card-item[data-color="#D97706"] { --tool-c: #D97706; }
.cyber-tool-card[data-color="#2563EB"], .tool-card-item[data-color="#2563EB"] { --tool-c: #2563EB; }
.cyber-tool-card[data-color="#E11D48"], .tool-card-item[data-color="#E11D48"] { --tool-c: #E11D48; }
.cyber-tool-card[data-color="#F24E1E"], .tool-card-item[data-color="#F24E1E"] { --tool-c: #F24E1E; }
.cyber-tool-card[data-color="#00F0FF"], .tool-card-item[data-color="#00F0FF"] { --tool-c: #00F0FF; }

/* Modal preview card styling */
.cyber-modal-preview-card {
  position: relative;
  padding: 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(8, 14, 26, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.cyber-mb-10 { margin-bottom: 10px; }
.cyber-avatar-box-sm {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.25rem;
}
.cyber-avatar-box-lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.4rem;
}
.cyber-status-active-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.cyber-preview-title {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  color: #F8FAFC;
  font-weight: 800;
}
.cyber-preview-sub {
  font-size: 0.76rem;
  color: var(--cyber-cyan);
  margin-bottom: 8px;
  font-weight: 700;
}
.cyber-preview-sub-badge { color: #94A3B8; }
.cyber-preview-desc {
  font-size: 0.8rem;
  color: var(--cyber-text-sub);
  margin: 0 0 14px 0;
  line-height: 1.4;
}
.cyber-preview-capacity {
  background: rgba(6, 11, 22, 0.6);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.74rem;
  color: var(--cyber-text-sub);
}

/* Simulator modal styling */
.cyber-sim-card {
  padding: 22px;
  background: linear-gradient(135deg, rgba(13, 20, 35, 0.96) 0%, rgba(7, 12, 22, 0.99) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
.cyber-sim-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.cyber-badge-pill {
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(0, 240, 255, 0.15);
  color: var(--cyber-cyan);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  text-transform: uppercase;
}
.cyber-sim-title {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  color: #F8FAFC;
  font-weight: 800;
}
.cyber-sim-category {
  font-size: 0.82rem;
  color: var(--cyber-cyan);
  margin-bottom: 12px;
  font-weight: 700;
}
.cyber-sim-desc {
  font-size: 0.88rem;
  color: var(--cyber-text-sub);
  margin: 0 0 20px 0;
  line-height: 1.5;
}
.cyber-sim-launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--cyber-cyan) 0%, #00F0FF 100%);
  color: #030712;
  font-weight: 900;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

/* Stat panel icon color variants */
.cyber-stat-icon-wrap.stat-green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10B981;
}
.cyber-stat-icon-wrap.stat-purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #A78BFA;
}
.cyber-stat-icon-wrap.stat-red {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

/* Bulk dock layout */
.cyber-bulk-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: #F8FAFC;
}
.btn-cyber-icon.text-green { color: #10B981; }
.btn-cyber-icon.text-red { color: #EF4444; }

/* Card sub-elements */
.cyber-card-sub-cat {
  color: var(--cyber-cyan);
  font-weight: 700;
}
.cyber-card-sub-id {
  color: var(--cyber-text-sub);
  font-family: monospace;
}
.cyber-card-sub-badge {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  color: #E2E8F0;
}

/* Input variants */
.cyber-input.mono-font {
  font-family: monospace;
}
.cyber-input.color-picker {
  height: 38px;
  padding: 2px;
}

/* Save bar */
.cyber-save-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--cyber-panel-border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  flex-wrap: wrap;
  gap: 16px;
}
.btn-cyber-deploy.btn-large {
  padding: 13px 32px;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN LAYOUT & AESTHETIC ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Settings Cockpit Banner & Promo Card */
.settings-cockpit-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(8, 14, 26, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.settings-cockpit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.settings-subtitle {
  color: var(--cyber-text-sub);
  font-size: 0.92rem;
  margin: 0;
}
.settings-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(3, 7, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 280px;
}
.settings-search-input {
  background: transparent;
  border: none;
  color: #F8FAFC;
  font-size: 0.85rem;
  width: 100%;
}
.settings-search-input:focus { outline: none; }

.settings-cockpit-kpi-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cockpit-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.8rem;
  color: #E2E8F0;
}
.kpi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.managed-tools-promo-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(13, 20, 35, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
}
.promo-card-info { flex: 1; }
.promo-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.promo-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #F8FAFC;
}
.active-matrix-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  letter-spacing: 0.5px;
}
.promo-hint {
  margin: 0;
  color: var(--cyber-text-sub);
  font-size: 0.88rem;
}

.settings-nav-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 24px;
}
.settings-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cyber-text-sub);
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-nav-pill:hover, .settings-nav-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1);
}
.pill-badge {
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Customer Detail Navigation & Tab Rail */
.customer-tabs-wrapper {
  margin: 24px 0 20px 0;
}
.customer-tab-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.customer-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  color: var(--cyber-text-sub);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.customer-tab-btn:hover, .customer-tab-btn.is-active, .customer-tab-btn.active {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}

/* 1. Telemetry Stat Grid (4-Column Horizontal Layout) */
.cyber-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) {
  .cyber-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cyber-stats-grid { grid-template-columns: 1fr; }
}
.cyber-stat-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(8, 14, 26, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.cyber-stat-panel:hover, .cyber-stat-panel.active-filter {
  border-color: rgba(0, 240, 255, 0.4);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(8, 14, 26, 0.95) 100%);
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.15);
  transform: translateY(-2px);
}
.cyber-stat-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cyber-stat-value {
  font-size: 1.35rem;
  font-weight: 900;
  color: #F8FAFC;
  line-height: 1.1;
}
.cyber-stat-label {
  font-size: 0.74rem;
  color: var(--cyber-text-sub);
  font-weight: 700;
  margin-top: 2px;
}

/* 2. Web Tool Modules Grid (Responsive 2-Column Grid) */
.cyber-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.cyber-tool-card.tool-card-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(13, 20, 35, 0.9) 0%, rgba(7, 12, 22, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
}
.cyber-tool-card.tool-card-item:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.1);
  transform: translateY(-2px);
}
.cyber-card-glow-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tool-c, #00C4CC);
  box-shadow: 0 0 12px var(--tool-c, #00C4CC);
}
.cyber-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cyber-avatar-box {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--tool-c, #00C4CC) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tool-c, #00C4CC) 35%, transparent);
  color: var(--tool-c, #00C4CC);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.cyber-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 4px 0;
}
.cyber-card-sub {
  font-size: 0.78rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cyber-card-desc {
  font-size: 0.84rem;
  color: var(--cyber-text-sub);
  line-height: 1.45;
  margin-bottom: 14px;
  min-height: 38px;
}

/* 3. Category Tab Rail & Badges */
.cyber-cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.cyber-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cyber-text-sub);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cyber-cat-tab:hover, .cyber-cat-tab.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00F0FF;
}
.cyber-cat-badge {
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* 4. Action Buttons & Icons */
.cyber-card-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.btn-cyber-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cyber-icon:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
.btn-cyber-icon.danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}


/* 5. Settings Cockpit Status Bar & Section Styling */
.settings-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px 0;
}
.settings-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #F8FAFC;
}

/* 6. Customer Details Tab Rail & Quick Presets */
.customer-tab-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 20px 0 20px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.customer-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  color: var(--cyber-text-sub);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.customer-tab-btn:hover, .customer-tab-btn.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}
.preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.preset-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}
.cyber-dirty-subtitle {
  font-size: 0.78rem;
  color: var(--cyber-text-sub);
}
.cyber-dirty-actions {
  display: flex;
  gap: 10px;
}

/* Modal elements */
.cyber-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.cyber-modal-title {
  margin: 0;
  font-size: 1.45rem;
  color: #F8FAFC;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.cyber-modal-title.sm {
  font-size: 1.25rem;
  letter-spacing: 0;
}
.cyber-modal-title.md {
  font-size: 1.3rem;
  letter-spacing: 0;
}
.cyber-modal-subtitle {
  margin: 4px 0 0 0;
  color: var(--cyber-text-sub);
  font-size: 0.86rem;
}
.cyber-modal-subtitle.sm {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
}
.cyber-modal-subtitle.md {
  margin: 2px 0 0 0;
  font-size: 0.8rem;
}
.cyber-close-btn {
  background: transparent;
  border: none;
  color: var(--cyber-text-sub);
  font-size: 1.8rem;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}
.cyber-close-btn:hover {
  color: #F8FAFC;
}
.cyber-close-btn.sm { font-size: 1.5rem; }
.cyber-modal.modal-sm { max-width: 580px; }
.cyber-modal.modal-md { max-width: 650px; }

/* Preset card text */
.cyber-preset-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: #F8FAFC;
}
.cyber-preset-category {
  font-size: 0.7rem;
  color: var(--cyber-text-sub);
}

/* Modal form area */
.cyber-modal-form-area {
  background: rgba(7, 12, 22, 0.8);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cyber-preview-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--cyber-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

/* JSON textarea */
.cyber-input.json-textarea {
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
}
.cyber-json-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* Simulator viewport */
.cyber-sim-viewport {
  transition: all 0.3s ease;
  margin: 0 auto;
}
.cyber-sim-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cyber field no-bottom-margin */
.cyber-field.no-mb { margin-bottom: 0; }

/* Modal header with mb-16 */
.cyber-modal-header.mb-16 { margin-bottom: 16px; }

/* Customer detail minor inline style replacements */
.customer-ban-reason-note { margin-top: 4px; }
.customer-standing-note { margin-top: 4px; }
.customer-ban-form { margin-top: 16px; }
.tool-access-duration-label { font-size: 0.85rem; margin-bottom: 2px; }
.tool-access-duration-field { margin: 0; }
.tool-access-border { border-left: 4px solid #00C4CC; }

/* The batch-save warning above the Save button on the customer Web Tools tab.
   Not a `.hint`: that is the faintest text on the page (12px, 65% opacity) and reads as a
   footnote, which is the wrong weight for the one line explaining that an untouched-looking
   card is about to be revoked. Amber rather than red -- the save is a normal thing to do,
   it just does more than it looks like it does. */
.tool-access-warning {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid #f0a742;
  border-radius: 4px;
  background: rgba(240, 167, 66, 0.09);
  color: rgba(240, 244, 255, 0.9);
  font-size: 0.82rem;
  line-height: 1.5;
}

.tool-access-warning strong { color: #f5c176; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN LAYOUT & AESTHETIC ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Settings Cockpit Banner & Promo Card */
.settings-cockpit-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(8, 14, 26, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.settings-cockpit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.settings-subtitle {
  color: var(--cyber-text-sub);
  font-size: 0.92rem;
  margin: 0;
}
.settings-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(3, 7, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 280px;
}
.settings-search-input {
  background: transparent;
  border: none;
  color: #F8FAFC;
  font-size: 0.85rem;
  width: 100%;
}
.settings-search-input:focus { outline: none; }

.settings-cockpit-kpi-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cockpit-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.8rem;
  color: #E2E8F0;
}
.kpi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.managed-tools-promo-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(13, 20, 35, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
}
.promo-card-info { flex: 1; }
.promo-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.promo-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #F8FAFC;
}
.active-matrix-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  letter-spacing: 0.5px;
}
.promo-hint {
  margin: 0;
  color: var(--cyber-text-sub);
  font-size: 0.88rem;
}

.settings-nav-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 24px;
}
.settings-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cyber-text-sub);
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-nav-pill:hover, .settings-nav-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1);
}
.pill-badge {
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Customer Detail Navigation & Tab Rail */
.customer-tabs-wrapper {
  margin: 24px 0 20px 0;
}
.customer-tab-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.customer-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  color: var(--cyber-text-sub);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.customer-tab-btn:hover, .customer-tab-btn.is-active, .customer-tab-btn.active {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}



/* Settings Form & Module Section Styling */
.settings-section-card {
  background: linear-gradient(135deg, rgba(13, 20, 35, 0.85) 0%, rgba(7, 12, 22, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}
.settings-section-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--cyber-cyan) 0%, #7C3AED 100%) !important;
  opacity: 0.7 !important;
}
.settings-section-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
}
.settings-section-icon-badge {
  width: 48px !important; height: 48px !important;
  border-radius: 14px !important;
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  color: #00F0FF !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15) !important;
}
.settings-section-title-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}
.settings-section-title {
  margin: 0 0 4px 0 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.3px !important;
}
.settings-section-blurb {
  margin: 0 !important;
  color: var(--cyber-text-sub) !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}

/* Settings Field Grid (2-Column Grid Layout) */
.settings-field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .settings-field-grid { grid-template-columns: 1fr !important; }
}
.settings-field-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.settings-field-item.full-width {
  grid-column: 1 / -1 !important;
}
.settings-field-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: var(--cyber-cyan) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.diff-label { color: #00F0FF !important; }

/* Enhanced Cyber Inputs */
.cyber-input, .cyber-select, .cyber-textarea {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  color: #F8FAFC;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.cyber-input:focus, .cyber-select:focus, .cyber-textarea:focus {
  outline: none;
  border-color: rgba(0, 240, 255, 0.6);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}
.cyber-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.cyber-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300F0FF' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Cyber Toggle Switch Pills */
.cyber-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cyber-switch-label:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(0, 240, 255, 0.3);
}
.cyber-switch-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #F8FAFC;
}
.cyber-switch-pill {
  width: 46px; height: 24px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.cyber-switch-pill::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #94A3B8;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
input[type="checkbox"]:checked + .cyber-switch-pill {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
input[type="checkbox"]:checked + .cyber-switch-pill::before {
  transform: translateX(22px);
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
}

/* Crypto Network Selector Grid */
.crypto-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.crypto-network-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.crypto-network-card:hover, .crypto-network-card.checked {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}
.crypto-network-card input[type="checkbox"] {
  accent-color: #00F0FF;
  width: 16px; height: 16px;
}

/* Secret Vault Cards */
.secret-vault-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 16px;
}

/* Tooltip Styling */
.info-tooltip-wrapper {
  position: relative;
  display: inline-block;
}
.info-tooltip-btn {
  background: transparent;
  border: none;
  color: var(--cyber-text-sub);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 4px;
}
.info-tooltip-popup {
  display: none;
  position: absolute;
  bottom: 100%; right: 0;
  margin-bottom: 8px;
  width: 220px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 10px;
  font-size: 0.78rem;
  color: #F8FAFC;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 100;
  text-transform: none;
}
.info-tooltip-wrapper:hover .info-tooltip-popup {
  display: block;
}

/* ---------------------------------------------------------------- Provider Cockpit & Detail Styling */
.provider-detail-hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.provider-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.provider-hero-title-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.provider-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan, #00f0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.provider-hero-name {
  font-size: 1.65rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 0.3rem 0;
  line-height: 1.2;
}

.provider-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.provider-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.provider-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.provider-stat-card {
  background: var(--bg-card, rgba(18, 24, 38, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.provider-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, rgba(0, 240, 255, 0.5));
  transition: opacity 0.2s ease;
}

.provider-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 240, 255, 0.1);
}

/* The accent stripe each card carries, as classes rather than a style attribute.
   The admin CSP sets no 'unsafe-inline' in style-src, so `style="--card-accent: ..."`
   was dropped by the browser and every one of these cards drew the same default
   cyan -- including the circuit-state card, whose whole job is to be orange when
   the provider is paused. A class is applied by the stylesheet, so it survives. */
.provider-stat-card--accent-driver {
  --card-accent: #00f0ff;
}

.provider-stat-card--accent-services {
  --card-accent: #a855f7;
}

.provider-stat-card--accent-sync {
  --card-accent: #38bdf8;
}

.provider-stat-card--accent-wallet {
  --card-accent: #eab308;
}

/* Circuit state, which is the reason this is a set rather than one colour. */
.provider-stat-card--accent-paused {
  --card-accent: #f97316;
}

.provider-stat-card--accent-failing {
  --card-accent: #eab308;
}

.provider-stat-card--accent-healthy {
  --card-accent: #10b981;
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.stat-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
}

.stat-card-icon {
  font-size: 1.1rem;
  opacity: 0.85;
}

.stat-card-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.stat-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

/* Tabs for Provider Detail */
.provider-tab-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5rem;
  padding-bottom: 2px;
}

.provider-tab-btn {
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.provider-tab-btn:hover {
  color: #f8fafc;
}

.provider-tab-btn.active {
  color: var(--cyan, #00f0ff);
  border-bottom-color: var(--cyan, #00f0ff);
}

.tab-content-panel {
  display: none;
}

.tab-content-panel.active {
  display: block;
}

/* Form Password & Clipboard Enhancements */
.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-action input {
  padding-right: 3.5rem !important;
}

/* Containing block for the absolutely-positioned copy button inside it. Was a style
   attribute, which the admin CSP drops, so the button escaped to the nearest
   positioned ancestor and landed outside the payload it copies. */
.json-code-container {
  position: relative;
  margin-top: 8px;
}

.input-action-btn {
  position: absolute;
  right: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.input-action-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

/* Kind Selector Cards in Form */
.kind-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kind-selector-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: #e2e8f0;
}

.kind-selector-card:hover,
.kind-selector-card.active {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  color: #f8fafc;
}

.kind-selector-card .kind-icon {
  font-size: 1.8rem;
}

.kind-selector-card .kind-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.kind-selector-card .kind-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

/* ─────────────────────────────────────────────────────────────
   Premium Entitlement & Warranty UI Styles
   ───────────────────────────────────────────────────────────── */
.proof-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.proof-card {
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 10px);
  padding: 0.6rem;
  background: rgba(11, 15, 25, 0.6);
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.proof-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.15);
}

.proof-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.proof-pdf-placeholder {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cyan, #00F0FF);
  border: 1px dashed rgba(0, 240, 255, 0.2);
}

.proof-filename {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-action-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wc-action-buttons {
  display: flex;
  gap: 1rem;
}

.wc-action-buttons .btn {
  flex: 1;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: var(--radius-sm, 10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-settled-badge {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 10px);
}

/* ─────────────────────────────────────────────────────────────
   State-of-the-Art Premium UI: Form Controls, Dropdowns & HUD
   ───────────────────────────────────────────────────────────── */

/* Form Inputs, Select Dropdowns & Textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.form-input,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm, 10px);
  padding: 0.75rem 1rem;
  color: #F8FAFC;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom Styled Select Dropdown Chevron */
select,
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300F0FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
  cursor: pointer;
}

select option {
  background-color: #0B0F19;
  color: #F8FAFC;
  padding: 0.75rem 1rem;
  font-weight: 500;
}

/* Focus & Hover Micro-Interactions */
input:hover,
select:hover,
textarea:hover,
.form-input:hover,
.form-select:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #00F0FF;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Filter Tabs & Navigation HUD */
.wc-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.wc-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wc-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm, 10px);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dim, #94A3B8);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-filter-tab:hover {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}

.wc-filter-tab.is-active {
  color: #070A12;
  background: linear-gradient(135deg, #00F0FF, #7928CA);
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

/* User Profile Cockpit Dropdown Menu Enhancements */
.user-cockpit-wrapper {
  position: relative;
}

.user-cockpit-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.8rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.user-cockpit-trigger:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.cockpit-dropdown-card {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: 310px;
  background: rgba(11, 15, 25, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  pointer-events: none;
}

/* Invisible bridge to cover the gap between trigger and dropdown */
.cockpit-dropdown-card::after {
  content: '';
  position: absolute;
  top: -1.25rem;
  left: -10px;
  right: -10px;
  height: 1.25rem;
  background: transparent;
}

.user-cockpit-wrapper:hover .cockpit-dropdown-card,
.user-cockpit-wrapper:focus-within .cockpit-dropdown-card,
.cockpit-dropdown-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-cockpit-wrapper:hover .icon-arrow-svg,
.user-cockpit-wrapper:focus-within .icon-arrow-svg,
.user-cockpit-wrapper.is-open .icon-arrow-svg,
.user-cockpit-trigger[aria-expanded="true"] .icon-arrow-svg {
  transform: rotate(180deg);
}

.cockpit-status-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF66;
  box-shadow: 0 0 10px #00FF66;
  animation: pulsePulse 2s infinite ease-in-out;
}

@keyframes pulsePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.cockpit-deposit-btn {
  background: linear-gradient(135deg, #00F0FF, #9933FF);
  color: #070A12;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.cockpit-deposit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

.cockpit-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: rgba(240, 244, 255, 0.8);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
}

.cockpit-nav-item:hover {
  background: rgba(0, 240, 255, 0.1);
  color: #00F0FF;
  transform: translateX(3px);
}

.cockpit-nav-item.active {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.14), rgba(153, 51, 255, 0.1));
  border-color: rgba(0, 240, 255, 0.35);
  color: #FFFFFF;
  font-weight: 700;
}

.cockpit-nav-item.active svg {
  color: var(--cyan, #00F0FF);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7));
}

.cockpit-nav-item.logout-action:hover {
  background: rgba(255, 51, 102, 0.15);
  color: #FF3366;
}

/* ==========================================================================
   Super Admin Master Platform & Impersonation Banner Styles
   ========================================================================== */

/* Impersonation banner & shop switcher — see premium styles above (~line 650) */

/* -------------------------------------------------------------------------- */
/* Master Platform Control Plane & Impersonation Styles                       */
/* -------------------------------------------------------------------------- */

.platform-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.platform-metric-card {
  background: rgba(14, 19, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.platform-metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.16);
}

.platform-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.platform-metric-card.gold::before {
  background: linear-gradient(90deg, #F59E0B, #FCD34D);
}

.platform-metric-card.green::before {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.platform-metric-card.purple::before {
  background: linear-gradient(90deg, #8B5CF6, #C084FC);
}

.platform-metric-title {
  font-size: 0.78rem;
  color: var(--text-dim, #94A3B8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}

.platform-metric-value {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  color: #FFF;
  letter-spacing: -0.02em;
}

.platform-metric-sub {
  font-size: 0.75rem;
  color: var(--text-dim, #64748B);
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Resource Gauges */
.resource-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
}

.resource-gauge-card {
  background: rgba(14, 19, 31, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.resource-gauge-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-2px);
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: 0.6rem;
}

.resource-bar-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.resource-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-bar-fill.green { background: linear-gradient(90deg, #059669, #10B981); }
.resource-bar-fill.blue { background: linear-gradient(90deg, #2563EB, #38BDF8); }
.resource-bar-fill.yellow { background: linear-gradient(90deg, #D97706, #FBBF24); }
.resource-bar-fill.red { background: linear-gradient(90deg, #DC2626, #F87171); }

/* Kill switch buttons */
.kill-switch-btn {
  padding: 0.38rem 0.85rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kill-switch-btn.suspend {
  background: rgba(239, 68, 68, 0.14);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.kill-switch-btn.suspend:hover {
  background: #EF4444;
  color: #FFF;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

.kill-switch-btn.activate {
  background: rgba(16, 185, 129, 0.14);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.kill-switch-btn.activate:hover {
  background: #10B981;
  color: #FFF;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* 3-Minute Setup Wizard */
.wizard-card {
  background: rgba(14, 19, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  animation: fadeIn 0.3s ease;
}

.wizard-step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #FFF;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

.wizard-step-tab {
  user-select: none;
  outline: none;
}

.wizard-step-tab:hover {
  transform: translateY(-1px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}


/* ================================================================
   FILTER CHIPS & SEGMENTED CONTROLS — Futuristic Cyber Experience
   ================================================================ */

.seller-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.5rem 0.65rem;
  background: rgba(11, 16, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.seller-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.seller-search-icon-svg {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--cyan);
  opacity: 0.75;
  pointer-events: none;
  transition: all 0.25s ease;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4));
}

.seller-search-input {
  width: 250px;
  height: 38px;
  padding: 0 4.2rem 0 2.55rem;
  font-size: 0.84rem;
  font-family: var(--font);
  color: #FFF;
  background: rgba(7, 10, 18, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 100px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.seller-search-input::placeholder {
  color: rgba(240, 244, 255, 0.45);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

.seller-search-input:hover {
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(11, 17, 30, 0.95);
}

.seller-search-input:focus {
  width: 320px;
  border-color: var(--cyan);
  background: rgba(11, 19, 36, 0.98);
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35), 0 0 24px rgba(0, 240, 255, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.seller-search-input:focus + .seller-search-icon-svg,
.seller-search-box:focus-within .seller-search-icon-svg {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  color: #FFF;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.8));
}

/* Keyboard hint badge inside search input */
.seller-search-kbd {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 600;
  pointer-events: none;
  line-height: 1.2;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.seller-search-input:focus ~ .seller-search-kbd {
  opacity: 0.35;
}

/* Instant Clear Button */
.seller-search-clear-btn {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.seller-search-clear-btn svg {
  width: 11px;
  height: 11px;
}

.seller-search-clear-btn:hover {
  background: rgba(255, 51, 51, 0.25);
  border-color: rgba(255, 51, 51, 0.6);
  color: #FF6666;
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.4);
  transform: translateY(-50%) scale(1.12);
}

.seller-search-clear-btn:active {
  transform: translateY(-50%) scale(0.92);
}

/* Premium Filter Chips Container */
.seller-filter-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  height: 32px;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.filter-chip:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.filter-chip:active {
  transform: translateY(0) scale(0.97);
}

/* Chip Live Count Badges */
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--mono);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  transition: all 0.22s ease;
}

/* Chip Glow Beacons */
.chip-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.chip-pulse-dot.dot-green {
  background: #00FF66;
  box-shadow: 0 0 8px #00FF66;
}
.chip-pulse-dot.dot-green::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 102, 0.6);
  animation: pulseBeacon 2s infinite ease-out;
}

.chip-pulse-dot.dot-yellow {
  background: #FFB800;
  box-shadow: 0 0 8px #FFB800;
}
.chip-pulse-dot.dot-yellow::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 0, 0.6);
  animation: pulseBeacon 2s infinite ease-out;
}

.chip-pulse-dot.dot-slate {
  background: #94A3B8;
  box-shadow: 0 0 6px #94A3B8;
}

@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 1; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Individual Active Chip Theming */
.filter-chip-all.filter-chip-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(0, 240, 255, 0.06)) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.1);
}
.filter-chip-all.filter-chip-active .chip-count {
  background: rgba(0, 240, 255, 0.25);
  color: #FFF;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.filter-chip-active-status.filter-chip-active {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.18), rgba(0, 255, 102, 0.06)) !important;
  border-color: rgba(0, 255, 102, 0.5) !important;
  color: var(--green) !important;
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.25), inset 0 0 8px rgba(0, 255, 102, 0.1);
}
.filter-chip-active-status.filter-chip-active .chip-count {
  background: rgba(0, 255, 102, 0.25);
  color: #FFF;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

.filter-chip-suspended-status.filter-chip-active {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.18), rgba(255, 184, 0, 0.06)) !important;
  border-color: rgba(255, 184, 0, 0.5) !important;
  color: var(--amber) !important;
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.25), inset 0 0 8px rgba(255, 184, 0, 0.1);
}
.filter-chip-suspended-status.filter-chip-active .chip-count {
  background: rgba(255, 184, 0, 0.25);
  color: #FFF;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.3);
}

.filter-chip-expired-status.filter-chip-active {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.06)) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  color: #F1F5F9 !important;
  box-shadow: 0 0 14px rgba(148, 163, 184, 0.2);
}
.filter-chip-expired-status.filter-chip-active .chip-count {
  background: rgba(148, 163, 184, 0.3);
  color: #FFF;
}

/* Filter Status Meta & Quick Reset */
.seller-filter-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.seller-results-pill {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--mono);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.seller-results-pill strong {
  color: var(--cyan);
}

.seller-reset-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.3);
  color: #FF8080;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seller-reset-filters-btn:hover {
  background: rgba(255, 51, 51, 0.25);
  border-color: #FF3333;
  color: #FFF;
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.4);
  transform: translateY(-1px);
}

/* Real-Time Live Search Highlight */
mark.cyber-search-highlight {
  background: rgba(0, 240, 255, 0.3);
  color: #FFF;
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  border-bottom: 2px solid var(--cyan);
}

/* Staggered Row Animation */
.seller-row {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.seller-row.row-fade-in {
  animation: sellerRowEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sellerRowEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Empty search results state */
.seller-no-matches-row td {
  padding: 2.5rem 1rem !important;
  text-align: center;
}

.cyber-search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  margin: 0.5rem auto;
  max-width: 420px;
}

.cyber-empty-radar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 240, 255, 0.4) 60deg, transparent 65deg);
  animation: radarSpin 2.5s linear infinite;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-center-icon {
  font-size: 1.4rem;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
}

.cyber-empty-title {
  display: block;
  font-size: 1rem;
  color: #FFF;
  font-weight: 700;
}

.cyber-empty-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.cyber-empty-reset-btn {
  margin-top: 0.25rem;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: var(--cyan) !important;
}
.cyber-empty-reset-btn:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3) !important;
}

/* ================================================================
   MASTER PLATFORM CONTROL PLANE — Clean Semantic CSS Classes
   ================================================================ */

.nav a.nav-platform-link {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.25);
  color: #FCD34D;
}
.nav a.nav-platform-link:hover {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.5);
  color: #FFF;
}
.nav a.nav-wizard-link {
  color: #38BDF8;
}

.page-head-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.page-head-icon {
  font-size: 1.75rem;
  line-height: 1;
}
.page-head-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFF 30%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}
.page-head-sub {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.page-head-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.telemetry-section {
  margin-bottom: 2.25rem;
}
.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.telemetry-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.telemetry-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #FFF;
}
.telemetry-py-ver {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-family: var(--mono);
}
.resource-val-green { color: #10B981; }
.resource-val-yellow { color: #EAB308; }
.resource-val-red { color: #EF4444; }
.resource-val-blue { color: #38BDF8; }
/* Shown where a reading could not be taken. Deliberately quiet and deliberately
   not a number: a figure on this panel asserts it was measured. */
.resource-val-muted { color: #94A3B8; font-size: 0.875rem; }
.resource-sub-row {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
}
.bot-username-display {
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 0.25rem;
  color: #FFF;
  font-family: var(--mono);
}
.bot-uptime-display {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
}
.bot-uptime-display strong {
  color: #F8FAFC;
}

.license-section-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 19, 31, 0.85);
  backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 1.5rem;
}
.license-section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.license-section-heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.license-section-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0.25rem 0 0 0;
}

.seller-avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #60A5FA;
  flex-shrink: 0;
}
.seller-identity-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.seller-identity-name {
  color: #FFF;
  font-size: 0.92rem;
  font-weight: 700;
}
.seller-identity-slug {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.seller-bot-link {
  color: #38BDF8;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.seller-bot-link:hover {
  color: #FFF;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}
.seller-key-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.seller-key-code {
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  font-family: var(--mono);
}
.seller-copy-btn {
  padding: 2px 6px;
  font-size: 0.72rem;
  cursor: pointer;
}
.impersonate-action-btn {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.4);
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.impersonate-action-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: #60A5FA;
  color: #FFF;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
.seller-actions-wrap {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.provision-modal {
  max-width: 540px;
  width: 90vw;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(59, 130, 246, 0.15);
  background: #0B101B;
  color: #FFF;
  padding: 0;
  overflow: hidden;
}
.provision-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.provision-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFF;
}
.provision-modal-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.provision-modal-close-btn:hover {
  color: #FFF;
}
.provision-modal-form {
  padding: 1.5rem;
}
.provision-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ================================================================
   SETUP WIZARD — Ultra-Premium Cyber-Glass Design System
   ================================================================ */

.wizard-container {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 3rem;
}

/* ---- Redesigned Interactive Step Progress Track ---- */
.wizard-progress-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-bottom: 2.25rem;
  position: relative;
}

.wizard-progress-line-bg,
.wizard-progress-line-fill {
  display: none; /* Replaced by seamless segmented glass cards */
}

.wizard-step-tab {
  position: relative;
  background: rgba(13, 19, 33, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.85rem 1.15rem;
  color: var(--text-dim);
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wizard-step-tab:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(18, 27, 46, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 240, 255, 0.1);
  color: #FFF;
}

.wizard-step-tab.is-active {
  border-color: #00F0FF !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(13, 19, 33, 0.95) 100%) !important;
  color: #FFF !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

.wizard-step-tab.is-completed {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(13, 19, 33, 0.9) 100%) !important;
  color: #10B981 !important;
}

.wizard-step-tab-badge {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.wizard-step-tab-badge .step-check-icon {
  display: none;
  font-size: 1.05rem;
}

.wizard-step-tab.is-active .wizard-step-tab-badge {
  background: linear-gradient(135deg, #00F0FF, #3B82F6);
  border-color: #00F0FF;
  color: #070A12;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.6);
}

.wizard-step-tab.is-completed .wizard-step-tab-badge {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.5);
}

.wizard-step-tab.is-completed .wizard-step-tab-badge .step-num-text {
  display: none;
}

.wizard-step-tab.is-completed .wizard-step-tab-badge .step-check-icon {
  display: inline;
}

.wizard-step-tab-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wizard-step-tab-title {
  font-size: 0.92rem;
  font-weight: 750;
  color: #F1F5F9;
  line-height: 1.25;
}

.wizard-step-tab-sub {
  font-size: 0.73rem;
  color: #94A3B8;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-step-tab.is-active .wizard-step-tab-sub {
  color: #38BDF8;
}

.wizard-step-tab.is-completed .wizard-step-tab-sub {
  color: #6EE7B7;
}

/* ---- Wizard Main Card Styling ---- */
.wizard-card {
  background: rgba(13, 19, 33, 0.85);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.wizard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.wizard-card-step1 {
  border: 1px solid rgba(0, 240, 255, 0.28);
}
.wizard-card-step1::before {
  background: linear-gradient(90deg, #00F0FF, #3B82F6);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.wizard-card-step2 {
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.wizard-card-step2::before {
  background: linear-gradient(90deg, #F59E0B, #10B981);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.wizard-card-step3 {
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.wizard-card-step3::before {
  background: linear-gradient(90deg, #10B981, #00F0FF);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* ---- Step Header ---- */
.wizard-step-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-step-num-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(59, 130, 246, 0.2));
  border: 1.5px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 850;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
  flex-shrink: 0;
}

.wizard-step-num-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.2));
  border-color: rgba(245, 158, 11, 0.4);
  color: #FCD34D;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.wizard-step-num-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
  border-color: rgba(16, 185, 129, 0.4);
  color: #10B981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.wizard-step-header-text {
  flex: 1;
  min-width: 0;
}

.wizard-step-heading {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.02em;
}

.wizard-step-desc {
  font-size: 0.92rem;
  color: #94A3B8;
  line-height: 1.55;
  margin: 0;
}

/* ---- Quick Start Helper Guide (Step 1) ---- */
.wizard-helper-guide {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
  margin-bottom: 1.85rem;
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.03);
}

.wizard-helper-guide-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 750;
  color: #38BDF8;
  margin-bottom: 0.75rem;
}

.wizard-helper-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.wizard-helper-step-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.83rem;
  color: #CBD5E1;
}

.wizard-helper-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  font-weight: 800;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-guide-link {
  color: #00F0FF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Form Fields & High-Contrast Typography ---- */
.wizard-field-group {
  margin-bottom: 1.75rem;
}

.wizard-field-group:last-child {
  margin-bottom: 0;
}

/* Explicitly override the global all-caps label */
.wizard-container label,
.wizard-field-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  margin: 0 0 0.55rem 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.wizard-field-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.wizard-field-header-row .wizard-field-label {
  margin-bottom: 0 !important;
}

.wizard-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wizard-input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 1rem 0 2.75rem !important;
  border-radius: 12px !important;
  background: rgba(9, 14, 26, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  font-family: var(--font) !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  transition: all 0.22s ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.wizard-input.mono {
  font-family: var(--mono) !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.01em !important;
}

.wizard-input:focus {
  border-color: #00F0FF !important;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(0, 240, 255, 0.08) !important;
  background: rgba(7, 11, 22, 0.98) !important;
}

.wizard-input-prefix-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

.wizard-paste-btn {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #CBD5E1;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}

.wizard-paste-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  transform: translateY(-50%) scale(1.02);
}

.wizard-toggle-pwd-btn {
  position: absolute;
  right: 175px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.35rem;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.wizard-toggle-pwd-btn:hover {
  opacity: 1;
}

.wizard-field-hint {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 0.5rem;
  line-height: 1.45;
}

.wizard-field-hint code {
  background: rgba(0, 240, 255, 0.1);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #38BDF8;
  font-size: 0.82em;
}

/* ---- Badges & Network Tags ---- */
.wizard-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.wizard-badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.wizard-badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.wizard-badge-gold {
  background: rgba(234, 179, 8, 0.15);
  color: #FCD34D;
  border: 1px solid rgba(234, 179, 8, 0.35);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
}

.wizard-badge-cyan {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.wizard-badge-muted {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wizard-label-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}

.wizard-network-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 6px;
}

.wizard-net-tron {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.wizard-net-bnb {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.wizard-net-eth {
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

/* ---- Step 1 Verify Button & Badge ---- */
.wizard-verify-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  position: relative;
}

.wizard-verify-input {
  flex: 1;
  padding-right: 185px !important;
}

.wizard-verify-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  padding: 0 1.15rem;
  font-size: 0.85rem;
  font-weight: 750;
  white-space: nowrap;
  border-radius: 9px;
  z-index: 3;
}

.wizard-token-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(13, 19, 33, 0.9) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(16, 185, 129, 0.15);
  margin-top: 1.5rem;
  animation: wizardFadeSlideUp 0.35s ease;
}

.wizard-token-badge.is-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(13, 19, 33, 0.9) 100%);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(239, 68, 68, 0.15);
}

.wizard-token-info-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wizard-token-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  position: relative;
  flex-shrink: 0;
}

.wizard-token-badge.is-error .wizard-token-avatar {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.wizard-token-pulse-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulse 2s infinite;
}

.wizard-token-status-title {
  font-weight: 800;
  color: #10B981;
  font-size: 1rem;
}

.wizard-token-badge.is-error .wizard-token-status-title {
  color: #EF4444;
}

.wizard-token-bot-info {
  font-size: 0.88rem;
  color: #CBD5E1;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wizard-token-username {
  color: #00F0FF;
  font-weight: 750;
}

.wizard-token-status-tag {
  font-size: 0.72rem;
  color: #10B981;
  font-weight: 700;
}

.wizard-open-bot-btn {
  padding: 0.5rem 1.15rem;
  border-radius: 10px;
  font-weight: 750;
  color: #FFFFFF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.15);
  transition: all 0.2s ease;
}

.wizard-open-bot-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00F0FF;
  color: #FFF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

/* ---- Step 2 Subcards ---- */
.wizard-subcard {
  background: rgba(10, 15, 28, 0.65);
  border-radius: 16px;
  padding: 1.5rem 1.65rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.wizard-wallets-subcard {
  border: 1px solid rgba(0, 240, 255, 0.22);
}

.wizard-binance-subcard {
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, rgba(10, 15, 28, 0.75) 100%);
}

.wizard-subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-subcard-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wizard-subcard-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.wizard-subcard-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 2px 0;
}

.wizard-subcard-desc {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
}

.wizard-field-featured {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 14px;
  padding: 1.15rem;
  margin-bottom: 1.35rem;
}

.wizard-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 680px) {
  .wizard-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ---- Step 3 Branding & Interactive Live Dual-Preview ---- */
.wizard-branding-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 860px) {
  .wizard-branding-layout {
    grid-template-columns: 1fr;
  }
}

.wizard-branding-form-col {
  display: flex;
  flex-direction: column;
}

.wizard-textarea {
  width: 100% !important;
  min-height: 105px !important;
  padding: 0.85rem 1.15rem !important;
  border-radius: 12px !important;
  background: rgba(9, 14, 26, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  font-family: var(--font) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  resize: vertical !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.22s ease !important;
}

.wizard-textarea:focus {
  border-color: #00F0FF !important;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(0, 240, 255, 0.08) !important;
  background: rgba(7, 11, 22, 0.98) !important;
}

.wizard-char-counter {
  font-size: 0.72rem;
  color: #64748B;
  font-family: var(--mono);
}

.wizard-prompt-chips-wrap {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wizard-prompt-chips-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
}

.wizard-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wizard-prompt-chip {
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #38BDF8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-prompt-chip:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00F0FF;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* ---- Dual-Mode Customer Preview Card ---- */
.wizard-preview-wrapper {
  position: sticky;
  top: 1.5rem;
}

.wizard-preview-card {
  background: #0B0F19;
  border: 1.5px solid rgba(0, 240, 255, 0.25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 240, 255, 0.06);
}

.wizard-preview-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  background: rgba(7, 10, 18, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 0.5rem;
}

.wizard-preview-badge-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: #38BDF8;
  text-transform: uppercase;
}

.wizard-preview-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
  animation: pulse 1.8s infinite;
}

.wizard-preview-tabs {
  display: inline-flex;
  gap: 3px;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px;
  border-radius: 10px;
}

.wizard-preview-tab-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-preview-tab-btn:hover:not(.is-active) {
  color: #FFFFFF;
}

.wizard-preview-tab-btn.is-active {
  background: #00F0FF;
  color: #070A12;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* Telegram Chat Mockup */
.tg-mockup-frame {
  background: #17212B;
}

.tg-mockup-header {
  background: #242F3D;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.tg-mockup-bot-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088CC, #00C6FF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.4);
  overflow: hidden;
}

.tg-avatar-img,
.web-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-mockup-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tg-mockup-bot-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tg-mockup-bot-name {
  font-size: 0.92rem;
  font-weight: 750;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.tg-mockup-bot-badge {
  font-size: 0.62rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: lowercase;
}

.tg-mockup-bot-check {
  font-size: 0.75rem;
  color: #38BDF8;
}

.tg-mockup-bot-status {
  font-size: 0.72rem;
  color: #64748B;
}

.tg-mockup-chat-body {
  padding: 1.15rem;
  background: #0E1621;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 18px 18px;
}

.tg-mockup-msg-bubble {
  background: #182533;
  border-radius: 14px 14px 14px 4px;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tg-mockup-msg-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.tg-msg-brand-icon {
  font-size: 0.95rem;
}

.tg-msg-brand-name {
  font-size: 0.92rem;
  font-weight: 750;
  color: #38BDF8;
}

.tg-mockup-msg-text {
  font-size: 0.84rem;
  color: #E2E8F0;
  line-height: 1.5;
  word-break: break-word;
}

.tg-mockup-msg-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.75rem 0;
}

.tg-mockup-msg-support {
  font-size: 0.78rem;
  color: #94A3B8;
}

.tg-mockup-msg-support strong {
  color: #00F0FF;
}

.tg-mockup-msg-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: #64748B;
  margin-top: 0.4rem;
}

.tg-msg-read-check {
  color: #38BDF8;
}

.tg-mockup-keyboard {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tg-mockup-btn {
  background: #2B5278;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  color: #FFFFFF;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tg-mockup-btn:hover {
  background: #366596;
  transform: translateY(-1px);
}

.tg-mockup-btn.tg-btn-featured {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
}

.tg-mockup-btn.tg-btn-featured:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

.tg-mockup-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

/* Web Storefront Mockup */
.web-mockup-frame {
  background: #0B0F19;
}

.web-mockup-browser-bar {
  background: #070A12;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.web-mockup-dots {
  display: flex;
  gap: 5px;
}

.web-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.web-dot-red { background: #EF4444; }
.web-dot-yellow { background: #F59E0B; }
.web-dot-green { background: #10B981; }

.web-mockup-url-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.web-mockup-navbar {
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.8);
}

.web-mockup-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.web-mockup-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #070A12;
  font-size: 0.75rem;
  font-weight: 800;
  overflow: hidden;
}

.web-mockup-brand-name {
  font-size: 0.85rem;
  font-weight: 750;
  color: #FFFFFF;
}

.web-mockup-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.web-nav-link {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 600;
}

.web-nav-link.web-nav-active {
  color: #00F0FF;
  font-weight: 750;
}

.web-mockup-hero {
  padding: 1.75rem 1.25rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 240, 255, 0.12), transparent 70%);
}

.web-mockup-hero-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  font-size: 0.68rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
}

.web-mockup-hero-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.4rem 0;
}

.web-mockup-hero-desc {
  font-size: 0.78rem;
  color: #94A3B8;
  max-width: 280px;
  margin: 0 auto 1rem auto;
  line-height: 1.45;
}

.web-mockup-hero-cta {
  display: inline-block;
  padding: 0.45rem 1.15rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #00F0FF, #3B82F6);
  color: #070A12;
  font-size: 0.78rem;
  font-weight: 800;
}

/* ---- Footer Actions ---- */
.wizard-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-step1-footer {
  justify-content: flex-end;
}

.wizard-back-btn {
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
}

.wizard-continue-btn {
  padding: 0.75rem 1.85rem;
  font-weight: 800;
  font-size: 0.92rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  background: linear-gradient(135deg, #00F0FF, #3B82F6);
  color: #070A12;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
}

.wizard-continue-btn:hover {
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.55);
  transform: translateY(-1.5px);
}

.wizard-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 2.25rem;
  font-size: 1rem;
  font-weight: 850;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-launch-btn:hover {
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.7);
  transform: translateY(-2px) scale(1.02);
}

.wizard-launch-icon {
  font-size: 1.2rem;
  line-height: 1;
}

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

/* ================================================================
   CYBER CUSTOMER DIRECTORY & TOGGLE SWITCH FILTER CONTROLS
   Ultra-Premium Futuristic Dark Design System
   ================================================================ */

.tab-count-badge-bad {
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.55);
}

.status-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulseDot 2s infinite ease-in-out;
}
.pulse-ok {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.pulse-warn {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}
.pulse-bad {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.customers-main-card {
  position: relative;
  overflow: visible;
}

/* Cyber Filter Bar Container */
.cyber-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-bottom: 1.25rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cyber-filters-bar:focus-within {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.55),
    0 0 25px rgba(0, 240, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.field-search-customer {
  flex: 1 1 18rem;
  min-width: 220px;
}

.filter-field-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}

.field-label-icon {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Cyber Switch Toggle Cards */
.field-cyber-toggle-wrapper {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

.cyber-toggle-card {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 8px 14px 8px 10px;
  min-height: 42px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-toggle-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.cyber-toggle-card:active {
  transform: translateY(0);
}

.cyber-toggle-card:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.cyber-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Toggle Switch Visual Track & Thumb */
.cyber-toggle-visual {
  display: flex;
  align-items: center;
}

.cyber-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 2px;
}

.cyber-toggle-thumb {
  width: 14px;
  height: 14px;
  background: #A0AEC0;
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.cyber-toggle-content {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cyber-toggle-icon {
  font-size: 0.92rem;
  line-height: 1;
}

.cyber-toggle-text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.cyber-toggle-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 850;
  font-family: var(--mono);
  line-height: 1.4;
  margin-left: 2px;
}

.badge-bad {
  background: rgba(255, 51, 51, 0.18);
  color: #FFA5A5;
  border: 1px solid rgba(255, 51, 51, 0.35);
}

.badge-warn {
  background: rgba(255, 184, 0, 0.18);
  color: #FFE082;
  border: 1px solid rgba(255, 184, 0, 0.35);
}

/* Active State: Banned Toggle */
.toggle-banned.is-active,
.toggle-banned:has(.cyber-toggle-input:checked) {
  background: rgba(255, 51, 51, 0.12);
  border-color: rgba(255, 51, 51, 0.5);
  box-shadow: 0 0 18px rgba(255, 51, 51, 0.22);
}

.toggle-banned.is-active .cyber-toggle-track,
.toggle-banned:has(.cyber-toggle-input:checked) .cyber-toggle-track {
  background: rgba(255, 51, 51, 0.75);
  border-color: #FF5555;
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.5);
}

.toggle-banned.is-active .cyber-toggle-thumb,
.toggle-banned:has(.cyber-toggle-input:checked) .cyber-toggle-thumb {
  transform: translateX(16px);
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.toggle-banned.is-active .cyber-toggle-text,
.toggle-banned:has(.cyber-toggle-input:checked) .cyber-toggle-text {
  color: #FF8585;
  text-shadow: 0 0 10px rgba(255, 51, 51, 0.4);
}

.toggle-banned.is-active .badge-bad,
.toggle-banned:has(.cyber-toggle-input:checked) .badge-bad {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
}

/* Active State: Pending Toggle */
.toggle-pending.is-active,
.toggle-pending:has(.cyber-toggle-input:checked) {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.22);
}

.toggle-pending.is-active .cyber-toggle-track,
.toggle-pending:has(.cyber-toggle-input:checked) .cyber-toggle-track {
  background: rgba(255, 184, 0, 0.75);
  border-color: #FFB800;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.5);
}

.toggle-pending.is-active .cyber-toggle-thumb,
.toggle-pending:has(.cyber-toggle-input:checked) .cyber-toggle-thumb {
  transform: translateX(16px);
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.toggle-pending.is-active .cyber-toggle-text,
.toggle-pending:has(.cyber-toggle-input:checked) .cyber-toggle-text {
  color: #FFD566;
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.4);
}

.toggle-pending.is-active .badge-warn,
.toggle-pending:has(.cyber-toggle-input:checked) .badge-warn {
  background: var(--amber);
  color: #070A12;
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.6);
}

/* Search Actions */
.field-actions-customer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
  flex: 0 0 auto;
}

.btn-search-cyber {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 100px;
  height: 42px;
}

.cyber-clear-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cyber-clear-link:hover {
  color: var(--red);
  background: rgba(255, 51, 51, 0.08);
}

/* Active Filter Pills Bar */
.active-filters-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: rgba(7, 10, 18, 0.75);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  animation: wizardFadeSlideUp 0.25s ease-out;
}

.active-filters-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.active-pills-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 3px 10px 3px 12px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 600;
}

.active-filter-pill strong {
  font-weight: 800;
}

.active-filter-pill.pill-cyan {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
}

.active-filter-pill.pill-bad {
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.4);
  color: #FFAAAA;
}

.active-filter-pill.pill-warn {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: #FFE082;
}

.active-filter-pill .pill-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 0.65rem;
  line-height: 1;
  text-decoration: none;
  transition: all 0.18s ease;
  margin-left: 2px;
}

.active-filter-pill .pill-remove-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.15);
}

.pill-clear-all {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.4rem;
  transition: color 0.2s ease;
}

.pill-clear-all:hover {
  color: var(--cyan);
}

/* Customer Cyber Filter Selects & Controls */
.field-filter-select {
  flex: 0 1 160px;
  min-width: 140px;
}

.cyber-select {
  width: 100%;
  height: 42px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-main, #F8FAFC);
  padding: 0 2rem 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: all 0.22s ease;
}

.cyber-select:hover {
  background-color: rgba(22, 33, 62, 0.95);
  border-color: rgba(0, 240, 255, 0.4);
}

.cyber-select:focus {
  outline: none;
  border-color: var(--cyan, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  background-color: rgba(15, 23, 42, 1);
}

.cyber-select option {
  background: #0f172a;
  color: #f8fafc;
}

/* Excel Export Button in Customer Directory */
.btn-export-excel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 1.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-export-excel:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34D399;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.btn-export-excel:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .cyber-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .field-cyber-toggle-wrapper {
    width: 100%;
  }
  .cyber-toggle-card {
    width: 100%;
    justify-content: space-between;
  }
  .field-actions-customer {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXECUTIVE CYBER KPI HUD GRID & INTERACTIVE DIRECTORY SUITE
   ═══════════════════════════════════════════════════════════════ */

/* 1. HUD Grid */
.customer-kpi-hud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-hud-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 29, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-main, #f8fafc);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.kpi-hud-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 240, 255, 0.15);
}

.kpi-hud-card.is-active {
  border-color: var(--cyan, #00f0ff);
  background: linear-gradient(145deg, rgba(0, 240, 255, 0.09) 0%, rgba(10, 25, 45, 0.96) 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 0 1px var(--cyan);
}

.kpi-hud-glow {
  position: absolute;
  top: -40%;
  right: -40%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  transition: all 0.3s ease;
}

.kpi-hud-card:hover .kpi-hud-glow {
  transform: scale(1.4);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.22) 0%, transparent 70%);
}

.kpi-hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.kpi-hud-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hud-cyan {
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan, #00f0ff);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.hud-green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.hud-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.hud-rose {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.hud-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.kpi-hud-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pill-purple {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.pill-muted {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.kpi-hud-content {
  display: flex;
  flex-direction: column;
}

.kpi-hud-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim, #94a3b8);
  margin-bottom: 0.35rem;
}

.kpi-hud-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.kpi-hud-val {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font-mono, monospace);
}

.kpi-curr {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim, #94a3b8);
  margin-left: 0.2rem;
}

.text-glow-green {
  color: #10b981;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.text-glow-amber {
  color: #f59e0b;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.text-glow-rose {
  color: #f43f5e;
  text-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
}

.text-glow-purple {
  color: #c084fc;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.kpi-hud-indicator {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.kpi-hud-sub {
  font-size: 0.75rem;
  color: var(--text-dim, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-arrow {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.kpi-hud-card:hover .kpi-arrow {
  transform: translateX(3px);
}

/* 2. Quick Preset Chips Bar */
.cyber-preset-chips-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem;
  background: rgba(12, 19, 36, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 12px;
  margin-bottom: 1.15rem;
  overflow: hidden;
}

.preset-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim, #94a3b8);
  white-space: nowrap;
}

.pulse-cyber-icon {
  animation: cyberPulse 2s infinite ease-in-out;
}

@keyframes cyberPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.5)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.9)); }
}

.preset-chips-scroll {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.2) transparent;
  padding-bottom: 2px;
}

.preset-chips-scroll::-webkit-scrollbar {
  height: 4px;
}
.preset-chips-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.2);
  border-radius: 4px;
}

.btn-preset-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-subtle, #cbd5e1);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-preset-filter:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.btn-preset-filter.is-active {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan, #00f0ff);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.preset-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  border-radius: 100px;
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 3. Directory Live Status Bar */
.customer-directory-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.95rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
}

.status-summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-dim, #94a3b8);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.query-highlight {
  color: var(--cyan, #00f0ff);
  font-weight: 600;
  margin-left: 0.3rem;
}

.keyboard-tip {
  font-size: 0.72rem;
  color: var(--text-dim, #94a3b8);
}

.kbd-key {
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5);
  color: var(--text-main, #f8fafc);
}

/* 4. Customer Avatar with Glowing Status Dot */
.avatar-with-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-mini.avatar-seed-1 { background: linear-gradient(135deg, #0284c7, #0369a1); }
.avatar-mini.avatar-seed-2 { background: linear-gradient(135deg, #059669, #047857); }
.avatar-mini.avatar-seed-3 { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.avatar-mini.avatar-seed-4 { background: linear-gradient(135deg, #d97706, #b45309); }
.avatar-mini.avatar-seed-5 { background: linear-gradient(135deg, #e11d48, #be123c); }
.avatar-mini.avatar-seed-6 { background: linear-gradient(135deg, #0d9488, #0f766e); }

.avatar-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #0b101c;
}

.avatar-status-dot.status-ok {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.avatar-status-dot.status-warn {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.avatar-status-dot.status-bad {
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}

/* 5. Copyable ID Chip */
.customer-name-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.copyable-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--text-dim, #94a3b8);
  cursor: pointer;
  width: fit-content;
  transition: all 0.18s ease;
}

.copyable-id-chip:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--cyan, #00f0ff);
  transform: translateY(-1px);
}

.copyable-id-chip:active {
  transform: scale(0.96);
}

.copyable-id-chip.copied {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.id-hash {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
}

.copy-icon-svg {
  opacity: 0.6;
  transition: opacity 0.18s ease;
}

.copyable-id-chip:hover .copy-icon-svg {
  opacity: 1;
}

/* 6. Channels Stack & Micro Pills */
.customer-channels-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.channel-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-subtle, #cbd5e1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-chip-row a.channel-chip {
  text-decoration: none;
  color: var(--cyan, #00f0ff);
  transition: all 0.18s ease;
}

.channel-chip-row a.channel-chip:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
}

.btn-channel-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--cyan, #00f0ff);
  text-decoration: none;
  transition: all 0.18s ease;
}

.btn-channel-action:hover {
  background: rgba(0, 240, 255, 0.25);
  transform: scale(1.1);
}

.btn-channel-action.btn-wa-action {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
  color: #25d366;
  font-size: 0.75rem;
}

.btn-channel-action.btn-wa-action:hover {
  background: rgba(37, 211, 102, 0.28);
}

/* 7. Crypto Wallet Badge Pill */
.wallet-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, rgba(16, 24, 45, 0.9) 0%, rgba(10, 15, 29, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.crypto-coin-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(38, 161, 123, 0.25);
  color: #26a17b;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(38, 161, 123, 0.5);
}

.crypto-currency-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim, #94a3b8);
  letter-spacing: 0.05em;
}

/* 8. Row-Hover Instant Action Toolbar */
.action-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.row-hover-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.4;
  transform: translateX(4px);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.customer-directory-row:hover .row-hover-actions {
  opacity: 1;
  transform: translateX(0);
}

.btn-row-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-subtle, #cbd5e1);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-row-quick-action:hover {
  transform: translateY(-1px);
  color: #fff;
}

.btn-row-quick-action:active {
  transform: scale(0.95);
}

.btn-row-quick-action.btn-quick-view {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: var(--cyan, #00f0ff);
}
.btn-row-quick-action.btn-quick-view:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.btn-row-quick-action.btn-quick-email {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.btn-row-quick-action.btn-quick-email:hover {
  background: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.btn-row-quick-action.btn-quick-wa {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.3);
  color: #25d366;
}
.btn-row-quick-action.btn-quick-wa:hover {
  background: rgba(37, 211, 102, 0.25);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.3);
}

.btn-row-quick-action.btn-quick-edit {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.btn-row-quick-action.btn-quick-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.pill-standing {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
}

.date-display {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-dim, #94a3b8);
}

/* ═══════════════════════════════════════════════════════════════
   CYBER CUSTOMER PROVISIONING MODAL & CREDENTIAL CARD
   ═══════════════════════════════════════════════════════════════ */

.btn-create-customer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #00f0ff 0%, #0077ff 100%);
  color: #030a16;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-create-customer:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #000;
}

.create-customer-modal-card {
  max-width: 620px;
  width: 95%;
  background: linear-gradient(145deg, rgba(16, 24, 40, 0.98), rgba(9, 14, 24, 0.99));
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(20px);
}

.modal-header-icon-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.modal-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 580px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

.input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-suffix .cyber-input {
  padding-right: 4rem;
}

.input-suffix {
  position: absolute;
  right: 0.85rem;
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--cyan);
  pointer-events: none;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.password-generator-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.password-generator-input-group .cyber-input {
  flex: 1;
  letter-spacing: 0.05em;
}

.btn-generate-pw {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.08);
  color: var(--cyan);
  transition: all 0.2s ease;
}

.btn-generate-pw:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn-toggle-pw {
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  transition: all 0.2s ease;
}

.btn-toggle-pw:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pw-highlight-flash {
  animation: pwFlash 0.4s ease-out;
}

@keyframes pwFlash {
  0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
  50% { box-shadow: 0 0 25px 3px rgba(0, 240, 255, 0.8); background: rgba(0, 240, 255, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

.field-checkboxes-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.cyber-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

/* The old `.checkbox-custom` proxy-span pattern was removed from the templates; the
   checkbox is now styled directly (appearance: none, further up this file). The rules
   that hid the native input lived here and outranked that styling on `opacity`, so
   every checkbox rendered invisible while still being clickable. */

.checkbox-text strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-main);
}

/* Credentials Success Card */
.cred-success-badge {
  text-align: center;
  padding: 1.25rem 1rem 1rem 1rem;
  margin-bottom: 1.25rem;
}

.cred-success-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.6));
}

.cred-success-title {
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 0.25rem;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.cred-success-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.credentials-card {
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.95), rgba(7, 11, 20, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 1.25rem;
}

.credentials-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

.cred-card-tag {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
}

.btn-copy-card {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 750;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-card:hover {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.btn-success-flash {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  color: #10B981 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
}

.credentials-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.cred-row:last-child {
  border-bottom: none;
}

.cred-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 600;
}

.cred-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: right;
  word-break: break-all;
}

.cred-val-highlight {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.cred-val-password {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.credentials-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.85);
}

.credentials-notice .notice-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-PREMIUM CYBER FLOATING TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
.cyber-floating-tooltip {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(4px);
  transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.97), rgba(6, 10, 19, 0.99));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 8px;
  padding: 0.42rem 0.75rem;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  color: #f0f4ff;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 340px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8),
              0 0 16px rgba(0, 240, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  text-align: center;
}

.cyber-floating-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.cyber-floating-tooltip[data-arrow="bottom"]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 240, 255, 0.45) transparent transparent transparent;
}

.cyber-floating-tooltip[data-arrow="top"]::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 240, 255, 0.45) transparent;
}

.cyber-floating-tooltip kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.72rem;
  font-family: var(--mono);
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 4px;
  color: var(--cyan);
  margin-left: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM TABLE ROWS & INTERACTIVE MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */
.customer-list-table tbody tr,
table.data-table tbody tr,
.catalog-table tbody tr {
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.customer-list-table tbody tr:hover,
table.data-table tbody tr:hover,
.catalog-table tbody tr:hover {
  background: rgba(0, 240, 255, 0.04) !important;
  box-shadow: inset 3px 0 0 var(--cyan), 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Ambient Stat Card Glows */
.stat-card-glow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.95), rgba(11, 16, 28, 0.98)) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stat-card-glow:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.25) !important;
}

.stat-card-glow::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Tactile button bounce feedback */
.btn:active,
button.btn:active,
a.btn:active {
  transform: scale(0.97) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Cyber Quick Presets & Warranty Radar Suite
   ═══════════════════════════════════════════════════════════════ */

/* Provisioning Card & Header */
.cyber-provision-card {
  position: relative;
  background: linear-gradient(145deg, rgba(14, 23, 42, 0.8) 0%, rgba(8, 12, 22, 0.92) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  overflow: hidden;
}

.provision-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-left {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.provision-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.25));
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.provision-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff 0%, #00f0ff 60%, #9933ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cyber-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.badge-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
  animation: radarPulse 1.4s infinite ease-in-out;
}

.provision-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 800px;
}

/* Preset Chips Deck */
.preset-chips-container {
  margin-bottom: 1.35rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 240, 255, 0.02);
  border: 1px dashed rgba(0, 240, 255, 0.25);
  border-radius: 12px;
}

.preset-chips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preset-chips-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--cyan);
  text-transform: uppercase;
}

.preset-chips-hint {
  font-size: 0.72rem;
  color: rgba(240, 244, 255, 0.5);
}

.preset-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.btn-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #d1e2f6;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-preset-chip:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.btn-preset-chip.is-selected {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(153, 51, 255, 0.22)) !important;
  border-color: var(--cyan) !important;
  color: #00f0ff !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
}

.btn-preset-chip:active {
  transform: scale(0.96);
}

.preset-chip-icon {
  color: var(--cyan);
  font-size: 0.75rem;
}

.preset-chip-name {
  font-weight: 600;
}

.preset-chip-meta {
  font-size: 0.7rem;
  color: rgba(240, 244, 255, 0.55);
  font-family: var(--mono);
}

.btn-preset-chip.is-selected .preset-chip-meta {
  color: rgba(0, 240, 255, 0.85);
}

.preset-chip-days {
  color: #00ff66;
}

/* Provisioning 2-Column Responsive Layout */
.provision-form-wrapper {
  margin: 0;
}

.provision-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1040px) {
  .provision-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Step Sections */
.provision-step-section {
  background: rgba(12, 18, 33, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.15rem;
  position: relative;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.provision-step-section:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.step-section-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.step-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.72rem;
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 6px;
  padding: 0.12rem 0.45rem;
  line-height: 1.4;
}

.step-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f0f4ff;
  margin: 0;
  flex-grow: 1;
  letter-spacing: -0.01em;
}

.step-tag-required {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.step-tag-optional {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(240, 244, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.field-label-cyber {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.85);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.field-hint-mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(240, 244, 255, 0.45);
}

.input-with-icon,
.select-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-icon .field-icon,
.select-with-icon .field-icon {
  position: absolute;
  left: 0.85rem;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.75;
  z-index: 2;
}

.input-with-icon input,
.select-with-icon select {
  padding-left: 2.5rem !important;
  width: 100%;
}

.cyber-select-styled {
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cyber-select-styled:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  outline: none;
}

.cyber-credential-input-group {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.cyber-credential-input-group .flex-grow {
  flex: 1 1 180px;
}

.btn-action-util {
  background: rgba(14, 22, 38, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #c9d8eb;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-action-util:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}

.btn-action-util:active {
  transform: scale(0.96);
}

.btn-text-shortcut {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color 0.15s ease;
}

.btn-text-shortcut:hover {
  color: #ffffff;
}

.stepper-input-group {
  display: flex;
  align-items: center;
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.stepper-input-group:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.btn-stepper {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-size: 1.1rem;
  font-weight: 700;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.btn-stepper:hover {
  background: rgba(0, 240, 255, 0.15);
}

.btn-stepper:active {
  background: rgba(0, 240, 255, 0.3);
}

.stepper-input-group input {
  border: none !important;
  background: transparent !important;
  text-align: center;
  font-weight: 700;
  width: 100%;
  padding: 0.4rem 0 !important;
  color: #fff;
}

.duration-chips-wrapper {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.duration-chips-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.6);
  text-transform: uppercase;
}

.duration-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.btn-duration-chip {
  background: rgba(14, 22, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(240, 244, 255, 0.75);
  padding: 0.25rem 0.65rem;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-duration-chip:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.btn-duration-chip.is-active {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: var(--cyan) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  font-weight: 700;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
}

/* Telemetry Card Right Panel */
.telemetry-card {
  position: sticky;
  top: 1.5rem;
  background: linear-gradient(165deg, rgba(16, 26, 48, 0.92) 0%, rgba(8, 12, 22, 0.96) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.12);
  padding: 1.25rem;
  overflow: hidden;
}

.telemetry-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

.telemetry-header-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.telemetry-icon {
  font-size: 0.95rem;
}

.telemetry-status-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.35);
  color: #00ff66;
}

.telemetry-identity-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.telemetry-svc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.25));
  border: 1px solid rgba(0, 240, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.telemetry-svc-info {
  min-width: 0;
  flex-grow: 1;
}

.telemetry-svc-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telemetry-svc-email {
  font-size: 0.74rem;
  color: rgba(240, 244, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telemetry-timeline-box {
  background: rgba(10, 15, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.timeline-point {
  display: flex;
  flex-direction: column;
}

.timeline-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(240, 244, 255, 0.45);
  margin-bottom: 0.15rem;
}

.timeline-val {
  font-size: 0.82rem;
  font-weight: 700;
}

/* Term vs cover comparison, on the grant form.
   Modifiers are written compound (.term-compare-box.is-bad) rather than as bare
   .is-bad utilities: this stylesheet is one flat namespace and .is-ok/.is-bad are
   already taken by .wc-settled-badge-pill, so an unscoped rule here would restyle
   that badge as well. */
.term-compare-box {
  background: rgba(10, 15, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.term-compare-text {
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(240, 244, 255, 0.6);
}

.term-compare-box.is-ok {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.07);
}

.term-compare-box.is-ok .term-compare-text {
  color: #34d399;
}

.term-compare-box.is-warn {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}

.term-compare-box.is-warn .term-compare-text {
  color: #fbbf24;
}

.term-compare-box.is-bad {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.term-compare-box.is-bad .term-compare-text {
  color: #f87171;
  font-weight: 600;
}

.timeline-arrow {
  color: var(--cyan);
  font-size: 0.9rem;
  opacity: 0.6;
}

.radar-preview-bar-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.radar-preview-bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00f0ff, #00ff88);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  border-radius: 4px;
  transition: all 0.35s ease;
}

.radar-preview-caption {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: rgba(240, 244, 255, 0.7);
}

.telemetry-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.telemetry-stats-row.telemetry-stats-3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .form-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .form-grid-4 {
    grid-template-columns: 1fr;
  }
  .telemetry-stats-row.telemetry-stats-3col {
    grid-template-columns: 1fr;
  }
}

.text-cost {
  color: #f59e0b;
}

.ent-financial-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.preset-chip-cost {
  font-size: 0.72rem;
  color: rgba(245, 158, 11, 0.85);
  margin-left: 0.25rem;
}

.telemetry-mini-stat {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.stat-lbl {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(240, 244, 255, 0.45);
  margin-bottom: 0.2rem;
}

.stat-amt {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.telemetry-checklist {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.1rem;
}

.checklist-title {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(240, 244, 255, 0.5);
  margin-bottom: 0.45rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: rgba(240, 244, 255, 0.5);
  margin-bottom: 0.3rem;
  transition: color 0.18s ease;
}

.checklist-item.is-valid {
  color: #00ff88;
}

.chk-icon {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.18s ease;
}

.checklist-item.is-valid .chk-icon {
  color: #00ff88;
}

.telemetry-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.btn-grant-cyber {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 12px;
  background: linear-gradient(135deg, #00f0ff 0%, #7928ca 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
  cursor: pointer;
  transition: all 0.22s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-grant-cyber:hover {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.7), 0 4px 15px rgba(121, 40, 202, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-grant-cyber:active {
  transform: scale(0.98) !important;
}

.btn-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: btnShimmer 3.5s infinite;
}

@keyframes btnShimmer {
  0% { left: -100%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

/* Granted Accounts Table & Toolbar */
.cyber-table-card {
  border: 1px solid rgba(0, 240, 255, 0.18) !important;
  background: linear-gradient(145deg, rgba(14, 22, 38, 0.7) 0%, rgba(8, 12, 22, 0.85) 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
  padding: 1.5rem !important;
}

.table-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.table-header-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.table-header-title-group h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.table-count-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  padding: 0.18rem 0.55rem;
  border-radius: 12px;
}

.table-toolbar-cyber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.table-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.table-search-box .search-icon {
  position: absolute;
  left: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.6;
  pointer-events: none;
}

.table-search-input {
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 0.4rem 1.8rem 0.4rem 2.2rem;
  font-size: 0.8rem;
  color: #fff;
  width: 220px;
  transition: all 0.2s ease;
}

.table-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  width: 260px;
  outline: none;
}

.btn-search-clear {
  position: absolute;
  right: 0.65rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px;
}

.table-filter-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.filter-pill {
  background: rgba(14, 22, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(240, 244, 255, 0.65);
  padding: 0.25rem 0.65rem;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.filter-pill:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: #fff;
}

.filter-pill.is-active {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: var(--cyan) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  font-weight: 700;
}

.cyber-data-table {
  width: 100%;
}

.ent-label-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ent-badge-icon {
  font-size: 0.9rem;
  opacity: 0.8;
}

.ent-label-title {
  color: #ffffff;
  font-weight: 700;
}

.copyable-cell,
.password-cell-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-copy-mini {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
  color: rgba(240, 244, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-copy-mini:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyan);
  color: #fff;
  transform: scale(1.08);
}

.btn-copy-mini:active {
  transform: scale(0.95);
}

.edit-actions-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Floating copy toast */
.cyber-toast-pill {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.95), rgba(153, 51, 255, 0.95));
  color: #040812;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: toastFadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@keyframes toastFadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Initial Grant Expandable Panel in Creation Modal */
.initial-grant-toggle-container {
  background: rgba(0, 240, 255, 0.03);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.initial-grant-fields-panel {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  animation: fadeInDown 0.22s ease-out;
}

/* Warranty Radar Box */
.warranty-radar-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}

.warranty-radar-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.warranty-radar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
  /* Width is set inline from the row's remaining cover; the band class below picks
     the colour. Never give this a default width here -- a bar that fills itself
     asserts cover the entitlement may not have. */
}

/* Bucketed widths, set by class because the admin CSP drops inline style
   attributes -- an inlined width silently renders as no width at all. */
.warranty-radar-fill.w-0 { width: 0%; }
.warranty-radar-fill.w-5 { width: 5%; }
.warranty-radar-fill.w-10 { width: 10%; }
.warranty-radar-fill.w-15 { width: 15%; }
.warranty-radar-fill.w-20 { width: 20%; }
.warranty-radar-fill.w-25 { width: 25%; }
.warranty-radar-fill.w-30 { width: 30%; }
.warranty-radar-fill.w-35 { width: 35%; }
.warranty-radar-fill.w-40 { width: 40%; }
.warranty-radar-fill.w-45 { width: 45%; }
.warranty-radar-fill.w-50 { width: 50%; }
.warranty-radar-fill.w-55 { width: 55%; }
.warranty-radar-fill.w-60 { width: 60%; }
.warranty-radar-fill.w-65 { width: 65%; }
.warranty-radar-fill.w-70 { width: 70%; }
.warranty-radar-fill.w-75 { width: 75%; }
.warranty-radar-fill.w-80 { width: 80%; }
.warranty-radar-fill.w-85 { width: 85%; }
.warranty-radar-fill.w-90 { width: 90%; }
.warranty-radar-fill.w-95 { width: 95%; }
.warranty-radar-fill.w-100 { width: 100%; }

/* > 14 days left */
.warranty-radar-fill.fill-ok {
  background: linear-gradient(90deg, #00f0ff, #00ff88);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

/* 3-14 days left */
.warranty-radar-fill.fill-warn {
  background: linear-gradient(90deg, #ffc400, #ff9d00);
  box-shadow: 0 0 8px rgba(255, 196, 0, 0.5);
}

/* Under 48 hours -- pulses, so it is the one thing that moves on the screen. */
.warranty-radar-fill.fill-critical {
  background: linear-gradient(90deg, #ff4d6d, #ff0033);
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.65);
  animation: radarPulse 1.2s infinite ease-in-out;
}

/* Cover ran out; the track stays visible and empty. */
.warranty-radar-fill.fill-spent {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .warranty-radar-fill.fill-critical {
    animation: none;
  }
}

/* Empty state for the customers directory */
.empty-state-cyber {
  text-align: center;
  padding: 2.75rem 1.25rem;
}

.empty-state-cyber .empty-icon {
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.55;
  margin-bottom: 0.65rem;
}

.empty-state-cyber .empty-title {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text, #e6edf3);
}

.empty-state-cyber .empty-desc {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.7;
}

/* Layout that used to ride on style= attributes the admin CSP drops. */
.cred-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-inline-after {
  margin-left: 0.5rem;
  font-size: 0.78rem;
}

/* Grant refusal shown beside the new customer's credentials */
.cred-value-bad {
  color: #ff8fa3;
}

@keyframes radarPulse {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.3); }
}

/* 1-Click Quick Extension Mini Buttons */
.extend-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.4rem;
}

.btn-extend-mini {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--cyan);
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-extend-mini:hover {
  background: var(--cyan);
  color: #0b101b;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.btn-extend-highlight {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.4);
  color: #00ff88;
}

.btn-extend-highlight:hover {
  background: #00ff88;
  color: #0b101b;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.ent-actions-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Interactive Feedback Flashes */
.form-populate-flash {
  animation: cyanPulseBorder 0.6s ease;
}

@keyframes cyanPulseBorder {
  0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.6); }
  50% { box-shadow: 0 0 25px 3px rgba(0, 240, 255, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

.row-success-flash {
  animation: greenRowPulse 1s ease;
}

@keyframes greenRowPulse {
  0% { background-color: rgba(0, 255, 136, 0.2) !important; }
  100% { background-color: transparent !important; }
}

.card-divider-with-label {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.25rem 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.card-divider-with-label::before,
.card-divider-with-label::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.card-divider-with-label span {
  padding: 0 0.75rem;
}

/* ==========================================================================
   WHATSAPP DIRECT INTEGRATION & CONTACT STYLES
   ========================================================================== */

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.45);
  color: #25D366 !important;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.15);
}

.btn-whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: #0b101b !important;
  box-shadow: 0 0 18px rgba(37, 211, 102, 0.5);
  transform: translateY(-1px);
}

.btn-whatsapp:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.32);
  color: #25D366 !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.5rem;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.btn-whatsapp-inline:hover {
  background: #25D366;
  color: #080c14 !important;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.45);
  transform: translateY(-1px);
}

.btn-wa-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-wa-mini:hover {
  background: #25D366;
  color: #090e17;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
}

.list-phone-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3px;
}

.meta-chip-whatsapp {
  border-color: rgba(37, 211, 102, 0.25) !important;
}

.meta-chip-whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.6) !important;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.25);
}

.chip-action-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.chip-action-whatsapp:hover {
  background: #25D366;
  color: #0b101b;
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.5);
}

.badge-whatsapp {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.3);
}

.item-whatsapp:hover .badge-whatsapp {
  background: #25D366;
  color: #090e17;
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.5);
}

.btn-send-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25D366 !important;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.btn-send-wa:hover {
  background: #25D366;
  border-color: #25D366;
  color: #090e17 !important;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.45);
  transform: translateY(-1px);
}

.btn-email-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-email-mini:hover {
  background: #3b82f6;
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.btn-email-compose-prompt {
  width: auto;
  padding: 2px 7px;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.btn-email-compose-prompt:hover {
  background: #3b82f6;
  color: #ffffff;
  transform: translateY(-1px);
}

.list-email-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3px;
}

.meta-chip-email {
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.meta-chip-email:hover {
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.chip-action-email {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.chip-action-email:hover {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.btn-email-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa !important;
  text-decoration: none;
  margin-left: 0.5rem;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.btn-email-inline:hover {
  background: #3b82f6;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
  transform: translateY(-1px);
}

.badge-email {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.item-email:hover .badge-email {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* ==========================================================================
   CUSTOMER IMPERSONATION ("LOG IN AS CUSTOMER") STYLES
   ========================================================================== */

.badge-login-as {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.item-login-as:hover .badge-login-as {
  background: #00f0ff;
  color: #040812;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.65);
  transform: scale(1.1);
}

.btn-login-as {
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-login-as:hover {
  background: #00f0ff !important;
  border-color: #00f0ff !important;
  color: #040812 !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
  transform: translateY(-1px);
}


/* ==========================================================================
   Hiding that survives a component's own display

   Markup cannot use style="display:none" -- the admin CSP drops it -- so panels
   that start hidden carry `.is-hidden`. That single class loses to any component
   rule later in this file which sets its own `display` (`.pill`, `.btn`,
   `.cred-row`, `.alert`, and the panels below all set `flex`), and the element
   renders open. These two-class selectors win on specificity and on order.

   Deliberately NOT `!important`: every show-path in app.js reveals these by
   writing `element.style.display`, and an important rule here would outrank that
   inline value and pin them shut forever.
   ========================================================================== */
/* A form that sits inline beside buttons without adding vertical rhythm. */
.inline-form-flush {
  display: inline-flex;
  margin: 0;
}

.pill.is-hidden,
.btn.is-hidden,
.cred-row.is-hidden,
.alert.is-hidden,
.flash.is-hidden,
.cyber-modal-body.is-hidden,
.initial-grant-fields-panel.is-hidden {
  display: none;
}

/* Last-resort field for a sign-in link the clipboard would not take. */
.login-link-fallback {
  width: 100%;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: #E2E8F0;
  background: rgba(8, 14, 28, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 0.45rem;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER COCKPIT DATE & TIME PICKER — PREMIUM HUD STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Hide native dull browser picker indicator completely */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Datepicker Enhanced Input Wrapper */
.cyber-datepicker-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
}

.cyber-datepicker-enhanced {
  padding-right: 2.85rem !important;
  cursor: pointer;
  letter-spacing: 0.03em;
}

/* Glowing Neon Calendar Icon Trigger */
.cyber-datepicker-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: #00F0FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.cyber-datepicker-btn:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00F0FF;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cyber-datepicker-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.cyber-cal-svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.cyber-datepicker-btn:hover .cyber-cal-svg {
  transform: scale(1.1);
}

/* Floating Cyber Calendar Popover HUD */
.cyber-calendar-popup {
  position: fixed;
  z-index: 100050;
  width: 340px;
  max-width: calc(100vw - 20px);
  background: linear-gradient(150deg, rgba(12, 18, 34, 0.97) 0%, rgba(7, 11, 22, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  box-shadow: 
    0 25px 60px -10px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(0, 240, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 15px rgba(0, 240, 255, 0.04);
  padding: 14px;
  color: #F8FAFC;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  animation: cyberCalendarIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

@keyframes cyberCalendarIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cyber-cal-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quick Presets Bar */
.cyber-cal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-cal-chip {
  padding: 4px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: #00F0FF;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.cyber-cal-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00F0FF;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.cyber-cal-chip:active {
  transform: translateY(0);
}

/* Header & Navigation */
.cyber-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.cyber-cal-title-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cyber-cal-title-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.18s ease;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cyber-cal-title-btn:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

.cyber-cal-arrow {
  font-size: 0.72rem;
  color: #00F0FF;
  transition: transform 0.2s ease;
}

.cyber-cal-title-btn:hover .cyber-cal-arrow {
  transform: translateY(1px);
}

.cyber-cal-title-static {
  font-weight: 700;
  font-size: 0.92rem;
  color: #00F0FF;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.cyber-cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.18s ease;
}

.cyber-cal-nav-btn:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  transform: scale(1.08);
}

.cyber-cal-nav-btn:active {
  transform: scale(0.94);
}

/* Weekday Labels */
.cyber-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-top: 2px;
  margin-bottom: 4px;
}

.cyber-cal-wday {
  font-size: 0.7rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 0;
  font-family: 'JetBrains Mono', monospace;
}

/* Days Matrix */
.cyber-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cyber-cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  font-family: inherit;
}

.cyber-cal-day:hover:not(.is-disabled) {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.6);
  color: #FFFFFF;
  transform: scale(1.12);
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 240, 255, 0.4);
}

.cyber-cal-day:active:not(.is-disabled) {
  transform: scale(0.96);
}

.cyber-cal-day.other-month {
  color: rgba(255, 255, 255, 0.2);
  background: transparent;
  border-color: transparent;
}

.cyber-cal-day.is-today {
  border: 1px solid #00F0FF;
  color: #00F0FF;
  font-weight: 800;
  background: rgba(0, 240, 255, 0.08);
}

.cyber-today-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00F0FF;
  position: absolute;
  bottom: 3px;
  box-shadow: 0 0 6px #00F0FF;
}

.cyber-cal-day.is-selected {
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  border-color: #00F0FF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.65) !important;
  transform: scale(1.05);
  z-index: 2;
}

.cyber-cal-day.is-disabled {
  opacity: 0.22;
  cursor: not-allowed !important;
  pointer-events: none;
  background: transparent !important;
  border-color: transparent !important;
}

/* Month & Year Select View */
.cyber-cal-month-grid,
.cyber-cal-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 0;
}

.cyber-cal-month-btn,
.cyber-cal-year-cell {
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cyber-cal-month-btn:hover,
.cyber-cal-year-cell:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00F0FF;
  color: #00F0FF;
  transform: scale(1.04);
}

.cyber-cal-month-btn.is-selected,
.cyber-cal-year-cell.is-selected {
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%) !important;
  color: #FFF !important;
  font-weight: 800;
  border-color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5) !important;
}

/* Time Selector HUD for datetime-local */
.cyber-cal-time-hud {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
}

.cyber-time-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.cyber-quick-time-chips {
  display: flex;
  gap: 4px;
}

.cyber-time-chip {
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cyber-time-chip:hover {
  background: rgba(0, 240, 255, 0.3);
  color: #FFF;
}

.cyber-time-steppers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cyber-stepper-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px 8px;
  min-width: 52px;
}

.cyber-time-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #00F0FF;
  margin: 1px 0;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.cyber-time-arrow {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 2px 6px;
  transition: all 0.15s ease;
}

.cyber-time-arrow:hover {
  color: #00F0FF;
  transform: scale(1.2);
}

.cyber-time-colon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  font-weight: 800;
  color: #00F0FF;
  animation: cyberBlink 1.5s infinite;
}

@keyframes cyberBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Footer Actions */
.cyber-cal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-cal-btn-clear {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.cyber-cal-btn-clear:hover {
  color: #FF3366;
  border-color: #FF3366;
  background: rgba(255, 51, 102, 0.1);
}

.cyber-cal-btn-apply {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
  font-family: inherit;
}

.cyber-cal-btn-apply:hover {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
  transform: translateY(-1px);
}

.cyber-cal-btn-apply:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER COCKPIT HUD NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

.cockpit-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 15, 25, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.16);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 240, 255, 0.1);
  padding: 0.75rem 1.75rem;
  width: 100%;
}

.cockpit-nav-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Cockpit Brand Emblem */
.cockpit-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cockpit-brand:hover {
  transform: scale(1.02);
}

.cockpit-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00F0FF 0%, #9933FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cockpit-brand:hover .cockpit-brand-mark {
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transform: rotate(4deg);
}

.brand-spark-svg {
  width: 20px;
  height: 20px;
  color: #070A12;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.cockpit-brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cockpit-brand-name {
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.cockpit-brand-deck {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #00F0FF 20%, #B76EFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Floating Segmented Navigation Deck Capsule */
.cockpit-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(7, 10, 18, 0.7);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 20px rgba(0, 240, 255, 0.04);
  position: relative;
  overflow: visible;
  max-width: 100%;
}

/* Navigation Pill Item */
.cockpit-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: none;
  letter-spacing: 0.01em;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.cockpit-link span {
  display: inline-block;
  line-height: 1;
}

.cockpit-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  color: #64748B;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

/* Hover State */
.cockpit-link:hover {
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.cockpit-link:hover .cockpit-icon {
  color: #00F0FF;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
  transform: scale(1.08);
}

/* Active State */
.cockpit-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16) 0%, rgba(153, 51, 255, 0.14) 100%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.cockpit-link.active .cockpit-icon {
  color: #00F0FF;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85));
}

/* Active Pulse Beacon Dot */
.cockpit-link-beacon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 14px rgba(0, 240, 255, 0.9);
  animation: cockpitBeaconPulse 2s infinite ease-in-out;
  margin-left: 2px;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes cockpitBeaconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #00F0FF, 0 0 10px rgba(0, 240, 255, 0.7);
  }
  50% {
    transform: scale(1.35);
    opacity: 0.65;
    box-shadow: 0 0 12px #00F0FF, 0 0 18px rgba(0, 240, 255, 1);
  }
}

/* Storefront Primary Action Launcher Button in Cockpit HUD */
.cockpit-link-storefront {
  position: relative;
  overflow: hidden;
  margin-left: 8px;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.28) 0%, rgba(138, 43, 226, 0.42) 50%, rgba(0, 240, 255, 0.22) 100%);
  background-size: 220% 220%;
  border: 1.5px solid rgba(0, 240, 255, 0.7);
  border-radius: 9999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
  font-weight: 750;
  letter-spacing: 0.02em;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  animation: storefrontAuraGlow 4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
}

@keyframes storefrontAuraGlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 240, 255, 0.3), inset 0 1px 1.5px rgba(255, 255, 255, 0.6);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 26px rgba(153, 51, 255, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.75);
  }
}

/* Moving Light Sweep / Shimmer Effect */
.cockpit-link-storefront::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -130%;
  width: 70%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  transition: none;
  pointer-events: none;
  z-index: 1;
}

/* Subtle Animated Ambient Perimeter Glow */
.cockpit-link-storefront::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 9999px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.8), rgba(153, 51, 255, 0.8), rgba(0, 240, 255, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.cockpit-link-storefront .storefront-glow-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  animation: pulsePulse 1.8s infinite;
}

.cockpit-link-storefront .cockpit-icon,
.cockpit-link-storefront .storefront-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  color: #00F0FF;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, filter 0.25s ease;
  position: relative;
  z-index: 2;
}

.cockpit-link-storefront .storefront-text {
  position: relative;
  z-index: 2;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.025em;
  color: #FFFFFF;
}

.cockpit-link-storefront .storefront-arrow {
  width: 13px;
  height: 13px;
  min-width: 13px;
  color: #00F0FF;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.8));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, color 0.25s ease;
  position: relative;
  z-index: 2;
  margin-left: -1px;
}

/* Hover Interaction & Radiant Aura Elevation */
.cockpit-link-storefront:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.42) 0%, rgba(153, 51, 255, 0.52) 50%, rgba(0, 240, 255, 0.35) 100%);
  border-color: #00F0FF;
  box-shadow: 0 6px 28px rgba(0, 240, 255, 0.65), 0 0 45px rgba(153, 51, 255, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.95);
  transform: translateY(-2px) scale(1.04);
}

.cockpit-link-storefront:hover::before {
  left: 160%;
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cockpit-link-storefront:hover::after {
  opacity: 1;
}

.cockpit-link-storefront:hover .cockpit-icon,
.cockpit-link-storefront:hover .storefront-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 1));
  transform: scale(1.18) rotate(-8deg);
}

.cockpit-link-storefront:hover .storefront-arrow {
  color: #FFFFFF;
  opacity: 1;
  transform: translate(3px, -3px) scale(1.2);
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 1));
}

/* Active / Tap Feedback */
.cockpit-link-storefront:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cockpit-right-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Responsive Navigation Breakpoints */
@media (max-width: 1024px) {
  .cockpit-nav {
    padding: 0.65rem 1rem;
  }
  .cockpit-nav-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .cockpit-nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    justify-content: flex-start;
  }
  .cockpit-nav-links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .cockpit-brand-name {
    font-size: 1.1rem;
  }
  .cockpit-brand-deck {
    font-size: 1.05rem;
  }
  .cockpit-link {
    padding: 6px 11px;
    font-size: 0.8rem;
    gap: 6px;
  }
  .cockpit-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
  }
}

/* Entitlement Detail Telemetry & Timeline */
.ent-timeline-wrapper {
  margin: 0.8rem 0 1rem 0;
}
.ent-timeline-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.ent-timeline-bar-used {
  background: linear-gradient(90deg, #FF3366, #FFAA00);
  transition: width 0.3s ease;
}
.ent-timeline-bar-left {
  background: linear-gradient(90deg, #00F0FF, #00FF66);
  transition: width 0.3s ease;
}
.ent-timeline-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-top: 0.4rem;
  color: rgba(240, 244, 255, 0.6);
}
.ent-formula-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   UNIFIED CLAIMS & WARRANTY RESOLUTION CENTER STYLES
   ========================================================================== */

.wc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.wc-stat-card {
  background: rgba(13, 20, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wc-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.wc-stat-urgent {
  border-color: rgba(255, 170, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.07) 0%, rgba(13, 20, 36, 0.85) 100%);
}

.has-urgent-pulse {
  animation: urgentGlowPulse 2.5s infinite;
}

@keyframes urgentGlowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.15);
    border-color: rgba(255, 170, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 28px rgba(255, 170, 0, 0.4);
    border-color: rgba(255, 170, 0, 0.7);
  }
}

.wc-stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.wc-stat-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.55);
}

.wc-stat-icon-wrap {
  font-size: 1.25rem;
}

.wc-stat-number {
  font-family: 'Space Grotesk', 'JetBrains Mono', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  display: block;
}

.wc-unit {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(240, 244, 255, 0.6);
}

.wc-stat-title {
  font-size: 0.92rem;
  color: rgba(240, 244, 255, 0.85);
  font-weight: 600;
  margin-top: 0.25rem;
  display: block;
}

.wc-stat-footnote {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  color: rgba(240, 244, 255, 0.55);
}

/* Control Deck & Primary Tabs */
.wc-control-deck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  background: rgba(13, 20, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  backdrop-filter: blur(10px);
}

.wc-primary-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wc-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(240, 244, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.2s ease;
}

.wc-tab-pill:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.wc-tab-pill.is-active {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
}

.wc-pill-count {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
}

.wc-pill-count-urgent {
  background: #FF3366;
  color: #FFF;
  animation: urgentCountPulse 2s infinite;
}

@keyframes urgentCountPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.wc-pill-count-warn {
  background: #FFAA00;
  color: #121212;
}

.wc-pill-count-gold {
  background: #00F0FF;
  color: #0B0F19;
}

/* Quick Search */
.wc-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 280px;
  flex: 1;
  max-width: 420px;
}

.wc-search-icon {
  position: absolute;
  left: 0.85rem;
  font-size: 0.9rem;
  color: rgba(240, 244, 255, 0.4);
  pointer-events: none;
}

.wc-search-box input {
  width: 100%;
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0.5rem 2.2rem 0.5rem 2.2rem;
  font-size: 0.84rem;
  color: #FFF;
  transition: all 0.2s ease;
}

.wc-search-box input:focus {
  outline: none;
  border-color: #00F0FF;
  background: rgba(8, 12, 22, 0.95);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.wc-search-clear {
  position: absolute;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: rgba(240, 244, 255, 0.5);
  cursor: pointer;
  font-size: 0.85rem;
}

.wc-search-clear:hover {
  color: #FFF;
}

/* Sub-Filters Row */
.wc-sub-filters {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.wc-sub-label {
  font-size: 0.8rem;
  color: rgba(240, 244, 255, 0.5);
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 0.25rem;
}

.wc-sub-pill {
  font-size: 0.8rem;
  padding: 4px 11px;
  border-radius: 14px;
  color: rgba(240, 244, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.15s ease;
}

.wc-sub-pill:hover {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.15);
}

.wc-sub-pill.is-active {
  color: #FFF;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.5);
  font-weight: 700;
}

/* Unified Stream Cards */
.wc-stream-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wc-unified-card {
  background: linear-gradient(180deg, rgba(14, 21, 38, 0.92) 0%, rgba(8, 13, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wc-unified-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(0, 240, 255, 0.12);
}

.wc-card-order {
  border-left: 5px solid #00F0FF;
}

.wc-card-entitlement {
  border-left: 5px solid #FFAA00;
}

.wc-unified-card.is-expanded {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 240, 255, 0.12);
}

.wc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  cursor: pointer;
  gap: 1.25rem;
  flex-wrap: wrap;
  transition: background 0.18s ease;
  user-select: none;
}

.wc-card-header:hover {
  background: rgba(255, 255, 255, 0.025);
}

.wc-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  min-width: 280px;
}

.wc-type-pill {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wc-type-order {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(0, 150, 255, 0.1) 100%);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.wc-type-entitlement {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.18) 0%, rgba(255, 102, 0, 0.1) 100%);
  color: #FFB800;
  border: 1px solid rgba(255, 170, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.15);
}

.wc-code-link code {
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 8px;
  color: #00F0FF;
  font-size: 0.86rem;
  font-family: var(--mono);
  font-weight: 600;
  border: 1px solid rgba(0, 240, 255, 0.25);
  transition: all 0.2s ease;
}

.wc-code-link:hover code {
  border-color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.wc-service-name {
  color: #FFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.wc-account-title {
  font-size: 1.1rem;
  font-family: var(--font);
  font-weight: 800;
  color: #FFF;
  letter-spacing: -0.01em;
}

.wc-account-email {
  font-size: 0.84rem;
  color: rgba(240, 244, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
}

.btn-mini-copy {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: rgba(240, 244, 255, 0.75);
  transition: all 0.18s ease;
  line-height: 1;
}

.btn-mini-copy:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.wc-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: flex-start;
  min-width: 220px;
}

.wc-refund-glow-tag {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.18) 0%, rgba(255, 102, 0, 0.09) 100%);
  border: 1px solid rgba(255, 170, 0, 0.45);
  border-radius: 10px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 18px rgba(255, 170, 0, 0.15);
}

.wc-refund-tag-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #FFAA00;
}

.wc-refund-tag-val {
  font-size: 0.94rem;
  font-weight: 800;
  color: #FFF;
  font-family: var(--mono);
  text-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

.wc-proof-count-badge {
  background: linear-gradient(135deg, rgba(153, 51, 255, 0.2) 0%, rgba(210, 100, 255, 0.1) 100%);
  border: 1px solid rgba(153, 51, 255, 0.45);
  color: #E9D5FF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 14px rgba(153, 51, 255, 0.18);
}

.wc-reason-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 0.84rem;
  color: rgba(240, 244, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.wc-reason-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
}

.wc-time-meta {
  font-size: 0.82rem;
  color: rgba(240, 244, 255, 0.55);
  white-space: nowrap;
}

.wc-pulse-pill {
  box-shadow: 0 0 15px rgba(255, 170, 0, 0.35);
  animation: urgentGlowPulse 2.5s infinite;
}

.wc-chevron-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(240, 244, 255, 0.8);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
}

.wc-chevron-btn:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.wc-unified-card.is-expanded .wc-chevron-btn {
  transform: rotate(180deg);
  background: rgba(0, 240, 255, 0.2);
  border-color: rgba(0, 240, 255, 0.5);
  color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

/* Card Accordion Drawer */
.wc-card-drawer {
  display: none;
  padding: 1.75rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.95) 0%, rgba(5, 8, 16, 0.98) 100%);
}

.wc-unified-card.is-expanded .wc-card-drawer {
  display: block;
}

.wc-drawer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.25rem;
}

@media (max-width: 1080px) {
  .wc-drawer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.wc-block-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(240, 244, 255, 0.85);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wc-customer-reason-box {
  background: rgba(4, 8, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #00F0FF;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0;
  color: #FFF;
  font-size: 0.94rem;
  line-height: 1.6;
}

.wc-empty-hint-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  color: rgba(240, 244, 255, 0.55);
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
}

.wc-empty-hint {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(240, 244, 255, 0.55);
}

.wc-mini-grid, .wc-order-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  background: rgba(4, 8, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
}

.wc-mini-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wc-mini-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.48);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.wc-mini-val {
  font-size: 0.88rem;
  color: #FFF;
  font-weight: 600;
}

/* Proof Thumbnails Strip & Gallery */
.wc-proof-strip {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.wc-proof-thumbnail-card {
  width: 140px;
  background: rgba(4, 8, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.wc-proof-thumbnail-card:hover {
  transform: translateY(-3px);
  border-color: #00F0FF;
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.25);
}

.wc-proof-img-wrap {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.wc-proof-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.wc-proof-thumbnail-card:hover .wc-proof-img {
  transform: scale(1.06);
}

.wc-proof-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wc-proof-thumbnail-card:hover .wc-proof-overlay {
  opacity: 1;
}

.wc-zoom-badge {
  background: rgba(0, 0, 0, 0.8);
  color: #00F0FF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.4);
}

.wc-proof-pdf-box {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 51, 102, 0.1);
  color: #FF3366;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.82rem;
  transition: background 0.2s ease;
}

.wc-proof-pdf-box:hover {
  background: rgba(255, 51, 102, 0.2);
  color: #FF4D79;
}

.wc-proof-meta {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wc-proof-name-link {
  color: rgba(240, 244, 255, 0.85);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
}

.wc-proof-name-link:hover {
  color: #00F0FF;
}

.wc-proof-size {
  font-size: 0.7rem;
  color: rgba(240, 244, 255, 0.45);
}

/* Pro-Rata Math Breakdown Suite */
.wc-daily-rate-pill {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wc-pro-rata-bar-wrap {
  height: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  margin: 0.65rem 0 0.85rem;
  padding: 2px;
}

.wc-bar-used {
  background: linear-gradient(90deg, #FF3366 0%, #FF9900 100%);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.wc-bar-left {
  background: linear-gradient(90deg, #00F0FF 0%, #00FF88 100%);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.wc-timeline-chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

@media (max-width: 600px) {
  .wc-timeline-chips-grid {
    grid-template-columns: 1fr;
  }
}

.wc-timeline-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-chip-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.5);
  letter-spacing: 0.04em;
}

.wc-chip-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: #FFF;
}

.wc-chip-sub {
  font-size: 0.76rem;
  font-weight: 500;
  opacity: 0.8;
}

.chip-stopped {
  border-color: rgba(255, 170, 0, 0.3);
  background: rgba(255, 170, 0, 0.06);
}

.chip-stopped .wc-chip-label {
  color: #FFAA00;
}

.chip-expiry {
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.06);
}

.chip-expiry .wc-chip-label {
  color: #00FF88;
}

.wc-formula-code-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  font-family: var(--mono);
  color: #F0F4FF;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.wc-formula-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 240, 255, 0.7);
  text-transform: uppercase;
}

.wc-formula-math {
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #FFF;
}

.wc-math-op {
  color: rgba(240, 244, 255, 0.45);
  font-weight: 700;
}

.wc-math-group {
  color: rgba(240, 244, 255, 0.85);
}

.wc-math-result {
  color: #FFB800;
  font-size: 0.98rem;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 184, 0, 0.45);
}

/* Action Form Decks & Right Column */
.wc-action-box, .wc-ent-actions-deck {
  background: rgba(4, 8, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.35rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.wc-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wc-deck-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

.wc-account-summary-pill {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  background: rgba(4, 8, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
}

.wc-profit-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.84rem;
  display: inline-block;
}

.wc-profit-pill.is-positive {
  background: rgba(0, 255, 102, 0.12);
  color: #00FF66;
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.wc-profit-pill.is-negative {
  background: rgba(255, 51, 85, 0.12);
  color: #FF3355;
  border: 1px solid rgba(255, 51, 85, 0.3);
}

.wc-label-small {
  font-size: 0.76rem;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.7);
  font-weight: 800;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.45rem;
}

.wc-label-hint {
  text-transform: none;
  font-weight: 400;
  color: rgba(240, 244, 255, 0.45);
  font-size: 0.74rem;
}

.form-input-cyber, .form-input-sm {
  width: 100%;
  background: rgba(8, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  color: #FFF;
  font-size: 0.88rem;
  font-family: inherit;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-input-cyber:focus, .form-input-sm:focus {
  outline: none;
  border-color: #00F0FF;
  background: rgba(10, 18, 34, 0.95);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.wc-btn-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* High-Impact Tactical Action Buttons */
.btn-approve-refund, .btn-approve-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 1.35rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%);
  color: #050811;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.4);
  white-space: nowrap;
}

.btn-approve-refund:hover, .btn-approve-resolve:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(0, 240, 255, 0.6);
  color: #050811;
}

.btn-approve-refund:active, .btn-approve-resolve:active {
  transform: translateY(0);
}

.btn-reject-claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 1.25rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 51, 85, 0.5);
  background: linear-gradient(135deg, rgba(255, 51, 85, 0.2) 0%, rgba(220, 38, 38, 0.35) 100%);
  color: #FF4D6D;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(255, 51, 85, 0.2);
  white-space: nowrap;
}

.btn-reject-claim:hover {
  background: linear-gradient(135deg, #FF3355 0%, #E11D48 100%);
  color: #FFF;
  border-color: #FF3355;
  box-shadow: 0 6px 24px rgba(255, 51, 85, 0.5);
  transform: translateY(-2px);
}

.btn-reject-claim:active {
  transform: translateY(0);
}

.wc-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.1rem 0;
}

.wc-or-divider::before, .wc-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wc-or-divider span {
  padding: 0 12px;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(240, 244, 255, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wc-replace-sub-form {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.05) 0%, rgba(0, 240, 255, 0.02) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wc-replace-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.wc-replace-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.wc-replace-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFF;
  display: block;
}

.wc-hint-text {
  font-size: 0.78rem;
  color: rgba(240, 244, 255, 0.65);
  line-height: 1.45;
  margin-top: 2px;
  margin-bottom: 0;
}

.wc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

@media (max-width: 600px) {
  .wc-form-row {
    grid-template-columns: 1fr;
  }
}

.btn-issue-replace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 100%;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(0, 240, 255, 0.45);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(153, 51, 255, 0.28) 100%);
  color: #00F0FF;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.2);
}

.btn-issue-replace:hover {
  background: linear-gradient(135deg, #00F0FF 0%, #9933FF 100%);
  color: #060913;
  box-shadow: 0 6px 26px rgba(0, 240, 255, 0.55);
  transform: translateY(-2px);
}

.btn-issue-replace:active {
  transform: translateY(0);
}

.wc-inspector-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(0, 240, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
}

.wc-inspector-link:hover {
  color: #00F0FF;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.wc-link-arrow {
  transition: transform 0.2s ease;
}

.wc-inspector-link:hover .wc-link-arrow {
  transform: translateX(4px);
}

/* Settled Status Pill & Note */
.wc-settled-info-box {
  background: rgba(4, 8, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}

.wc-settled-badge-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.wc-settled-badge-pill.is-ok {
  background: rgba(0, 255, 102, 0.15);
  color: #00FF66;
  border: 1px solid rgba(0, 255, 102, 0.4);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}

.wc-settled-badge-pill.is-bad {
  background: rgba(255, 51, 102, 0.15);
  color: #FF3366;
  border: 1px solid rgba(255, 51, 102, 0.4);
  box-shadow: 0 0 15px rgba(255, 51, 102, 0.15);
}

.wc-settled-badge-pill.is-info {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.wc-settled-time {
  font-size: 0.82rem;
  color: rgba(240, 244, 255, 0.6);
  margin-top: 0.6rem;
}

.wc-settled-note {
  font-size: 0.88rem;
  color: #FFF;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  text-align: left;
}

/* Lightbox Modal */
.wc-lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.wc-lightbox-modal.is-active {
  display: flex;
}

.wc-lightbox-content {
  background: #0D1424;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 16px;
  box-shadow: 0 0 45px rgba(0, 240, 255, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wc-lightbox-title {
  color: #00F0FF;
  font-weight: 800;
  font-size: 0.94rem;
}

.wc-lightbox-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFF;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.wc-lightbox-close:hover {
  background: rgba(255, 51, 85, 0.2);
  border-color: rgba(255, 51, 85, 0.4);
  color: #FF3355;
}

.wc-lightbox-body {
  padding: 1.25rem;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070B14;
}

.wc-lightbox-body img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
}

.wc-lightbox-footer {
  padding: 0.85rem 1.25rem;
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

.wc-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Utility classes (CSP-safe replacements for inline styles) ── */
.d-none        { display: none; }
.text-xs       { font-size: 0.75rem; }
.text-sm       { font-size: 0.8rem; }
.text-078      { font-size: 0.78rem; }
.mt-4px        { margin-top: 4px; }

.ent-nav-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 10px 16px;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.ent-nav-banner-text {
  color: rgba(240, 244, 255, 0.85);
  font-size: 0.9rem;
}

.quiet-link {
  font-size: 0.8rem;
  color: rgba(0, 240, 255, 0.7);
  text-decoration: none;
}
.quiet-link:hover {
  color: #00F0FF;
  text-decoration: underline;
}

/* ================================================================
   ACCOUNT FLEET & CUSTOMER RETENTION HUB — Cyber Telemetry Suite
   ================================================================ */

.fleet-hub-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.fleet-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.fleet-stat-card {
  background: rgba(11, 16, 28, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fleet-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.card-glow-cyan { border-top: 3px solid #00F0FF; }
.card-glow-amber { border-top: 3px solid #FFB800; }
.card-glow-purple { border-top: 3px solid #A855F7; }
.card-glow-red { border-top: 3px solid #EF4444; }
.card-glow-green { border-top: 3px solid #10B981; }

.fleet-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fleet-stat-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.fleet-stat-icon {
  font-size: 1.1rem;
}

.fleet-stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
}

.fleet-stat-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.text-glow-purple {
  color: #C084FC;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

/* Toolbar & Filters (Ultra-Premium Command Deck) */
.fleet-toolbar-card {
  padding: 1.1rem 1.35rem;
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.88) 0%, rgba(8, 14, 28, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.fleet-command-tier-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.85rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.85rem !important;
}

.fleet-command-tier-1-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex: 1 1 auto !important;
  min-width: 300px !important;
}

.fleet-command-tier-1-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.fleet-command-tier-2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.85rem !important;
  flex-wrap: nowrap !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 0.85rem !important;
  overflow-x: auto !important;
}

/* ==========================================================================
   ULTRA-PREMIUM SEGMENTED PILL CONTROLS (LINEAR / RAYCAST TIER)
   ========================================================================== */

.fleet-segmented-box,
.segmented-control {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(8, 14, 28, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  gap: 2px !important;
  height: 38px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
}

button.btn-segment,
.btn-segment {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(203, 213, 225, 0.75) !important;
  border-radius: 9px !important;
  height: 30px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  text-decoration: none !important;
}

button.btn-segment:hover:not(.is-active),
.btn-segment:hover:not(.is-active) {
  color: #F8FAFC !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

button.btn-segment.is-active,
.btn-segment.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: none !important;
  transform: none !important;
}

button.btn-segment:active,
.btn-segment:active {
  transform: scale(0.98) !important;
}

.btn-segment .segment-icon {
  font-size: 0.85rem;
  opacity: 0.95;
}

/* Integrated Search Bar (Standardized Cyber Design) */
.fleet-search-wrapper {
  flex: 2 1 300px;
  max-width: 520px;
  min-width: 240px;
  position: relative;
}

.fleet-search-box {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: rgba(7, 11, 20, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-sm, 10px) !important;
  padding: 0 5px 0 38px !important;
  height: 40px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fleet-search-box:hover {
  border-color: rgba(0, 240, 255, 0.35) !important;
  background: rgba(7, 11, 20, 0.95) !important;
}

.fleet-search-box:focus-within {
  border-color: var(--cyan, #00F0FF) !important;
  background: rgba(11, 16, 28, 1) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.08) !important;
}

.fleet-search-icon {
  position: absolute !important;
  left: 12px !important;
  font-size: 0.9rem !important;
  color: var(--text-dim, #94A3B8) !important;
  pointer-events: none !important;
  transition: color 0.2s ease !important;
  line-height: 1 !important;
}

.fleet-search-box:focus-within .fleet-search-icon {
  color: var(--cyan, #00F0FF) !important;
}

.fleet-search-native {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  height: 100% !important;
  padding: 0 8px 0 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.fleet-search-native::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
  font-weight: 400 !important;
}

.fleet-search-clear-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}

.fleet-search-clear-btn:hover {
  color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.fleet-search-clear-btn.is-hidden,
.fleet-search-clear-btn[hidden] {
  display: none !important;
}

.fleet-search-kbd {
  font-family: var(--mono, monospace) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--cyan, #00F0FF) !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  line-height: 1 !important;
  user-select: none !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

.fleet-search-submit-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(56, 189, 248, 0.12) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.16s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.fleet-search-submit-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(56, 189, 248, 0.22) 100%) !important;
  border-color: rgba(0, 240, 255, 0.55) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Fleet Account Login Email & Customer Email Badges */
.fleet-account-email-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
  padding: 2px 7px !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  border-radius: 6px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.72rem !important;
  color: #38BDF8 !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
  transition: all 0.16s ease !important;
}

.fleet-account-email-chip:hover {
  border-color: rgba(0, 240, 255, 0.5) !important;
  background: rgba(0, 240, 255, 0.15) !important;
}

.fleet-account-email-chip .chip-key-icon {
  font-size: 0.7rem !important;
  flex-shrink: 0 !important;
}

.fleet-account-email-chip .chip-email-val {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 175px !important;
}

.fleet-account-email-chip .btn-copy-mini {
  opacity: 0.65 !important;
  margin-left: 2px !important;
  transition: opacity 0.15s ease !important;
}

.fleet-account-email-chip:hover .btn-copy-mini {
  opacity: 1 !important;
}

.cust-email-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  line-height: 1.2 !important;
}

.master-slot-cust {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.chip-type-mini {
  font-size: 0.65rem !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

.chip-type-mini.chip-order {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.chip-type-mini.chip-seat {
  background: rgba(0, 240, 255, 0.15) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
}

/* Action Dropdown Triggers */
.fleet-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dropdown-trigger-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 38px !important;
  padding: 0 12px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  color: #E2E8F0 !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.dropdown-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 240, 255, 0.15) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

.dropdown-trigger-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.dropdown-trigger-btn.is-active-filter {
  background: rgba(0, 240, 255, 0.09) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.22), inset 0 1px 0 rgba(0, 240, 255, 0.2) !important;
  font-weight: 700 !important;
}

.dropdown-trigger-btn.is-active-filter:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.4) !important;
  color: #FFFFFF !important;
}

.filter-trigger-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.filter-trigger-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-chevron {
  font-size: 0.72rem;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin-left: 1px;
}

.dropdown-trigger-btn:hover .btn-chevron {
  opacity: 1;
  color: #00F0FF;
}

/* Status Filter Tabs Ribbon */
.fleet-status-tabs-ribbon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.fleet-status-tabs-ribbon::-webkit-scrollbar {
  display: none;
}

.fleet-status-tab {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  color: #94A3B8 !important;
  font-family: inherit !important;
  font-size: 0.77rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.fleet-status-tab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #E2E8F0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

.fleet-status-tab.is-active {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Renewing Soon High-Impact Visual State */
.fleet-status-tab.tab-renewing {
  border-color: rgba(245, 158, 11, 0.32) !important;
  background: rgba(245, 158, 11, 0.07) !important;
  color: #FCD34D !important;
}

.fleet-status-tab.tab-renewing:hover:not(.is-active) {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  color: #FDE68A !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25) !important;
}

.fleet-status-tab.tab-renewing.is-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.22) 100%) !important;
  border-color: rgba(245, 158, 11, 0.65) !important;
  color: #FFFBEB !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
}

.status-tab-count {
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.75);
}

.status-count-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-count-warn {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}

.status-count-bad {
  background: rgba(239, 68, 68, 0.18);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-weight: 800;
}

.status-count-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Renewal Horizon Quick Selector */
.renewal-horizon-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  border-radius: 11px !important;
  padding: 3px 8px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.renewal-horizon-bar .horizon-label {
  font-size: 0.71rem !important;
  font-weight: 700 !important;
  color: #F59E0B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  user-select: none !important;
}

.renewal-horizon-bar .horizon-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #F59E0B !important;
  box-shadow: 0 0 8px #F59E0B !important;
}

.horizon-pills {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.btn-horizon-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #CBD5E1 !important;
  border-radius: 7px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  outline: none !important;
  line-height: 1.3 !important;
  transition: all 0.16s ease !important;
}

.btn-horizon-pill:hover:not(.is-active) {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #FDE68A !important;
}

.btn-horizon-pill.is-active {
  background: #F59E0B !important;
  border-color: #F59E0B !important;
  color: #0B101E !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* Custom Cyber Dropdown Menu & Items */
.dropdown-menu.dropdown-menu-cyber {
  min-width: 230px;
  max-width: 320px;
  background: rgba(10, 16, 28, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 25px rgba(0, 240, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 0.75rem !important;
  gap: 0.4rem !important;
}

.cyber-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.cyber-dropdown-list::-webkit-scrollbar {
  width: 4px;
}
.cyber-dropdown-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.cyber-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.25);
  border-radius: 4px;
}

.cyber-dropdown-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
  padding: 0.52rem 0.75rem !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #CBD5E1 !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.16s ease !important;
  text-decoration: none !important;
}

.cyber-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.25) !important;
  color: #00F0FF !important;
  transform: translateX(2px) !important;
}

.cyber-dropdown-item.is-selected {
  background: rgba(0, 240, 255, 0.14) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  font-weight: 750 !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
}

.cyber-dropdown-item .item-icon {
  font-size: 0.92rem;
  flex-shrink: 0;
  line-height: 1;
}

.cyber-dropdown-item .item-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-dropdown-item .item-check {
  margin-left: auto;
  color: #00F0FF;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
}

/* Fallback / legacy select resets to prevent out-of-field display */
.fleet-native-select,
select.fleet-native-select,
.fleet-mini-select-box select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  width: auto !important;
  outline: none !important;
}

/* Active Filter Chips Ribbon */
.active-filter-chips-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.active-filters-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #94A3B8;
  text-transform: uppercase;
  margin-right: 0.25rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  font-size: 0.76rem;
  color: #E0F2FE;
}

.filter-chip strong {
  color: #38BDF8;
  font-weight: 700;
}

.chip-remove-btn {
  background: transparent;
  border: none;
  color: rgba(224, 242, 254, 0.6);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.chip-remove-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.btn-clear-all {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s ease;
}

.btn-clear-all:hover {
  color: #F87171;
}

/* Dropdown Menu Glass Overhaul */
.dropdown-menu {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.dropdown-item-export {
  transition: all 0.18s ease !important;
  border-radius: 10px !important;
  margin: 4px 6px !important;
}

.dropdown-item-export:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateX(2px) !important;
}

/* ==========================================================================
   ACCOUNT FLEET & RETENTION MATRIX: CYBER DASHBOARD UI & ACTION MENU SYSTEM
   ========================================================================== */

/* Enhanced Table Container Card */
.fleet-table-card {
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.88) 0%, rgba(8, 12, 24, 0.94) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
}

.fleet-table-card .card-header-flex {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.fleet-table-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.01em;
}

.fleet-table-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.badge-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
  animation: statusPulseCyan 2s infinite ease-in-out;
}

/* Table Scroll Container */
.table-scroll {
  overflow-x: auto;
  border-radius: 0 0 16px 16px;
}

.table-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.table-scroll::-webkit-scrollbar-track {
  background: rgba(8, 12, 22, 0.6);
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.25);
  border-radius: 3px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

/* Table and Row Architecture */
.fleet-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.fleet-matrix-table thead th {
  background: rgba(7, 11, 20, 0.95) !important;
  color: #00F0FF !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 1.1rem !important;
  border-bottom: 2px solid rgba(0, 240, 255, 0.25) !important;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.fleet-matrix-table tbody td {
  padding: 0.9rem 1.1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  vertical-align: middle !important;
}

.fleet-row {
  background: rgba(11, 16, 28, 0.55);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.fleet-row:hover {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.09) 0%, rgba(15, 23, 42, 0.65) 25%, rgba(11, 16, 28, 0.5) 100%) !important;
  box-shadow: inset 4px 0 0 0 #00F0FF, 0 4px 18px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.fleet-row:active {
  background: rgba(0, 240, 255, 0.12) !important;
}

.fleet-row.menu-active {
  background: rgba(0, 240, 255, 0.08) !important;
  box-shadow: inset 4px 0 0 0 #00F0FF;
}

/* Row Contextual Borders & Highlighting */
.fleet-row.row-needs-attention {
  background: rgba(239, 68, 68, 0.06);
  box-shadow: inset 4px 0 0 0 #EF4444;
}
.fleet-row.row-needs-attention:hover {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(15, 23, 42, 0.7) 25%, rgba(11, 16, 28, 0.5) 100%) !important;
  box-shadow: inset 4px 0 0 0 #EF4444, 0 4px 18px rgba(0, 0, 0, 0.4);
}

.fleet-row.row-expiring-soon {
  background: rgba(255, 184, 0, 0.05);
  box-shadow: inset 4px 0 0 0 #FFB800;
}
.fleet-row.row-expiring-soon:hover {
  background: linear-gradient(90deg, rgba(255, 184, 0, 0.12) 0%, rgba(15, 23, 42, 0.7) 25%, rgba(11, 16, 28, 0.5) 100%) !important;
  box-shadow: inset 4px 0 0 0 #FFB800, 0 4px 18px rgba(0, 0, 0, 0.4);
}

.fleet-row.row-processing {
  background: rgba(0, 240, 255, 0.05);
  box-shadow: inset 4px 0 0 0 #00F0FF;
}

.fleet-row.row-finished {
  opacity: 0.7;
  filter: saturate(0.7);
  background: rgba(0, 0, 0, 0.25);
}

.fleet-row.row-stopped {
  background: rgba(249, 115, 22, 0.06);
  box-shadow: inset 4px 0 0 0 #F97316;
}

.fleet-row.row-refunded {
  background: rgba(168, 85, 247, 0.05);
  box-shadow: inset 4px 0 0 0 #A855F7;
}

/* ==========================================================================
   COLUMN 1: IDENTIFIER & TYPE
   ========================================================================== */
.fleet-id-group-cyber {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.chip-type-cyber {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  line-height: 1.2;
}

.chip-seat {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #D8B4FE;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.chip-order {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7DD3FC;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.order-code-chip-cyber {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(3, 7, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.order-code-chip-cyber:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.order-code-chip-cyber code {
  color: #00F0FF;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--mono, monospace);
}

/* ==========================================================================
   COLUMN 2: CUSTOMER IDENTITY
   ========================================================================== */
.fleet-cust-cell-cyber {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cust-avatar-cyber {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1.5px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fleet-row:hover .cust-avatar-cyber {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  transform: scale(1.05);
}

.cust-info-cyber {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fleet-cust-name {
  color: #FFFFFF;
  font-size: 0.94rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 0.16s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.fleet-cust-name:hover {
  color: #00F0FF;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  text-decoration: none;
}

.fleet-cust-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 1px;
}

.cust-id-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A3B8;
  font-family: var(--mono, monospace);
}

.badge-phone-cyber {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #25D366;
  text-decoration: none;
  font-family: var(--mono, monospace);
  transition: all 0.16s ease;
}

.badge-phone-cyber:hover {
  background: rgba(37, 211, 102, 0.24);
  border-color: #25D366;
  color: #4ADE80;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.35);
}

.wa-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 5px #25D366;
}

/* ==========================================================================
   COLUMN 3: PRODUCT / SERVICE (BRANDED BADGES)
   ========================================================================== */
.fleet-prod-cell-cyber {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prod-badge-cyber {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
  max-width: 240px;
  transition: all 0.18s ease;
}

.brand-netflix {
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.16), rgba(184, 29, 36, 0.08));
  border: 1px solid rgba(229, 9, 20, 0.4);
  color: #FF4D55;
}
.brand-netflix:hover {
  border-color: #E50914;
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.35);
}

.brand-chatgpt {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.18), rgba(6, 122, 94, 0.08));
  border: 1px solid rgba(16, 163, 127, 0.45);
  color: #34D399;
}
.brand-chatgpt:hover {
  border-color: #10A37F;
  box-shadow: 0 0 14px rgba(16, 163, 127, 0.35);
}

.brand-canva {
  background: linear-gradient(135deg, rgba(0, 196, 204, 0.16), rgba(0, 114, 206, 0.08));
  border: 1px solid rgba(0, 196, 204, 0.4);
  color: #38BDF8;
}

.brand-capcut {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(225, 29, 72, 0.08));
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #FB7185;
}

.brand-claude {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), rgba(180, 83, 9, 0.08));
  border: 1px solid rgba(217, 119, 6, 0.45);
  color: #FBBF24;
}

.brand-generic {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
}

.prod-cyber-icon {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.prod-cyber-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.quantity-badge-cyber {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFFFFF;
}

.prod-sub-cyber {
  font-size: 0.7rem;
  color: #94A3B8;
  margin-left: 2px;
}

/* ==========================================================================
   COLUMN 4: STATUS CAPSULES (GLOW & ANIMATED PULSES)
   ========================================================================== */
.pill-cyber {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.pill-cyber-ok {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34D399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

.pill-cyber-warn {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #FBBF24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.pill-cyber-amber {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FBBF24;
}

.pill-cyber-cyan {
  background: rgba(0, 240, 255, 0.14);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.pill-cyber-bad {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.pill-cyber-purple {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #C084FC;
}

.pill-cyber-muted {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
}

.status-pulse-cyber {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pulse-ok {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: statusPulseOk 2s infinite ease-in-out;
}

.pulse-warn {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: statusPulseWarn 1.6s infinite ease-in-out;
}

.pulse-amber {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: statusPulseAmber 1.8s infinite ease-in-out;
}

.pulse-cyan {
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
  animation: statusPulseCyan 2s infinite ease-in-out;
}

.pulse-bad {
  background: #EF4444;
  box-shadow: 0 0 8px #EF4444;
  animation: statusPulseBad 1.4s infinite ease-in-out;
}

@keyframes statusPulseOk {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #10B981; }
  50% { transform: scale(1.35); opacity: 0.75; box-shadow: 0 0 14px #10B981; }
}

@keyframes statusPulseWarn {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #F59E0B; }
  50% { transform: scale(1.35); opacity: 0.75; box-shadow: 0 0 14px #F59E0B; }
}

@keyframes statusPulseAmber {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #F59E0B; }
  50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 12px #F59E0B; }
}

@keyframes statusPulseCyan {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #00F0FF; }
  50% { transform: scale(1.35); opacity: 0.75; box-shadow: 0 0 14px #00F0FF; }
}

@keyframes statusPulseBad {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #EF4444; }
  50% { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 16px #EF4444; }
}

/* ==========================================================================
   COLUMN 5: TIMELINE & EXPIRY
   ========================================================================== */
.timeline-compact-cyber {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-dates {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.timeline-sub-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
}

.timeline-dot-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-healthy {
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
}

.dot-warning {
  background: #F59E0B;
  box-shadow: 0 0 6px #F59E0B;
}

.dot-urgent {
  background: #EF4444;
  box-shadow: 0 0 6px #EF4444;
  animation: blinkUrgent 1s infinite alternate;
}

@keyframes blinkUrgent {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(1.2); }
}

/* Glow utility helpers */
.text-glow-cyan {
  color: #00F0FF !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.text-glow-green {
  color: #10B981 !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.text-glow-amber {
  color: #FBBF24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* ==========================================================================
   COLUMN 6: PRICE & MARGIN (DUAL-PRICE TAGS)
   ========================================================================== */
.fleet-financials-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fleet-sell-row strong {
  font-size: 0.94rem;
  font-weight: 800;
  color: #10B981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.fleet-cost-row small {
  font-size: 0.72rem;
  color: #94A3B8;
}

.dual-price-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: #38BDF8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 5px;
  font-family: var(--mono, monospace);
}

.dual-price-tag-cost {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #F87171;
}

.dual-price-tag-profit {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
  color: #34D399;
}

/* Radar & Legacy helpers */
.timeline-compact {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.radar-mini-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.radar-mini-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.radar-mini-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.radar-mini-caption {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

.radar-band-ok { background: #10B981; }
.radar-band-warn { background: #FFB800; }
.radar-band-critical { background: #EF4444; }
.radar-band-spent { background: rgba(255, 255, 255, 0.2); }

/* ==========================================================================
   COLUMN 7: DUAL-ACTION OPERATIONS & ACTION MENU DROPDOWN
   ========================================================================== */
td.col-actions {
  text-align: right !important;
  vertical-align: middle !important;
  padding-right: 1rem !important;
  white-space: nowrap !important;
}

.fleet-actions-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* ••• Secondary Action: 3-Dot Action Menu Toggle Button */
.btn-fleet-actions-toggle {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #E2E8F0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

.btn-fleet-actions-toggle:hover,
.btn-fleet-actions-toggle:focus-visible,
.btn-fleet-actions-toggle.is-active,
.action-dropdown-wrapper.active .btn-fleet-actions-toggle,
.action-dropdown-wrapper.is-open .btn-fleet-actions-toggle {
  background: rgba(0, 240, 255, 0.18) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45) !important;
  transform: scale(1.05) !important;
}

.fleet-actions-dots {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  display: inline-block;
  user-select: none;
}

/* Floating Action Dropdown Menu */
.fleet-action-menu {
  min-width: 200px !important;
  background: linear-gradient(165deg, rgba(12, 19, 35, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 0.45rem !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 999999 !important;
  text-align: left !important;
}

.action-menu-section-title {
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: rgba(0, 240, 255, 0.7) !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.75rem 0.2rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 0.3rem;
}

.fleet-action-menu .action-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #E2E8F0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: left !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.fleet-action-menu .action-dropdown-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}

/* 🔄 Issue Replacement Studio Item (Highlighted VIP Entry) */
.fleet-action-menu .item-replacement {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  margin-bottom: 3px !important;
}

.fleet-action-menu .item-replacement:hover {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.28) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  border-color: #10B981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
  transform: translateX(3px) !important;
}

.item-highlight-emerald {
  color: #34D399 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.action-item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.action-item-content strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.action-item-hint {
  font-size: 0.7rem !important;
  color: #94A3B8 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 175px !important;
}

/* Badges for Action Dropdown Icons */
.badge-replacement {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34D399 !important;
}

.badge-whatsapp {
  background: rgba(37, 211, 102, 0.2) !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  color: #25D366 !important;
}

.badge-email {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
}


.badge-telegram {
  background: rgba(14, 165, 233, 0.2) !important;
  border: 1px solid rgba(14, 165, 233, 0.4) !important;
  color: #38BDF8 !important;
}

.badge-deliver {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #10B981 !important;
}

.badge-refund {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #EF4444 !important;
}

.badge-profile {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   ULTRA-PREMIUM TABLE ROW ACTION BUTTONS — VIBRANT FILLED CHIPS
   Inspired by Linear, Raycast, and Vercel's action systems.
   Each button is a saturated, filled, micro-chip with depth and glow.
   ========================================================================== */

td.col-actions {
  text-align: right !important;
  vertical-align: middle !important;
  padding-right: 0.75rem !important;
  white-space: nowrap !important;
}

.fleet-actions-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.fleet-actions-group .inline-form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Base micro-chip reset ── */
.fleet-actions-group .btn,
.fleet-actions-group .btn-sm,
.fleet-actions-group a,
.fleet-actions-group button,
.btn-micro {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 26px !important;
  max-height: 26px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-family: var(--font, inherit) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  user-select: none !important;
  text-transform: uppercase !important;
  position: relative !important;
}

.btn-op-icon {
  font-size: 0.78rem;
  line-height: 1;
  filter: brightness(1.1);
}

/* ── 🔍 View / Inspect — Vibrant Cyan ── */
.btn-op-inspect,
.btn-inspect {
  background: linear-gradient(135deg, #0891B2, #06B6D4) !important;
  color: #FFFFFF !important;
}

.btn-op-inspect:hover,
.btn-inspect:hover {
  background: linear-gradient(135deg, #06B6D4, #22D3EE) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.btn-op-inspect:active,
.btn-inspect:active {
  transform: scale(0.96) !important;
}

/* ── 💬 WhatsApp — WhatsApp Green ── */
.btn-op-wa,
.btn-whatsapp-direct,
.btn-whatsapp-inline {
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  color: #FFFFFF !important;
}

.btn-op-wa:hover,
.btn-whatsapp-direct:hover,
.btn-whatsapp-inline:hover {
  background: linear-gradient(135deg, #25D366, #34EB7A) !important;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ── ✈️ Telegram Bot — Sky Blue ── */
.btn-op-bot,
.btn-action-bot,
.fleet-actions-group .btn-ghost {
  background: linear-gradient(135deg, #0284C7, #38BDF8) !important;
  color: #FFFFFF !important;
}

.btn-op-bot:hover,
.btn-action-bot:hover,
.fleet-actions-group .btn-ghost:hover {
  background: linear-gradient(135deg, #38BDF8, #7DD3FC) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ── ⏱️ +30d Extend — Vivid Purple/Magenta ── */
.btn-op-extend {
  background: linear-gradient(135deg, #7C3AED, #A855F7) !important;
  color: #FFFFFF !important;
}

.btn-op-extend:hover {
  background: linear-gradient(135deg, #A855F7, #C084FC) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ── 📦 Deliver — Emerald Green ── */
.btn-op-deliver,
.btn-action-deliver {
  background: linear-gradient(135deg, #059669, #10B981) !important;
  color: #FFFFFF !important;
}

.btn-op-deliver:hover,
.btn-action-deliver:hover {
  background: linear-gradient(135deg, #10B981, #34D399) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ── ↩️ Refund — Hot Coral Red ── */
.btn-op-refund,
.btn-action-refund {
  background: linear-gradient(135deg, #DC2626, #EF4444) !important;
  color: #FFFFFF !important;
}

.btn-op-refund:hover,
.btn-action-refund:hover {
  background: linear-gradient(135deg, #EF4444, #F87171) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6), 0 2px 8px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ── Utility button variants ── */
.btn-micro-quiet {
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  color: rgba(255,255,255,0.7) !important;
}

.btn-micro-quiet:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.1) !important;
}

.btn-micro-primary {
  background: linear-gradient(135deg, #0891B2, #7C3AED) !important;
  color: #FFFFFF !important;
}

.btn-micro-primary:hover {
  background: linear-gradient(135deg, #06B6D4, #A855F7) !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5) !important;
}

.btn-micro-secondary {
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
  color: rgba(255,255,255,0.85) !important;
}

.btn-micro-secondary:hover {
  background: rgba(0, 240, 255, 0.18) !important;
  color: #00F0FF !important;
}

/* Identifier row group */
.identifier-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.order-type-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.order-type-sub {
  background: rgba(168, 85, 247, 0.18);
  color: #E9D5FF;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.order-type-order {
  background: rgba(0, 240, 255, 0.18);
  color: #A5F3FC;
  border: 1px solid rgba(0, 240, 255, 0.4);
}

.order-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.order-code-chip:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
}

.chip-copy-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.order-code-chip:hover .chip-copy-btn {
  color: #00F0FF;
}

.btn-inspect-mini {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(135deg, #0891B2, #06B6D4) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.btn-inspect-mini:hover {
  background: linear-gradient(135deg, #06B6D4, #22D3EE) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

.copied-glow {
  color: #00F0FF !important;
  text-shadow: 0 0 8px #00F0FF;
  transform: scale(1.15);
  transition: transform 0.15s ease;
}

/* Master Account Grouping View */
.master-accounts-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.master-pool-card {
  background: rgba(11, 16, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.master-pool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
}

.master-pool-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.master-pool-icon {
  font-size: 1.5rem;
  padding: 0.4rem;
  background: rgba(0, 240, 255, 0.1);
  border-radius: 8px;
}

.master-pool-email {
  font-size: 1.05rem;
  color: #00F0FF;
}

.master-pool-slots-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.slots-list-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.master-slots-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.master-slots-table th, .master-slots-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.master-slots-table th {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.master-pool-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   FLEET & ORDERS MATRIX: COLUMN CUSTOMIZER, SLIDE-OVER DRAWER, DROPDOWNS
   ========================================================================== */

/* Column visibility */
.col-hidden {
  display: none !important;
}

/* Dropdowns */
.dropdown-wrapper {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 290px;
  background: rgba(9, 14, 26, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 240, 255, 0.12);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  backdrop-filter: blur(24px);
  animation: dropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown-menu.is-hidden {
  display: none !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-header-title {
  font-size: 0.85rem;
  color: #FFFFFF;
  font-weight: 700;
}

.dropdown-header-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.4rem 0;
}

.dropdown-subheader {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(0, 240, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

.col-checkboxes-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.col-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: rgba(240, 244, 255, 0.85);
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.col-checkbox-label:hover {
  background: rgba(0, 240, 255, 0.08);
  color: #00F0FF;
}

.col-checkbox-label.is-fixed {
  opacity: 0.6;
  cursor: default;
}

.col-checkbox-label input[type="checkbox"] {
  accent-color: #00F0FF;
  cursor: pointer;
}

.dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.6rem;
  margin-top: 0.3rem;
}

/* Export Dropdown Items */
.dropdown-item-export {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.18s ease;
}

.dropdown-item-export:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  transform: translateX(2px);
}

.export-icon-excel, .export-icon-csv {
  font-size: 1.3rem;
}

.export-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-title {
  font-size: 0.82rem;
  color: #FFFFFF;
  font-weight: 700;
}

.export-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Active filter chips */
.active-filter-chips-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.active-filters-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  color: #00F0FF;
}

.chip-remove-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.chip-remove-btn:hover {
  color: #EF4444;
}

.btn-clear-all {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
  margin-left: auto;
  cursor: pointer;
}

.btn-clear-all:hover {
  color: #EF4444;
}

/* Slide-over Detail Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  z-index: 9990;
  display: flex;
  justify-content: flex-end;
  transition: opacity 0.25s ease;
}

.drawer-backdrop.is-hidden {
  display: none !important;
}

.slide-over-drawer {
  width: 100%;
  max-width: 540px;
  height: 100%;
  background: #070B14;
  border-left: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.08);
  display: flex;
  flex-direction: column;
  animation: slideDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes slideDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 1.15rem 1.5rem;
  background: #0B101E;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer-badge-chip {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.drawer-badge-chip.chip-sub {
  background: rgba(168, 85, 247, 0.2);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.drawer-badge-chip.chip-order {
  background: rgba(0, 240, 255, 0.2);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
}

.drawer-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.drawer-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #EF4444;
  color: #FFFFFF;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.drawer-status-banner {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.drawer-status-headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-card-box {
  background: rgba(11, 16, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drawer-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0, 240, 255, 0.8);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.4rem;
}

.drawer-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1rem;
}

.drawer-kv {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.drawer-kv.full-width {
  grid-column: span 2;
}

.drawer-k {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.drawer-v {
  font-size: 0.88rem;
  color: #FFFFFF;
}

.drawer-phone-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer-credential-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawer-copy-input-group {
  display: flex;
  gap: 0.4rem;
}

.drawer-answers-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.drawer-answer-row {
  display: flex;
  gap: 0.5rem;
}

.drawer-answer-row strong {
  color: #00F0FF;
}

.drawer-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.drawer-footer {
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  background: #0B101E;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
}

.btn-drawer-action {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-drawer-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.btn-drawer-secondary:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
}

.btn-drawer-primary {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(153, 51, 255, 0.45));
  border: 1px solid rgba(0, 240, 255, 0.6);
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.btn-drawer-primary:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.55), rgba(153, 51, 255, 0.65));
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   UNIFIED INBOX & MESSAGING SYSTEM (CUSTOMERS & SELLERS)
   ========================================================================== */

/* Top Nav Header Trigger */
/* Top Nav Header Trigger */
.header-inbox-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 9999px;
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.header-inbox-trigger:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.5);
  color: #00f0ff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}

/* Alert State: When messages are pending / unreplied */
.header-inbox-trigger.has-pending,
.header-inbox-trigger.has-unread {
  background: linear-gradient(135deg, rgba(255, 42, 109, 0.22), rgba(255, 140, 0, 0.16));
  border-color: #ff2a6d;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 42, 109, 0.5), 0 0 30px rgba(255, 140, 0, 0.25), inset 0 0 10px rgba(255, 42, 109, 0.2);
  animation: inboxAlertGlow 3s ease-in-out infinite alternate;
}

.header-inbox-trigger.has-pending:hover,
.header-inbox-trigger.has-unread:hover {
  background: linear-gradient(135deg, rgba(255, 42, 109, 0.32), rgba(255, 140, 0, 0.24));
  border-color: #ff5e8a;
  box-shadow: 0 0 24px rgba(255, 42, 109, 0.7), 0 0 40px rgba(255, 140, 0, 0.4);
  color: #ffffff;
}

/* Radar Ping Wave Ring expanding continuously from the button */
.header-inbox-trigger.has-pending::before,
.header-inbox-trigger.has-unread::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  border: 2px solid #ff2a6d;
  animation: headerInboxPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Visual Ping Bounce Animation when new message arrives */
.header-inbox-trigger.is-pinging {
  animation: headerInboxBounce 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.header-inbox-trigger.has-pending .inbox-trig-icon,
.header-inbox-trigger.has-unread .inbox-trig-icon {
  animation: inboxIconWobble 3.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes headerInboxPing {
  0% {
    transform: scale(0.96);
    opacity: 0.95;
    border-color: #ff2a6d;
  }
  50% {
    opacity: 0.45;
    border-color: #ff7700;
  }
  80%, 100% {
    transform: scale(1.18);
    opacity: 0;
    border-color: #ffaa00;
  }
}

@keyframes inboxAlertGlow {
  0% {
    box-shadow: 0 0 14px rgba(255, 42, 109, 0.4), 0 0 24px rgba(255, 140, 0, 0.18), inset 0 0 8px rgba(255, 42, 109, 0.15);
  }
  100% {
    box-shadow: 0 0 24px rgba(255, 42, 109, 0.65), 0 0 40px rgba(255, 140, 0, 0.35), inset 0 0 14px rgba(255, 42, 109, 0.3);
  }
}

@keyframes headerInboxBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.18) translateY(-2px); box-shadow: 0 0 35px #ff2a6d; }
  50% { transform: scale(0.94); }
  75% { transform: scale(1.08); }
}

@keyframes inboxIconWobble {
  0%, 85%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-12deg) scale(1.1); }
  92% { transform: rotate(12deg) scale(1.1); }
  96% { transform: rotate(-8deg); }
}

.inbox-trig-icon {
  font-size: 1rem;
  line-height: 1;
}

.inbox-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  background: linear-gradient(135deg, #ff0055, #ff5500);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.75);
  animation: inboxPulse 2.2s infinite;
  letter-spacing: -0.02em;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.inbox-unread-pill.is-hidden {
  display: none !important;
}

/* Sidebar Nav Inbox link styling */
.sidebar-inbox-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: .85rem;
}

.sidebar-inbox-link .nav-label {
  display: inline-block;
  flex: 0 0 auto;
}

.sidebar-inbox-link.has-pending,
.sidebar-inbox-link.has-unread {
  color: #ff5e8a !important;
  font-weight: 700;
}

.sidebar-inbox-link .inbox-unread-pill {
  margin-left: auto;
}

/* Notification Red Dot placed directly on top of the icon (top-right corner) */
.inbox-icon-badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  background: #ff0055;
  border-radius: 50%;
  border: 2px solid #0f172a;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.95), 0 0 14px rgba(255, 0, 85, 0.6);
  animation: inboxDotPulse 1.8s infinite ease-in-out;
  pointer-events: none;
  z-index: 10;
}

.inbox-icon-badge-dot.is-hidden {
  display: none !important;
}

/* Fallback CSS guarantee: if link has has-pending/has-unread, icon has red dot */
.sidebar-inbox-link.has-pending .nav-icon::after,
.sidebar-inbox-link.has-unread .nav-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  background: #ff0055;
  border-radius: 50%;
  border: 2px solid #0f172a;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.95), 0 0 14px rgba(255, 0, 85, 0.6);
  animation: inboxDotPulse 1.8s infinite ease-in-out;
  pointer-events: none;
  z-index: 10;
}

.sidebar-inbox-link .nav-icon:has(.inbox-icon-badge-dot:not(.is-hidden))::after {
  display: none;
}

@keyframes inboxDotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 0, 85, 0.9);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 12px rgba(255, 0, 85, 1), 0 0 18px rgba(255, 0, 85, 0.6);
  }
}

/* Header trigger icon wrap */
.inbox-trig-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Voice Alert Test button styling */
.inbox-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.inbox-voice-btn:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  color: #ffffff;
}
.inbox-voice-btn.is-active {
  background: rgba(0, 255, 102, 0.15);
  border-color: #00ff66;
  color: #00ff66;
}

@keyframes inboxPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 0, 85, 0.6); }
  50% { transform: scale(1.12); box-shadow: 0 0 16px rgba(255, 0, 85, 0.95); }
}

/* Slide-out Drawer & Backdrop */
.inbox-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.inbox-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.inbox-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(860px, 94vw);
  background: rgba(11, 15, 25, 0.96);
  border-left: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.8), inset 1px 0 20px rgba(0, 240, 255, 0.05);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.inbox-drawer.is-open {
  transform: translateX(0);
}

/* Drawer Header */
.inbox-drawer-head {
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(11, 15, 25, 0.9));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.inbox-head-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbox-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.inbox-title-group h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.01em;
}

.inbox-icon-glow {
  font-size: 1.35rem;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}

.inbox-global-badge {
  padding: 0.15rem 0.55rem;
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.inbox-head-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.inbox-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.inbox-expand-btn:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: #00f0ff;
}

.inbox-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.15s ease;
}

.inbox-close-btn:hover {
  color: #ffffff;
}

/* Audience Segment Switcher (Customers vs Sellers) */
.inbox-audience-nav {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.25rem;
  gap: 0.25rem;
}

.audience-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.audience-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.04);
}

.audience-tab.is-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(153, 51, 255, 0.15));
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.aud-count {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
  color: #cbd5e1;
}

.audience-tab.is-active .aud-count {
  background: rgba(0, 240, 255, 0.2);
  color: #00f0ff;
}

/* Search & Status Filters */
.inbox-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.inbox-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
}

.inbox-search-wrap .search-ico {
  position: absolute;
  left: 0.75rem;
  font-size: 0.85rem;
  color: #64748b;
  pointer-events: none;
}

.inbox-search-input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2.1rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 0.84rem;
  outline: none;
  transition: all 0.2s ease;
}

.inbox-search-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.inbox-status-pills {
  display: flex;
  gap: 0.35rem;
}

.inbox-pill {
  padding: 0.3rem 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.inbox-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.inbox-pill.is-active {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

/* Drawer Body Grid Layout */
.inbox-drawer-body {
  flex: 1;
  display: grid;
  grid-template-columns: 310px 1fr;
  overflow: hidden;
}

@media (max-width: 720px) {
  .inbox-drawer-body { grid-template-columns: 1fr; }
}

.inbox-threads-pane {
  background: rgba(11, 15, 25, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Thread Item Cards */
.inbox-thread-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.inbox-thread-item:hover {
  background: rgba(0, 240, 255, 0.05);
  border-color: rgba(0, 240, 255, 0.2);
}

.inbox-thread-item.is-active {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
}

.inbox-thread-item.is-unread {
  border-left: 3px solid #00f0ff;
}

.thread-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.3));
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #00f0ff;
  flex-shrink: 0;
}

.thread-item-content {
  flex: 1;
  min-width: 0;
}

.thread-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}

.thread-item-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-item-time {
  font-size: 0.72rem;
  color: #64748b;
  flex-shrink: 0;
}

.thread-item-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #94a3b8;
  gap: 0.4rem;
}

.thread-item-subject {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-item-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: #00f0ff;
  color: #000;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.thread-item-order-tag {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  background: rgba(153, 51, 255, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(153, 51, 255, 0.3);
  border-radius: 5px;
}

/* Chat Pane & Active Thread */
.inbox-chat-pane {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.5);
  overflow: hidden;
  position: relative;
}

.inbox-thread-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.inbox-thread-active.is-hidden {
  display: none !important;
}

/* Empty Placeholder */
.inbox-placeholder-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  color: #94a3b8;
}

.inbox-placeholder-state .placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.inbox-placeholder-state h3 {
  color: #f1f5f9;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.inbox-placeholder-state p {
  font-size: 0.85rem;
  max-width: 320px;
  line-height: 1.5;
}

/* Active Thread Header */
.thread-header-bar {
  padding: 0.85rem 1.25rem;
  background: rgba(11, 15, 25, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.thread-user-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f0ff, #9933ff);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.thread-user-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.thread-user-name-row strong {
  color: #f8fafc;
  font-size: 0.95rem;
}

.thread-user-id-badge {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: #94a3b8;
  text-decoration: none;
}

.thread-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.thread-subject-line {
  font-size: 0.8rem;
  color: #94a3b8;
}

.inbox-status-select {
  padding: 0.35rem 0.65rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}

/* Linked Order Context Banner */
.linked-order-banner {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(153, 51, 255, 0.08));
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.linked-order-banner.is-hidden {
  display: none !important;
}

.order-card-icon {
  font-size: 1.3rem;
}

.order-card-info {
  flex: 1;
}

.order-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.order-card-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #00f0ff;
}

.order-card-id {
  font-weight: 700;
  color: #38bdf8;
  font-size: 0.85rem;
  text-decoration: none;
}

.order-card-id:hover {
  text-decoration: underline;
}

.order-card-service {
  font-weight: 600;
  color: #f1f5f9;
  font-size: 0.85rem;
}

.order-card-sub-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.76rem;
  color: #94a3b8;
}

.order-card-stat strong {
  color: #f8fafc;
}

.order-stat-pill {
  color: #00f0ff !important;
  text-transform: uppercase;
}

/* Messages Scroll Stream */
.inbox-messages-scroll {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.msg-row {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.msg-row.is-outgoing {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-row.is-incoming {
  align-self: flex-start;
  align-items: flex-start;
}

.msg-bubble {
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  position: relative;
  word-break: break-word;
}

.msg-row.is-outgoing .msg-bubble {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-bottom-right-radius: 3px;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.25);
}

.msg-row.is-incoming .msg-bubble {
  background: rgba(19, 27, 44, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.16);
  color: #f1f5f9;
  border-bottom-left-radius: 3px;
}

.msg-row.is-internal-note .msg-bubble {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(180, 83, 9, 0.14) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fef08a;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

.msg-sender {
  font-weight: 700;
}

.msg-note-pill {
  padding: 0.05rem 0.35rem;
  background: rgba(245, 158, 11, 0.25);
  border-radius: 4px;
  color: #fde047;
  font-size: 0.65rem;
  font-weight: 800;
}

.msg-time {
  opacity: 0.75;
}

.msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Quick-Reply Presets Toolbar */
.inbox-presets-toolbar {
  padding: 0.5rem 1rem;
  background: rgba(11, 15, 25, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.presets-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #00f0ff;
  white-space: nowrap;
}

.presets-chips-scroll {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.preset-chip {
  padding: 0.25rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.preset-chip:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

/* Message Composer - Advanced Dual Mode */
.inbox-composer-form {
  padding: 0.75rem 1.25rem 0.85rem 1.25rem;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.inbox-composer-form.is-internal-note-mode {
  background: linear-gradient(180deg, rgba(30, 20, 10, 0.96) 0%, rgba(18, 12, 5, 0.98) 100%);
  border-top: 2px solid rgba(245, 158, 11, 0.75);
  box-shadow: 0 -4px 20px rgba(245, 158, 11, 0.12);
}

.composer-mode-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.composer-mode-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.18s ease;
}

.composer-mode-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.composer-mode-tab.is-active[data-mode="reply"] {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.composer-mode-tab.is-active[data-mode="note"] {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

.composer-note-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.74rem;
  color: #fef08a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  line-height: 1.35;
}

.composer-note-warning.is-hidden {
  display: none !important;
}

.composer-options-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

.internal-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #fbbf24;
  cursor: pointer;
  font-weight: 600;
}

.internal-note-toggle input {
  accent-color: #f59e0b;
}

.composer-input-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-end;
}

.inbox-composer-textarea {
  flex: 1;
  padding: 0.7rem 0.9rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 0.88rem;
  line-height: 1.45;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 48px;
  max-height: 170px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inbox-composer-textarea:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.inbox-composer-form.is-internal-note-mode .inbox-composer-textarea {
  background: rgba(22, 16, 7, 0.9);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fef08a;
}

.inbox-composer-form.is-internal-note-mode .inbox-composer-textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.inbox-send-btn {
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, #00f0ff, #0077ff);
  color: #000000;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  height: 44px;
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.3);
  flex-shrink: 0;
}

.inbox-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.5);
}

.inbox-composer-form.is-internal-note-mode .inbox-send-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
}

.inbox-composer-form.is-internal-note-mode .inbox-send-btn:hover {
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6);
}

.composer-footer-hints {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.hint-pill {
  font-size: 0.68rem;
  color: #64748b;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
}

/* Header Action Buttons */
.thread-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.thread-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.18s ease;
}

.thread-action-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.3);
  color: #00f0ff;
}

/* Date Divider */
.msg-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0 0.35rem 0;
  position: relative;
}

.msg-date-divider span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(15, 23, 42, 0.9);
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Read Receipts */
.msg-receipt {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 0.25rem;
}

/* Floating Toast Notifications */
.inbox-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.inbox-toast {
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 240, 255, 0.25);
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.inbox-toast.is-shown {
  transform: translateY(0);
  opacity: 1;
}

.inbox-toast.is-error {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Slash Command Autocomplete Menu */
.inbox-slash-menu {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 240, 255, 0.2);
  padding: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
  font-family: inherit;
}

.inbox-slash-menu.is-hidden {
  display: none !important;
}

.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s ease;
  color: #f1f5f9;
}

.slash-menu-item:hover,
.slash-menu-item.is-selected {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
}

.slash-cmd {
  font-weight: 700;
  color: #00f0ff;
  font-family: monospace;
  font-size: 0.82rem;
  min-width: 90px;
}

.slash-title {
  color: #94a3b8;
  font-size: 0.78rem;
}

.slash-menu-item.is-selected .slash-title {
  color: #e2e8f0;
}

/* Customer Cockpit Unread Badge */
.cust-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, #00f0ff, #0077ff);
  color: #000000;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  margin-left: 4px;
  line-height: 1;
}

.cust-unread-badge.is-hidden {
  display: none !important;
}

/* Full Page Inbox Hub - 3-Column Command Center */
.inbox-hub-card {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.08);
  background: rgba(11, 15, 25, 0.96);
}

.inbox-hub-toolbar {
  padding: 0.85rem 1.25rem;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.inbox-hub-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 440px;
}

.inbox-hub-grid {
  display: grid;
  grid-template-columns: 320px 1fr 310px;
  min-height: 680px;
  height: calc(100vh - 220px);
  position: relative;
  background: radial-gradient(ellipse at 85% 15%, rgba(0, 240, 255, 0.03), transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(153, 51, 255, 0.03), transparent 60%),
              rgba(11, 15, 25, 0.98);
}

@media (max-width: 1200px) {
  .inbox-hub-grid {
    grid-template-columns: 320px 1fr;
  }
  .inbox-hub-dossier-col {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    z-index: 30;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85);
  }
  .inbox-hub-dossier-col.is-open {
    transform: translateX(0);
  }
}

@media (max-width: 860px) {
  .inbox-hub-grid {
    grid-template-columns: 1fr;
  }
  .inbox-hub-threads-col {
    display: none;
  }
  .inbox-hub-threads-col.is-mobile-open {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 30;
  }
}

.inbox-hub-threads-col {
  background: rgba(11, 15, 25, 0.65);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.inbox-hub-chat-col {
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Right Dossier Intelligence Panel */
.inbox-hub-dossier-col {
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dossier-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #00f0ff;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dossier-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: none;
}

@media (max-width: 1200px) {
  .dossier-close-btn {
    display: inline-block;
  }
}

.inbox-dossier-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inbox-dossier-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.inbox-dossier-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.82rem;
}

.inbox-dossier-empty-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

.inbox-dossier-card-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.inbox-dossier-user-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.dossier-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f0ff 0%, #9933ff 100%);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}

.dossier-user-info strong {
  display: block;
  font-size: 0.95rem;
  color: #f8fafc;
  line-height: 1.2;
}

.dossier-user-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 4px;
}

.inbox-dossier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.38rem 0;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.inbox-dossier-row:last-child {
  border-bottom: none;
}

.dossier-row-label {
  color: #94a3b8;
  font-weight: 500;
}

.dossier-row-val {
  color: #f1f5f9;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: right;
}

.dossier-code-snippet {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  background: rgba(0, 240, 255, 0.07);
  color: #38bdf8;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dossier-copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #00f0ff;
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dossier-copy-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
}

.dossier-link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #38bdf8;
  font-size: 0.76rem;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.dossier-link-action:hover {
  color: #00f0ff;
  text-decoration: underline;
}

.dossier-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.dossier-status-pill.is-active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.dossier-status-pill.is-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.dossier-status-pill.is-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}


/* ==========================================================================
   Bucketed width utilities

   A computed width cannot be written as `style="width: N%"` in an admin template:
   the CSP drops style attributes, so the bar renders at no width at all and reads
   as empty on every row. Templates emit one of these classes instead, bucketed to
   5% because that is the most a few-pixel-tall bar can express.
   ========================================================================== */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* Legend under the used/remaining split on a claim card. */
.wc-bar-legend {
  font-size: 0.78rem;
  margin-top: 4px;
}

/* A table column that must not collapse below its content. */
.col-min-140 { min-width: 140px; }

/* Dual-Mode Claim Settle Cards */
.wc-settle-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wc-settle-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.wc-settle-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wc-proof-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.wc-proof-role {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.wc-proof-role.is-admin {
  background: rgba(0, 255, 102, 0.15);
  color: #00FF66;
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.wc-proof-role.is-customer {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* The two ways a stopped claim can be settled, tinted so the wallet credit and the
   manual payout are not mistaken for each other at a glance. Classes rather than
   style attributes: the admin CSP drops the latter, and these cards then render as
   untinted boxes with no border to tell them apart. */
.wc-settle-action-card {
  border-radius: 8px;
}

.wc-settle-wallet {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.wc-settle-manual {
  background: rgba(255, 170, 0, 0.04);
  border: 1px solid rgba(255, 170, 0, 0.25);
}

.wc-settle-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wc-settle-title-wallet { color: #00F0FF; }
.wc-settle-title-manual { color: #FFAA00; }

/* ==========================================================================
   Interactive Claims Resolution Accordion & Action Inspector
   ========================================================================== */

.wc-resolution-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.wc-acc-item {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-acc-item:hover {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.wc-acc-item.is-open {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.08);
}

.wc-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
  user-select: none;
}

.wc-acc-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wc-acc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.wc-acc-icon {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wc-acc-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-acc-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wc-acc-desc {
  font-size: 0.76rem;
  color: rgba(240, 244, 255, 0.55);
}

.wc-acc-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wc-acc-chevron {
  font-size: 0.85rem;
  color: rgba(240, 244, 255, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wc-acc-item.is-open .wc-acc-chevron {
  transform: rotate(180deg);
  color: #00F0FF;
}

.wc-acc-body {
  display: none;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 11, 25, 0.4);
  animation: wcAccSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.wc-acc-item.is-open .wc-acc-body {
  display: block;
}

@keyframes wcAccSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prominent Glowing Inspector Action Button */
.wc-inspector-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(153, 51, 255, 0.12) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  color: #00F0FF;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.wc-inspector-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: left 0.6s ease;
}

.wc-inspector-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(153, 51, 255, 0.25) 100%);
  border-color: #00F0FF;
  color: #FFF;
  box-shadow: 0 6px 28px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

.wc-inspector-btn:hover::before {
  left: 100%;
}

.wc-inspector-btn-icon {
  font-size: 1.1rem;
  margin-right: 8px;
}

.wc-inspector-btn-text {
  flex: 1;
}

.wc-inspector-btn-arrow {
  font-size: 1.1rem;
  font-weight: 900;
  transition: transform 0.25s ease;
}

.wc-inspector-btn:hover .wc-inspector-btn-arrow {
  transform: translateX(5px);
  color: #00F0FF;
}

/* Telemetry Breakdown Table & Supplier Recovery Box */
.wc-telemetry-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.wc-telemetry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.wc-telemetry-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wc-telemetry-table tr.table-row-divider td {
  border-bottom: 2px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.03);
}

.wc-telemetry-table tr.table-row-total td {
  background: rgba(0, 240, 255, 0.06);
  border-top: 1px solid rgba(0, 240, 255, 0.3);
  font-size: 0.9rem;
}

.wc-supplier-recovery-box {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
}

.wc-supplier-title {
  font-size: 0.88rem;
  color: #00F0FF;
}

.input-with-badge {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-badge .form-input {
  padding-right: 60px;
}

.input-suffix-badge {
  position: absolute;
  right: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(240, 244, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   REPORTS & ANALYTICS COMMAND CENTER ENHANCEMENTS
═══════════════════════════════════════════════════════════════ */

.reports-header-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(11, 15, 25, 0.7);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
}

.reports-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.period-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  transition: all 0.2s ease;
}

.period-pill:hover {
  color: #fff;
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
}

.period-pill.active {
  color: #0B0F19;
  background: linear-gradient(135deg, var(--cyan), #80f7ff);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  font-weight: 700;
}

.custom-date-picker-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.custom-date-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
  width: 105px;
  padding: 0.2rem 0.3rem;
  outline: none;
}

.custom-date-input:focus {
  border-bottom: 1px solid var(--cyan);
}

.reports-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
}

.report-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.report-tab-btn:hover {
  color: #fff;
  background: var(--glass);
  border-color: var(--glass-border);
}

.report-tab-btn.active {
  color: #fff;
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.15), 0 0 15px rgba(0, 240, 255, 0.1);
}

.report-tab-pane {
  display: none;
  animation: fadeIn 0.25s ease forwards;
}

.report-tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Chart Container & Tooltip */
.chart-card {
  position: relative;
  background: rgba(11, 15, 25, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.chart-col {
  flex: 1;
  min-width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.chart-bar-group {
  flex: 1;
  width: 100%;
  max-width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 2px;
}

.chart-bar-group:hover {
  filter: brightness(1.25);
  transform: scaleY(1.02);
  transform-origin: bottom;
}

.chart-bar {
  flex: 1;
  max-height: 100%;
  height: 0%;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.chart-bar.bar-net {
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(0, 240, 255, 0.4) 100%);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.chart-bar.bar-margin {
  background: linear-gradient(180deg, var(--green) 0%, rgba(0, 255, 102, 0.4) 100%);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

.chart-axis-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chart-tooltip {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  background: rgba(7, 10, 18, 0.95);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  z-index: 50;
  pointer-events: none;
  display: none;
  min-width: 130px;
}

.tooltip-header {
  font-weight: 700;
  font-family: var(--mono);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
  padding-bottom: 2px;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1.4;
}

.export-dropdown {
  position: relative;
  display: inline-block;
}

.export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #0B0F19;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.15);
  border-radius: 10px;
  padding: 0.4rem;
  min-width: 210px;
  z-index: 100;
  display: none;
}

.export-menu.show {
  display: block;
}

.export-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.84rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.export-menu a:hover {
  background: rgba(0, 240, 255, 0.1);
  color: var(--cyan);
}

.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.cards-mb-lg { margin-bottom: 1.5rem; }
.stat-border-cyan { border-left: 3px solid var(--cyan); }
.stat-border-green { border-left: 3px solid var(--green); }

/* Reports Page Specifics */
.reports-window-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.reports-apply-btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.reports-header-right { display: flex; align-items: center; gap: 1rem; }
.reports-stat-note { font-family: var(--mono); font-size: 0.8rem; }
.reports-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.reports-legend { display: flex; gap: 1rem; font-size: 0.8rem; font-weight: 600; }
.reports-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.reports-legend-color-cyan { width: 12px; height: 12px; background: var(--cyan); border-radius: 2px; display: inline-block; }
.reports-legend-color-green { width: 12px; height: 12px; background: var(--green); border-radius: 2px; display: inline-block; }

.email-logs-table-wrap {
  overflow-x: auto;
}

/* ─── ENHANCED EMAIL PREVIEW & TOOLBAR CONTROLS ─── */
.email-preview-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-preview-device-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px;
}

.email-preview-device-toggle button {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.email-preview-device-toggle button.is-active {
  background: var(--cyan);
  color: #0b0f19;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.email-preview-audience-bar {
  margin-bottom: 12px;
}

.email-preview-frame-container.is-mobile {
  max-width: 375px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 0 0 6px #1e293b, 0 12px 24px rgba(0,0,0,0.5);
  transition: max-width 0.25s ease;
}

.email-modal-preview {
  width: 90vw;
  max-width: 760px;
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: #0f172a;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  padding: 20px;
}

.email-quick-preview-frame-wrap {
  width: 100%;
  height: 520px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.email-quick-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-test-email-dialog {
  width: 90vw;
  max-width: 480px;
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: #0f172a;
  padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Customer Detail Direct Email Modal */
.modal-send-email-dialog {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1e293b;
  color: #f8fafc;
  max-width: 600px;
  width: 90%;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}
.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
}
.modal-help-banner {
  margin-bottom: 16px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: #93c5fd;
}
.modal-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.modal-var-chips {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.modal-chip-btn {
  font-size: 11px;
  padding: 2px 6px;
}

/* Email Marketing Hub Design Tokens */
.email-subnav {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.email-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.email-overview-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.email-stat-card-green { margin: 0; padding: 20px; border-left: 4px solid #10b981; }
.email-stat-card-cyan { margin: 0; padding: 20px; border-left: 4px solid #38bdf8; }
.email-stat-card-amber { margin: 0; padding: 20px; border-left: 4px solid #f59e0b; }
.email-stat-card-pink { margin: 0; padding: 20px; border-left: 4px solid #ec4899; }
.email-stat-title { font-size: 13px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.email-stat-num-green { font-size: 28px; font-weight: 800; color: #10b981; margin-top: 6px; }
.email-stat-num-cyan { font-size: 28px; font-weight: 800; color: #38bdf8; margin-top: 6px; }
.email-stat-num-amber { font-size: 28px; font-weight: 800; color: #f59e0b; margin-top: 6px; }
.email-stat-num-pink { font-size: 28px; font-weight: 800; color: #ec4899; margin-top: 6px; }
.email-stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.email-status-pill-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.email-card-header-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.email-desc-muted {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.email-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
}
.email-config-label { color: var(--text-muted); }
.email-config-val { font-family: var(--mono); }
.email-test-form-row {
  display: flex;
  gap: 8px;
}
.email-test-input {
  flex: 1;
}
.email-segment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-segment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.email-segment-title { font-size: 14px; font-weight: 600; color: #f8fafc; }
.email-segment-desc { font-size: 12px; color: var(--text-muted); }
.email-segment-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.email-table-header-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.email-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-showcase-res {
  display: flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}
.btn-showcase-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-conditional-card {
  display: none;
}



/* Template Editor & Gallery Styles */
.email-editor-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}
.email-editor-2col-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.email-tag-helper-wrap {
  margin-bottom: 8px;
}
.email-tag-helper-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.email-tag-chips-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.email-code-textarea {
  font-family: var(--mono);
  font-size: 13px;
}
.email-editor-actions {
  display: flex;
  gap: 12px;
}
.email-preview-sticky-card {
  position: sticky;
  top: 20px;
}
.email-preview-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.email-preview-meta-box {
  background: #000;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.email-preview-subj-line {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.email-preview-subj-strong {
  color: #f8fafc;
}
.email-preview-sender-line {
  font-size: 11px;
  color: var(--text-muted);
}
.email-preview-frame-container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 520px;
}
.email-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.email-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.email-template-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.email-template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.email-template-badge-cat {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.email-template-badge-system {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.email-template-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #f8fafc;
}
.email-template-subject-preview {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.email-template-preheader-preview {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin-bottom: 16px;
}
.email-template-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.email-template-footer-left {
  display: flex;
  gap: 6px;
}
.email-btn-delete {
  color: #ef4444;
}

/* Automations Page */
.email-automation-day-hour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.email-automation-trigger-desc {
  font-size: 13px;
  font-weight: 600;
  color: #38bdf8;
}
.email-automation-switch-form {
  display: inline;
}
.email-automation-badge-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.email-automation-badge-paused {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Logs Table & Diagnostics */
.email-logs-filter-form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.email-logs-search-input {
  width: 260px;
}
.email-logs-status-select {
  width: 140px;
}
.email-logs-channel-select {
  width: 140px;
}
.email-status-pill-sent {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.email-status-pill-queued {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.email-status-pill-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.email-status-pill-skipped {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.email-logs-err-diag {
  margin-top: 4px;
  font-size: 11px;
  color: #f87171;
  font-family: var(--mono);
  background: rgba(239, 68, 68, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 320px;
  word-break: break-all;
}
.email-logs-nowrap-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
.email-logs-table-wrap {
  overflow-x: auto;
}
.email-logs-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.email-tag-chips-modal-wrap {
  margin-top: 8px;
}

/* ==========================================================================
   INTERACTIVE MESSAGE & EMAIL TEMPLATES STUDIO STYLES
   ========================================================================== */

.studio-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin-bottom: 2rem;
}

.studio-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted, #94a3b8);
}

.studio-crumb-link {
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.studio-crumb-link:hover,
.studio-crumb-link.is-current {
  color: var(--text, #f8fafc);
  font-weight: 600;
}

.studio-crumb-sep {
  opacity: 0.4;
}

.studio-layout-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .studio-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Left Sidebar --- */
.studio-sidebar {
  background: var(--bg-card, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.studio-search-box {
  position: relative;
  width: 100%;
}

.studio-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.6;
  pointer-events: none;
}

.studio-search-input {
  width: 100%;
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 0.55rem 0.75rem 0.55rem 2.2rem;
  font-size: 0.88rem;
  color: var(--text, #f8fafc);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.studio-search-input:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.studio-sidebar-actions {
  width: 100%;
}

.studio-btn-new-tmpl {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.studio-templates-lists {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.studio-group-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.studio-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}

.studio-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.studio-group-sub {
  font-size: 0.7rem;
  font-weight: normal;
  text-transform: none;
  opacity: 0.75;
  margin-left: 0.25rem;
}

.studio-group-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
}

.studio-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.studio-item-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.studio-item-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.studio-item-card.is-active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
}

.studio-item-icon-wrap {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.studio-item-meta {
  min-width: 0;
  flex: 1;
}

.studio-item-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-item-preview-text {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-empty-subtext {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  padding: 0.5rem 0.25rem;
  font-style: italic;
}

/* --- Right Workspace --- */
.studio-workspace {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--bg-card, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 1.5rem;
}

.studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding-bottom: 1.2rem;
}

.studio-title-wrap {
  flex: 1;
  min-width: 0;
}

.studio-title-input {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text, #f8fafc);
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  outline: none;
  transition: all 0.2s ease;
}

.studio-title-input:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.studio-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.studio-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.studio-btn-delete {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.studio-btn-delete:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Toast */
.studio-toast {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.studio-toast.is-visible {
  display: block;
}

.studio-toast.is-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.studio-toast.is-error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* --- Metadata Row --- */
.studio-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end;
}

.studio-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.studio-meta-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.studio-select-wrap {
  position: relative;
}

.studio-select,
.studio-input {
  width: 100%;
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: var(--text, #f8fafc);
  outline: none;
  transition: border-color 0.2s ease;
}

.studio-select:focus,
.studio-input:focus {
  border-color: var(--primary, #3b82f6);
}

/* --- Variable Field Tag Chips --- */
.studio-tags-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.studio-tags-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.studio-chips-scroller {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.studio-chip-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  color: var(--text, #cbd5e1);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.studio-chip-btn:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  transform: translateY(-1px);
}

.studio-chip-btn:active {
  transform: translateY(0);
}

/* --- Split 2-Column Grid (MESSAGE & PREVIEW) --- */
.studio-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  min-height: 440px;
}

@media (max-width: 900px) {
  .studio-split-grid {
    grid-template-columns: 1fr;
  }
}

.studio-column-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.studio-editor-column,
.studio-preview-column {
  display: flex;
  flex-direction: column;
}

.studio-editor-card,
.studio-preview-card {
  flex: 1;
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Formatting Toolbar */
.studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.studio-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.studio-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.3rem 0.55rem;
  color: var(--text-muted, #cbd5e1);
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.studio-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #ffffff);
}

.studio-tool-btn.is-active {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}

/* ContentEditable WYSIWYG Area */
.studio-rich-editable {
  flex: 1;
  min-height: 380px;
  max-height: 600px;
  overflow-y: auto;
  padding: 1rem;
  color: var(--text, #f8fafc);
  font-size: 0.92rem;
  line-height: 1.6;
  outline: none;
}

.studio-rich-editable[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #64748b;
  pointer-events: none;
  font-style: italic;
}

.studio-raw-textarea {
  flex: 1;
  min-height: 380px;
  max-height: 600px;
  background: transparent;
  border: none;
  padding: 1rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.85rem;
  color: #93c5fd;
  line-height: 1.5;
  resize: none;
  outline: none;
}

/* --- Preview Area --- */
.studio-preview-card {
  padding: 1.25rem;
  overflow-y: auto;
  max-height: 650px;
}

.studio-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 250px;
  color: #64748b;
  font-size: 0.95rem;
  font-style: italic;
}

/* WhatsApp Simulated Chat Bubble */
.wa-preview-chat-container {
  display: flex;
  flex-direction: column;
  background: #0b141a;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.wa-preview-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1f2c34;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wa-preview-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.wa-preview-user-info {
  display: flex;
  flex-direction: column;
}

.wa-preview-username {
  font-weight: 600;
  font-size: 0.88rem;
  color: #e9edef;
}

.wa-preview-status {
  font-size: 0.72rem;
  color: #8696a0;
}

.wa-preview-body {
  padding: 1.25rem 1rem;
  background: #0b141a;
  background-image: radial-gradient(#1f2c34 1px, transparent 1px);
  background-size: 16px 16px;
  min-height: 280px;
}

.wa-chat-bubble {
  background: #005c4b;
  color: #e9edef;
  border-radius: 8px 8px 2px 8px;
  padding: 0.65rem 0.85rem;
  max-width: 88%;
  margin-left: auto;
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  word-wrap: break-word;
}

.wa-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.wa-time {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
}

.wa-check {
  font-size: 0.72rem;
  color: #53bdeb;
}

.wa-preview-attachments {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wa-preview-attach-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

/* Email Live Preview Styling */
.email-live-preview-box {
  background: #ffffff;
  color: #1e293b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.email-live-meta-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: #475569;
}

.email-live-meta-row {
  display: flex;
  gap: 0.5rem;
}

.email-live-label {
  font-weight: 600;
  color: #64748b;
  min-width: 60px;
}

.email-live-subj {
  color: #0f172a;
}

.email-live-body {
  padding: 1.25rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #1e293b;
}

.email-preview-attachments-box {
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  padding: 0.65rem 1rem;
}

.email-preview-attach-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.email-preview-attach-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.email-preview-attach-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: #334155;
}

/* --- Bottom Attachments Bar --- */
.studio-attachments-section {
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.studio-attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.studio-attachments-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text, #f8fafc);
}

.studio-attachments-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.studio-attach-hint {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.studio-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.studio-attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  color: var(--text, #f8fafc);
  transition: all 0.2s ease;
}

.studio-attachment-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.studio-attach-filename {
  color: var(--text, #f8fafc);
  text-decoration: none;
  font-weight: 500;
}

.studio-attach-filename:hover {
  text-decoration: underline;
}

.studio-attach-size {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

.studio-btn-remove-attach {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0 0.2rem;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.studio-btn-remove-attach:hover {
  opacity: 1;
}

/* ==========================================================================
   INTERACTIVE DIRECT COMPOSE (EMAIL & WHATSAPP) STYLES
   ========================================================================== */

.compose-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
}

.compose-card {
  background: var(--bg-card, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding-bottom: 1rem;
}

.compose-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.compose-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text, #f8fafc);
  margin: 0;
}

.compose-context-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.compose-top-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.compose-btn-close {
  color: var(--text-muted, #94a3b8);
  font-size: 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
}

.compose-btn-close:hover {
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, 0.08);
}

.compose-btn-send {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  padding: 0.55rem 1.35rem;
  border-radius: 8px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.compose-btn-send:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* Fields Stack */
.compose-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding-bottom: 1.25rem;
}

.compose-field-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

@media (max-width: 640px) {
  .compose-field-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

.compose-field-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.compose-field-control {
  min-width: 0;
}

.compose-channel-pills {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.compose-channel-pill {
  cursor: pointer;
  user-select: none;
}

.compose-channel-pill-inner {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  transition: all 0.15s ease;
}

.compose-channel-pill.is-active .compose-channel-pill-inner {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.compose-recipient-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compose-recipient-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text, #f8fafc);
  font-weight: 500;
}

.compose-recipient-badge.is-whatsapp {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
  color: #4ade80;
}

.compose-recipient-pill-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.compose-no-record-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.compose-no-record-msg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  padding: 0.15rem 0;
}

.compose-send-svg {
  flex-shrink: 0;
}

.compose-warn-icon {
  font-size: 0.95rem;
}

.compose-select-wrap {
  position: relative;
  width: 100%;
}

.compose-select,
.compose-input {
  width: 100%;
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text, #f8fafc);
  outline: none;
  transition: all 0.2s ease;
}

.compose-select:focus,
.compose-input:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.compose-input-override {
  margin-top: 0.25rem;
}

/* Editor Section */
.compose-editor-section {
  background: var(--bg-input, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.compose-rich-area {
  min-height: 280px;
  max-height: 550px;
  padding: 1.25rem;
  color: var(--text, #f8fafc);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Bottom Attachments Bar */
.compose-attachments-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  flex-wrap: wrap;
}

.compose-attach-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.compose-attach-items-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.compose-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  color: var(--text, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.compose-doc-pill:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.compose-doc-pill input[type="checkbox"]:checked + span {
  color: #93c5fd;
  font-weight: 600;
}

.compose-dynamic-attach-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.compose-btn-add-file {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER ADMIN AUTHENTICATION & COMMAND DECK PORTAL
   Ultra-Premium Glassmorphic Design, Ambient Lighting & Animations
   ═══════════════════════════════════════════════════════════════ */

body.admin-auth-body {
  background-color: #07090E;
  color: #F8FAFC;
  font-family: var(--font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  position: relative;
  overflow-x: hidden;
  margin: 0;
}

/* Ambient Lighting Background with Floating Orbs */
.admin-auth-body .ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.14), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.16), transparent 70%),
    radial-gradient(circle at 0% 50%, rgba(14, 165, 233, 0.10), transparent 60%);
}

.admin-auth-body .ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: adminOrbFloat 14s ease-in-out infinite alternate;
}
.admin-auth-body .orb-1 {
  width: 480px;
  height: 480px;
  background: rgba(0, 240, 255, 0.28);
  top: -120px;
  left: 25%;
}
.admin-auth-body .orb-2 {
  width: 420px;
  height: 420px;
  background: rgba(124, 58, 237, 0.26);
  bottom: -100px;
  right: 18%;
  animation-delay: -7s;
}
.admin-auth-body .orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(16, 185, 129, 0.15);
  top: 45%;
  left: -80px;
  animation-delay: -3.5s;
}

@keyframes adminOrbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(35px, -25px) scale(1.08); }
  100% { transform: translate(-20px, 35px) scale(0.96); }
}

/* Grid Mesh Pattern Overlay */
.admin-auth-body .grid-pattern {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.65;
}

/* Top Navigation & Status Bar */
.admin-auth-body .top-nav-bar {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  pointer-events: auto;
}

.admin-auth-body .back-home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(248, 250, 252, 0.8);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.15rem;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-auth-body .back-home-link:hover {
  color: #00F0FF;
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}

.admin-auth-body .admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #38BDF8;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.admin-auth-body .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: adminStatusPulse 2s infinite ease-in-out;
}
@keyframes adminStatusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Auth Card Container */
.admin-auth-body .auth-card-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  animation: adminCardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes adminCardEntrance {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-auth-body .auth-glass-card {
  background: rgba(13, 19, 33, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 28px;
  padding: 2.75rem 2.25rem 2.25rem;
  box-shadow: 
    0 30px 70px -15px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(0, 240, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-auth-body .auth-glass-card:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 
    0 35px 80px -15px rgba(0, 0, 0, 0.98),
    0 0 50px rgba(0, 240, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Neon Top Bar Animation */
.admin-auth-body .auth-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00F0FF, #7C3AED, #10B981, #00F0FF);
  background-size: 200% 100%;
  animation: adminNeonBarShift 5s linear infinite;
}

@keyframes adminNeonBarShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Brand & Header Section */
.admin-auth-body .brand-logo-wrap {
  text-align: center;
}

.admin-auth-body .brand-header {
  text-align: center;
  margin-bottom: 2rem;
}

.admin-auth-body .brand-logo-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #00F0FF 0%, #7C3AED 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}
.admin-auth-body .brand-logo-icon:hover {
  transform: scale(1.1) rotate(6deg);
}
.admin-auth-body .brand-logo-icon::before {
  content: '';
  width: 28px;
  height: 28px;
  background-color: #070A12;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.admin-auth-body .brand-header h1 {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.45rem 0;
  background: linear-gradient(135deg, #FFFFFF 20%, #00F0FF 70%, #A855F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-auth-body .brand-header p {
  color: #94A3B8;
  font-size: 0.925rem;
  line-height: 1.45;
  font-weight: 500;
  margin: 0;
}

/* Alert Banner */
.admin-auth-body .alert-banner {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: adminAlertSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes adminAlertSlide {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-auth-body .alert-banner::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: #F87171;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Form Styles */
.admin-auth-body .form-group {
  margin-bottom: 1.35rem;
}

.admin-auth-body .form-label {
  display: block;
  font-size: 0.725rem;
  font-weight: 800;
  margin-bottom: 0.55rem;
  color: #00F0FF;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.admin-auth-body .input-field-wrapper {
  position: relative;
}

.admin-auth-body .field-icon-user::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  background-color: #64748B;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: all 0.25s ease;
  pointer-events: none;
}

.admin-auth-body .field-icon-lock::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  background-color: #64748B;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: all 0.25s ease;
  pointer-events: none;
}

.admin-auth-body .input-field-wrapper:focus-within .field-icon-user::before,
.admin-auth-body .input-field-wrapper:focus-within .field-icon-lock::before {
  background-color: #00F0FF;
  transform: translateY(-50%) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
}

.admin-auth-body .auth-cyber-input {
  width: 100%;
  padding: 0.88rem 1rem 0.88rem 2.85rem;
  background: rgba(18, 26, 44, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 14px;
  color: #F8FAFC;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.admin-auth-body .auth-cyber-input:focus {
  border-color: #00F0FF;
  background: rgba(22, 33, 56, 0.95);
  box-shadow: 
    0 0 22px rgba(0, 240, 255, 0.35),
    inset 0 0 10px rgba(0, 240, 255, 0.08);
}

/* Submit Button */
.admin-auth-body .cta-submit-btn {
  position: relative;
  width: 100%;
  height: 52px;
  padding: 0 1.5rem;
  background: linear-gradient(135deg, #00E5FF 0%, #7C3AED 100%);
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 0.975rem;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 0.75rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 8px 28px rgba(0, 229, 255, 0.4),
    0 0 16px rgba(124, 58, 237, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.admin-auth-body .cta-submit-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(30deg) translateY(-100%);
  transition: transform 0.6s ease;
}

.admin-auth-body .cta-submit-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 14px 38px rgba(0, 229, 255, 0.55),
    0 0 25px rgba(124, 58, 237, 0.45);
}
.admin-auth-body .cta-submit-btn:hover::after {
  transform: rotate(30deg) translateY(100%);
}

.admin-auth-body .cta-submit-btn:active {
  transform: translateY(0) scale(0.99);
}

/* Icon Helpers */
.admin-auth-body .icon-arrow-left::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.admin-auth-body .icon-arrow-right::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

.admin-auth-body .icon-shield::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #10B981;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Switch Portal Card */
.admin-auth-body .switch-mode-card {
  margin-top: 1.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.9rem;
  text-align: center;
  font-size: 0.88rem;
  color: #94A3B8;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.admin-auth-body .switch-mode-btn {
  color: #00F0FF;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}
.admin-auth-body .switch-mode-btn:hover {
  color: #38BDF8;
  text-decoration: underline;
}

/* Footer Security Notice */
.admin-auth-body .security-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .admin-auth-body .top-nav-bar {
    position: static;
    width: 100%;
    margin-bottom: 1rem;
  }
  .admin-auth-body .auth-card-container {
    margin-top: 0;
  }
  .admin-auth-body .auth-glass-card {
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 22px;
  }
  .admin-auth-body .admin-status-badge {
    display: none;
  }
}

/* Compose Recipient Input Group & CC/BCC Toggles */
.compose-recipient-input-group {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.compose-recipient-input-group .compose-input {
  padding-right: 90px;
}

.compose-cc-toggles {
  position: absolute;
  right: 6px;
  display: flex;
  gap: 4px;
}

.btn-compose-field-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted, #94a3b8);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-compose-field-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.btn-compose-field-toggle.is-active {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}

.compose-recipient-hint {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 4px;
}

.compose-recipient-hint.warn {
  color: #f59e0b;
}

/* Compose Dynamic Variable Token Chips */
.compose-token-chips-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.4);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  flex-wrap: wrap;
}

.token-chips-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  margin-right: 2px;
}

.token-chip-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.token-chip-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
  transform: translateY(-1px);
}

/* Email CTA Buttons in Hero & Fleet */
.btn-email-hero-cta {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa !important;
  font-weight: 600;
}

.btn-email-hero-cta:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd !important;
}

.btn-send-email {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa !important;
}

.btn-send-email:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd !important;
}

.btn-op-email {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.btn-op-email:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

/* ==========================================================================
   Universal Listing Live Search & Real-Time Pulse Indicators
   ========================================================================== */
.has-search-spinner {
  position: relative;
}

.has-search-spinner::after {
  content: "";
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 240, 255, 0.25);
  border-top-color: #00f0ff;
  border-radius: 50%;
  animation: live-search-spin 0.6s linear infinite;
  pointer-events: none;
  z-index: 5;
}

input.is-searching {
  border-color: rgba(0, 240, 255, 0.6) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25) !important;
}

@keyframes live-search-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}




/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMER CRM — TAGS, NOTES, AND THE ACTIVITY TIMELINE
   ══════════════════════════════════════════════════════════════════════════
   Everything here is served from this file rather than written inline, because the
   admin CSP is `style-src 'self'` with no unsafe-inline: a `style=` attribute in a
   template is dropped silently, which renders as a hidden panel showing through or a
   width that vanishes. Nothing below has an inline counterpart. */

/* --- Tags ------------------------------------------------------------------ */

.customer-tag-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.customer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  /* The colour comes from a .tag-c-* class below, which is derived from the tag's
     slug in app/domain/tags.py -- so one tag is one colour on every account. Those
     classes set nothing but these three custom properties. */
  color: var(--tag-ink, var(--text-dim));
  background: var(--tag-wash, rgba(255, 255, 255, 0.05));
  border-color: var(--tag-edge, rgba(255, 255, 255, 0.12));
}

.tag-c-cyan    { --tag-ink: #67E8F9; --tag-wash: rgba(0, 240, 255, 0.12);  --tag-edge: rgba(0, 240, 255, 0.32); }
.tag-c-violet  { --tag-ink: #C4B5FD; --tag-wash: rgba(139, 92, 246, 0.14); --tag-edge: rgba(139, 92, 246, 0.34); }
.tag-c-amber   { --tag-ink: #FCD34D; --tag-wash: rgba(245, 158, 11, 0.13); --tag-edge: rgba(245, 158, 11, 0.32); }
.tag-c-emerald { --tag-ink: #6EE7B7; --tag-wash: rgba(16, 185, 129, 0.13); --tag-edge: rgba(16, 185, 129, 0.32); }
.tag-c-rose    { --tag-ink: #FDA4AF; --tag-wash: rgba(244, 63, 94, 0.13);  --tag-edge: rgba(244, 63, 94, 0.32); }
.tag-c-sky     { --tag-ink: #7DD3FC; --tag-wash: rgba(56, 189, 248, 0.13); --tag-edge: rgba(56, 189, 248, 0.32); }
.tag-c-lime    { --tag-ink: #BEF264; --tag-wash: rgba(132, 204, 22, 0.13); --tag-edge: rgba(132, 204, 22, 0.32); }

.customer-tag-add {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: all 0.16s ease;
}

.customer-tag-add:hover {
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.08);
}

/* A tag in the editing panel carries its own remove button. The button lives inside a
   one-field form so it works with scripting off, and that form is stripped of layout so
   the pill stays a pill. */
.customer-tag-editable {
  padding-right: 0.3rem;
}

.customer-tag-editable .inline-form-flush {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.customer-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.14s ease;
}

.customer-tag-remove:hover {
  opacity: 1;
  background: rgba(255, 51, 51, 0.35);
  color: #fff;
}

.customer-tag-suggest {
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.customer-tag-suggest:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.crm-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}

.crm-tag-form {
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
}

.crm-suggestions {
  margin-top: 1.1rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 0.9rem;
}

.crm-suggestions-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Notes ----------------------------------------------------------------- */

/* Tags and notes side by side on a wide screen, stacked below it. Tags first in both
   orders: they are the thing that should be read before the paragraph under them. */
.crm-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}

@media (max-width: 1080px) {
  .crm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.crm-note-input {
  width: 100%;
  min-height: 4.6rem;
  resize: vertical;
  font-family: var(--font);
  line-height: 1.55;
}

.crm-note-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.crm-note-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
}

.crm-note-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-note {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  padding: 0.8rem 0.95rem;
}

/* A pinned note is a standing fact about the account, so it is marked rather than
   merely ordered first: the ordering is lost the moment somebody filters. */
.crm-note.is-pinned {
  border-color: rgba(255, 184, 0, 0.32);
  background: rgba(255, 184, 0, 0.05);
}

.crm-note-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.crm-note-author {
  font-weight: 700;
  color: var(--text);
}

.crm-note-edited {
  font-style: italic;
  opacity: 0.7;
}

.crm-note-body {
  margin: 0.45rem 0 0;
  /* The operator's own line breaks are part of what they wrote -- three short facts,
     not one run-on sentence -- so they survive to the screen. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  color: var(--text);
}

.crm-note-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.crm-note-actions .inline-form-flush {
  display: inline-flex;
  margin: 0;
}

.btn-note-action {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color 0.14s ease;
}

.btn-note-action:hover {
  color: var(--cyan);
}

.btn-note-danger:hover {
  color: var(--red);
}

/* <details> supplies the disclosure with no script; the default triangle is removed so
   the summary reads as one of the three actions beside it. */
.crm-note-edit {
  display: inline-block;
}

.crm-note-edit > summary {
  cursor: pointer;
}

.crm-note-edit > summary::-webkit-details-marker {
  display: none;
}

.crm-note-edit[open] > summary {
  color: var(--cyan);
}

.crm-note-edit-form {
  margin-top: 0.55rem;
  min-width: min(28rem, 100%);
}

/* --- Activity timeline ------------------------------------------------------ */

.cfeed {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.cfeed-row {
  display: grid;
  grid-template-columns: 6.2rem 2rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cfeed-row:last-child {
  border-bottom: 0;
}

.cfeed-row.is-filtered-out {
  display: none;
}

.cfeed-when {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.35;
  padding-top: 0.15rem;
}

.cfeed-time {
  opacity: 0.65;
  font-size: 0.66rem;
}

.cfeed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* One tint per kind, so a column of sixty rows can be skimmed for shape before it is
   read for content. Money is green, purchases cyan, support amber, and everything an
   administrator did themselves is violet. */
.cfeed-kind-order .cfeed-icon { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.28); }
.cfeed-kind-wallet .cfeed-icon { background: rgba(0, 255, 102, 0.1); border-color: rgba(0, 255, 102, 0.28); }
.cfeed-kind-deposit .cfeed-icon { background: rgba(0, 255, 102, 0.1); border-color: rgba(0, 255, 102, 0.28); }
.cfeed-kind-claim .cfeed-icon { background: rgba(255, 184, 0, 0.12); border-color: rgba(255, 184, 0, 0.3); }
.cfeed-kind-entitlement .cfeed-icon { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); }
.cfeed-kind-message .cfeed-icon { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.28); }
.cfeed-kind-login .cfeed-icon { background: rgba(255, 255, 255, 0.06); }
.cfeed-kind-note .cfeed-icon { background: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.26); }
.cfeed-kind-admin .cfeed-icon { background: rgba(153, 51, 255, 0.12); border-color: rgba(153, 51, 255, 0.3); }

.cfeed-body {
  min-width: 0;
}

.cfeed-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cfeed-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.cfeed-title:hover {
  color: var(--cyan);
  text-decoration: underline;
}

.cfeed-detail,
.cfeed-actor {
  margin: 0.18rem 0 0;
  font-size: 0.74rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.cfeed-actor {
  opacity: 0.75;
  font-style: italic;
}

.cfeed-amount {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 0.1rem;
}

.cfeed-amount.is-credit { color: #6EE7B7; }
.cfeed-amount.is-debit { color: #FDA4AF; }

.cfeed-amount .stat-unit {
  font-size: 0.66rem;
  opacity: 0.6;
  font-weight: 600;
}

/* Below this width the four-column grid squeezes the title to two words a line, so the
   date moves above the row and the amount drops under the text it belongs to. */
@media (max-width: 720px) {
  .cfeed-row {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem;
  }

  .cfeed-when {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0.4rem;
  }

  .cfeed-amount {
    grid-column: 2 / -1;
  }
}

/* ========================================================================== */
/*  Seller applications review queue (/platform/sellers)                      */
/*                                                                            */
/*  Classes rather than inline styles, and not as a matter of taste: the      */
/*  admin CSP has no 'unsafe-inline' in style-src, so a style= attribute on   */
/*  that page is dropped -- widths vanish and disclosed panels render open.   */
/* ========================================================================== */

.seller-review-mono {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  word-break: break-all;
}

.seller-review-warn {
  color: var(--warn, #f59e0b);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.seller-review-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: nowrap;
}

.seller-review-form {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.seller-review-days {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.2rem;
}

.seller-review-days-input {
  width: 5.5rem;
}

/* A disclosure rather than a modal: refusing needs a reason, and a <details> keeps the
   textarea out of the way without a line of script -- which the admin CSP would refuse
   to run inline anyway. */
.seller-review-details {
  margin-top: 0.35rem;
}

.seller-review-details > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-dim);
  user-select: none;
}

.seller-review-details > summary:hover {
  color: var(--danger, #f87171);
}

.seller-review-details form {
  margin-top: 0.5rem;
  min-width: 15rem;
}

.seller-review-details textarea {
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MEETWAY RESOLUTION & LOYALTY STUDIO — ULTRA-PREMIUM FULL-SCREEN MODAL
   Next-Gen Glassmorphism, Ambient Stage Lighting, Multi-Device Sandboxes
   Ample White Space, Radiant Stage Colors & Interactive HUD Micro-Interactions
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rs-stage-investigation: #f59e0b;
  --rs-stage-investigation-glow: rgba(245, 158, 11, 0.35);
  --rs-stage-replacement: #10b981;
  --rs-stage-replacement-glow: rgba(16, 185, 129, 0.35);
  --rs-stage-refund: #a855f7;
  --rs-stage-refund-glow: rgba(168, 85, 247, 0.35);
  --rs-stage-renewal: #00f0ff;
  --rs-stage-renewal-glow: rgba(0, 240, 255, 0.35);
}

.resolution-studio-dialog {
  width: min(96vw, 1540px);
  height: min(94vh, 960px);
  margin: auto;
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 22px;
  background: rgba(9, 14, 26, 0.98);
  color: var(--text, #f0f4ff);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.94), 0 0 60px rgba(0, 240, 255, 0.14);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  padding: 0;
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: 9999;
  position: relative;
}

.resolution-studio-dialog[open] {
  display: flex;
  animation: rsDialogOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.resolution-studio-dialog::backdrop {
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@keyframes rsDialogOpen {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Ambient Top Horizon Line */
.rs-ambient-bar {
  height: 3.5px;
  width: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.65);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

/* Studio Header */
.rs-header {
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(13, 20, 36, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 16px;
}

.rs-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.rs-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-shield-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
}

.rs-shield-icon {
  font-size: 19px;
  z-index: 2;
}

.rs-shield-ring {
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 240, 255, 0.5);
  animation: rsShieldPulse 2.5s infinite ease-out;
  pointer-events: none;
}

@keyframes rsShieldPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.rs-brand {
  margin: 0;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, #ffffff 0%, #00f0ff 60%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

.rs-brand-telemetry {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.rs-telemetry-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: rsPulseGreen 2s infinite ease-in-out;
}

@keyframes rsPulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.rs-telemetry-text {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
}

/* Active Stage Badge */
.rs-stage-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rs-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.rs-stage-badge.badge-investigation {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.28);
}

.rs-stage-badge.badge-replacement {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.28);
}

.rs-stage-badge.badge-refund {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.28);
}

.rs-stage-badge.badge-renewal {
  background: rgba(0, 240, 255, 0.16);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.28);
}

.rs-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rs-header-kbd-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
}

.rs-header-kbd-hint kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--mono, monospace);
  color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rs-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #94a3b8;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
}

.rs-close-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* Studio Workspace Body */
.rs-body {
  display: grid;
  grid-template-columns: 500px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Left Configuration Panel */
.rs-panel-left {
  background: rgba(12, 18, 32, 0.75);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rs-panel-left::-webkit-scrollbar {
  width: 6px;
}
.rs-panel-left::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.rs-panel-left::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.35);
}

/* Card Box Container (Clean White Space & Separation) */
.rs-card-box {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rs-card-box:hover {
  border-color: rgba(0, 240, 255, 0.2);
}

.rs-conditional-card {
  animation: rsCardSlideDown 0.25s ease forwards;
}

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

/* Section Titles & Hints */
.rs-section-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-title-icon {
  font-size: 13.5px;
}

.rs-section-hint {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0 0 14px 0;
}

/* Glow Color Utilities */
.text-glow-cyan {
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}
.text-glow-amber {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}
.text-glow-green {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}
.text-glow-purple {
  color: #c084fc;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
}

/* 4 Template Cards Grid */
.rs-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rs-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  position: relative;
  user-select: none;
}

.rs-template-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.rs-template-card .card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
}

.rs-template-card .card-emoji {
  font-size: 14px;
}

/* Stage Badges inside cards */
.card-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2.5px 8px;
  border-radius: 4px;
  margin: 6px 0 4px 0;
  display: inline-block;
  text-transform: uppercase;
}

.tag-investigation {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.tag-replacement {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.tag-refund {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.tag-renewal {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.rs-template-card .card-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.4;
}

/* Active State by Card Type */
.rs-template-card.active-investigation {
  background: rgba(245, 158, 11, 0.14);
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.28);
  transform: translateY(-2px);
}
.rs-template-card.active-investigation .card-head {
  color: #fbbf24;
}

.rs-template-card.active-replacement {
  background: rgba(16, 185, 129, 0.14);
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.28);
  transform: translateY(-2px);
}
.rs-template-card.active-replacement .card-head {
  color: #34d399;
}

.rs-template-card.active-refund {
  background: rgba(168, 85, 247, 0.14);
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.28);
  transform: translateY(-2px);
}
.rs-template-card.active-refund .card-head {
  color: #c084fc;
}

.rs-template-card.active-renewal {
  background: rgba(0, 240, 255, 0.14);
  border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.28);
  transform: translateY(-2px);
}
.rs-template-card.active-renewal .card-head {
  color: #00f0ff;
}

/* Quick Product Preset Chips */
.rs-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-chip {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.rs-chip:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: #00f0ff;
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.rs-chip.is-active {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00f0ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}

/* Form Groups & Inputs */
.rs-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.rs-form-label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Premium Icon Input Wrap */
.rs-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.rs-input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.82;
  z-index: 3;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.rs-input-icon-wrap:focus-within .rs-input-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.55));
}

/* Base Input Controls */
.rs-form-input,
.rs-form-select,
.rs-form-textarea {
  background: rgba(8, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  height: 42px;
  padding: 10px 14px;
  color: #f1f5f9;
  font-size: 13.5px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
}

/* Generous Left Padding to completely prevent any icon/text overlap */
.rs-input-icon-wrap .rs-form-input {
  padding-left: 44px !important;
}

.rs-form-input:hover,
.rs-form-select:hover,
.rs-form-textarea:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(10, 18, 34, 0.92);
}

.rs-form-input:focus,
.rs-form-select:focus,
.rs-form-textarea:focus {
  outline: none;
  border-color: #00f0ff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.28), inset 0 1px 2px rgba(0, 0, 0, 0.35);
  background: rgba(11, 20, 38, 0.98);
  color: #ffffff;
}

.rs-form-input::placeholder {
  color: #475569;
  font-weight: 500;
}

/* Typography Helpers inside Studio Inputs */
.rs-form-input.font-mono {
  font-family: 'JetBrains Mono', monospace, ui-monospace, Menlo, Consolas;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.rs-form-input.font-bold {
  font-weight: 700;
}

.rs-form-input.text-glow-green {
  color: #10b981;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.rs-form-input.text-glow-amber {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.rs-form-input.text-glow-cyan,
.rs-form-input.text-cyan {
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.rs-form-input.text-glow-purple {
  color: #c084fc;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.35);
}

.rs-input-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rs-input-action-group .rs-form-input {
  flex: 1;
}

.rs-btn-micro {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.rs-btn-micro:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  transform: scale(1.04);
}

.rs-btn-micro.is-copied {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #10b981;
}

.rs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Quick Horizon Pills */
.rs-horizon-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.rs-horizon-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-right: 4px;
}

.rs-horizon-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rs-horizon-pill:hover {
  border-color: #00f0ff;
  color: #ffffff;
  background: rgba(0, 240, 255, 0.1);
}

.rs-horizon-pill.is-active {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

/* Right Live Preview Panel */
.rs-panel-right {
  background: #050811;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  position: relative;
}

.rs-preview-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rs-vp-segmented {
  display: flex;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rs-vp-segmented::-webkit-scrollbar {
  display: none;
}

.rs-vp-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

.rs-vp-btn:hover:not(.is-active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.rs-vp-btn.is-active {
  background: rgba(0, 240, 255, 0.18);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.rs-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.rs-btn-quiet:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

/* Subject Bar Preview */
.rs-subject-preview-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.rs-subject-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  white-space: nowrap;
}

.rs-subject-bar {
  flex: 1;
  font-size: 12.5px;
  font-family: var(--mono, monospace);
  color: #38bdf8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Email Sandbox Wrapper */
.rs-email-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: #0c1322;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 580px;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-email-wrap.mode-mobile {
  width: 100%;
  max-width: min(390px, 100%);
  border-radius: 34px;
  border: 4px solid #1e293b;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
  box-sizing: border-box;
}

.rs-email-frame-bar {
  background: #090e1a;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.rs-frame-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.rs-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot-close { background: #ef4444; }
.dot-min { background: #f59e0b; }
.dot-max { background: #10b981; }

.rs-frame-address {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.rs-address-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rs-frame-live-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
  padding: 2px 7px;
  letter-spacing: 0.06em;
}

.rs-email-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #070b14;
}

/* WhatsApp Phone Simulator */
.rs-wa-phone {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #111b21;
  border-radius: 36px;
  border: 5px solid #233138;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  display: none;
  flex-direction: column;
  height: 580px;
  position: relative;
}

.rs-phone-notch {
  width: 110px;
  height: 16px;
  background: #233138;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.rs-phone-status-bar {
  padding: 8px 20px 4px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #8696a0;
  background: #1f2c34;
  z-index: 4;
}

.rs-phone-icons {
  display: flex;
  gap: 6px;
}

.rs-wa-header {
  background: #202c33;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rs-wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #00f0ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #070b14;
  font-size: 15px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.rs-wa-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-wa-header-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #e9edef;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rs-wa-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00a884;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
}

.rs-wa-header-sub {
  font-size: 11px;
  color: #8696a0;
}

.rs-wa-chat-area {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0b141a;
  background-image: radial-gradient(#1f2c34 1px, transparent 1px);
  background-size: 20px 20px;
  scroll-behavior: smooth;
}

.rs-wa-bubble {
  background: #202c33;
  color: #e9edef;
  padding: 12px 14px;
  border-radius: 14px;
  border-top-left-radius: 2px;
  max-width: 92%;
  font-size: 13px;
  line-height: 1.55;
  align-self: flex-start;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}

.rs-wa-bubble.is-incoming {
  background: #005c4b;
  color: #e9edef;
  border-top-left-radius: 14px;
  border-top-right-radius: 2px;
  align-self: flex-end;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  animation: rsBubblePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rsBubblePop {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.rs-wa-bubble a {
  color: #38bdf8;
  text-decoration: underline;
}

.rs-wa-bubble strong {
  color: #ffffff;
}

.rs-wa-bubble code {
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--mono, monospace);
  color: #00f0ff;
  font-size: 12px;
}

/* Simulated Customer Replies Tray */
.rs-wa-quick-tray {
  background: #1f2c34;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rs-tray-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: #8696a0;
  width: 100%;
  margin-bottom: 2px;
}

.rs-tray-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #e9edef;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rs-tray-chip:hover {
  background: rgba(0, 168, 132, 0.3);
  border-color: #00a884;
  color: #ffffff;
  transform: translateY(-1px);
}

.rs-tray-chip-reset {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  margin-left: auto;
}

/* In-App HUD Simulator */
.rs-hud-wrap {
  width: 100%;
  max-width: 620px;
  margin: 20px auto 0;
  display: none;
  flex-direction: column;
  align-items: center;
}

.rs-hud-deck-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 20, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 240, 255, 0.18);
  backdrop-filter: blur(20px);
  animation: rsCardSlideDown 0.3s ease;
}

.rs-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.rs-hud-badge {
  background: rgba(0, 240, 255, 0.18);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.rs-hud-time {
  font-size: 11px;
  color: #64748b;
}

.rs-hud-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.rs-hud-body {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.rs-hud-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rs-hud-cta-primary {
  background: linear-gradient(135deg, #00f0ff, #38bdf8);
  color: #070b14;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  transition: all 0.2s ease;
}

.rs-hud-cta-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.55);
}

.rs-hud-cta-secondary {
  font-size: 12.5px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.2s ease;
}

.rs-hud-cta-secondary:hover {
  color: #ffffff;
}

/* Bottom Action Dock */
.rs-bottom-bar {
  padding: 16px 28px;
  background: rgba(13, 20, 36, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  z-index: 10;
}

.rs-bottom-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rs-dock-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
}

.rs-channel-bar {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}

.rs-channel-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.rs-channel-btn:hover:not(.is-active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.rs-channel-btn.is-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(0, 240, 255, 0.25));
  color: #ffffff;
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.rs-dock-telemetry {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.rs-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.rs-send-btn {
  background: linear-gradient(135deg, #10b981 0%, #00f0ff 100%);
  color: #070b14;
  font-weight: 800;
  font-size: 14px;
  padding: 11px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
  animation: rsSendPulse 3s infinite ease-in-out;
  font-family: inherit;
}

.rs-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.6);
}

.rs-send-btn:active {
  transform: translateY(0);
}

.rs-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  animation: none;
}

@keyframes rsSendPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 32px rgba(0, 240, 255, 0.6);
  }
}

/* Toast Floating Notification */
.rs-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(0, 240, 255, 0.96));
  color: #070b14;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13.5px;
  display: none;
  align-items: center;
  gap: 9px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 240, 255, 0.4);
  z-index: 100000;
  animation: rsToastFadeIn 0.25s ease forwards;
}

.rs-toast.is-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(245, 158, 11, 0.96));
  color: #ffffff;
}

@keyframes rsToastFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fleet Action Dropdown Item for Contact & Resolve */
.action-dropdown-item.item-contact-resolve {
  color: #00f0ff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 9px;
  transition: all 0.2s ease;
}

.action-dropdown-item.item-contact-resolve:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.14), rgba(16, 185, 129, 0.14));
  color: #ffffff;
}

.action-icon-badge.badge-contact-resolve {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.action-dropdown-item.item-contact-resolve:hover .badge-contact-resolve {
  background: rgba(0, 240, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
  transform: scale(1.06);
}

/* 3-Column Contact Intelligence Row */
.rs-form-row-3col {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .rs-form-row-3col {
    grid-template-columns: 1fr;
  }
}

/* Telegram Bot Viewport Simulator */
.rs-tg-wrap {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.rs-tg-screen {
  max-width: 490px;
  width: 100%;
  background: #0e1621;
  border: 1px solid rgba(36, 129, 204, 0.35);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(36, 129, 204, 0.18);
  display: flex;
  flex-direction: column;
}

.rs-tg-topbar {
  background: #17212b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rs-tg-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
}

.rs-tg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2481cc 0%, #00aaff 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 0 14px rgba(36, 129, 204, 0.5);
  flex-shrink: 0;
}

.rs-tg-meta {
  display: flex;
  flex-direction: column;
}

.rs-tg-name {
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-tg-bot-tag {
  background: rgba(36, 129, 204, 0.28);
  color: #6ab3f3;
  border: 1px solid rgba(36, 129, 204, 0.45);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
}

.rs-tg-status {
  font-size: 11.5px;
  color: #6ab3f3;
}

.rs-tg-badge-active {
  font-size: 10px;
  color: #10b981;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.rs-tg-chat-area {
  padding: 18px 16px;
  min-height: 380px;
  max-height: 520px;
  overflow-y: auto;
  background: #0e1621;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-tg-bubble {
  background: #182533;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 14px 4px;
  padding: 14px 16px;
  color: #f1f5f9;
  font-size: 13.5px;
  line-height: 1.62;
  max-width: 92%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  word-break: break-word;
}

.rs-tg-bubble.is-outgoing {
  align-self: flex-start;
}

.rs-tg-bubble.is-customer-reply {
  align-self: flex-end;
  background: #2b5278;
  border-color: rgba(36, 129, 204, 0.4);
  border-radius: 14px 14px 4px 14px;
}

.rs-tg-bubble code {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #38bdf8;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12.5px;
  user-select: all;
  display: inline-block;
  margin: 1px 0;
}

.rs-tg-bubble b,
.rs-tg-bubble strong {
  color: #ffffff;
}

.rs-tg-bubble a {
  color: #6ab3f3;
  text-decoration: underline;
  font-weight: 700;
}

.rs-tg-time {
  font-size: 11px;
  color: #64748b;
  text-align: right;
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.rs-tg-ticks {
  color: #2481cc;
  font-weight: 800;
}

.rs-tg-quick-tray {
  background: #17212b;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .resolution-studio-dialog {
    width: 98vw;
    height: 96vh;
    border-radius: 16px;
  }
  .rs-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .rs-panel-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .rs-email-wrap,
  .rs-wa-phone,
  .rs-tg-screen {
    height: 480px;
  }
  .rs-bottom-bar {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .resolution-studio-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .rs-header {
    padding: 12px 16px;
    gap: 10px;
  }
  .rs-brand {
    font-size: 15px;
  }
  .rs-brand-telemetry {
    display: none;
  }
  .rs-header-kbd-hint {
    display: none;
  }
  .rs-panel-left,
  .rs-panel-right {
    padding: 14px 12px;
  }
  .rs-preview-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .rs-preview-actions {
    justify-content: flex-end;
  }
  .rs-email-wrap,
  .rs-wa-phone,
  .rs-tg-screen {
    height: 460px;
    max-height: 65vh;
  }
  .rs-bottom-bar {
    padding: 12px 14px;
  }
  .rs-dispatch-summary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .rs-template-grid {
    grid-template-columns: 1fr;
  }
  .rs-email-wrap.mode-mobile {
    border-radius: 24px;
    border-width: 3px;
  }
  .rs-send-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OMNICHANNEL RESOLUTION OUTREACH DOCK (IN-BOT, EMAIL & WHATSAPP)
   ═══════════════════════════════════════════════════════════════ */
.wc-outreach-dock {
  background: linear-gradient(135deg, rgba(14, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wc-outreach-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wc-outreach-col-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wc-outreach-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wc-outreach-note {
  font-size: 0.68rem;
  color: #94a3b8;
}

.wc-outreach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .wc-outreach-grid {
    grid-template-columns: 1fr;
  }
}

.wc-outreach-channel-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.wc-outreach-channel-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.wc-outreach-channel-card.is-active {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.75) 100%);
}

.wc-channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.wc-channel-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wc-channel-icon {
  font-size: 0.85rem;
}

.wc-channel-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: #e2e8f0;
}

.tag-guaranteed {
  font-size: 0.64rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}

.wc-channel-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 6px;
  margin-bottom: 0;
}

.wc-channel-toggle-label,
.wc-wa-check-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.wc-toggle-text {
  font-size: 0.68rem;
  font-weight: 600;
  color: #38bdf8;
}

.wc-wa-check-text {
  font-size: 0.68rem;
  font-weight: 600;
  color: #25d366;
}

.wc-micro-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 3px;
  display: block;
}

.form-input-xs {
  padding: 3px 7px;
  font-size: 0.72rem;
  height: 26px;
}

.btn-wa-direct {
  background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-wa-direct:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.45);
}

.btn-studio-launch {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.22) 100%);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-studio-launch:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.35) 0%, rgba(59, 130, 246, 0.4) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.btn-studio-preview-sub {
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.28);
  font-size: 0.70rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-studio-preview-sub:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.wc-phone-input-box,
.wc-email-input-box {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════
   CYBER-TABS-SHELL: ULTRA-PREMIUM INTERACTIVE TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.cyber-tabs-shell {
  margin: 24px 0 28px 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(10, 15, 29, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Header Bar: Categories + Jump Dropdown */
.cyber-tabs-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.tab-category-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tab-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
  user-select: none;
}

.tab-cat-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.tab-cat-pill.is-active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}

.tab-cat-pill .cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.tab-cat-pill.is-active .cat-count {
  background: rgba(0, 240, 255, 0.25);
  color: #ffffff;
}

/* Quick Jump Dropdown */
.tab-quick-jump {
  margin-left: auto;
}

.jump-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jump-select-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 2;
  color: #00f0ff;
}

.jump-select-chevron {
  position: absolute;
  right: 10px;
  font-size: 0.75rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 2;
}

.customer-tab-jump-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 28px 6px 30px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  min-width: 180px;
}

.customer-tab-jump-select:hover,
.customer-tab-jump-select:focus {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  background: rgba(15, 23, 42, 0.95);
}

.customer-tab-jump-select option {
  background: #0d1321;
  color: #f1f5f9;
}

/* Tab Rail Container with Scroll Arrows & Mask */
.customer-tab-rail-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Navigation Arrow Buttons */
.tab-nav-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 4;
}

.tab-nav-arrow:hover:not(.is-disabled) {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  transform: scale(1.05);
}

.tab-nav-arrow.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.tab-nav-prev {
  margin-right: 6px;
}

.tab-nav-next {
  margin-left: 6px;
}

/* Left & Right Gradient Scroll Masks */
.tab-rail-scroll-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.25s ease;
}

.tab-rail-mask-left {
  left: 38px;
  background: linear-gradient(to right, rgba(13, 19, 33, 0.95), transparent);
  opacity: 0;
}

.tab-rail-mask-right {
  right: 38px;
  background: linear-gradient(to left, rgba(13, 19, 33, 0.95), transparent);
  opacity: 1;
}

.customer-tab-rail-container.can-scroll-left .tab-rail-mask-left {
  opacity: 1;
}

.customer-tab-rail-container.at-scroll-end .tab-rail-mask-right {
  opacity: 0;
}

/* The Scrollable Tab Rail: STRICT NO NATIVE SCROLLBAR */
.cyber-tabs-shell .customer-tab-nav,
.customer-tabs-wrapper .customer-tab-nav,
.customer-tab-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  width: 100% !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  border-bottom: none !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  cursor: grab;
  user-select: none;
}

.cyber-tabs-shell .customer-tab-nav:active,
.customer-tab-nav.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

/* Chrome, Safari, Edge Scrollbar Elimination */
.cyber-tabs-shell .customer-tab-nav::-webkit-scrollbar,
.customer-tabs-wrapper .customer-tab-nav::-webkit-scrollbar,
.customer-tab-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Tab Buttons in Cyber Shell */
.cyber-tabs-shell .customer-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}

.cyber-tabs-shell .customer-tab-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.cyber-tabs-shell .customer-tab-btn.is-active,
.cyber-tabs-shell .customer-tab-btn.active {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.15) 0%, rgba(0, 240, 255, 0.03) 100%) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.18), inset 0 1px 0 rgba(0, 240, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

.cyber-tabs-shell .customer-tab-btn.is-active::after,
.cyber-tabs-shell .customer-tab-btn.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 20% !important;
  right: 20% !important;
  height: 2px !important;
  background: #00f0ff !important;
  border-radius: 2px !important;
  box-shadow: 0 0 8px #00f0ff !important;
}

.cyber-tabs-shell .customer-tab-btn.tab-filtered-out {
  display: none !important;
}

/* Tab Icon */
.tab-btn-icon {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.customer-tab-btn:hover .tab-btn-icon {
  transform: scale(1.15);
}

.tab-btn-title {
  display: inline-block;
  line-height: 1.2;
}

/* Micro Badges for Tab Counters */
.tab-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
  transition: all 0.2s ease;
}

.tab-pill-badge.badge-zero {
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.customer-tab-btn:hover .tab-pill-badge.badge-zero {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
}

.customer-tab-btn.is-active .tab-pill-badge.badge-zero {
  color: rgba(0, 240, 255, 0.7);
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.2);
}

.tab-pill-badge.badge-glow {
  background: rgba(0, 240, 255, 0.18);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.tab-pill-badge.badge-warn {
  background: rgba(255, 184, 0, 0.2);
  color: #ffb800;
  border: 1px solid rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.35);
  animation: pulseBadge 2s infinite ease-in-out;
}

@keyframes pulseBadge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 184, 0, 0.3); }
  50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(255, 184, 0, 0.5); }
}

@media (max-width: 860px) {
  .cyber-tabs-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tab-category-filters {
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    flex-wrap: nowrap;
  }
  .tab-category-filters::-webkit-scrollbar {
    display: none;
  }
  .tab-quick-jump {
    width: 100%;
    margin-left: 0;
  }
  .jump-select-wrapper {
    width: 100%;
  }
  .customer-tab-jump-select {
    width: 100%;
  }
}

/* ==========================================================================
   ADMIN NOTIFICATIONS & OPERATIONAL INTELLIGENCE COCKPIT
   ========================================================================== */

.header-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-notif-bell-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}

.notif-bell-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.header-notif-bell-btn:hover .notif-bell-icon {
  transform: scale(1.1) rotate(10deg);
}

.notif-badge-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3366;
  border: 2px solid #0b101b;
  box-shadow: 0 0 10px #ff3366, 0 0 18px rgba(255, 51, 102, 0.8);
  animation: notifDotPulse 1.8s infinite ease-in-out;
  pointer-events: none;
}

@keyframes notifDotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px #ff3366;
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 16px #ff3366, 0 0 22px rgba(255, 51, 102, 0.9);
  }
}

.notif-badge-count {
  position: absolute;
  top: -4px;
  right: -6px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 800;
  font-family: var(--mono, monospace);
  background: #ff3366;
  color: #ffffff;
  border-radius: 10px;
  border: 2px solid #070b14;
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.7);
  pointer-events: none;
}

/* Floating Dropdown Popover */
.header-notif-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 390px;
  max-width: 92vw;
  background: rgba(13, 19, 33, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 240, 255, 0.15);
  z-index: 1000;
  overflow: hidden;
  animation: notifPopoverFade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-notif-popover::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

@keyframes notifPopoverFade {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notif-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-popover-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-popover-icon {
  font-size: 1rem;
  color: #00f0ff;
}

.notif-popover-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.notif-popover-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 51, 102, 0.2);
  color: #ff3366;
  border: 1px solid rgba(255, 51, 102, 0.4);
}

.notif-mark-read-action {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.18s ease;
}

.notif-mark-read-action:hover {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
}

.notif-mark-read-action.is-disabled,
.notif-mark-read-action:disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}

.notif-popover-body {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.3) transparent;
}

.notif-popover-empty {
  padding: 32px 16px;
  text-align: center;
  color: #94a3b8;
}

.notif-popover-empty .empty-sparkle {
  font-size: 1.8rem;
  margin-bottom: 8px;
  display: block;
}

.notif-popover-empty p {
  margin: 0;
  font-size: 0.85rem;
}

.notif-popover-stream {
  display: flex;
  flex-direction: column;
}

.popover-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.18s ease;
  position: relative;
  cursor: pointer;
}

.popover-item:hover {
  background: rgba(0, 240, 255, 0.07);
}

.popover-item.is-unread {
  background: rgba(0, 240, 255, 0.04);
}

.popover-item.is-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
}

.popover-item.sev-critical.is-unread::before {
  background: #ff3366;
  box-shadow: 0 0 8px #ff3366;
}

.popover-item.sev-warning.is-unread::before {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.popover-item.is-read {
  opacity: 0.6;
  background: transparent;
}

.popover-item.is-read:hover {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.03);
}

.popover-item.is-read .popover-item-title {
  color: #94a3b8;
  font-weight: 500;
}

.popover-read-status {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-right: 4px;
  vertical-align: middle;
}

.popover-item-icon {
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 2px;
  flex-shrink: 0;
}

.popover-item-body {
  flex: 1;
  min-width: 0;
}

.popover-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.popover-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-item-time {
  font-size: 0.7rem;
  color: #64748b;
  flex-shrink: 0;
}

.popover-item-msg {
  font-size: 0.77rem;
  color: #94a3b8;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popover-item-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.popover-view-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  text-decoration: none;
  transition: all 0.18s ease;
}

.popover-view-btn:hover {
  background: #00f0ff;
  color: #070b14;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.notif-popover-foot {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.notif-view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-view-all-btn:hover {
  background: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 100%);
  color: #070b14;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.notif-foot-arrow {
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.notif-view-all-btn:hover .notif-foot-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   COCKPIT PAGE LAYOUT & KPI GRID
   ========================================================================== */

.notif-cockpit-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 6px;
}

.head-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.head-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00f0ff;
}

.pulse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  animation: notifDotPulse 1.6s infinite ease-in-out;
}

.head-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.head-icon-spark {
  color: #00f0ff;
}

.notif-cockpit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.notif-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.notif-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 240, 255, 0.15);
}

.notif-kpi-card.is-active {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.notif-kpi-card.kpi-unread.has-unread {
  border-color: rgba(255, 51, 102, 0.4);
  background: rgba(255, 51, 102, 0.08);
}

.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.kpi-content {
  display: flex;
  flex-direction: column;
}

.kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono, monospace);
  color: #f8fafc;
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* Category Navigation Tabs */
.notif-category-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.notif-category-tabs::-webkit-scrollbar {
  display: none;
}

.notif-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.notif-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.notif-tab.is-active {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
}

.tab-count {
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--mono, monospace);
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.notif-tab.is-active .tab-count {
  background: rgba(0, 240, 255, 0.25);
  color: #00f0ff;
}

/* Filter & Search Toolbar */
.notif-filter-card {
  padding: 16px 20px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.notif-filter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.filter-row-primary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search-glyph {
  position: absolute;
  left: 12px;
  font-size: 0.95rem;
  color: #64748b;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 9px 36px 9px 38px;
  border-radius: 10px;
  background: rgba(7, 11, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s ease;
}

.search-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
  cursor: pointer;
}

.search-clear-btn:hover {
  color: #ff3366;
}

.filter-row-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.18s ease;
}

.pill-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.pill-link.is-active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pill-dot.red { background: #ff3366; box-shadow: 0 0 6px #ff3366; }
.pill-dot.amber { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.pill-dot.cyan { background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }

/* Stream Header & Batch Actions */
.notif-stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.stream-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
}

.selection-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.stream-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

/* Notification Stream Cards */
.notif-feed-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notif-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-item-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 240, 255, 0.1);
  transform: translateY(-1px);
}

.notif-item-card.is-unread {
  background: rgba(13, 23, 45, 0.85);
  border-color: rgba(0, 240, 255, 0.25);
}

.notif-card-severity-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.severity-critical .notif-card-severity-bar {
  background: #ff3366;
  box-shadow: 0 0 10px #ff3366;
}

.severity-warning .notif-card-severity-bar {
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}

.severity-info .notif-card-severity-bar {
  background: #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
}

.severity-success .notif-card-severity-bar {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.notif-card-select {
  flex-shrink: 0;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  accent-color: #00f0ff;
  cursor: pointer;
}

.notif-card-icon-col {
  flex-shrink: 0;
}

.notif-category-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-card-content {
  flex: 1;
  min-width: 0;
}

.notif-card-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge-category {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.badge-severity {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.sev-critical { background: rgba(255, 51, 102, 0.15); color: #ff3366; }
.sev-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.sev-info { background: rgba(0, 240, 255, 0.15); color: #00f0ff; }

.badge-status-unread {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #00f0ff;
}

.unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  animation: notifDotPulse 1.6s infinite ease-in-out;
}

.notif-time-ago {
  font-size: 0.72rem;
  color: #64748b;
  margin-left: auto;
}

.notif-ref-tag {
  font-size: 0.68rem;
  font-family: var(--mono, monospace);
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #64748b;
}

.notif-card-title {
  margin: 0 0 3px 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}

.notif-card-message {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-action-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-action-view:hover {
  background: #00f0ff;
  color: #070b14;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.view-arrow {
  font-size: 0.9rem;
  transition: transform 0.18s ease;
}

.btn-action-view:hover .view-arrow {
  transform: translateX(3px);
}

.notif-card-more-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-card-icon:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.3);
  color: #00f0ff;
}

.btn-card-dismiss:hover {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.3);
  color: #ff3366;
}

/* Empty State Card */
.notif-empty-state-card {
  padding: 60px 24px;
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.empty-glow-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.empty-icon-spark {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 6px 0;
}

.empty-desc {
  font-size: 0.9rem;
  color: #94a3b8;
  max-width: 440px;
  margin: 0 auto 20px auto;
}

.empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Pagination */
.notif-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.pagination-info {
  font-size: 0.8rem;
  color: #64748b;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-current-chip {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--mono, monospace);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .notif-item-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .notif-card-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }
  .btn-action-view {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   Morning Operator Dashboard & Command Center Styles
   ========================================================================== */

.morning-briefing-hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-md, 12px);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 240, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.morning-briefing-hero::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.morning-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.morning-greeting-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.morning-icon {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));
}

.morning-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #f8fafc 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.morning-subtitle {
  margin: 0.25rem 0 0 0;
  color: #94a3b8;
  font-size: 0.88rem;
}

.morning-subtitle strong {
  color: #e2e8f0;
}

.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-ring 2s infinite ease-in-out;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #10b981; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.morning-triage-bar {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.morning-triage-bar.has-backlog {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.morning-triage-bar.is-clear {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.triage-status-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.triage-status-text {
  flex: 1;
  font-size: 0.92rem;
  color: #f1f5f9;
}

.triage-status-text strong {
  display: block;
  font-size: 0.98rem;
  color: #fff;
}

.triage-breakdown {
  display: block;
  font-size: 0.82rem;
  color: #cbd5e1;
  margin-top: 3px;
}

.morning-launcher-bar {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.morning-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1.2;
}

.morning-quick-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.mq-icon {
  font-size: 1rem;
}

.mq-badge {
  background: #0284c7;
  color: #fff;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 9999px;
  font-weight: 700;
}

.mq-badge-warn {
  background: #dc2626;
}

/* Priority Inbox Hub */
.morning-inbox-section {
  border-color: rgba(0, 240, 255, 0.2);
}

.morning-inbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 1.25rem;
}

.inbox-morning-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.inbox-morning-card:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.inbox-morning-card.has-unread {
  border-left: 3px solid #00f0ff;
  background: rgba(15, 23, 42, 0.8);
}

.imc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.imc-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.imc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.imc-name {
  color: #f8fafc;
  font-size: 0.88rem;
  display: block;
}

.imc-handle {
  display: block;
  color: #94a3b8;
  font-size: 0.75rem;
}

.imc-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.badge-unread {
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.badge-waiting {
  background: #f59e0b;
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.badge-open {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
}

.imc-time {
  color: #64748b;
  font-size: 0.72rem;
}

.imc-subject {
  color: #38bdf8;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.imc-order-tag {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  color: #94a3b8;
}

.imc-snippet {
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.imc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.morning-clean-state {
  padding: 3rem 1rem;
  text-align: center;
  color: #94a3b8;
}

.clean-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Morning Triage Grid */
.morning-triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.triage-card {
  display: flex;
  flex-direction: column;
}

.triage-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}

.triage-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.triage-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.tli-main {
  flex: 1;
  min-width: 0;
}

.tli-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tli-link {
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.tli-link:hover {
  text-decoration: underline;
}

.tli-title {
  margin: 2px 0;
  font-size: 0.82rem;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tli-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

.badge-warn-sm {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}

.badge-pending-sm {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}

.triage-empty,
.retention-clean {
  padding: 2rem 1rem;
  text-align: center;
  color: #94a3b8;
}

.badge-tag-danger {
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge-tag-warning {
  background: #f59e0b;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge-tag-info {
  background: #0284c7;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge-tag-active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.system-integrity-details {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 0.85rem 1.25rem;
  background: rgba(15, 23, 42, 0.4);
}

.system-integrity-summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #94a3b8;
  outline: none;
}

.system-integrity-summary:hover {
  color: #f1f5f9;
}

.system-integrity-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Invite Contacts & Prospective Leads Management (.contacts-*)
   ========================================================================== */

/* ─── Hero Deck Banner ─── */
.contacts-hero-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(12, 19, 34, 0.98) 100%);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 242, 254, 0.08);
  overflow: hidden;
}

.contacts-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f2fe 0%, #4facfe 50%, #8b5cf6 100%);
}

.contacts-hero-content {
  flex: 1;
  min-width: 280px;
}

.contacts-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: #00f2fe;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.contacts-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 8px #00f2fe;
  animation: pulseGlow 1.8s infinite ease-in-out;
}

.contacts-hero-title {
  margin: 0 0 8px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.contacts-hero-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.55;
  max-width: 680px;
}

.contacts-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contacts-hero-btn {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-hero-btn:hover {
  transform: translateY(-1px);
}

/* ─── KPI Metric Cards Deck ─── */
.contacts-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .contacts-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .contacts-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .contacts-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.contacts-stat-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.contacts-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.contacts-stat-card:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.contacts-stat-card:hover::before {
  opacity: 1;
}

.contacts-stat-active {
  border-color: rgba(0, 242, 254, 0.5) !important;
  background: rgba(15, 23, 42, 0.95) !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.18);
}

.contacts-stat-active::before {
  opacity: 1 !important;
}

.contacts-card-all::before { background: #00f2fe; }
.contacts-card-left::before { background: #38bdf8; }
.contacts-card-new::before { background: #f59e0b; }
.contacts-card-invited::before { background: #8b5cf6; }
.contacts-card-signed::before { background: #10b981; }
.contacts-card-opted::before { background: #64748b; }

.contacts-stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.contacts-stat-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #94a3b8;
}

.contacts-stat-icon {
  font-size: 1.15rem;
}

.contacts-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 4px 0 6px;
  letter-spacing: -0.5px;
}

.contacts-card-all .contacts-stat-num { color: #00f2fe; }
.contacts-card-left .contacts-stat-num { color: #38bdf8; }
.contacts-card-new .contacts-stat-num { color: #fbbf24; }
.contacts-card-invited .contacts-stat-num { color: #c084fc; }
.contacts-card-signed .contacts-stat-num { color: #34d399; }
.contacts-card-opted .contacts-stat-num { color: #94a3b8; }

.contacts-stat-sub {
  font-size: 0.78rem;
  color: #64748b;
}

/* ─── Interactive Ingestion Hub (Tabbed) ─── */
.contacts-ingestion-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.contacts-tab-header {
  display: flex;
  background: rgba(8, 13, 22, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  gap: 6px;
}

.contacts-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px 8px 0 0;
}

.contacts-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.03);
}

.contacts-tab-active {
  color: #00f2fe !important;
  border-bottom-color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.06) !important;
}

.contacts-tab-panel {
  padding: 24px;
}

/* ─── Drag & Drop Dropzone ─── */
.contacts-dropzone {
  position: relative;
  border: 2px dashed rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  background: rgba(8, 13, 22, 0.5);
  padding: 32px 20px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  overflow: hidden;
}

.contacts-dropzone:hover,
.contacts-dropzone.contacts-dragover {
  border-color: #00f2fe;
  background: rgba(0, 242, 254, 0.05);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.15);
}

.contacts-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

.contacts-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.contacts-dropzone-icon {
  font-size: 2.4rem;
  margin-bottom: 2px;
}

.contacts-dropzone-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.contacts-accent-link {
  color: #00f2fe;
  text-decoration: underline;
}

.contacts-dropzone-hint {
  font-size: 0.82rem;
  color: #64748b;
  max-width: 500px;
}

.contacts-dropzone-hint code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: #cbd5e1;
}

/* Selected File Preview Card */
.contacts-file-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 242, 254, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.contacts-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contacts-file-icon {
  font-size: 1.8rem;
}

.contacts-file-meta {
  text-align: left;
}

.contacts-file-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.contacts-file-size {
  font-size: 0.78rem;
  color: #00f2fe;
  font-family: var(--mono, monospace);
}

.contacts-clear-file-btn {
  z-index: 10;
  position: relative;
}

.contacts-ingestion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.contacts-ingestion-help {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #94a3b8;
}

.contacts-help-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 242, 254, 0.15);
  color: #00f2fe;
  font-size: 0.7rem;
  font-weight: 800;
}

.contacts-submit-btn {
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
}

/* ─── Single Add Form Grid ─── */
.contacts-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 700px) {
  .contacts-single-grid {
    grid-template-columns: 1fr;
  }
}

.contacts-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contacts-form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
}

.contacts-input {
  width: 100%;
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(8, 13, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.9rem;
}

.contacts-input:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
}

.contacts-input-hint {
  font-size: 0.75rem;
  color: #64748b;
}

.contacts-required {
  color: #f43f5e;
}

/* ─── Premium Multi-Tier Filter & Search Command Deck ─── */
.contacts-toolbar-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tier 1: Status Filter Pills */
.contacts-filter-pills-row {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.contacts-filter-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contacts-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.contacts-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
}

.contacts-pill-active {
  background: rgba(0, 242, 254, 0.14) !important;
  border-color: rgba(0, 242, 254, 0.5) !important;
  color: #00f2fe !important;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.16);
}

.contacts-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Tier 2: Controls Form & Grid */
.contacts-controls-form {
  margin: 0;
}

.contacts-controls-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.contacts-search-box {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
}

.contacts-search-icon {
  position: absolute;
  left: 14px;
  font-size: 0.95rem;
  color: #64748b;
  pointer-events: none;
}

.contacts-search-field {
  width: 100%;
  height: 44px;
  padding-left: 40px;
  padding-right: 56px;
  font-size: 0.88rem;
  border-radius: 12px;
  background: rgba(8, 13, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: all 0.2s ease;
}

.contacts-search-field:focus {
  border-color: #00f2fe;
  background: rgba(8, 13, 22, 0.95);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}

.contacts-kbd {
  position: absolute;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--mono, monospace);
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #94a3b8;
  pointer-events: none;
}

.contacts-search-clear {
  position: absolute;
  right: 36px;
  color: #64748b;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s ease;
}

.contacts-search-clear:hover {
  color: #f43f5e;
}

.contacts-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 170px;
}

.contacts-select-icon {
  position: absolute;
  left: 12px;
  font-size: 0.9rem;
  pointer-events: none;
  color: #64748b;
}

.contacts-filter-select {
  height: 44px;
  width: 100%;
  padding-left: 36px;
  padding-right: 28px;
  border-radius: 12px;
  background: rgba(8, 13, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
}

.contacts-filter-select:focus {
  border-color: #00f2fe;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.2);
}

.contacts-density-wrapper {
  min-width: 125px;
}

.contacts-controls-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.contacts-apply-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
}

.contacts-export-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Tier 3: Active Filters Summary Bar */
.contacts-active-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.contacts-active-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.contacts-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 8px #00f2fe;
}

.contacts-active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.contacts-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: #00f2fe;
  font-size: 0.78rem;
  text-decoration: none;
  transition: all 0.18s ease;
}

.contacts-active-chip strong {
  color: #ffffff;
}

.contacts-active-chip:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fb7185;
}

.contacts-chip-x {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.contacts-reset-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #fb7185;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.contacts-reset-all-btn:hover {
  background: rgba(244, 63, 94, 0.2);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
}

/* ─── Contacts Table & Modern Spacing ─── */
.contacts-table-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  margin-bottom: 32px;
}

.contacts-table-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.contacts-table-count-info {
  font-size: 0.88rem;
  color: #94a3b8;
}

.contacts-table-count-info strong {
  color: #ffffff;
}

.contacts-filtered-tag {
  color: #00f2fe;
  font-weight: 700;
  font-size: 0.8rem;
  margin-left: 4px;
}

.contacts-table-quick-hints {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748b;
}

.contacts-hint-sep {
  color: #334155;
}

.contacts-table-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(8, 13, 22, 0.55);
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.contacts-table th {
  background: rgba(15, 23, 42, 0.95);
  padding: 15px 20px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}

.contacts-th-sortable .contacts-th-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.contacts-th-sortable .contacts-th-link:hover {
  color: #00f2fe;
}

.contacts-sort-arrow {
  font-size: 0.85rem;
  color: #00f2fe;
  opacity: 0.7;
}

.contacts-table td {
  padding: 16px 20px;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  transition: background 0.15s ease;
}

.contacts-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.contacts-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.contacts-row-selected {
  background: rgba(0, 242, 254, 0.07) !important;
}

.contacts-th-cb,
.contacts-td-cb {
  width: 48px;
  text-align: center;
  padding-left: 14px;
  padding-right: 14px;
}

.contacts-header-cb,
.contacts-row-cb {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #00f2fe;
  border-radius: 4px;
}

.contacts-cell-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contacts-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.22) 0%, rgba(139, 92, 246, 0.28) 100%);
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.contacts-identity-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contacts-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contacts-email-text {
  font-weight: 700;
  color: #ffffff;
  word-break: break-all;
  font-size: 0.92rem;
}

.contacts-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  font-size: 0.82rem;
  opacity: 0.55;
  transition: all 0.15s ease;
  border-radius: 5px;
}

.contacts-copy-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.08);
}

.contacts-account-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.76rem;
}

.contacts-account-link {
  color: #34d399;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}

.contacts-account-link:hover {
  color: #6ee7b7;
  text-decoration: underline;
}

.contacts-account-joined {
  color: #64748b;
  font-size: 0.72rem;
}

.contacts-left-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.09);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 0.74rem;
  font-weight: 600;
}

.contacts-error-tag {
  display: inline-block;
  font-size: 0.72rem;
  color: #fbbf24;
  margin-top: 2px;
}

.contacts-cell-name {
  color: #cbd5e1;
  font-weight: 600;
}

/* Status Badges */
.contacts-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.contacts-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.contacts-badge-new {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.contacts-dot-new {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: pulseGlow 2s infinite ease-in-out;
}

.contacts-badge-invited {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.contacts-dot-invited {
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
}

.contacts-badge-signed_up {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.contacts-dot-signed_up {
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

.contacts-badge-opted_out {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.contacts-dot-opted_out { background: #94a3b8; }

.contacts-badge-bounced {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.contacts-dot-bounced { background: #fb7185; box-shadow: 0 0 6px #fb7185; }

.contacts-source-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
}

.contacts-cell-date {
  font-size: 0.82rem;
  color: #94a3b8;
  font-family: var(--mono, monospace);
}

.contacts-date-primary {
  display: block;
  color: #e2e8f0;
}

.contacts-date-sub {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}

/* Table Row Actions */
.contacts-th-actions {
  width: 140px;
  text-align: right;
  padding-right: 20px;
}

.contacts-cell-actions {
  text-align: right;
  padding-right: 20px;
}

.contacts-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.contacts-row-action-form {
  margin: 0;
  display: inline;
}

.contacts-row-invite-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
  transition: all 0.18s ease;
}

.contacts-row-invite-btn:hover {
  background: #00f2fe;
  color: #070b14;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.45);
  transform: translateY(-1px);
}

.contacts-row-del-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 7px;
  transition: all 0.15s ease;
}

.contacts-row-del-btn:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fb7185;
}

.contacts-invited-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #c084fc;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: default;
}

.contacts-view-customer-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #34d399;
  text-decoration: none;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.contacts-view-customer-btn:hover {
  background: #10b981;
  color: #064e3b;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* Empty State */
.contacts-empty-cell {
  padding: 68px 24px;
  text-align: center;
}

.contacts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.contacts-empty-icon {
  font-size: 3.4rem;
  margin-bottom: 4px;
}

.contacts-empty-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.contacts-empty-sub {
  font-size: 0.9rem;
  color: #64748b;
  max-width: 480px;
  line-height: 1.6;
}

.contacts-empty-reset-btn {
  margin-top: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
}

/* ─── Pagination Deck ─── */
.contacts-pagination-deck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.contacts-pagination-info {
  font-size: 0.85rem;
  color: #94a3b8;
}

.contacts-pagination-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contacts-page-num-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.contacts-page-btn-active {
  background: linear-gradient(135deg, #00f2fe 0%, #38bdf8 100%) !important;
  color: #070b14 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
}

.contacts-page-nav-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.contacts-pagination-ellipsis {
  color: #64748b;
  font-size: 0.95rem;
  padding: 0 6px;
}

/* ─── Floating Glassmorphic Bulk Action Dock ─── */
.contacts-bulk-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 90%;
  max-width: 860px;
  animation: contactsDockSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-bulk-dock.contacts-hidden {
  display: none !important;
}

@keyframes contactsDockSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.contacts-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(11, 17, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 242, 254, 0.45);
  border-radius: 18px;
  padding: 14px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 242, 254, 0.25);
}

.contacts-dock-counter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contacts-dock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #00f2fe;
  color: #070b14;
  font-size: 0.85rem;
  font-weight: 900;
  box-shadow: 0 0 12px #00f2fe;
}

.contacts-dock-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.contacts-dock-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contacts-dock-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.contacts-dock-select {
  max-width: 260px;
  font-size: 0.85rem;
  height: 40px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.contacts-dock-dispatch-btn {
  font-size: 0.88rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.4);
}

.contacts-dock-delete-btn {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
}

.contacts-dock-preview-btn {
  font-size: 0.85rem;
  padding: 9px 14px;
  border-radius: 10px;
}

.contacts-dock-cancel-btn {
  font-size: 0.85rem;
  padding: 9px 14px;
  border-radius: 10px;
}

/* ─── Toast Notification ─── */
.contacts-toast {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(16, 185, 129, 0.2);
  animation: contactsToastIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-toast.contacts-hidden {
  display: none !important;
}

.contacts-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  color: #064e3b;
  font-size: 0.72rem;
  font-weight: 900;
}

@keyframes contactsToastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Outreach Conversion Funnel Bar ─── */
.contacts-funnel-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

.contacts-funnel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.contacts-funnel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #f1f5f9;
}

.contacts-funnel-icon {
  font-size: 1.15rem;
}

.contacts-funnel-rate {
  font-size: 0.85rem;
  color: #94a3b8;
}

.contacts-funnel-rate strong {
  color: #34d399;
  font-weight: 800;
}

.contacts-funnel-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 14px;
  gap: 2px;
}

.contacts-funnel-seg {
  height: 100%;
  transition: width 0.3s ease, transform 0.15s ease, filter 0.15s ease;
  cursor: pointer;
}

.contacts-funnel-seg:hover {
  transform: scaleY(1.3);
  filter: brightness(1.25);
}

.contacts-funnel-new { background: #fbbf24; }
.contacts-funnel-invited { background: #c084fc; }
.contacts-funnel-signed { background: #34d399; }
.contacts-funnel-opted { background: #64748b; }

.contacts-funnel-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #94a3b8;
}

.contacts-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.contacts-legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #00f2fe;
}

.contacts-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.contacts-pill-reset {
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.08) !important;
}

.contacts-pill-reset:hover {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #ffffff !important;
}

/* ─── Real-Time CSV Ingestion Live Preview ─── */
.contacts-live-preview {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  text-align: left;
}

.contacts-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 8px;
}

.contacts-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contacts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-family: var(--mono, monospace);
}

/* ─── Template Preview Dialog Modal & Device Switcher ─── */
.contacts-preview-dialog {
  max-width: 760px;
  width: 95%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 242, 254, 0.35);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 242, 254, 0.2);
}

.contacts-preview-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contacts-device-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px;
}

.contacts-device-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contacts-device-btn:hover {
  color: #ffffff;
}

.contacts-device-btn.contacts-device-active {
  background: #00f2fe;
  color: #070b14;
  font-weight: 800;
}

.contacts-preview-meta-bar {
  background: #090e1c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contacts-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.contacts-meta-label {
  color: #64748b;
  font-weight: 700;
  min-width: 68px;
}

.contacts-meta-val {
  color: #cbd5e1;
  font-weight: 500;
}

.contacts-dialog-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.contacts-dialog-sub {
  font-size: 0.75rem;
  color: #00f2fe;
}

.contacts-preview-body {
  padding: 0;
  max-height: 75vh;
  overflow-y: auto;
  background: #070b14;
}

.contacts-preview-frame-wrap {
  padding: 20px;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s ease;
  max-width: 620px;
  margin: 0 auto;
}

.contacts-preview-frame-wrap.contacts-view-mobile {
  max-width: 375px;
  margin: 20px auto;
  border: 12px solid #1e293b;
  border-radius: 40px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9);
  background: #060911;
  overflow: hidden;
  position: relative;
}

.contacts-preview-frame-wrap.contacts-view-mobile::before {
  content: "";
  display: block;
  width: 100px;
  height: 18px;
  background: #1e293b;
  border-radius: 0 0 10px 10px;
  margin: 0 auto 10px;
}

.contacts-preview-iframe {
  width: 100%;
  height: 560px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.contacts-preview-frame-wrap.contacts-view-mobile .contacts-preview-iframe {
  height: 580px;
  border-radius: 0 0 28px 28px;
}

/* Helpers for CSP-compliant admin templates */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 0.75rem !important; }
.font-bold { font-weight: bold; }
.no-underline { text-decoration: none !important; }

/* Tier form layout helpers */
.tier-row-grid {
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
}
.flex-center {
  display: flex;
  align-items: center;
}
.btn-tier-remove {
  margin-left: 0.5rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid #e53e3e;
  border-radius: 6px;
  color: #e53e3e;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tier-actions-bar {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-tier-add {
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}
.tier-limit-hint {
  color: #e53e3e;
}

/* Fleet OTP pills & actions */
.fleet-otp-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.72rem;
  margin-top: 4px;
}
.fleet-otp-admin-pill-master {
  gap: 6px;
  padding: 2px 8px;
}
.fleet-otp-label {
  color: #FF5252;
}
.fleet-otp-divider {
  color: rgba(255, 255, 255, 0.3);
}
.btn-otp-action.btn-otp-add {
  background: none;
  border: none;
  color: #00F0FF;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: bold;
}
.btn-otp-action.btn-otp-reset {
  background: none;
  border: none;
  color: #FFAA00;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: bold;
}
.btn-otp-action.btn-otp-add-pill {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 4px;
  color: #00F0FF;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 1px 6px;
  font-weight: bold;
}
.btn-otp-action.btn-otp-reset-pill {
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 4px;
  color: #FFAA00;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 1px 6px;
  font-weight: bold;
}
.drawer-otp-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.drawer-otp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.drawer-otp-badge {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
}
.drawer-otp-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}


/* Price modal tiers: show the local-currency box or the USD one, never both. */
.price-modal-tier-row .tier-local-group,
.price-modal-tier-row.is-local .tier-usd-group {
  display: none;
}

.price-modal-tier-row.is-local .tier-local-group {
  display: flex;
}

.tier-local-group .input-with-symbol-sm input {
  padding-left: 2.1rem !important;
}