:root {
  color-scheme: dark;
  --bg: #070812;
  --bg-soft: #0d1020;
  --panel: #111429;
  --panel-strong: #171a32;
  --line: #2c3158;
  --line-bright: #7b5cff;
  --text: #eef3ff;
  --muted: #8c96bb;
  --cyan: #1fd8ff;
  --mint: #26d9a6;
  --magenta: #e653bd;
  --amber: #ffb94a;
  --red: #ff5f7a;
  --blue: #6a8cff;
  --shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 22%, rgba(123, 92, 255, 0.18), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(230, 83, 189, 0.2), transparent 28%),
    linear-gradient(135deg, #070812 0%, #0c0820 48%, #110914 100%);
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(31, 216, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 216, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
}

.topbar {
  width: min(1180px, calc(100vw - 32px));
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand,
.nav-link,
.nav-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(123, 92, 255, 0.58);
  background: rgba(13, 16, 32, 0.72);
  color: #d9d4ff;
  box-shadow: inset 0 0 22px rgba(123, 92, 255, 0.12);
}

.brand {
  gap: 10px;
  padding: 0 18px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}

.brand-mark {
  display: inline-flex;
  width: 24px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  font-size: 10px;
}

.top-actions {
  display: flex;
  gap: 10px;
}

.nav-link,
.nav-pill {
  padding: 0 16px;
  font-size: 12px;
}

.as-button {
  color: #d9d4ff;
}

.app-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.workspace {
  min-width: 0;
}

.title-row,
.admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-weight: 900;
  line-height: 1.08;
}

h1 {
  font-size: clamp(32px, 5vw, 58px);
  color: transparent;
  background: linear-gradient(90deg, #ff72cc 0%, #c58dff 47%, #78e7ff 100%);
  background-clip: text;
}

h2 {
  font-size: 18px;
}

.safe-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.safe-badges span,
.inventory-badges span,
.status-chip,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(31, 216, 255, 0.28);
  background: rgba(17, 20, 41, 0.78);
  color: #b9efff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.product-strip,
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: rgba(7, 8, 18, 0.74);
  margin-bottom: 28px;
}

.product-tab,
.admin-tabs button {
  min-height: 54px;
  border: 0;
  border-right: 1px solid rgba(44, 49, 88, 0.74);
  background: transparent;
  color: #b9b1ff;
  font-weight: 800;
  font-size: 13px;
}

.product-tab:last-child,
.admin-tabs button:last-child {
  border-right: 0;
}

.product-tab.active,
.admin-tabs button.active {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(123, 92, 255, 0.28), transparent),
    rgba(23, 26, 50, 0.92);
  box-shadow: inset 0 -2px 0 var(--line-bright);
}

.product-tab small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.console-panel,
.side-panel,
.login-panel,
.admin-console {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(9, 11, 26, 0.92);
  box-shadow: var(--shadow);
}

.console-panel {
  padding: 28px;
  min-height: 430px;
}

.panel-accent {
  position: absolute;
  inset: 8px auto auto 8px;
  width: 24px;
  height: 24px;
  border-left: 3px solid #bd72ff;
  border-top: 3px solid #bd72ff;
}

.inventory-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(230, 83, 189, 0.35);
  background: rgba(230, 83, 189, 0.05);
}

.section-label {
  color: var(--cyan);
  font-weight: 900;
  font-size: 12px;
}

.inventory-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 20px 28px;
  position: relative;
}

.stepper::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 16px;
  border-top: 1px dashed rgba(123, 92, 255, 0.55);
}

.step-item {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #a99dff;
  background: transparent;
  border: 0;
  min-width: 0;
}

.step-item span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: #b4a8ff;
  font-weight: 900;
}

.step-item.active span,
.step-item.done span {
  color: #fff;
  background: linear-gradient(135deg, #7b5cff, #e653bd);
}

.step-item small {
  overflow-wrap: anywhere;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.field span {
  color: #cfc8ff;
  font-size: 13px;
  font-weight: 800;
}

.field.compact {
  margin-bottom: 12px;
}

input,
textarea,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 18, 0.86);
  color: var(--text);
  padding: 0 14px;
  outline: none;
  border-radius: 0;
}

textarea {
  padding: 12px 14px;
  resize: vertical;
}

select {
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(31, 216, 255, 0.12);
}

.btn {
  min-height: 48px;
  border: 1px solid transparent;
  padding: 0 20px;
  color: var(--text);
  font-weight: 900;
  border-radius: 8px;
}

.btn.primary {
  background: linear-gradient(90deg, #7b5cff 0%, #e653bd 62%, #ffb94a 100%);
  box-shadow: 0 12px 34px rgba(230, 83, 189, 0.28);
}

.btn.secondary {
  border-color: rgba(31, 216, 255, 0.45);
  background: rgba(31, 216, 255, 0.09);
  color: #cdf7ff;
}

.btn.ghost {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.btn.danger {
  border-color: rgba(255, 95, 122, 0.42);
  background: rgba(255, 95, 122, 0.09);
  color: #ffd8df;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.wide {
  width: 100%;
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button-row .btn {
  flex: 1 1 180px;
}

.utility-actions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.troubleshoot-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: #d9e9ff;
  font-size: 13px;
  line-height: 1.5;
}

.troubleshoot-list div {
  border: 1px solid rgba(44, 49, 88, 0.72);
  background: rgba(17, 20, 41, 0.56);
  padding: 10px 12px;
}

.hidden {
  display: none !important;
}

.notice {
  border: 1px solid rgba(255, 185, 74, 0.5);
  background: rgba(255, 185, 74, 0.08);
  color: #ffe1a5;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-weight: 700;
}

.notice.error {
  border-color: rgba(255, 95, 122, 0.55);
  background: rgba(255, 95, 122, 0.08);
  color: #ffdce2;
}

.notice.success {
  border-color: rgba(38, 217, 166, 0.55);
  background: rgba(38, 217, 166, 0.08);
  color: #c6ffef;
}

.demo-code-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 0 18px;
}

.demo-code-row button {
  border: 1px solid rgba(31, 216, 255, 0.32);
  background: rgba(31, 216, 255, 0.08);
  color: #b9efff;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.inline-warning {
  color: #ffe1a5;
  border-left: 3px solid var(--amber);
  padding: 8px 0 8px 12px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
}

.summary-list,
.order-meta,
.lookup-result {
  display: grid;
  gap: 10px;
}

.summary-row,
.meta-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(44, 49, 88, 0.82);
  background: rgba(17, 20, 41, 0.56);
}

.summary-row span,
.meta-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.summary-row strong,
.meta-row strong {
  overflow-wrap: anywhere;
}

.compact-list {
  margin-bottom: 12px;
}

.compact-list .summary-row {
  grid-template-columns: 96px 1fr;
  padding: 10px 12px;
}

.result-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.result-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint);
  color: #02120d;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(38, 217, 166, 0.28);
}

.muted {
  margin: 6px 0 0;
  color: var(--muted);
}

.progress-track {
  height: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 18px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--amber));
  transition: width 240ms ease;
}

.timeline {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.timeline-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--line-bright);
  background: rgba(123, 92, 255, 0.08);
}

.timeline-item strong {
  font-size: 14px;
}

.timeline-item span {
  color: var(--muted);
  font-size: 12px;
}

.side-rail {
  display: grid;
  gap: 18px;
}

.side-panel {
  padding: 22px;
}

.side-panel h2 {
  margin-bottom: 16px;
}

.status-list {
  display: grid;
  gap: 10px;
}

.status-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(44, 49, 88, 0.6);
}

.status-list span {
  color: var(--muted);
}

.footer {
  width: min(1180px, calc(100vw - 32px));
  margin: 24px auto 32px;
  color: #b9b1ff;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.admin-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 34px auto 42px;
}

.login-panel {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 28px;
}

.login-panel h1,
.admin-heading h1 {
  font-size: clamp(28px, 4vw, 44px);
}

.admin-console {
  padding: 24px;
}

.admin-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 22px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  border: 1px solid var(--line);
  background: rgba(17, 20, 41, 0.72);
  padding: 18px;
}

.stat-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.toolbar.split {
  align-items: flex-start;
}

.generate-form {
  display: grid;
  grid-template-columns: 190px 90px 80px 90px;
  gap: 8px;
  align-items: center;
}

.generate-form input,
.generate-form select {
  min-height: 40px;
}

.generated-output {
  margin-bottom: 14px;
  color: #c6ffef;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(44, 49, 88, 0.64);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  color: #b9efff;
  background: rgba(31, 216, 255, 0.07);
  font-weight: 900;
}

td {
  color: #e7ebff;
}

.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-state {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.link-state.ok {
  color: var(--mint);
}

.pay-link-cell {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.pay-link-text {
  display: inline-flex;
  max-width: 260px;
  overflow: hidden;
  color: #9ff6ff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(31, 216, 255, 0.45);
  text-underline-offset: 3px;
}

.pay-link-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pay-link-actions .btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
}

.table-actions .btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
}

.log-list {
  display: grid;
  gap: 10px;
}

.log-item {
  display: grid;
  grid-template-columns: 150px 130px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 20, 41, 0.56);
  padding: 12px 14px;
}

.log-item span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 940px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .title-row,
  .admin-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .safe-badges {
    justify-content: flex-start;
  }

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

@media (max-width: 700px) {
  .topbar,
  .app-shell,
  .admin-shell,
  .footer {
    width: min(100% - 20px, 1180px);
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    margin-top: 12px;
  }

  .top-actions {
    justify-content: space-between;
  }

  .product-strip,
  .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .console-panel,
  .side-panel,
  .login-panel,
  .admin-console {
    padding: 18px;
  }

  .inventory-row,
  .result-head,
  .toolbar,
  .toolbar.split {
    align-items: stretch;
    flex-direction: column;
  }

  .stepper {
    gap: 8px;
    margin-inline: 0;
  }

  .form-grid,
  .summary-row,
  .meta-row {
    grid-template-columns: 1fr;
  }

  .generate-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .log-item {
    grid-template-columns: 1fr;
  }
}

/* Three-step sub2buy-style recharge flow */
.recharge-only-shell {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.center-title {
  align-items: center;
}

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

.three-step::before {
  left: 12%;
  right: 12%;
}

.flow-panel {
  position: relative;
  border: 1px solid rgba(123, 92, 255, 0.36);
  background: rgba(8, 10, 24, 0.62);
  padding: 18px;
  margin-bottom: 16px;
  transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.flow-panel.disabled {
  opacity: 0.48;
  filter: saturate(0.75);
}

.flow-panel.disabled textarea,
.flow-panel.disabled input,
.flow-panel.disabled button {
  pointer-events: none;
}

.flow-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.flow-head h2 {
  font-size: 18px;
}

.input-status {
  display: grid;
  gap: 4px;
  min-height: 44px;
  border: 1px solid rgba(255, 185, 74, 0.4);
  background: rgba(255, 185, 74, 0.07);
  color: #ffe1a5;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
}

.input-status.ok {
  border-color: rgba(38, 217, 166, 0.55);
  background: rgba(38, 217, 166, 0.08);
  color: #c6ffef;
}

.input-status.error {
  border-color: rgba(255, 95, 122, 0.55);
  background: rgba(255, 95, 122, 0.08);
  color: #ffdce2;
}

.input-status.loading {
  border-color: rgba(31, 216, 255, 0.45);
  background: rgba(31, 216, 255, 0.08);
  color: #cdf7ff;
}

.input-status span {
  color: inherit;
  opacity: 0.92;
}

.console-panel.is-charging {
  padding: 8px;
  background:
    radial-gradient(circle at 22% 16%, rgba(31, 216, 255, 0.2), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(38, 217, 166, 0.12), transparent 34%),
    rgba(3, 18, 29, 0.92);
}

.console-panel.is-charging .inventory-row,
.console-panel.is-charging .stepper,
.console-panel.is-charging .flow-panel,
.console-panel.is-charging #mainNotice {
  display: none !important;
}

.charging-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  min-height: 352px;
  padding: 16px;
  overflow: hidden;
  color: #eaffff;
  border: 1px solid rgba(55, 226, 255, 0.84);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 18%, rgba(31, 216, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(8, 36, 48, 0.92), rgba(5, 23, 34, 0.96));
  box-shadow:
    0 0 0 1px rgba(31, 216, 255, 0.36),
    0 0 18px rgba(31, 216, 255, 0.46),
    inset 0 0 28px rgba(31, 216, 255, 0.12);
}

.charging-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 1px, transparent 2px) 12px 24px / 72px 58px,
    linear-gradient(135deg, rgba(31, 216, 255, 0.08) 25%, transparent 25%) 0 0 / 18px 18px;
  opacity: 0.42;
  animation: starDrift 8s linear infinite;
}

.charging-panel::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(31, 216, 255, 0.2);
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(31, 216, 255, 0.06), transparent 48%, rgba(38, 217, 166, 0.08));
  pointer-events: none;
}

.lightning-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 4%, #73efff 5%, transparent 7% 14%, #1fd8ff 15%, transparent 17% 28%, #a7f7ff 29%, transparent 31% 100%) top left / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 10%, #1fd8ff 12%, transparent 14% 31%, #9cf8ff 32%, transparent 34% 67%, #28dcff 68%, transparent 70% 100%) bottom left / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0 6%, #7ff3ff 8%, transparent 10% 22%, #1fd8ff 24%, transparent 26% 100%) left top / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 18%, #1fd8ff 20%, transparent 22% 54%, #a0f8ff 56%, transparent 58% 100%) right top / 2px 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(31, 216, 255, 0.95));
  animation: lightningPulse 1.6s steps(2, end) infinite;
}

.charging-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 8px;
  border-bottom: 1px solid rgba(31, 216, 255, 0.18);
}

.charging-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.charging-head strong {
  overflow: hidden;
  color: #f5ffff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(31, 216, 255, 0.42);
}

.charging-head span:not(.processing-badge) {
  color: rgba(220, 250, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.processing-badge {
  display: inline-flex;
  min-width: 58px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(31, 216, 255, 0.58);
  border-radius: 4px;
  color: #9ff6ff;
  background: rgba(31, 216, 255, 0.12);
  box-shadow: inset 0 0 14px rgba(31, 216, 255, 0.12), 0 0 14px rgba(31, 216, 255, 0.24);
  font-size: 12px;
  font-weight: 950;
  animation: badgeBlink 1.2s ease-in-out infinite alternate;
}

.queue-error .processing-badge {
  border-color: rgba(255, 95, 122, 0.72);
  color: #ffdce2;
  background: rgba(255, 95, 122, 0.14);
}

.charging-grid {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(31, 216, 255, 0.18);
  border-radius: 4px;
  background: rgba(2, 18, 29, 0.46);
}

.charge-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(31, 216, 255, 0.16);
  border-radius: 3px;
  background: rgba(31, 216, 255, 0.05);
}

.charge-row span {
  color: rgba(194, 226, 235, 0.72);
  font-size: 13px;
  font-weight: 850;
}

.charge-row strong {
  overflow: hidden;
  color: #f4ffff;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-copy {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #3be8ff;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(31, 216, 255, 0.72);
}

.charge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.charge-tags span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(31, 216, 255, 0.2);
  border-radius: 3px;
  color: rgba(207, 237, 245, 0.78);
  background: rgba(31, 216, 255, 0.06);
  font-size: 12px;
  font-weight: 850;
}

.charge-tags b {
  color: #ffffff;
  font-weight: 950;
}

.queue-stage {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 14px 10px 12px;
  overflow: hidden;
  border: 1px dashed rgba(31, 216, 255, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(31, 216, 255, 0.06) 25%, transparent 25%, transparent 50%, rgba(31, 216, 255, 0.06) 50%, rgba(31, 216, 255, 0.06) 75%, transparent 75%) 0 0 / 20px 20px,
    rgba(1, 15, 25, 0.42);
}

.queue-stage span {
  color: #34e5ff;
  font-size: 12px;
  font-weight: 950;
}

.queue-stage strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.queue-stage p {
  min-height: 18px;
  margin: 0 0 8px;
  color: rgba(215, 241, 248, 0.76);
  font-size: 13px;
  font-weight: 750;
}

.queue-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(160, 207, 219, 0.18);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.28);
}

.queue-progress i {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20d8ff, #42f6e8, #26d9a6);
  box-shadow: 0 0 14px rgba(31, 216, 255, 0.8);
  transition: width 520ms ease;
}

@keyframes lightningPulse {
  0%,
  100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 5px rgba(31, 216, 255, 0.8));
  }
  10% {
    opacity: 1;
    filter: drop-shadow(0 0 13px rgba(120, 244, 255, 1));
  }
  12% {
    opacity: 0.42;
  }
  22%,
  58% {
    opacity: 1;
  }
  60% {
    opacity: 0.5;
  }
}

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

@keyframes starDrift {
  from {
    background-position: 12px 24px, 0 0;
  }
  to {
    background-position: 84px 82px, 36px 36px;
  }
}

@media (max-width: 900px) {
  .recharge-only-shell {
    grid-template-columns: 1fr;
  }

  .center-title {
    align-items: flex-start;
  }
}

/* FakeAI-inspired cyber UI refresh */
:root {
  --bg: #061017;
  --bg-soft: #0b1b27;
  --panel: rgba(9, 27, 40, 0.76);
  --panel-strong: rgba(12, 39, 55, 0.9);
  --line: rgba(72, 179, 205, 0.34);
  --line-bright: #38dff8;
  --text: #eaf8ff;
  --muted: #7f9cab;
  --cyan: #42e7ff;
  --mint: #33e6c3;
  --magenta: #d05dff;
  --amber: #ffd56a;
  --red: #ff5e8a;
  --blue: #79a9ff;
  --glass: rgba(12, 31, 45, 0.72);
  --glass-2: rgba(10, 49, 65, 0.55);
  --shadow: 0 20px 80px rgba(0, 0, 0, 0.5), 0 0 42px rgba(34, 211, 238, 0.1);
  --glow-cyan: 0 0 16px rgba(66, 231, 255, 0.52), 0 0 34px rgba(66, 231, 255, 0.18);
  font-family: "Space Grotesk", "Sora", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  padding-bottom: 62px;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 84%, rgba(51, 230, 195, 0.15), transparent 26%),
    radial-gradient(circle at 78% 12%, rgba(208, 93, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #061017 0%, #07131d 44%, #050b12 100%);
  font-family: "Space Grotesk", "Sora", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -5;
  background:
    radial-gradient(circle at 13% 70%, rgba(74, 222, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 20%, rgba(255, 97, 216, 0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 42%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 64%, rgba(109, 154, 255, 0.66) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px);
  background-size: 210px 190px, 280px 260px, 360px 310px, 240px 230px, 430px 380px;
  animation: fakeaiStarSlide 42s linear infinite;
  opacity: 0.58;
}

body::after {
  z-index: -4;
  background:
    radial-gradient(circle at 50% 30%, rgba(66, 231, 255, 0.08), transparent 34%),
    radial-gradient(circle at 86% 52%, rgba(208, 93, 255, 0.12), transparent 24%),
    linear-gradient(90deg, rgba(66, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(66, 231, 255, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.62));
}

.page-grid {
  z-index: -3;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(66, 231, 255, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 231, 255, 0.065) 1px, transparent 1px);
  background-size: 32px 32px;
}

.galaxy-layer,
.nebula-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.galaxy-layer {
  z-index: -2;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.8px) 12px 20px / 160px 140px,
    radial-gradient(circle, rgba(72, 151, 255, 0.86) 0 1px, transparent 2px) 70px 35px / 230px 210px,
    radial-gradient(circle, rgba(236, 81, 255, 0.6) 0 1px, transparent 2px) 38px 80px / 310px 260px;
  filter: drop-shadow(0 0 4px rgba(96, 213, 255, 0.7));
  opacity: 0.52;
  animation: fakeaiGalaxy 58s linear infinite;
}

.nebula-layer {
  z-index: -1;
  background:
    radial-gradient(circle at 22% 30%, rgba(66, 231, 255, 0.14), transparent 20%),
    radial-gradient(circle at 42% 22%, rgba(133, 112, 255, 0.13), transparent 16%),
    radial-gradient(circle at 76% 74%, rgba(255, 89, 206, 0.11), transparent 19%);
  mix-blend-mode: screen;
  animation: fakeaiNebula 18s ease-in-out infinite alternate;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: 82px;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 46px);
  border-bottom: 1px solid rgba(66, 231, 255, 0.22);
  background: linear-gradient(180deg, rgba(16, 36, 54, 0.92), rgba(11, 25, 38, 0.86));
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(66, 231, 255, 0.06);
}

.brand {
  min-height: 50px;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #effcff;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  letter-spacing: -0.04em;
  text-shadow: 0 0 14px rgba(66, 231, 255, 0.25);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  border: 1px solid rgba(66, 231, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(66, 231, 255, 0.18), rgba(31, 83, 106, 0.28)),
    rgba(5, 20, 31, 0.82);
  color: #5ef1ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  box-shadow: inset 0 0 20px rgba(66, 231, 255, 0.14), var(--glow-cyan);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 6px;
  border: 1px solid rgba(66, 231, 255, 0.18);
  border-radius: 8px;
  background: rgba(6, 19, 30, 0.64);
  box-shadow: inset 0 0 22px rgba(66, 231, 255, 0.05);
}

.main-nav a {
  position: relative;
  display: inline-flex;
  min-width: 108px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid rgba(66, 231, 255, 0.12);
  color: rgba(229, 246, 255, 0.78);
  font-size: 16px;
  font-weight: 900;
}

.main-nav a:last-child {
  border-right: 0;
}

.main-nav a b {
  color: #55dfff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.main-nav a.active,
.main-nav a:hover {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(66, 231, 255, 0.15), rgba(66, 231, 255, 0.06));
  box-shadow: inset 0 0 20px rgba(66, 231, 255, 0.08);
}

.main-nav a.active::after,
.main-nav a:hover::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #48e7ff, transparent);
  box-shadow: 0 0 10px rgba(66, 231, 255, 0.8);
}

.top-actions {
  align-items: center;
}

.nav-link,
.nav-pill,
.as-button {
  min-height: 42px;
  border-radius: 7px;
  border: 1px solid rgba(90, 190, 215, 0.34);
  background: rgba(17, 41, 58, 0.82);
  color: #d9f7ff;
  font-weight: 900;
  box-shadow: inset 0 0 16px rgba(66, 231, 255, 0.06);
}

.nav-link:hover,
.nav-pill:hover,
.as-button:hover {
  border-color: rgba(66, 231, 255, 0.72);
  color: #ffffff;
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

.app-shell,
.admin-shell {
  width: min(1404px, calc(100vw - 72px));
  margin-top: 62px;
}

.recharge-only-shell {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.title-row,
.admin-heading {
  position: relative;
  padding: 20px 22px;
  border: 1px solid rgba(66, 231, 255, 0.14);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(13, 36, 52, 0.68), rgba(8, 18, 30, 0.46));
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 30px rgba(66, 231, 255, 0.04);
}

.title-row::before,
.admin-heading::before,
.console-panel::before,
.side-panel::before,
.admin-console::before,
.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(66, 231, 255, 0.72), rgba(66, 231, 255, 0.04), rgba(51, 230, 195, 0.48));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.eyebrow {
  color: #37ecff;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(66, 231, 255, 0.55);
}

h1 {
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  font-size: clamp(34px, 4.8vw, 58px);
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, #fff 0%, #7defff 46%, #42e7ff 70%, #b16cff 100%);
  background-clip: text;
  text-shadow: 0 0 34px rgba(66, 231, 255, 0.18);
}

h2 {
  color: #f5fcff;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
}

.muted {
  color: rgba(178, 205, 217, 0.76);
}

.safe-badges span,
.inventory-badges span,
.status-chip,
.pill {
  border-radius: 5px;
  border-color: rgba(66, 231, 255, 0.34);
  background: rgba(12, 45, 61, 0.66);
  color: #a7f7ff;
  font-family: "JetBrains Mono", monospace;
  box-shadow: inset 0 0 16px rgba(66, 231, 255, 0.06);
}

.product-strip,
.admin-tabs {
  overflow: hidden;
  border-color: rgba(66, 231, 255, 0.2);
  border-radius: 10px;
  background: rgba(6, 15, 25, 0.72);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 28px rgba(66, 231, 255, 0.04);
}

.product-tab,
.admin-tabs button {
  position: relative;
  min-height: 56px;
  border-right-color: rgba(66, 231, 255, 0.14);
  color: #b5c7d5;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  transition: 0.18s ease;
}

.product-tab:hover,
.admin-tabs button:hover,
.product-tab.active,
.admin-tabs button.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(66, 231, 255, 0.15), rgba(66, 231, 255, 0.04));
  box-shadow: inset 0 -3px 0 rgba(66, 231, 255, 0.92), inset 0 0 24px rgba(66, 231, 255, 0.08);
}

.product-tab small {
  color: #8cb5c7;
}

.console-panel,
.side-panel,
.login-panel,
.admin-console {
  border-color: rgba(66, 231, 255, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(11, 29, 43, 0.82), rgba(7, 19, 30, 0.78)),
    rgba(5, 14, 23, 0.86);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow), inset 0 0 32px rgba(66, 231, 255, 0.04);
}

.console-panel {
  padding: 28px;
  overflow: hidden;
}

.console-panel::after,
.admin-console::after,
.login-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(66, 231, 255, 0.12), transparent 18%),
    radial-gradient(circle at 78% 64%, rgba(208, 93, 255, 0.08), transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px) 0 0 / 160px 130px;
  opacity: 0.45;
  animation: fakeaiPanelStars 28s linear infinite;
}

.console-panel > *,
.admin-console > *,
.login-panel > * {
  position: relative;
  z-index: 1;
}

.panel-accent {
  inset: 10px auto auto 10px;
  width: 26px;
  height: 26px;
  border-left-color: #58eaff;
  border-top-color: #58eaff;
  filter: drop-shadow(0 0 8px rgba(66, 231, 255, 0.75));
}

.inventory-row {
  border-radius: 6px;
  border-color: rgba(66, 231, 255, 0.22);
  background: rgba(8, 29, 42, 0.62);
}

.section-label {
  color: #47ecff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
}

.stepper {
  color: #ccf5ff;
}

.step-item span {
  border-radius: 4px;
  border: 1px solid rgba(66, 231, 255, 0.24);
  background: rgba(11, 32, 47, 0.9);
  color: #8befff;
  font-family: "JetBrains Mono", monospace;
  box-shadow: inset 0 0 18px rgba(66, 231, 255, 0.08);
}

.step-item.active span,
.step-item.done span {
  background: linear-gradient(135deg, #2bdcff, #2ee6bf);
  color: #041118;
  box-shadow: 0 0 18px rgba(66, 231, 255, 0.56);
}

.stepper::before {
  background: linear-gradient(90deg, transparent, rgba(66, 231, 255, 0.48), transparent);
}

.flow-panel {
  border-radius: 8px;
  border-color: rgba(66, 231, 255, 0.24);
  background: rgba(5, 17, 28, 0.64);
  box-shadow: inset 0 0 22px rgba(66, 231, 255, 0.035);
}

.flow-panel:not(.disabled):hover {
  border-color: rgba(66, 231, 255, 0.5);
  box-shadow: inset 0 0 24px rgba(66, 231, 255, 0.06), 0 0 22px rgba(66, 231, 255, 0.06);
}

.field span {
  color: #d7faff;
  font-weight: 800;
}

input,
textarea,
select,
.generated-output {
  border-radius: 6px;
  border-color: rgba(66, 231, 255, 0.22) !important;
  background: rgba(3, 12, 22, 0.74) !important;
  color: #f1fbff !important;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
  box-shadow: inset 0 0 18px rgba(66, 231, 255, 0.035);
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: rgba(66, 231, 255, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(66, 231, 255, 0.08), inset 0 0 18px rgba(66, 231, 255, 0.06);
}

.btn {
  border-radius: 7px;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.02em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: linear-gradient(90deg, #6f5cff, #df53c4 50%, #ffb856);
  box-shadow: 0 0 24px rgba(223, 83, 196, 0.22), 0 8px 24px rgba(0, 0, 0, 0.26);
}

.btn.secondary {
  border-color: rgba(66, 231, 255, 0.54);
  background: rgba(11, 54, 72, 0.66);
  color: #c9faff;
}

.btn.ghost {
  border-color: rgba(135, 170, 187, 0.34);
  background: rgba(11, 26, 40, 0.64);
}

.btn.danger {
  border-color: rgba(255, 94, 138, 0.52);
  background: rgba(255, 94, 138, 0.12);
  color: #ffd2de;
}

.notice,
.input-status {
  border-radius: 6px;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
}

.input-status.loading {
  position: relative;
  overflow: hidden;
}

.input-status.loading::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #45eaff, #32e6bd, transparent);
  animation: fakeaiScan 1.2s linear infinite;
}

.summary-row,
.meta-row,
.status-list div,
.stat-card {
  border-radius: 6px;
  border-color: rgba(66, 231, 255, 0.18);
  background: rgba(8, 27, 40, 0.5);
}

.side-panel {
  position: sticky;
  top: 106px;
}

.side-panel h2 {
  color: #f2fcff;
}

.status-list strong {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(66, 231, 255, 0.28);
}

.charging-panel {
  max-width: 520px;
  min-height: 342px;
  border-color: rgba(66, 231, 255, 0.82);
  background:
    radial-gradient(circle at 50% 18%, rgba(66, 231, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(8, 43, 58, 0.92), rgba(5, 24, 34, 0.96));
  box-shadow:
    0 0 0 1px rgba(66, 231, 255, 0.38),
    0 0 22px rgba(66, 231, 255, 0.46),
    0 0 72px rgba(66, 231, 255, 0.16),
    inset 0 0 32px rgba(66, 231, 255, 0.12);
}

.console-panel.is-charging {
  min-height: 560px;
  padding: 28px;
  background:
    radial-gradient(circle at 46% 38%, rgba(82, 130, 255, 0.11), transparent 24%),
    radial-gradient(circle at 22% 16%, rgba(66, 231, 255, 0.18), transparent 32%),
    rgba(5, 18, 29, 0.9);
}

.queue-stage {
  background:
    linear-gradient(135deg, rgba(66, 231, 255, 0.065) 25%, transparent 25%, transparent 50%, rgba(66, 231, 255, 0.065) 50%, rgba(66, 231, 255, 0.065) 75%, transparent 75%) 0 0 / 20px 20px,
    rgba(1, 15, 25, 0.42);
}

.table-wrap {
  border-radius: 8px;
  border-color: rgba(66, 231, 255, 0.24);
  background: rgba(5, 16, 26, 0.48);
}

table {
  font-family: "Space Grotesk", "Microsoft YaHei", sans-serif;
}

th {
  color: #a9f5ff;
  background: rgba(66, 231, 255, 0.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

td {
  border-bottom-color: rgba(66, 231, 255, 0.13);
  color: #e9f9ff;
}

tr:hover td {
  background: rgba(66, 231, 255, 0.035);
}

.pay-link-text {
  color: #74efff;
  text-shadow: 0 0 10px rgba(66, 231, 255, 0.35);
}

.log-item {
  border-radius: 8px;
  border: 1px solid rgba(66, 231, 255, 0.18);
  background: rgba(7, 22, 35, 0.58);
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 46px;
  border-top: 1px solid rgba(66, 231, 255, 0.18);
  background: rgba(17, 35, 52, 0.9);
  color: rgba(199, 228, 238, 0.72);
  backdrop-filter: blur(16px);
}

.footer span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(66, 231, 255, 0.38);
  border-radius: 5px;
  color: #8df4ff;
  background: rgba(13, 51, 69, 0.68);
  font-weight: 900;
}

.footer small {
  color: rgba(196, 217, 226, 0.62);
  font-size: 13px;
}

.side-peek {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 30;
  display: grid;
  width: 54px;
  height: 78px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(66, 231, 255, 0.28);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: rgba(12, 24, 42, 0.86);
  color: #aaf7c9;
  writing-mode: vertical-rl;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(66, 231, 255, 0.14);
}

.ai-helper {
  position: fixed;
  right: 64px;
  bottom: 70px;
  z-index: 34;
  display: grid;
  grid-template-columns: 54px auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-width: 202px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(66, 231, 255, 0.38);
  border-radius: 10px;
  background: rgba(13, 39, 57, 0.86);
  box-shadow: 0 0 28px rgba(66, 231, 255, 0.18);
  backdrop-filter: blur(12px);
}

.bot-face {
  grid-row: 1 / 3;
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(66, 231, 255, 0.42);
  background: radial-gradient(circle at 50% 28%, rgba(66, 231, 255, 0.22), rgba(5, 20, 31, 0.96));
}

.bot-face i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #52eaff;
  box-shadow: 0 0 10px rgba(66, 231, 255, 0.9);
  animation: badgeBlink 0.9s ease-in-out infinite alternate;
}

.ai-helper strong {
  color: #f5fcff;
  font-size: 15px;
}

.ai-helper small {
  color: #35e4ff;
  font-weight: 900;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 15, 25, 0.7);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(66, 231, 255, 0.75), rgba(51, 230, 195, 0.48));
  border: 2px solid rgba(5, 15, 25, 0.9);
}

@keyframes fakeaiStarSlide {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 420px 380px, -560px 520px, 720px -620px, -480px 460px, 860px 760px; }
}

@keyframes fakeaiGalaxy {
  from { background-position: 12px 20px, 70px 35px, 38px 80px; }
  to { background-position: 612px 520px, -430px 635px, 738px -480px; }
}

@keyframes fakeaiNebula {
  from { opacity: 0.55; filter: hue-rotate(0deg) saturate(1); }
  to { opacity: 0.86; filter: hue-rotate(18deg) saturate(1.28); }
}

@keyframes fakeaiPanelStars {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 0, 320px 260px; }
}

@keyframes fakeaiScan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (max-width: 1180px) {
  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .topbar {
    flex-wrap: wrap;
    padding-block: 12px;
  }

  .main-nav a {
    min-width: 92px;
  }

  .app-shell,
  .admin-shell {
    width: min(100% - 32px, 1180px);
    margin-top: 30px;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 82px;
  }

  .topbar {
    padding-inline: 16px;
  }

  .brand {
    font-size: 16px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .main-nav a {
    min-width: 86px;
    min-height: 42px;
    padding: 0 10px;
    font-size: 14px;
  }

  .title-row,
  .admin-heading,
  .console-panel,
  .side-panel,
  .login-panel,
  .admin-console {
    padding: 16px;
  }

  .charging-panel {
    max-width: 100%;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: 8px 16px;
  }

  .ai-helper {
    display: none;
  }

  .side-peek {
    display: none;
  }
}

/* Interaction cleanup + enhanced galaxy feedback */
:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --mouse-nx: 0;
  --mouse-ny: 0;
}

.recharge-only-shell {
  grid-template-columns: minmax(0, 1fr);
}

.workspace {
  width: 100%;
}

.brand-mark {
  width: 54px;
  font-size: 13px;
  letter-spacing: 0;
}

.brand span:last-child {
  letter-spacing: -0.03em;
}

.safe-badges,
.side-rail,
.side-peek,
.ai-helper {
  display: none !important;
}

body::after {
  z-index: -4;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(66, 231, 255, 0.22) 0, rgba(66, 231, 255, 0.1) 9%, transparent 26%),
    radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(208, 93, 255, 0.15) 0, transparent 22%),
    radial-gradient(circle at 50% 30%, rgba(66, 231, 255, 0.08), transparent 34%),
    radial-gradient(circle at 86% 52%, rgba(208, 93, 255, 0.12), transparent 24%),
    linear-gradient(90deg, rgba(66, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(66, 231, 255, 0.04) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
  transform: translate3d(calc(var(--mouse-nx) * -10px), calc(var(--mouse-ny) * -10px), 0);
  transition: opacity 0.2s ease;
}

.galaxy-layer {
  transform: translate3d(calc(var(--mouse-nx) * -34px), calc(var(--mouse-ny) * -28px), 0) scale(1.06);
  transition: filter 0.18s ease;
  filter: drop-shadow(0 0 4px rgba(96, 213, 255, 0.7)) saturate(calc(1.05 + (var(--mouse-nx) * 0.12)));
}

.nebula-layer {
  transform: translate3d(calc(var(--mouse-nx) * 28px), calc(var(--mouse-ny) * 22px), 0) scale(1.04);
  opacity: 0.78;
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 340px;
  height: 340px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(66, 231, 255, 0.16) 0, rgba(66, 231, 255, 0.08) 24%, transparent 64%),
    radial-gradient(circle, rgba(51, 230, 195, 0.08) 0, transparent 48%);
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0.95;
  will-change: transform;
}

.pointer-spark {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  border-radius: 999px;
  background: #8ff7ff;
  box-shadow: 0 0 8px rgba(66, 231, 255, 0.95), 0 0 20px rgba(51, 230, 195, 0.45);
  animation: pointerSpark 720ms ease-out forwards;
}

@keyframes pointerSpark {
  0% {
    opacity: 0.95;
    transform: translate3d(-50%, -50%, 0) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y)), 0) scale(0.08);
  }
}

.btn.primary,
#verifyBtn,
#submitRechargeBtn,
#loginBtn {
  border: 1px solid rgba(66, 231, 255, 0.62);
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(45, 230, 190, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #031219;
  text-shadow: none;
  box-shadow: 0 0 22px rgba(66, 231, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn.primary:hover,
#verifyBtn:hover,
#submitRechargeBtn:hover,
#loginBtn:hover {
  border-color: rgba(135, 250, 255, 0.92);
  box-shadow: 0 0 30px rgba(66, 231, 255, 0.38), 0 0 52px rgba(51, 230, 195, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

#verifyBtn:active,
#submitRechargeBtn:active,
.btn:active,
.nav-link:active,
.product-tab:active,
.admin-tabs button:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.08);
}

.flow-panel,
.console-panel,
.charging-panel,
.product-tab,
.admin-tabs button,
.stat-card,
.table-wrap,
.login-panel,
.admin-console,
.nav-link,
.main-nav a,
.summary-row,
.input-status {
  --spot-x: 50%;
  --spot-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color;
}

.flow-panel.fx-tilt,
.charging-panel.fx-tilt,
.product-tab.fx-tilt,
.admin-tabs button.fx-tilt,
.stat-card.fx-tilt,
.summary-row.fx-tilt,
.input-status.fx-tilt,
.nav-link.fx-tilt,
.main-nav a.fx-tilt {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-2px);
  border-color: rgba(101, 238, 255, 0.72) !important;
  box-shadow:
    0 0 24px rgba(66, 231, 255, 0.16),
    inset 0 0 28px rgba(66, 231, 255, 0.055);
}

.console-panel.fx-tilt,
.admin-console.fx-tilt,
.login-panel.fx-tilt,
.table-wrap.fx-tilt {
  transform: perspective(1400px) rotateX(calc(var(--tilt-x) * 0.42)) rotateY(calc(var(--tilt-y) * 0.42));
  border-color: rgba(101, 238, 255, 0.54) !important;
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.52),
    0 0 32px rgba(66, 231, 255, 0.16),
    inset 0 0 34px rgba(66, 231, 255, 0.07);
}

.flow-panel.fx-tilt::after,
.product-tab.fx-tilt::after,
.stat-card.fx-tilt::after,
.summary-row.fx-tilt::after,
.input-status.fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(128, 247, 255, 0.16), transparent 34%);
}

.field input:hover,
.field textarea:hover,
select:hover,
.generated-output:hover {
  border-color: rgba(66, 231, 255, 0.56) !important;
  box-shadow: 0 0 20px rgba(66, 231, 255, 0.08), inset 0 0 18px rgba(66, 231, 255, 0.05);
}

.inventory-badges span:hover,
.pill:hover,
.charge-tags span:hover,
.queue-copy:hover,
.pay-link-text:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 231, 255, 0.72);
  color: #ffffff;
  text-shadow: 0 0 12px rgba(66, 231, 255, 0.6);
  box-shadow: 0 0 18px rgba(66, 231, 255, 0.16);
}

.inventory-badges span,
.pill,
.charge-tags span,
.queue-copy,
.pay-link-text {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.footer span {
  min-width: 230px;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-layer,
  .nebula-layer,
  body::before,
  .console-panel::after,
  .admin-console::after,
  .login-panel::after,
  .cursor-glow,
  .pointer-spark {
    animation: none !important;
    transition: none !important;
  }
}

/* Interaction intensity tuning */
.main-nav {
  display: none !important;
}

.topbar {
  min-height: 74px;
}

.cursor-glow {
  width: 240px;
  height: 240px;
  opacity: 0.28;
  background:
    radial-gradient(circle, rgba(66, 231, 255, 0.055) 0, rgba(66, 231, 255, 0.028) 28%, transparent 68%),
    radial-gradient(circle, rgba(51, 230, 195, 0.025) 0, transparent 52%);
  filter: blur(8px);
}

.pointer-spark {
  opacity: 0.62;
  background: rgba(160, 248, 255, 0.72);
  box-shadow: 0 0 5px rgba(66, 231, 255, 0.55), 0 0 12px rgba(51, 230, 195, 0.22);
}

body::after {
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(66, 231, 255, 0.11) 0, rgba(66, 231, 255, 0.04) 8%, transparent 23%),
    radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(208, 93, 255, 0.07) 0, transparent 20%),
    radial-gradient(circle at 50% 30%, rgba(66, 231, 255, 0.06), transparent 34%),
    radial-gradient(circle at 86% 52%, rgba(208, 93, 255, 0.08), transparent 24%),
    linear-gradient(90deg, rgba(66, 231, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(66, 231, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
}

.galaxy-layer {
  transform: translate3d(calc(var(--mouse-nx) * -18px), calc(var(--mouse-ny) * -14px), 0) scale(1.035);
}

.nebula-layer {
  transform: translate3d(calc(var(--mouse-nx) * 14px), calc(var(--mouse-ny) * 11px), 0) scale(1.02);
}

.flow-panel.fx-tilt,
.charging-panel.fx-tilt,
.product-tab.fx-tilt,
.admin-tabs button.fx-tilt,
.stat-card.fx-tilt,
.summary-row.fx-tilt,
.input-status.fx-tilt,
.nav-link.fx-tilt {
  transform: perspective(900px) rotateX(calc(var(--tilt-x) * 0.45)) rotateY(calc(var(--tilt-y) * 0.45)) translateY(-1px);
  box-shadow:
    0 0 16px rgba(66, 231, 255, 0.1),
    inset 0 0 20px rgba(66, 231, 255, 0.04);
}

.console-panel.fx-tilt,
.admin-console.fx-tilt,
.login-panel.fx-tilt,
.table-wrap.fx-tilt {
  transform: perspective(1400px) rotateX(calc(var(--tilt-x) * 0.16)) rotateY(calc(var(--tilt-y) * 0.16));
  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.46),
    0 0 22px rgba(66, 231, 255, 0.1),
    inset 0 0 26px rgba(66, 231, 255, 0.05);
}

.flow-panel.fx-tilt::after,
.product-tab.fx-tilt::after,
.stat-card.fx-tilt::after,
.summary-row.fx-tilt::after,
.input-status.fx-tilt::after {
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(128, 247, 255, 0.08), transparent 30%);
}

/* Four-step recharge guide */
.four-step {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
}

.four-step::before {
  left: 7%;
  right: 7%;
  top: 16px;
}

.step-item {
  min-height: 76px;
}

.step-link {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(66, 231, 255, 0.32);
  border-radius: 999px;
  background: rgba(10, 46, 62, 0.62);
  color: #79f2ff;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 0 12px rgba(66, 231, 255, 0.04);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.step-link:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 231, 255, 0.78);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(66, 231, 255, 0.18), inset 0 0 14px rgba(66, 231, 255, 0.08);
}

.topbar:has(.brand:only-child) {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .four-step {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .four-step::before {
    display: none;
  }
}

/* Larger charging scene + flowing electric current */
.console-panel.is-charging {
  min-height: clamp(560px, 58vh, 720px);
  display: flex;
  align-items: center;
  padding: clamp(22px, 3vw, 44px);
}

.console-panel.is-charging #queuePanel {
  display: grid !important;
}

.charging-panel {
  width: min(620px, 52vw);
  max-width: min(620px, 100%);
  min-height: 390px;
  margin-left: clamp(0px, 2vw, 28px);
  padding: 18px;
  border-width: 1px;
  box-shadow:
    0 0 0 1px rgba(66, 231, 255, 0.42),
    0 0 28px rgba(66, 231, 255, 0.5),
    0 0 92px rgba(66, 231, 255, 0.23),
    0 0 150px rgba(51, 230, 195, 0.08),
    inset 0 0 36px rgba(66, 231, 255, 0.13);
}

.charging-panel::before {
  opacity: 0.52;
}

.charging-panel::after {
  inset: 5px;
  border-color: rgba(66, 231, 255, 0.24);
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(66, 231, 255, 0.12), transparent 28%),
    linear-gradient(120deg, rgba(31, 216, 255, 0.06), transparent 48%, rgba(38, 217, 166, 0.08));
}

.lightning-frame {
  inset: -2px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 4%, #83f8ff 6%, transparent 8% 18%, #2eeaff 21%, transparent 24% 42%, #affcff 44%, transparent 47% 100%) top left / 240% 3px no-repeat,
    linear-gradient(90deg, transparent 0 14%, #2eeaff 17%, transparent 20% 38%, #affcff 41%, transparent 44% 68%, #33e6c3 72%, transparent 75% 100%) bottom right / 240% 3px no-repeat,
    linear-gradient(180deg, transparent 0 8%, #9dfaff 11%, transparent 14% 28%, #2eeaff 31%, transparent 34% 100%) left top / 3px 240% no-repeat,
    linear-gradient(180deg, transparent 0 20%, #33e6c3 23%, transparent 26% 52%, #9dfaff 56%, transparent 59% 100%) right bottom / 3px 240% no-repeat;
  filter: drop-shadow(0 0 7px rgba(66, 231, 255, 1)) drop-shadow(0 0 18px rgba(66, 231, 255, 0.45));
  animation: electricOrbit 2.4s linear infinite, lightningPulse 1.45s steps(2, end) infinite;
}

.lightning-frame::before,
.lightning-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.lightning-frame::before {
  inset: 8px;
  border: 1px solid rgba(66, 231, 255, 0.2);
  box-shadow:
    0 0 18px rgba(66, 231, 255, 0.34),
    inset 0 0 24px rgba(66, 231, 255, 0.08);
  animation: electricBreath 1.9s ease-in-out infinite alternate;
}

.lightning-frame::after {
  inset: -7px;
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(66, 231, 255, 0.88) 10%, transparent 13% 38%, rgba(51, 230, 195, 0.72) 41%, transparent 44% 68%, rgba(140, 247, 255, 0.8) 70%, transparent 74% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 7px;
  opacity: 0.86;
  filter: blur(0.5px) drop-shadow(0 0 10px rgba(66, 231, 255, 0.75));
  animation: electricConic 3.2s linear infinite;
}

.charging-grid {
  gap: 12px;
  padding: 12px;
}

.charge-row {
  min-height: 42px;
  grid-template-columns: 104px minmax(0, 1fr) 28px;
}

.charge-row span,
.charge-row strong {
  font-size: 14px;
}

.charge-tags span {
  min-height: 32px;
  padding: 0 12px;
}

.queue-stage {
  min-height: 130px;
  padding: 18px 14px 14px;
}

.queue-stage strong {
  font-size: 18px;
}

.queue-stage p {
  font-size: 14px;
}

.queue-progress {
  height: 9px;
}

@keyframes electricOrbit {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 0%, 100% 100%;
  }
  100% {
    background-position: 240% 0%, -140% 100%, 0% 240%, 100% -140%;
  }
}

@keyframes electricConic {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes electricBreath {
  from {
    opacity: 0.45;
    box-shadow: 0 0 14px rgba(66, 231, 255, 0.2), inset 0 0 18px rgba(66, 231, 255, 0.06);
  }
  to {
    opacity: 0.92;
    box-shadow: 0 0 28px rgba(66, 231, 255, 0.46), inset 0 0 34px rgba(66, 231, 255, 0.12);
  }
}

@media (max-width: 980px) {
  .console-panel.is-charging {
    min-height: 560px;
    align-items: flex-start;
  }

  .charging-panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* Strong visible electric-current layer + centered large task card */
.console-panel.is-charging {
  min-height: clamp(680px, 66vh, 860px) !important;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(26px, 4vw, 56px) !important;
}

.charging-panel {
  width: min(820px, 68vw) !important;
  max-width: min(820px, 100%) !important;
  min-height: 475px !important;
  margin: 0 auto !important;
  gap: 18px !important;
  padding: 22px !important;
  border-radius: 10px !important;
  overflow: visible !important;
  border-color: rgba(73, 237, 255, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(73, 237, 255, 0.5),
    0 0 36px rgba(73, 237, 255, 0.58),
    0 0 110px rgba(73, 237, 255, 0.26),
    0 0 180px rgba(51, 230, 195, 0.12),
    inset 0 0 44px rgba(73, 237, 255, 0.14) !important;
}

.charging-panel > :not(.lightning-frame):not(.electric-current) {
  position: relative;
  z-index: 5;
}

.electric-current,
.lightning-frame {
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
}

.electric-current {
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(73, 237, 255, 0.86));
}

.ec-orbit,
.ec-inner,
.ec-line {
  position: absolute;
  display: block;
  pointer-events: none;
}

.ec-orbit {
  inset: -12px;
  border-radius: 14px;
  padding: 4px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 20deg,
      rgba(73, 237, 255, 0.08) 26deg,
      rgba(73, 237, 255, 1) 38deg,
      #ffffff 44deg,
      rgba(51, 230, 195, 0.92) 52deg,
      transparent 68deg 140deg,
      rgba(126, 246, 255, 0.92) 158deg,
      transparent 176deg 250deg,
      rgba(51, 230, 195, 0.9) 276deg,
      rgba(255, 255, 255, 0.88) 284deg,
      transparent 306deg 360deg
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  animation: ecConicRotate 2.35s linear infinite;
}

.ec-inner {
  inset: 10px;
  border-radius: 7px;
  border: 1px solid rgba(101, 244, 255, 0.34);
  box-shadow:
    0 0 16px rgba(73, 237, 255, 0.26),
    inset 0 0 22px rgba(73, 237, 255, 0.08);
  animation: ecInnerBreath 1.45s ease-in-out infinite alternate;
}

.ec-line {
  overflow: hidden;
  opacity: 0.98;
  filter: drop-shadow(0 0 6px rgba(73, 237, 255, 0.95)) drop-shadow(0 0 16px rgba(73, 237, 255, 0.5));
}

.ec-top,
.ec-bottom {
  left: -4px;
  right: -4px;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(73, 237, 255, 0.12) 18%, rgba(73, 237, 255, 1) 32%, #ffffff 38%, rgba(51, 230, 195, 0.92) 45%, transparent 62% 100%);
  background-size: 260% 100%;
}

.ec-top {
  top: -3px;
  animation: ecFlowHorizontal 1.35s linear infinite;
}

.ec-bottom {
  bottom: -3px;
  animation: ecFlowHorizontalReverse 1.55s linear infinite;
}

.ec-right,
.ec-left {
  top: -4px;
  bottom: -4px;
  width: 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(73, 237, 255, 0.12) 18%, rgba(73, 237, 255, 1) 32%, #ffffff 38%, rgba(51, 230, 195, 0.92) 45%, transparent 62% 100%);
  background-size: 100% 260%;
}

.ec-right {
  right: -3px;
  animation: ecFlowVertical 1.45s linear infinite;
}

.ec-left {
  left: -3px;
  animation: ecFlowVerticalReverse 1.65s linear infinite;
}

.lightning-frame {
  z-index: 3;
  inset: -1px !important;
  opacity: 0.85;
  background:
    linear-gradient(90deg, rgba(73, 237, 255, 0.18), rgba(73, 237, 255, 0.02), rgba(51, 230, 195, 0.18)) top left / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(51, 230, 195, 0.18), rgba(73, 237, 255, 0.02), rgba(73, 237, 255, 0.18)) bottom left / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(73, 237, 255, 0.18), rgba(73, 237, 255, 0.02), rgba(51, 230, 195, 0.18)) left top / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(51, 230, 195, 0.18), rgba(73, 237, 255, 0.02), rgba(73, 237, 255, 0.18)) right top / 2px 100% no-repeat !important;
  animation: ecFramePulse 1.8s ease-in-out infinite alternate !important;
}

.lightning-frame::before,
.lightning-frame::after {
  display: none !important;
}

.charging-grid {
  gap: 14px !important;
  padding: 16px !important;
}

.charge-row {
  min-height: 50px !important;
  grid-template-columns: 118px minmax(0, 1fr) 30px !important;
  padding-inline: 14px !important;
}

.charge-tags {
  gap: 10px !important;
}

.charge-tags span {
  min-height: 36px !important;
  padding: 0 14px !important;
}

.queue-stage {
  min-height: 168px !important;
  padding: 22px 18px 18px !important;
}

.queue-stage strong {
  font-size: 22px !important;
}

.queue-stage p {
  font-size: 15px !important;
}

.queue-progress {
  height: 10px !important;
  margin-top: 8px;
}

@keyframes ecConicRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ecFlowHorizontal {
  from { background-position: 220% 0; }
  to { background-position: -40% 0; }
}

@keyframes ecFlowHorizontalReverse {
  from { background-position: -40% 0; }
  to { background-position: 220% 0; }
}

@keyframes ecFlowVertical {
  from { background-position: 0 220%; }
  to { background-position: 0 -40%; }
}

@keyframes ecFlowVerticalReverse {
  from { background-position: 0 -40%; }
  to { background-position: 0 220%; }
}

@keyframes ecInnerBreath {
  from {
    opacity: 0.52;
    box-shadow: 0 0 14px rgba(73, 237, 255, 0.18), inset 0 0 18px rgba(73, 237, 255, 0.06);
  }
  to {
    opacity: 1;
    box-shadow: 0 0 36px rgba(73, 237, 255, 0.55), inset 0 0 42px rgba(73, 237, 255, 0.16);
  }
}

@keyframes ecFramePulse {
  from { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(73, 237, 255, 0.45)); }
  to { opacity: 1; filter: drop-shadow(0 0 18px rgba(73, 237, 255, 0.9)); }
}

@media (max-width: 980px) {
  .charging-panel {
    width: min(100%, 760px) !important;
    min-height: 455px !important;
  }
}

/* Taste + Impeccable electric border v2: visible runners, rotating conic ring, breathing core */
@property --ec-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.charging-panel {
  --ec-cyan: #52f0ff;
  --ec-mint: #35f0c6;
  --ec-white: #f6ffff;
  width: min(880px, 72vw) !important;
  max-width: min(880px, 100%) !important;
  min-height: 500px !important;
  overflow: visible !important;
  border: 1px solid rgba(82, 240, 255, 0.68) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.36),
    0 0 28px rgba(82, 240, 255, 0.45),
    0 0 88px rgba(82, 240, 255, 0.22),
    inset 0 0 44px rgba(82, 240, 255, 0.12) !important;
}

.electric-current {
  z-index: 6 !important;
  inset: -10px !important;
  border-radius: 16px !important;
  overflow: visible !important;
  pointer-events: none;
  contain: layout paint;
}

.ec-orbit {
  inset: -7px !important;
  border-radius: 18px !important;
  padding: 8px !important;
  opacity: 1 !important;
  background:
    conic-gradient(
      from var(--ec-angle),
      transparent 0deg,
      transparent 16deg,
      rgba(82, 240, 255, 0.18) 24deg,
      var(--ec-cyan) 34deg,
      var(--ec-white) 41deg,
      var(--ec-mint) 48deg,
      transparent 62deg,
      transparent 128deg,
      rgba(82, 240, 255, 0.16) 146deg,
      var(--ec-cyan) 158deg,
      transparent 178deg,
      transparent 238deg,
      var(--ec-mint) 260deg,
      var(--ec-white) 268deg,
      var(--ec-cyan) 276deg,
      transparent 294deg,
      transparent 360deg
    ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  filter:
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.9))
    drop-shadow(0 0 16px rgba(82, 240, 255, 0.55))
    drop-shadow(0 0 34px rgba(53, 240, 198, 0.22));
  animation: ecAngleSpin 2.1s linear infinite !important;
}

.ec-inner {
  inset: 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(116, 249, 255, 0.42) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(82, 240, 255, 0.12), transparent 44%),
    linear-gradient(135deg, rgba(82, 240, 255, 0.055), rgba(53, 240, 198, 0.035)) !important;
  box-shadow:
    0 0 20px rgba(82, 240, 255, 0.28),
    inset 0 0 24px rgba(82, 240, 255, 0.1) !important;
  animation: ecInnerBreathStrong 1.28s ease-in-out infinite alternate !important;
}

.ec-line {
  z-index: 8 !important;
  border-radius: 999px;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 4px rgba(246, 255, 255, 0.95))
    drop-shadow(0 0 11px rgba(82, 240, 255, 0.9))
    drop-shadow(0 0 25px rgba(82, 240, 255, 0.45));
}

.ec-top,
.ec-bottom {
  left: 16px !important;
  right: 16px !important;
  height: 5px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 22%,
      rgba(82, 240, 255, 0.22) 30%,
      var(--ec-cyan) 38%,
      var(--ec-white) 44%,
      var(--ec-mint) 50%,
      rgba(82, 240, 255, 0.18) 58%,
      transparent 68%,
      transparent 100%
    ) !important;
  background-size: 240% 100% !important;
}

.ec-top {
  top: 7px !important;
  animation: ecEdgeX 1.08s linear infinite !important;
}

.ec-bottom {
  bottom: 7px !important;
  animation: ecEdgeXReverse 1.18s linear infinite !important;
}

.ec-left,
.ec-right {
  top: 16px !important;
  bottom: 16px !important;
  width: 5px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 22%,
      rgba(82, 240, 255, 0.22) 30%,
      var(--ec-cyan) 38%,
      var(--ec-white) 44%,
      var(--ec-mint) 50%,
      rgba(82, 240, 255, 0.18) 58%,
      transparent 68%,
      transparent 100%
    ) !important;
  background-size: 100% 240% !important;
}

.ec-right {
  right: 7px !important;
  animation: ecEdgeY 1.12s linear infinite !important;
}

.ec-left {
  left: 7px !important;
  animation: ecEdgeYReverse 1.24s linear infinite !important;
}

.ec-runner {
  z-index: 12 !important;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 16%, var(--ec-cyan) 24%, rgba(82, 240, 255, 0.15) 58%, transparent 72%);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 20px rgba(82, 240, 255, 1),
    0 0 40px rgba(82, 240, 255, 0.62),
    0 0 70px rgba(53, 240, 198, 0.22);
  opacity: 0.96;
}

.ec-runner-a {
  top: 0;
  left: 0;
  animation: ecRunnerTop 1.7s linear infinite;
}

.ec-runner-b {
  top: 0;
  right: 0;
  animation: ecRunnerRight 1.7s linear infinite 0.42s;
}

.ec-runner-c {
  right: 0;
  bottom: 0;
  animation: ecRunnerBottom 1.7s linear infinite 0.84s;
}

.ec-runner-d {
  left: 0;
  bottom: 0;
  animation: ecRunnerLeft 1.7s linear infinite 1.26s;
}

.lightning-frame {
  z-index: 5 !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.36),
    inset 0 0 24px rgba(82, 240, 255, 0.12),
    0 0 18px rgba(82, 240, 255, 0.34) !important;
}

.charging-panel::after {
  animation: ecPanelHalo 1.6s ease-in-out infinite alternate !important;
}

@keyframes ecAngleSpin {
  from { --ec-angle: 0deg; }
  to { --ec-angle: 360deg; }
}

@keyframes ecEdgeX {
  from { background-position: 220% 0; }
  to { background-position: -20% 0; }
}

@keyframes ecEdgeXReverse {
  from { background-position: -20% 0; }
  to { background-position: 220% 0; }
}

@keyframes ecEdgeY {
  from { background-position: 0 220%; }
  to { background-position: 0 -20%; }
}

@keyframes ecEdgeYReverse {
  from { background-position: 0 -20%; }
  to { background-position: 0 220%; }
}

@keyframes ecRunnerTop {
  from { transform: translate(-8px, -8px); }
  to { transform: translate(calc(min(880px, 72vw) - 10px), -8px); }
}

@keyframes ecRunnerRight {
  from { transform: translate(8px, -8px); }
  to { transform: translate(8px, calc(500px - 10px)); }
}

@keyframes ecRunnerBottom {
  from { transform: translate(8px, 8px); }
  to { transform: translate(calc(-1 * (min(880px, 72vw) - 10px)), 8px); }
}

@keyframes ecRunnerLeft {
  from { transform: translate(-8px, 8px); }
  to { transform: translate(-8px, calc(-1 * (500px - 10px))); }
}

@keyframes ecInnerBreathStrong {
  from {
    opacity: 0.52;
    transform: scale(0.992);
    box-shadow:
      0 0 16px rgba(82, 240, 255, 0.2),
      inset 0 0 18px rgba(82, 240, 255, 0.06);
  }
  to {
    opacity: 1;
    transform: scale(1.004);
    box-shadow:
      0 0 46px rgba(82, 240, 255, 0.58),
      0 0 86px rgba(53, 240, 198, 0.18),
      inset 0 0 48px rgba(82, 240, 255, 0.18);
  }
}

@keyframes ecPanelHalo {
  from { opacity: 0.62; }
  to { opacity: 1; }
}

@media (max-width: 980px) {
  .charging-panel {
    width: min(100%, 760px) !important;
  }

  @keyframes ecRunnerTop {
    from { transform: translate(-8px, -8px); }
    to { transform: translate(calc(100vw - 88px), -8px); }
  }

  @keyframes ecRunnerBottom {
    from { transform: translate(8px, 8px); }
    to { transform: translate(calc(-1 * (100vw - 88px)), 8px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-orbit,
  .ec-inner,
  .ec-line,
  .ec-runner,
  .charging-panel::after {
    animation: none !important;
  }
}

.ec-runner {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}

/* SVG electric border v3: actual moving current around the task card */
.electric-current {
  z-index: 8 !important;
  inset: -18px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  filter: none !important;
}

.electric-svg {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: url(#electricGlowFilter) drop-shadow(0 0 14px rgba(82, 240, 255, 0.82));
}

.electric-svg-track {
  fill: none;
  stroke: rgba(82, 240, 255, 0.26);
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
}

.electric-svg-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 90 190 28 260 44 360;
  animation: electricSvgDash 1.15s linear infinite;
}

.electric-svg-flow-a {
  stroke: #70f7ff;
  stroke-width: 5.5;
  stroke-dasharray: 110 420 50 260;
  animation-duration: 1.12s;
}

.electric-svg-flow-b {
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-dasharray: 28 180 18 360 36 240;
  animation-duration: 0.82s;
  animation-direction: reverse;
  opacity: 0.92;
}

.electric-svg-flow-c {
  stroke: #36f0c7;
  stroke-width: 3.8;
  stroke-dasharray: 70 290 34 420;
  animation-duration: 1.48s;
  opacity: 0.9;
}

.electric-orb {
  fill: #ffffff;
  stroke: #62f5ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(82, 240, 255, 1)) drop-shadow(0 0 28px rgba(82, 240, 255, 0.72));
}

.electric-orb-b {
  fill: #35f0c6;
  opacity: 0.92;
}

.electric-orb-c {
  fill: #8cfaff;
  opacity: 0.88;
}

.electric-orb-d {
  fill: #ffffff;
  opacity: 0.76;
}

/* Keep the conic halo visible but make SVG the primary motion layer */
.ec-orbit {
  z-index: 7 !important;
  opacity: 0.62 !important;
  filter: blur(0.2px) drop-shadow(0 0 12px rgba(82, 240, 255, 0.55)) !important;
}

.ec-inner {
  z-index: 6 !important;
  opacity: 0.72 !important;
}

.ec-line,
.ec-runner {
  display: none !important;
}

.lightning-frame {
  opacity: 0.42 !important;
}

.charging-panel {
  border-color: rgba(82, 240, 255, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.24),
    0 0 28px rgba(82, 240, 255, 0.35),
    0 0 92px rgba(82, 240, 255, 0.2),
    inset 0 0 42px rgba(82, 240, 255, 0.12) !important;
}

@keyframes electricSvgDash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -720; }
}

@media (prefers-reduced-motion: reduce) {
  .electric-svg-flow,
  .electric-orb {
    animation: none !important;
  }
}

/* Electric arc border v4: jagged lightning, not smooth neon tubing */
.electric-current {
  z-index: 12 !important;
  inset: -28px !important;
  overflow: visible !important;
  contain: none !important;
  mix-blend-mode: screen;
}

.electric-svg {
  z-index: 16 !important;
  opacity: 0.34 !important;
  filter: url(#electricGlowFilter) drop-shadow(0 0 9px rgba(82, 240, 255, 0.42)) !important;
}

.electric-svg-track {
  opacity: 0.2 !important;
  stroke-width: 2.2 !important;
}

.electric-svg-flow {
  opacity: 0.28 !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: 42 260 18 420 !important;
  animation-duration: 1.9s !important;
}

.electric-svg-flow-b {
  opacity: 0.22 !important;
}

.electric-svg-flow-c {
  opacity: 0.24 !important;
}

.electric-orb {
  opacity: 0.26 !important;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgba(82, 240, 255, 0.62)) !important;
}

.lightning-svg {
  position: absolute;
  inset: -22px;
  z-index: 38;
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0);
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 10px rgba(82, 240, 255, 0.92))
    drop-shadow(0 0 30px rgba(41, 223, 255, 0.44));
}

.bolt-field {
  transform-box: fill-box;
  transform-origin: center;
}

.bolt,
.bolt-fork {
  fill: none;
  stroke: url(#boltStroke);
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  filter: url(#boltGlowFilter);
  opacity: var(--bolt-o, 0.88);
  transform-box: fill-box;
  transform-origin: center;
  stroke-dashoffset: var(--bolt-offset, 0);
  animation:
    boltDash var(--bolt-speed, 0.74s) linear infinite,
    boltFlicker var(--bolt-flicker, 0.12s) steps(2, end) infinite alternate,
    boltJitter var(--bolt-jitter, 0.48s) steps(5, end) infinite;
}

.bolt-main {
  stroke-width: var(--bolt-w, 2.7);
  stroke-dasharray: var(--bolt-dash, 96 160 18 250 32 420);
}

.bolt-hot {
  stroke-width: var(--bolt-w, 3.4);
  stroke-dasharray: var(--bolt-dash, 46 90 16 150);
  animation-duration: var(--bolt-speed, 0.46s), var(--bolt-flicker, 0.08s), var(--bolt-jitter, 0.32s);
}

.bolt-fork {
  stroke-width: var(--bolt-w, 2.05);
  stroke-dasharray: var(--bolt-dash, 24 64 12 86);
  opacity: var(--bolt-o, 0.74);
  animation-duration: var(--bolt-speed, 0.36s), var(--bolt-flicker, 0.07s), var(--bolt-jitter, 0.28s);
}

.bolt-spark {
  stroke-width: var(--bolt-w, 1.85);
  stroke-dasharray: var(--bolt-dash, 18 42 12 96);
  opacity: var(--bolt-o, 0.8);
  animation-duration: var(--bolt-speed, 0.32s), var(--bolt-flicker, 0.06s), var(--bolt-jitter, 0.22s);
}

.bolt-top,
.bolt-bottom {
  --bolt-speed: 0.78s;
}

.bolt-right,
.bolt-left {
  --bolt-speed: 0.86s;
}

.bolt-field-forks {
  opacity: 0.92;
  animation: forkFieldPulse 0.42s steps(3, end) infinite alternate;
}

.ec-orbit {
  z-index: 20 !important;
  opacity: 0.26 !important;
  filter:
    blur(0.15px)
    drop-shadow(0 0 9px rgba(82, 240, 255, 0.64))
    drop-shadow(0 0 28px rgba(53, 240, 198, 0.22)) !important;
}

.ec-inner {
  z-index: 14 !important;
  opacity: 0.86 !important;
  animation: ecInnerBreathStrong 1.05s ease-in-out infinite alternate !important;
}

.lightning-frame {
  opacity: 0.2 !important;
}

.charging-panel {
  border-color: rgba(125, 248, 255, 0.7) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.32),
    0 0 34px rgba(82, 240, 255, 0.46),
    0 0 106px rgba(41, 223, 255, 0.24),
    inset 0 0 58px rgba(82, 240, 255, 0.14) !important;
}

.charging-panel > :not(.lightning-frame):not(.electric-current) {
  z-index: 46 !important;
}

@keyframes boltDash {
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: -620; }
}

@keyframes boltFlicker {
  0% { opacity: 0.26; }
  18% { opacity: var(--bolt-o, 0.88); }
  30% { opacity: 0.42; }
  46% { opacity: 1; }
  58% { opacity: 0.16; }
  72% { opacity: var(--bolt-o, 0.88); }
  100% { opacity: 0.62; }
}

@keyframes boltJitter {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-1.4px, 0.7px, 0) scale(1.002); }
  40% { transform: translate3d(1.2px, -1.2px, 0) scale(0.998); }
  60% { transform: translate3d(-0.7px, -0.4px, 0) scale(1.001); }
  80% { transform: translate3d(1.6px, 0.8px, 0) scale(1); }
  100% { transform: translate3d(-0.4px, 1.1px, 0) scale(1.002); }
}

@keyframes forkFieldPulse {
  0%, 100% { opacity: 0.38; }
  35% { opacity: 1; }
  70% { opacity: 0.62; }
}

@media (max-width: 760px) {
  .electric-current {
    inset: -20px !important;
  }

  .lightning-svg {
    inset: -16px;
    width: auto;
    height: auto;
  }

  .bolt-main {
    stroke-width: 2.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bolt,
  .bolt-fork,
  .bolt-field-forks {
    animation: none !important;
  }

  .bolt,
  .bolt-fork {
    opacity: 0.46 !important;
  }
}

/* Electric arc border v5: JS-driven runners that physically orbit the frame */
.lightning-chaser {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 52;
  display: block;
  width: var(--arc-len, 180px);
  height: 54px;
  pointer-events: none;
  opacity: var(--arc-opacity, 0.9);
  transform:
    translate3d(var(--arc-x, 0px), var(--arc-y, 0px), 0)
    rotate(var(--arc-rot, 0deg))
    scaleX(var(--arc-scale, 1));
  transform-origin: 10px 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity, width;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 9px rgba(82, 240, 255, 1))
    drop-shadow(0 0 24px rgba(41, 223, 255, 0.78))
    drop-shadow(0 0 46px rgba(53, 240, 198, 0.24));
}

.lightning-chaser::before,
.lightning-chaser::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.lightning-chaser::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 38px;
  transform: translateY(-50%) skewX(var(--arc-skew, -8deg));
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(42, 223, 255, 0.06) 7%,
      rgba(92, 249, 255, 0.92) 18%,
      #ffffff 30%,
      rgba(53, 240, 198, 0.92) 47%,
      rgba(92, 249, 255, 0.98) 64%,
      #ffffff 78%,
      transparent 100%);
  clip-path: polygon(
    0% 52%,
    6% 42%,
    12% 56%,
    19% 34%,
    25% 58%,
    32% 46%,
    39% 61%,
    47% 28%,
    54% 55%,
    62% 40%,
    70% 60%,
    78% 32%,
    86% 54%,
    94% 44%,
    100% 50%,
    94% 58%,
    87% 49%,
    78% 72%,
    70% 52%,
    62% 64%,
    54% 48%,
    47% 76%,
    39% 53%,
    32% 68%,
    25% 48%,
    19% 70%,
    12% 51%,
    6% 60%
  );
  animation:
    chaserFlicker 0.07s steps(2, end) infinite,
    chaserWarp 0.19s steps(4, end) infinite;
}

.lightning-chaser::after {
  right: -8px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 18%, #8ffaff 28%, rgba(41, 223, 255, 0.38) 58%, transparent 76%);
  transform: translateY(-50%);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 18px rgba(82, 240, 255, 1),
    0 0 36px rgba(41, 223, 255, 0.68);
  animation: chaserHeadPulse 0.11s steps(2, end) infinite alternate;
}

.lightning-chaser-1::before {
  --arc-skew: 9deg;
  clip-path: polygon(
    0% 48%, 9% 62%, 16% 36%, 23% 58%, 31% 42%, 38% 70%,
    46% 36%, 54% 58%, 63% 44%, 70% 66%, 79% 39%, 88% 60%,
    100% 45%, 88% 54%, 79% 73%, 70% 52%, 63% 66%, 54% 49%,
    46% 77%, 38% 51%, 31% 63%, 23% 45%, 16% 68%, 9% 50%
  );
}

.lightning-chaser-2 {
  height: 42px;
}

.lightning-chaser-2::before {
  height: 28px;
  --arc-skew: -14deg;
}

.lightning-chaser-3 {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 7px rgba(82, 240, 255, 0.92))
    drop-shadow(0 0 18px rgba(53, 240, 198, 0.56));
}

.electric-current[data-lightning-live="1"] .lightning-svg {
  animation: lightningFieldShake 0.16s steps(2, end) infinite;
}

@keyframes chaserFlicker {
  0% { opacity: 0.2; filter: brightness(0.75); }
  24% { opacity: 1; filter: brightness(1.9); }
  42% { opacity: 0.36; filter: brightness(1); }
  58% { opacity: 0.95; filter: brightness(2.3); }
  74% { opacity: 0.52; filter: brightness(1.2); }
  100% { opacity: 1; filter: brightness(1.75); }
}

@keyframes chaserWarp {
  0% { clip-path: polygon(0% 52%, 6% 42%, 12% 56%, 19% 34%, 25% 58%, 32% 46%, 39% 61%, 47% 28%, 54% 55%, 62% 40%, 70% 60%, 78% 32%, 86% 54%, 94% 44%, 100% 50%, 94% 58%, 87% 49%, 78% 72%, 70% 52%, 62% 64%, 54% 48%, 47% 76%, 39% 53%, 32% 68%, 25% 48%, 19% 70%, 12% 51%, 6% 60%); }
  33% { clip-path: polygon(0% 48%, 7% 58%, 14% 38%, 20% 64%, 28% 44%, 35% 66%, 43% 36%, 50% 60%, 58% 42%, 66% 70%, 74% 36%, 83% 58%, 91% 41%, 100% 53%, 92% 63%, 84% 48%, 75% 76%, 66% 54%, 58% 67%, 50% 49%, 43% 78%, 35% 52%, 28% 70%, 20% 47%, 14% 66%, 7% 51%); }
  66% { clip-path: polygon(0% 55%, 5% 39%, 13% 61%, 18% 31%, 27% 56%, 34% 41%, 41% 69%, 49% 34%, 57% 57%, 64% 36%, 72% 63%, 80% 29%, 88% 58%, 95% 40%, 100% 48%, 94% 56%, 87% 52%, 80% 74%, 72% 50%, 64% 69%, 57% 46%, 49% 72%, 41% 55%, 34% 64%, 27% 51%, 18% 74%, 13% 48%, 5% 62%); }
  100% { clip-path: polygon(0% 52%, 6% 42%, 12% 56%, 19% 34%, 25% 58%, 32% 46%, 39% 61%, 47% 28%, 54% 55%, 62% 40%, 70% 60%, 78% 32%, 86% 54%, 94% 44%, 100% 50%, 94% 58%, 87% 49%, 78% 72%, 70% 52%, 62% 64%, 54% 48%, 47% 76%, 39% 53%, 32% 68%, 25% 48%, 19% 70%, 12% 51%, 6% 60%); }
}

@keyframes chaserHeadPulse {
  from { opacity: 0.42; transform: translateY(-50%) scale(0.72); }
  to { opacity: 1; transform: translateY(-50%) scale(1.26); }
}

@keyframes lightningFieldShake {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1px, 0.5px, 0); }
  50% { transform: translate3d(1px, -1px, 0); }
  75% { transform: translate3d(-0.4px, -0.8px, 0); }
  100% { transform: translate3d(0.8px, 0.4px, 0); }
}

/* Electric arc border v6: delicate reference-style edge current */
.electric-current[data-electric-style="delicate"] {
  inset: -13px !important;
  mix-blend-mode: screen;
}

.electric-current[data-electric-style="delicate"] .electric-svg {
  opacity: 0.035 !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg-flow,
.electric-current[data-electric-style="delicate"] .electric-orb {
  opacity: 0.12 !important;
}

.electric-current[data-electric-style="delicate"] .bolt,
.electric-current[data-electric-style="delicate"] .bolt-fork,
.electric-current[data-electric-style="delicate"] .bolt-spark {
  display: none !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  inset: -6px;
  z-index: 42;
  filter:
    drop-shadow(0 0 1px rgba(232, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.52))
    drop-shadow(0 0 9px rgba(41, 223, 255, 0.16));
}

.edge-trace-field {
  transform-box: fill-box;
  transform-origin: center;
}

.edge-trace,
.edge-spark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  mix-blend-mode: screen;
}

.edge-trace {
  stroke: rgba(88, 238, 255, 0.92);
  stroke-width: 0.92;
  opacity: var(--trace-o, 0.7);
  stroke-dasharray: 420 18;
  animation:
    edgeTraceFlow 2.8s linear infinite,
    edgeTraceBreath 1.6s ease-in-out infinite alternate;
  animation-delay: var(--trace-delay, 0s);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.58))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.5));
}

.edge-trace-0 {
  stroke: #5df3ff;
  stroke-width: 1.05;
  stroke-dasharray: 520 14;
}

.edge-trace-1 {
  stroke: rgba(120, 248, 255, 0.22);
  stroke-width: 1.55;
  stroke-dasharray: 640 22;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(44, 218, 255, 0.34);
  stroke-width: 0.9;
  stroke-dasharray: 180 34;
}

.edge-spark {
  stroke: rgba(238, 255, 255, 0.94);
  stroke-width: var(--spark-w, 1.45px);
  opacity: var(--spark-o, 0.42);
  stroke-dasharray: 36 80;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.5));
  animation: edgeSparkBlink 0.9s steps(3, end) infinite alternate;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  z-index: 54;
  width: var(--arc-len, 72px);
  height: 14px;
  opacity: var(--arc-opacity, 0.26);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.74))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.62));
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 3px !important;
  top: 50%;
  transform: translateY(-50%) !important;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(73, 231, 255, 0.16) 12%,
      rgba(110, 248, 255, 0.76) 35%,
      rgba(255, 255, 255, 0.9) 52%,
      rgba(82, 240, 255, 0.62) 72%,
      transparent 100%) !important;
  clip-path: none !important;
  animation: delicateRunnerPulse 1.25s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::after {
  right: -2px;
  width: 5px;
  height: 5px;
  opacity: 0.55;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 9px rgba(82, 240, 255, 0.72);
  animation: delicateHeadPulse 0.9s ease-in-out infinite alternate;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeMicroShake 0.72s steps(4, end) infinite;
}

.electric-current[data-electric-style="delicate"] .ec-orbit {
  opacity: 0.12 !important;
}

.electric-current[data-electric-style="delicate"] .ec-inner {
  opacity: 0.42 !important;
}

.charging-panel {
  border-color: rgba(91, 235, 249, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.22),
    0 0 14px rgba(82, 240, 255, 0.24),
    0 0 36px rgba(41, 223, 255, 0.12),
    inset 0 0 38px rgba(82, 240, 255, 0.1) !important;
}

@keyframes edgeTraceFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -92; }
}

@keyframes edgeTraceBreath {
  from { opacity: 0.34; }
  to { opacity: var(--trace-o, 0.7); }
}

@keyframes edgeSparkBlink {
  0% { opacity: 0.08; }
  35% { opacity: var(--spark-o, 0.42); }
  65% { opacity: 0.18; }
  100% { opacity: 0.58; }
}

@keyframes delicateRunnerPulse {
  from { opacity: 0.28; filter: brightness(0.88); }
  to { opacity: 0.82; filter: brightness(1.35); }
}

@keyframes delicateHeadPulse {
  from { opacity: 0.24; transform: translateY(-50%) scale(0.82); }
  to { opacity: 0.68; transform: translateY(-50%) scale(1.08); }
}

@keyframes edgeMicroShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.35px, 0.15px, 0); }
  50% { transform: translate3d(0.28px, -0.28px, 0); }
  75% { transform: translate3d(-0.18px, -0.12px, 0); }
}

/* Electric arc border v7: tight wrap + fine sizzling micro arcs */
.electric-current[data-electric-style="delicate"] {
  inset: 0 !important;
  border-radius: inherit;
  overflow: visible !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  inset: -1px !important;
  filter:
    drop-shadow(0 0 1px rgba(238, 255, 255, 0.7))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.62))
    drop-shadow(0 0 11px rgba(41, 223, 255, 0.2));
}

.edge-trace,
.edge-spark,
.edge-zap {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  mix-blend-mode: screen;
}

.edge-trace {
  stroke-width: 0.86;
  stroke-dasharray: 34 5 2 7;
  animation:
    edgeTraceFlow 1.05s linear infinite,
    edgeTraceBreath 0.52s steps(3, end) infinite alternate;
}

.edge-trace-0 {
  stroke-width: 1.05;
  stroke-dasharray: 48 4 3 6 12 5;
}

.edge-trace-1 {
  stroke-width: 1.35;
  stroke: rgba(114, 249, 255, 0.24);
  stroke-dasharray: 86 9 18 7;
}

.edge-trace-2,
.edge-trace-3 {
  stroke-width: 0.72;
  stroke: rgba(164, 252, 255, 0.42);
  stroke-dasharray: 12 10 4 15;
}

.edge-zap {
  stroke: rgba(238, 255, 255, 0.98);
  stroke-width: var(--zap-w, 1px);
  opacity: var(--zap-o, 0.28);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 9px rgba(41, 223, 255, 0.28));
  animation: edgeZapSizzle 0.11s steps(2, end) infinite alternate;
}

.edge-spark {
  stroke-dasharray: 18 38 6 30;
  animation:
    edgeSparkBlink 0.28s steps(2, end) infinite alternate,
    edgeTraceFlow 0.9s linear infinite;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  width: var(--arc-len, 58px);
  height: 10px;
  opacity: var(--arc-opacity, 0.18);
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 2px !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeMicroShake 0.22s steps(2, end) infinite;
}

@keyframes edgeZapSizzle {
  0% { opacity: 0.06; }
  35% { opacity: var(--zap-o, 0.28); }
  70% { opacity: 0.18; }
  100% { opacity: 0.72; }
}

/* Electric arc border v8: force SVG to the exact panel box so bottom hugs the frame */
.electric-current[data-electric-style="delicate"] .lightning-svg {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.electric-current[data-electric-style="delicate"] {
  padding: 0 !important;
}

/* Admin UI unification v10: same 星空GPT cyan/mint system + card management controls */
:root {
  --bg: #061018;
  --bg-soft: #071826;
  --panel: #092132;
  --panel-strong: #0b2a3d;
  --line: rgba(82, 240, 255, 0.22);
  --line-bright: #52f0ff;
  --text: #ecfbff;
  --muted: #88aebd;
  --cyan: #52f0ff;
  --mint: #2de6be;
  --amber: #ffd166;
  --red: #ff6b8a;
  --shadow: 0 24px 86px rgba(0, 0, 0, 0.46), 0 0 44px rgba(82, 240, 255, 0.08);
}

.brand,
.nav-link,
.nav-pill,
.admin-tabs,
.product-strip,
.login-panel,
.admin-console,
.console-panel,
.flow-panel,
.table-wrap,
.stat-card {
  border-color: rgba(82, 240, 255, 0.24) !important;
}

.brand,
.nav-link,
.nav-pill {
  background:
    linear-gradient(180deg, rgba(82, 240, 255, 0.11), rgba(82, 240, 255, 0.035)),
    rgba(6, 20, 31, 0.72) !important;
  color: #d9fbff !important;
  box-shadow: inset 0 0 20px rgba(82, 240, 255, 0.08), 0 0 18px rgba(82, 240, 255, 0.08) !important;
}

.brand-mark {
  color: #041018 !important;
  border-color: rgba(82, 240, 255, 0.92) !important;
  background: linear-gradient(135deg, #52f0ff, #2de6be) !important;
  box-shadow: 0 0 18px rgba(82, 240, 255, 0.34);
}

.btn,
.mini-copy,
.selection-count,
.pagination-bar select,
.generate-form select,
.generate-form input {
  border-radius: 8px;
}

.btn.primary,
#verifyBtn,
#submitRechargeBtn,
#loginBtn {
  border: 1px solid rgba(101, 248, 255, 0.72) !important;
  background:
    linear-gradient(90deg, rgba(82, 240, 255, 0.98), rgba(45, 230, 190, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent) !important;
  color: #031116 !important;
  box-shadow:
    0 0 26px rgba(82, 240, 255, 0.3),
    0 0 48px rgba(45, 230, 190, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.btn.secondary,
.mini-copy {
  border-color: rgba(82, 240, 255, 0.46) !important;
  background:
    linear-gradient(180deg, rgba(82, 240, 255, 0.13), rgba(82, 240, 255, 0.045)),
    rgba(7, 35, 50, 0.74) !important;
  color: #d9fbff !important;
}

.btn.ghost {
  border-color: rgba(137, 198, 214, 0.28) !important;
  background: rgba(5, 24, 36, 0.62) !important;
  color: #b9d7df !important;
}

.btn:hover,
.mini-copy:hover {
  border-color: rgba(145, 252, 255, 0.88) !important;
  box-shadow: 0 0 18px rgba(82, 240, 255, 0.18);
}

.admin-shell {
  width: min(1420px, calc(100vw - 56px));
}

.admin-console {
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(8, 35, 51, 0.86), rgba(5, 19, 30, 0.84)) !important;
}

.admin-heading,
.toolbar {
  border-color: rgba(82, 240, 255, 0.18) !important;
}

.admin-tabs button.active,
.admin-tabs button:hover {
  background: linear-gradient(180deg, rgba(82, 240, 255, 0.16), rgba(45, 230, 190, 0.05)) !important;
  box-shadow:
    inset 0 -3px 0 rgba(82, 240, 255, 0.92),
    inset 0 0 24px rgba(82, 240, 255, 0.08) !important;
}

.table-wrap {
  background:
    linear-gradient(180deg, rgba(5, 28, 42, 0.68), rgba(4, 18, 28, 0.72)),
    radial-gradient(circle at 20% 0%, rgba(82, 240, 255, 0.08), transparent 34%) !important;
  box-shadow: inset 0 0 0 1px rgba(82, 240, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.22);
}

th {
  color: #9eeef8 !important;
  background: rgba(4, 20, 31, 0.82) !important;
}

td {
  border-top-color: rgba(82, 240, 255, 0.08) !important;
}

tr.is-selected td {
  background: rgba(82, 240, 255, 0.075);
}

.admin-card-actions {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.card-bulk-actions,
.generated-actions,
.pagination-bar,
.page-controls,
.card-code-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-bulk-actions {
  justify-content: flex-end;
}

.selection-count {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(82, 240, 255, 0.24);
  background: rgba(82, 240, 255, 0.075);
  color: #c9faff;
  font-size: 12px;
  font-weight: 800;
}

.generated-actions {
  margin: -6px 0 14px;
  justify-content: flex-end;
}

.select-col {
  width: 44px;
  min-width: 44px;
  text-align: center;
}

.select-col input,
.card-select {
  width: 16px;
  height: 16px;
  accent-color: #52f0ff;
  cursor: pointer;
}

.card-code-cell {
  justify-content: space-between;
  min-width: 260px;
}

.card-code-cell strong {
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: #f3feff;
}

.mini-copy {
  min-height: 28px;
  border: 1px solid rgba(82, 240, 255, 0.38);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-copy.copied,
.btn.copied {
  color: #041018 !important;
  background: linear-gradient(90deg, #52f0ff, #2de6be) !important;
}

.pagination-bar {
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(82, 240, 255, 0.18);
  background: rgba(5, 24, 36, 0.54);
}

.page-summary {
  color: #a9cbd4;
  font-size: 13px;
  font-weight: 700;
}

.pagination-bar select,
.generate-form select,
.generate-form input {
  min-height: 36px;
  border: 1px solid rgba(82, 240, 255, 0.24);
  background: rgba(5, 22, 33, 0.82);
  color: #e8fbff;
  padding: 0 10px;
  outline: none;
}

.pagination-bar select:focus,
.generate-form select:focus,
.generate-form input:focus {
  border-color: rgba(82, 240, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(82, 240, 255, 0.1);
}

@media (max-width: 920px) {
  .admin-shell {
    width: min(100% - 24px, 1180px);
  }

  .toolbar.split,
  .admin-card-actions,
  .card-bulk-actions,
  .pagination-bar {
    align-items: stretch;
    justify-items: stretch;
    flex-direction: column;
  }

  .generate-form,
  .card-bulk-actions,
  .page-controls {
    width: 100%;
  }

  .card-bulk-actions .btn,
  .page-controls .btn,
  .page-controls select {
    flex: 1 1 auto;
  }
}

/* Front card-query module v1: rightmost product tab + cyber star status records */
.product-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.product-tab.query-tab {
  color: #fff4d6 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.08), rgba(255, 209, 102, 0.04)) !important;
}

.product-tab.query-tab.active,
.product-tab.query-tab:hover {
  color: #041018 !important;
  background:
    linear-gradient(90deg, #52f0ff, #2de6be 58%, #ffd166) !important;
  box-shadow:
    inset 0 -3px 0 rgba(255, 255, 255, 0.5),
    0 0 30px rgba(82, 240, 255, 0.28),
    0 0 54px rgba(255, 209, 102, 0.14) !important;
}

.card-query-panel {
  position: relative;
  isolation: isolate;
  margin-top: 24px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(82, 240, 255, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(8, 26, 39, 0.92), rgba(4, 13, 22, 0.9)),
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.1), transparent 30%);
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(82, 240, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.card-query-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(82, 240, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(82, 240, 255, 0.028) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.22));
}

.query-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #ffd166;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.42));
}

.query-corner-tl {
  left: 8px;
  top: 8px;
  border-left: 3px solid;
  border-top: 3px solid;
}

.query-corner-br {
  right: 8px;
  bottom: 8px;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.query-field textarea {
  min-height: 172px;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
}

.query-actions {
  margin-top: 18px;
}

.query-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.query-summary div {
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(82, 240, 255, 0.18);
  background: rgba(4, 19, 29, 0.72);
}

.query-summary span,
.query-result-grid span,
.query-timeline span {
  display: block;
  color: #8db6c2;
  font-size: 12px;
  font-weight: 800;
}

.query-summary strong {
  display: block;
  margin-top: 8px;
  color: #f4feff;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  font-size: 24px;
}

.query-summary .ok strong { color: #2de6be; }
.query-summary .warn strong { color: #ffd166; }
.query-summary .danger strong { color: #ff6b8a; }

.query-results {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.query-empty {
  padding: 18px;
  border: 1px dashed rgba(82, 240, 255, 0.24);
  color: #b5d7df;
  background: rgba(4, 19, 29, 0.58);
}

.query-result-card {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(82, 240, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(6, 25, 38, 0.86), rgba(4, 17, 27, 0.88));
  box-shadow: inset 3px 0 0 rgba(82, 240, 255, 0.42);
}

.query-result-card.ok {
  box-shadow: inset 3px 0 0 rgba(45, 230, 190, 0.72);
}

.query-result-card.warn {
  box-shadow: inset 3px 0 0 rgba(255, 209, 102, 0.72);
}

.query-result-card.danger {
  box-shadow: inset 3px 0 0 rgba(255, 107, 138, 0.72);
}

.query-inline-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.query-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.query-result-head small {
  display: block;
  color: #72eefe;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.query-result-head strong {
  color: #f4feff;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
  font-size: 14px;
  word-break: break-all;
}

.query-status {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(82, 240, 255, 0.34);
  padding: 0 10px;
  color: #d9fbff;
  background: rgba(82, 240, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.query-status.ok {
  border-color: rgba(45, 230, 190, 0.62);
  color: #2de6be;
}

.query-status.warn {
  border-color: rgba(255, 209, 102, 0.62);
  color: #ffd166;
}

.query-status.danger {
  border-color: rgba(255, 107, 138, 0.62);
  color: #ff9bad;
}

.query-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.query-result-grid div {
  padding: 10px;
  border: 1px solid rgba(82, 240, 255, 0.11);
  background: rgba(0, 0, 0, 0.16);
}

.query-result-grid strong {
  display: block;
  margin-top: 6px;
  color: #eefcff;
  font-size: 13px;
  word-break: break-all;
}

.query-timeline {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(82, 240, 255, 0.12);
}

.query-timeline div {
  position: relative;
  padding-left: 14px;
}

.query-timeline div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #52f0ff;
  box-shadow: 0 0 10px rgba(82, 240, 255, 0.72);
}

.query-timeline strong {
  display: block;
  color: #f4feff;
  font-size: 13px;
}

.query-timeline p {
  margin: 3px 0 0;
  color: #9dbdc6;
  font-size: 12px;
}

@media (max-width: 900px) {
  .product-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .query-summary,
  .query-protocol-grid,
  .query-result-grid {
    grid-template-columns: 1fr;
  }

  .query-result-head {
    flex-direction: column;
  }
}

/* Product strip unification v11: all four entries share cyber star cyan/mint style */
.product-strip {
  border-color: rgba(82, 240, 255, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(7, 32, 47, 0.78), rgba(3, 14, 24, 0.86)),
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.08), transparent 34%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 28px rgba(82, 240, 255, 0.09) !important;
}

.product-tab,
.product-tab.query-tab {
  position: relative;
  overflow: hidden;
  color: #e8fbff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.105), rgba(45, 230, 190, 0.035)),
    rgba(3, 18, 29, 0.74) !important;
  border-right-color: rgba(82, 240, 255, 0.18) !important;
  text-shadow: 0 0 14px rgba(82, 240, 255, 0.22);
}

.product-tab::before,
.product-tab.query-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(82, 240, 255, 0.1), transparent),
    radial-gradient(circle at 18% 25%, rgba(82, 240, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 62%, rgba(45, 230, 190, 0.2) 0 1px, transparent 2px);
  opacity: 0;
  transform: translateX(-24%);
  transition: opacity 0.18s ease, transform 0.26s ease;
}

.product-tab small,
.product-tab.query-tab small {
  color: #9eeef8 !important;
  text-shadow: 0 0 12px rgba(82, 240, 255, 0.18);
}

.product-tab:hover,
.product-tab.active,
.product-tab.query-tab:hover,
.product-tab.query-tab.active {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.2), rgba(45, 230, 190, 0.07)),
    rgba(4, 29, 43, 0.86) !important;
  box-shadow:
    inset 0 -3px 0 rgba(82, 240, 255, 0.96),
    inset 0 0 26px rgba(82, 240, 255, 0.1),
    0 0 24px rgba(82, 240, 255, 0.12) !important;
}

.product-tab:hover::before,
.product-tab.active::before {
  opacity: 1;
  transform: translateX(0);
}

.product-tab.active small,
.product-tab.query-tab.active small,
.product-tab:hover small,
.product-tab.query-tab:hover small {
  color: #caffff !important;
}

.product-tab.active::after,
.product-tab.query-tab.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #52f0ff, #2de6be, transparent);
  box-shadow: 0 0 16px rgba(82, 240, 255, 0.78);
}

/* Product strip unification v12: first three product buttons now match the fourth cyber/star/mint tab */
#productStrip.product-strip {
  --tab-cyan: #52f0ff;
  --tab-mint: #2de6be;
  --tab-ink: #eafcff;
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border: 1px solid rgba(82, 240, 255, 0.3) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.11), transparent 34%),
    radial-gradient(circle at 12% 26%, rgba(82, 240, 255, 0.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 33% 72%, rgba(45, 230, 190, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 30%, rgba(202, 255, 255, 0.2) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(6, 31, 47, 0.86), rgba(2, 13, 23, 0.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 32px rgba(82, 240, 255, 0.07),
    0 0 34px rgba(82, 240, 255, 0.1),
    0 18px 54px rgba(0, 0, 0, 0.32) !important;
}

#productStrip.product-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(82, 240, 255, 0.18), rgba(45, 230, 190, 0.16), transparent);
  opacity: 0.42;
  transform: translateX(-35%);
  animation: productStripScan 7.5s linear infinite;
}

#productStrip.product-strip .product-tab,
#productStrip.product-strip .product-tab.query-tab {
  position: relative;
  z-index: 1;
  min-height: 64px;
  overflow: hidden;
  padding: 13px 12px 12px;
  border: 0 !important;
  border-right: 1px solid rgba(82, 240, 255, 0.18) !important;
  color: var(--tab-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.16), transparent 52%),
    radial-gradient(circle at 15% 18%, rgba(45, 230, 190, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.12), rgba(45, 230, 190, 0.045)),
    rgba(3, 20, 31, 0.8) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.045),
    inset 0 -1px 0 rgba(82, 240, 255, 0.18) !important;
  text-shadow: 0 0 15px rgba(82, 240, 255, 0.28);
  transition:
    transform 160ms ease,
    filter 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

#productStrip.product-strip .product-tab:last-child {
  border-right: 0 !important;
}

#productStrip.product-strip .product-tab small,
#productStrip.product-strip .product-tab.query-tab small {
  color: #a8f4fb !important;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 0 12px rgba(82, 240, 255, 0.2);
}

#productStrip.product-strip .product-tab::before,
#productStrip.product-strip .product-tab.query-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.2), transparent 28%),
    linear-gradient(110deg, transparent 0%, rgba(82, 240, 255, 0.11) 38%, rgba(45, 230, 190, 0.14) 48%, transparent 62%),
    radial-gradient(circle at 22% 28%, rgba(82, 240, 255, 0.33) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 64%, rgba(45, 230, 190, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(202, 255, 255, 0.22) 0 1px, transparent 1.8px);
  opacity: 0.62;
  transform: translate3d(-18%, 0, 0);
  transition: opacity 180ms ease, transform 240ms ease;
  animation: productTabStarDrift 10s linear infinite;
}

#productStrip.product-strip .product-tab::after,
#productStrip.product-strip .product-tab.query-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tab-cyan), var(--tab-mint), transparent) !important;
  box-shadow:
    0 0 12px rgba(82, 240, 255, 0.48),
    0 0 20px rgba(45, 230, 190, 0.22) !important;
  opacity: 0.42;
  transform: scaleX(0.62);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

#productStrip.product-strip .product-tab:hover,
#productStrip.product-strip .product-tab.active,
#productStrip.product-strip .product-tab.query-tab:hover,
#productStrip.product-strip .product-tab.query-tab.active,
#productStrip.product-strip .product-tab.fx-tilt {
  color: #ffffff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.2), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.26), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.22), rgba(45, 230, 190, 0.08)),
    rgba(4, 29, 43, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.11),
    inset 0 -3px 0 rgba(82, 240, 255, 0.95),
    inset 0 0 26px rgba(82, 240, 255, 0.12),
    0 0 25px rgba(82, 240, 255, 0.16) !important;
  filter: saturate(1.08) brightness(1.05);
}

#productStrip.product-strip .product-tab:hover::before,
#productStrip.product-strip .product-tab.active::before,
#productStrip.product-strip .product-tab.fx-tilt::before {
  opacity: 0.94;
  transform: translate3d(0, 0, 0);
}

#productStrip.product-strip .product-tab:hover::after,
#productStrip.product-strip .product-tab.active::after,
#productStrip.product-strip .product-tab.fx-tilt::after,
#productStrip.product-strip .product-tab.query-tab:hover::after,
#productStrip.product-strip .product-tab.query-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
  box-shadow:
    0 0 16px rgba(82, 240, 255, 0.78),
    0 0 30px rgba(45, 230, 190, 0.38) !important;
}

#productStrip.product-strip .product-tab:focus-visible {
  outline: 2px solid rgba(82, 240, 255, 0.86);
  outline-offset: -4px;
}

@keyframes productStripScan {
  0% { transform: translateX(-65%); }
  100% { transform: translateX(65%); }
}

@keyframes productTabStarDrift {
  0% { background-position: 0 0, -45px 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 45px 0, 6px -3px, -5px 4px, 4px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  #productStrip.product-strip::before,
  #productStrip.product-strip .product-tab::before {
    animation: none !important;
  }
}

/* Primary flow buttons v13: verify / inspect / submit share cyber star cyan-mint style */
#verifyBtn,
#inspectSessionBtn,
#submitRechargeBtn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(101, 248, 255, 0.78) !important;
  border-radius: 10px !important;
  color: #031116 !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.38), transparent 28%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 66%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
    linear-gradient(92deg, #52f0ff 0%, #35e9d2 48%, #2de6be 100%) !important;
  box-shadow:
    0 0 28px rgba(82, 240, 255, 0.34),
    0 0 54px rgba(45, 230, 190, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 0 rgba(2, 11, 16, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

#verifyBtn::before,
#inspectSessionBtn::before,
#submitRechargeBtn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.45) 42%, rgba(202, 255, 255, 0.36) 50%, transparent 62%),
    radial-gradient(circle at 24% 30%, rgba(3, 17, 22, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(3, 17, 22, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(3, 17, 22, 0.2) 0 1px, transparent 2px);
  opacity: 0.52;
  transform: translateX(-42%);
  animation: flowButtonScan 4.6s linear infinite;
}

#verifyBtn::after,
#inspectSessionBtn::after,
#submitRechargeBtn::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.62);
  opacity: 0.65;
}

#verifyBtn:hover,
#inspectSessionBtn:hover,
#submitRechargeBtn:hover,
#verifyBtn.fx-tilt,
#inspectSessionBtn.fx-tilt,
#submitRechargeBtn.fx-tilt {
  border-color: rgba(207, 255, 255, 0.95) !important;
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 0 34px rgba(82, 240, 255, 0.46),
    0 0 68px rgba(45, 230, 190, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 0 22px rgba(255, 255, 255, 0.16) !important;
}

#verifyBtn:hover::before,
#inspectSessionBtn:hover::before,
#submitRechargeBtn:hover::before,
#verifyBtn.fx-tilt::before,
#inspectSessionBtn.fx-tilt::before,
#submitRechargeBtn.fx-tilt::before {
  opacity: 0.86;
}

.flow-panel.disabled #verifyBtn,
.flow-panel.disabled #inspectSessionBtn,
.flow-panel.disabled #submitRechargeBtn,
#verifyBtn:disabled,
#inspectSessionBtn:disabled,
#submitRechargeBtn:disabled {
  filter: saturate(0.72) brightness(0.82);
  box-shadow:
    0 0 18px rgba(82, 240, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

@keyframes flowButtonScan {
  0% { transform: translateX(-48%); }
  100% { transform: translateX(48%); }
}

@media (prefers-reduced-motion: reduce) {
  #verifyBtn::before,
  #inspectSessionBtn::before,
  #submitRechargeBtn::before {
    animation: none !important;
    transform: translateX(0);
  }
}

/* Primary flow buttons v14: tone down to match product-tab dark cyber star cyan/mint style */
#verifyBtn,
#inspectSessionBtn,
#submitRechargeBtn {
  --flow-btn-cyan: #52f0ff;
  --flow-btn-mint: #2de6be;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.32) !important;
  border-radius: 10px !important;
  color: #eafcff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.12), transparent 33%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.18), transparent 54%),
    radial-gradient(circle at 14% 22%, rgba(45, 230, 190, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.13), rgba(45, 230, 190, 0.045)),
    rgba(3, 20, 31, 0.84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.055),
    inset 0 -1px 0 rgba(82, 240, 255, 0.2),
    inset 0 0 22px rgba(82, 240, 255, 0.055),
    0 0 18px rgba(82, 240, 255, 0.08) !important;
  text-shadow: 0 0 14px rgba(82, 240, 255, 0.24) !important;
}

#verifyBtn::before,
#inspectSessionBtn::before,
#submitRechargeBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 27%),
    linear-gradient(110deg, transparent 0%, rgba(82, 240, 255, 0.1) 39%, rgba(45, 230, 190, 0.13) 50%, transparent 63%),
    radial-gradient(circle at 22% 28%, rgba(82, 240, 255, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 64%, rgba(45, 230, 190, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(202, 255, 255, 0.2) 0 1px, transparent 1.8px);
  opacity: 0.6;
  transform: translate3d(-18%, 0, 0);
  animation: productTabStarDrift 10s linear infinite;
}

#verifyBtn::after,
#inspectSessionBtn::after,
#submitRechargeBtn::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  z-index: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--flow-btn-cyan), var(--flow-btn-mint), transparent) !important;
  box-shadow:
    0 0 12px rgba(82, 240, 255, 0.48),
    0 0 20px rgba(45, 230, 190, 0.22) !important;
  opacity: 0.62;
  transform: scaleX(0.76);
}

#verifyBtn:hover,
#inspectSessionBtn:hover,
#submitRechargeBtn:hover,
#verifyBtn.fx-tilt,
#inspectSessionBtn.fx-tilt,
#submitRechargeBtn.fx-tilt {
  border-color: rgba(82, 240, 255, 0.54) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.24), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.2), rgba(45, 230, 190, 0.07)),
    rgba(4, 29, 43, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.1),
    inset 0 -3px 0 rgba(82, 240, 255, 0.82),
    inset 0 0 24px rgba(82, 240, 255, 0.1),
    0 0 20px rgba(82, 240, 255, 0.14) !important;
  filter: saturate(1.04) brightness(1.03);
}

#verifyBtn:hover::before,
#inspectSessionBtn:hover::before,
#submitRechargeBtn:hover::before,
#verifyBtn.fx-tilt::before,
#inspectSessionBtn.fx-tilt::before,
#submitRechargeBtn.fx-tilt::before {
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
}

#verifyBtn:hover::after,
#inspectSessionBtn:hover::after,
#submitRechargeBtn:hover::after,
#verifyBtn.fx-tilt::after,
#inspectSessionBtn.fx-tilt::after,
#submitRechargeBtn.fx-tilt::after {
  opacity: 0.95;
  transform: scaleX(1);
}

.flow-panel.disabled #verifyBtn,
.flow-panel.disabled #inspectSessionBtn,
.flow-panel.disabled #submitRechargeBtn,
#verifyBtn:disabled,
#inspectSessionBtn:disabled,
#submitRechargeBtn:disabled {
  color: rgba(234, 252, 255, 0.62) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.11), transparent 52%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.08), rgba(45, 230, 190, 0.025)),
    rgba(3, 20, 31, 0.68) !important;
  filter: saturate(0.82) brightness(0.9);
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.04),
    0 0 12px rgba(82, 240, 255, 0.055) !important;
}

@media (prefers-reduced-motion: reduce) {
  #verifyBtn::before,
  #inspectSessionBtn::before,
  #submitRechargeBtn::before {
    animation: none !important;
    transform: none;
  }
}

/* Admin clickable controls v15: match the dark cyber/star cyan-mint button language */
body:has(.admin-shell) .btn,
body:has(.admin-shell) .mini-copy,
body:has(.admin-shell) .nav-link,
.admin-shell .admin-tabs button {
  --admin-btn-cyan: #52f0ff;
  --admin-btn-mint: #2de6be;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.3) !important;
  border-radius: 10px !important;
  color: #eafcff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.105), transparent 33%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.16), transparent 54%),
    radial-gradient(circle at 14% 22%, rgba(45, 230, 190, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.12), rgba(45, 230, 190, 0.04)),
    rgba(3, 20, 31, 0.84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.05),
    inset 0 -1px 0 rgba(82, 240, 255, 0.18),
    inset 0 0 20px rgba(82, 240, 255, 0.05),
    0 0 16px rgba(82, 240, 255, 0.07) !important;
  text-shadow: 0 0 13px rgba(82, 240, 255, 0.24) !important;
}

body:has(.admin-shell) .btn::before,
body:has(.admin-shell) .mini-copy::before,
body:has(.admin-shell) .nav-link::before,
.admin-shell .admin-tabs button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.16), transparent 27%),
    linear-gradient(110deg, transparent 0%, rgba(82, 240, 255, 0.09) 39%, rgba(45, 230, 190, 0.12) 50%, transparent 63%),
    radial-gradient(circle at 22% 28%, rgba(82, 240, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 64%, rgba(45, 230, 190, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(202, 255, 255, 0.18) 0 1px, transparent 1.8px);
  opacity: 0.56;
  transform: translate3d(-18%, 0, 0);
  transition: opacity 180ms ease, transform 220ms ease;
  animation: productTabStarDrift 10s linear infinite;
}

body:has(.admin-shell) .btn::after,
body:has(.admin-shell) .mini-copy::after,
body:has(.admin-shell) .nav-link::after,
.admin-shell .admin-tabs button::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  z-index: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--admin-btn-cyan), var(--admin-btn-mint), transparent) !important;
  box-shadow:
    0 0 11px rgba(82, 240, 255, 0.44),
    0 0 18px rgba(45, 230, 190, 0.2) !important;
  opacity: 0.5;
  transform: scaleX(0.72);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body:has(.admin-shell) .btn:hover,
body:has(.admin-shell) .mini-copy:hover,
body:has(.admin-shell) .nav-link:hover,
body:has(.admin-shell) .btn.fx-tilt,
body:has(.admin-shell) .mini-copy.fx-tilt,
body:has(.admin-shell) .nav-link.fx-tilt,
.admin-shell .admin-tabs button:hover,
.admin-shell .admin-tabs button.active,
.admin-shell .admin-tabs button.fx-tilt {
  border-color: rgba(82, 240, 255, 0.54) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.23), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.19), rgba(45, 230, 190, 0.07)),
    rgba(4, 29, 43, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.1),
    inset 0 -3px 0 rgba(82, 240, 255, 0.78),
    inset 0 0 22px rgba(82, 240, 255, 0.095),
    0 0 19px rgba(82, 240, 255, 0.13) !important;
  filter: saturate(1.04) brightness(1.03);
}

body:has(.admin-shell) .btn:hover::before,
body:has(.admin-shell) .mini-copy:hover::before,
body:has(.admin-shell) .nav-link:hover::before,
body:has(.admin-shell) .btn.fx-tilt::before,
body:has(.admin-shell) .mini-copy.fx-tilt::before,
body:has(.admin-shell) .nav-link.fx-tilt::before,
.admin-shell .admin-tabs button:hover::before,
.admin-shell .admin-tabs button.active::before,
.admin-shell .admin-tabs button.fx-tilt::before {
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
}

body:has(.admin-shell) .btn:hover::after,
body:has(.admin-shell) .mini-copy:hover::after,
body:has(.admin-shell) .nav-link:hover::after,
body:has(.admin-shell) .btn.fx-tilt::after,
body:has(.admin-shell) .mini-copy.fx-tilt::after,
body:has(.admin-shell) .nav-link.fx-tilt::after,
.admin-shell .admin-tabs button:hover::after,
.admin-shell .admin-tabs button.active::after,
.admin-shell .admin-tabs button.fx-tilt::after {
  opacity: 0.95;
  transform: scaleX(1);
}

body:has(.admin-shell) .btn.primary,
body:has(.admin-shell) .btn.secondary,
body:has(.admin-shell) .btn.ghost,
body:has(.admin-shell) .btn.danger,
body:has(.admin-shell) #loginBtn,
body:has(.admin-shell) .btn.copied,
body:has(.admin-shell) .mini-copy.copied {
  color: #eafcff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.12), rgba(45, 230, 190, 0.04)),
    rgba(3, 20, 31, 0.84) !important;
}

.admin-shell .pagination-bar select,
.admin-shell .generate-form select {
  border-color: rgba(82, 240, 255, 0.3) !important;
  color: #eafcff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.09), rgba(45, 230, 190, 0.035)),
    rgba(3, 20, 31, 0.84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.04),
    0 0 14px rgba(82, 240, 255, 0.06) !important;
}

body:has(.admin-shell) .btn:disabled,
.admin-shell .admin-tabs button:disabled {
  color: rgba(234, 252, 255, 0.5) !important;
  filter: saturate(0.78) brightness(0.88);
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  body:has(.admin-shell) .btn::before,
  body:has(.admin-shell) .mini-copy::before,
  body:has(.admin-shell) .nav-link::before,
  .admin-shell .admin-tabs button::before {
    animation: none !important;
    transform: none;
  }
}

/* Front clickable controls v16: all front buttons/mini links match the dark cyber star cyan-mint system */
body:has(.app-shell):not(:has(.admin-shell)) .btn,
body:has(.app-shell):not(:has(.admin-shell)) .step-link,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"] {
  --front-btn-cyan: #52f0ff;
  --front-btn-mint: #2de6be;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.3) !important;
  border-radius: 10px !important;
  color: #eafcff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.105), transparent 33%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.16), transparent 54%),
    radial-gradient(circle at 14% 22%, rgba(45, 230, 190, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.12), rgba(45, 230, 190, 0.04)),
    rgba(3, 20, 31, 0.84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.05),
    inset 0 -1px 0 rgba(82, 240, 255, 0.18),
    inset 0 0 20px rgba(82, 240, 255, 0.05),
    0 0 16px rgba(82, 240, 255, 0.07) !important;
  text-shadow: 0 0 13px rgba(82, 240, 255, 0.24) !important;
}

body:has(.app-shell):not(:has(.admin-shell)) .btn::before,
body:has(.app-shell):not(:has(.admin-shell)) .step-link::before,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy::before,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button::before,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.16), transparent 27%),
    linear-gradient(110deg, transparent 0%, rgba(82, 240, 255, 0.09) 39%, rgba(45, 230, 190, 0.12) 50%, transparent 63%),
    radial-gradient(circle at 22% 28%, rgba(82, 240, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 64%, rgba(45, 230, 190, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(202, 255, 255, 0.18) 0 1px, transparent 1.8px);
  opacity: 0.56;
  transform: translate3d(-18%, 0, 0);
  transition: opacity 180ms ease, transform 220ms ease;
  animation: productTabStarDrift 10s linear infinite;
}

body:has(.app-shell):not(:has(.admin-shell)) .btn::after,
body:has(.app-shell):not(:has(.admin-shell)) .step-link::after,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy::after,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button::after,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  z-index: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--front-btn-cyan), var(--front-btn-mint), transparent) !important;
  box-shadow:
    0 0 11px rgba(82, 240, 255, 0.44),
    0 0 18px rgba(45, 230, 190, 0.2) !important;
  opacity: 0.5;
  transform: scaleX(0.72);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body:has(.app-shell):not(:has(.admin-shell)) .btn:hover,
body:has(.app-shell):not(:has(.admin-shell)) .step-link:hover,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy:hover,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button:hover,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]:hover,
body:has(.app-shell):not(:has(.admin-shell)) .btn.fx-tilt,
body:has(.app-shell):not(:has(.admin-shell)) .step-link.fx-tilt,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy.fx-tilt {
  border-color: rgba(82, 240, 255, 0.54) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.23), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.19), rgba(45, 230, 190, 0.07)),
    rgba(4, 29, 43, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.1),
    inset 0 -3px 0 rgba(82, 240, 255, 0.78),
    inset 0 0 22px rgba(82, 240, 255, 0.095),
    0 0 19px rgba(82, 240, 255, 0.13) !important;
  filter: saturate(1.04) brightness(1.03);
}

body:has(.app-shell):not(:has(.admin-shell)) .btn:hover::before,
body:has(.app-shell):not(:has(.admin-shell)) .step-link:hover::before,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy:hover::before,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button:hover::before,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]:hover::before,
body:has(.app-shell):not(:has(.admin-shell)) .btn.fx-tilt::before,
body:has(.app-shell):not(:has(.admin-shell)) .step-link.fx-tilt::before,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy.fx-tilt::before {
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
}

body:has(.app-shell):not(:has(.admin-shell)) .btn:hover::after,
body:has(.app-shell):not(:has(.admin-shell)) .step-link:hover::after,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy:hover::after,
body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button:hover::after,
body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]:hover::after,
body:has(.app-shell):not(:has(.admin-shell)) .btn.fx-tilt::after,
body:has(.app-shell):not(:has(.admin-shell)) .step-link.fx-tilt::after,
body:has(.app-shell):not(:has(.admin-shell)) .queue-copy.fx-tilt::after {
  opacity: 0.95;
  transform: scaleX(1);
}

body:has(.app-shell):not(:has(.admin-shell)) .btn.primary,
body:has(.app-shell):not(:has(.admin-shell)) .btn.secondary,
body:has(.app-shell):not(:has(.admin-shell)) .btn.ghost,
body:has(.app-shell):not(:has(.admin-shell)) .btn.copied {
  color: #eafcff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.12), rgba(45, 230, 190, 0.04)),
    rgba(3, 20, 31, 0.84) !important;
}

body:has(.app-shell):not(:has(.admin-shell)) .step-link {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px !important;
}

body:has(.app-shell):not(:has(.admin-shell)) .queue-copy {
  border-radius: 7px !important;
}

body:has(.app-shell):not(:has(.admin-shell)) .queue-copy::after {
  left: 5px;
  right: 5px;
}

body:has(.app-shell):not(:has(.admin-shell)) .btn:disabled,
body:has(.app-shell):not(:has(.admin-shell)) .flow-panel.disabled .btn {
  color: rgba(234, 252, 255, 0.5) !important;
  filter: saturate(0.78) brightness(0.88);
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  body:has(.app-shell):not(:has(.admin-shell)) .btn::before,
  body:has(.app-shell):not(:has(.admin-shell)) .step-link::before,
  body:has(.app-shell):not(:has(.admin-shell)) .queue-copy::before,
  body:has(.app-shell):not(:has(.admin-shell)) .demo-code-row button::before,
  body:has(.app-shell):not(:has(.admin-shell)) [data-code][role="button"]::before {
    animation: none !important;
    transform: none;
  }
}

/* Queue starfield / aurora v17: richer task-card cosmos + interactive blank-space aurora */
.console-panel.is-charging {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.16), transparent 28%),
    radial-gradient(ellipse at 18% 20%, rgba(45, 230, 190, 0.18), transparent 34%),
    radial-gradient(ellipse at 82% 76%, rgba(134, 91, 255, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(4, 18, 30, 0.92), rgba(2, 12, 21, 0.96)) !important;
}

.console-panel.is-charging::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 30% 62%, rgba(82, 240, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(219, 116, 255, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 78%, rgba(119, 163, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 84%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px);
  background-size: 180px 160px, 260px 220px, 340px 300px, 430px 360px, 520px 460px;
  filter: drop-shadow(0 0 5px rgba(82, 240, 255, 0.42));
  opacity: 0.62;
  transform: translate3d(calc(var(--mouse-nx, 0) * -34px), calc(var(--mouse-ny, 0) * -24px), 0);
  animation: queueOuterStars 50s linear infinite;
}

.console-panel.is-charging::after {
  content: "";
  position: absolute;
  inset: -36%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 120deg at calc(var(--mouse-x, 50%) * 0.9) calc(var(--mouse-y, 50%) * 0.9),
      transparent 0 10%,
      rgba(82, 240, 255, 0.2) 14%,
      rgba(45, 230, 190, 0.12) 22%,
      transparent 34% 58%,
      rgba(171, 94, 255, 0.13) 66%,
      rgba(255, 91, 191, 0.09) 73%,
      transparent 84% 100%),
    radial-gradient(ellipse at calc(var(--mouse-x, 50%) * 0.8) calc(var(--mouse-y, 50%) * 0.65), rgba(82, 240, 255, 0.22), transparent 36%),
    radial-gradient(ellipse at 70% 68%, rgba(45, 230, 190, 0.1), transparent 42%);
  mix-blend-mode: screen;
  opacity: 0.72;
  filter: blur(22px) saturate(1.25);
  transform: translate3d(calc(var(--mouse-nx, 0) * 42px), calc(var(--mouse-ny, 0) * 28px), 0) rotate(0deg);
  animation: queueAuroraSweep 18s ease-in-out infinite alternate;
}

.console-panel.is-charging > * {
  position: relative;
  z-index: 1;
}

.charging-panel {
  overflow: hidden;
  border-color: rgba(117, 245, 255, 0.7) !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 30%),
    radial-gradient(circle at 22% 16%, rgba(82, 240, 255, 0.2), transparent 34%),
    radial-gradient(circle at 76% 74%, rgba(132, 91, 255, 0.16), transparent 36%),
    radial-gradient(circle at 18% 84%, rgba(255, 91, 191, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(6, 37, 50, 0.92), rgba(2, 16, 27, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.24),
    0 0 20px rgba(82, 240, 255, 0.3),
    0 0 68px rgba(45, 230, 190, 0.12),
    inset 0 0 42px rgba(82, 240, 255, 0.12) !important;
}

.charging-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 78%, rgba(82, 240, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 32%, rgba(255, 109, 210, 0.54) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 86%, rgba(139, 171, 255, 0.64) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 26%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(82, 240, 255, 0.035) 25%, transparent 25%, transparent 50%, rgba(82, 240, 255, 0.03) 50%, rgba(82, 240, 255, 0.03) 75%, transparent 75%) 0 0 / 22px 22px;
  background-size: 140px 118px, 210px 190px, 270px 240px, 330px 280px, 420px 360px, 22px 22px;
  filter: drop-shadow(0 0 5px rgba(82, 240, 255, 0.55));
  opacity: 0.74;
  transform: translate3d(calc(var(--spot-x, 50%) / -24), calc(var(--spot-y, 50%) / -30), 0);
  animation: queuePanelStars 28s linear infinite;
}

.charging-panel::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(82, 240, 255, 0.22);
  border-radius: inherit;
  background:
    radial-gradient(ellipse at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.18), transparent 42%),
    linear-gradient(110deg, transparent 0 18%, rgba(82, 240, 255, 0.08) 32%, rgba(45, 230, 190, 0.08) 48%, transparent 66%),
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.08), transparent 44%);
  mix-blend-mode: screen;
  opacity: 0.68;
  animation: queuePanelAurora 9s ease-in-out infinite alternate;
}

.charging-panel > * {
  position: relative;
  z-index: 2;
}

.charging-panel .electric-current,
.charging-panel .lightning-frame {
  z-index: 5;
}

.charging-head,
.charging-grid,
.queue-stage {
  backdrop-filter: blur(8px) saturate(1.12);
}

.charging-grid,
.charge-row,
.charge-tags span {
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.08), transparent 40%),
    radial-gradient(circle at 12% 32%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 70%, rgba(45, 230, 190, 0.14) 0 1px, transparent 2px),
    rgba(2, 18, 29, 0.58) !important;
}

.queue-stage {
  border-color: rgba(82, 240, 255, 0.46) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 62%, rgba(82, 240, 255, 0.54) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 82%, rgba(159, 101, 255, 0.42) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(82, 240, 255, 0.075) 25%, transparent 25%, transparent 50%, rgba(82, 240, 255, 0.075) 50%, rgba(82, 240, 255, 0.075) 75%, transparent 75%) 0 0 / 20px 20px,
    rgba(1, 15, 25, 0.5) !important;
  background-size: 170px 140px, 240px 220px, 310px 260px, 20px 20px, auto;
  animation: queueStageStars 18s linear infinite;
}

body:has(#queuePanel:not(.hidden))::before {
  background:
    radial-gradient(circle at 9% 24%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 76%, rgba(82, 240, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 34%, rgba(255, 91, 191, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 86%, rgba(118, 154, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 42%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px) !important;
  background-size: 160px 140px, 240px 220px, 330px 290px, 420px 370px, 540px 480px !important;
  opacity: 0.72 !important;
  animation: queueOuterStars 46s linear infinite !important;
}

body:has(#queuePanel:not(.hidden))::after {
  background:
    radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.22) 0, rgba(82, 240, 255, 0.1) 13%, transparent 34%),
    radial-gradient(ellipse at calc(100% - var(--mouse-x, 50%)) calc(100% - var(--mouse-y, 50%)), rgba(255, 91, 191, 0.14) 0, transparent 28%),
    conic-gradient(from 180deg at 50% 50%, transparent 0 12%, rgba(82, 240, 255, 0.12) 19%, rgba(45, 230, 190, 0.08) 27%, transparent 38% 62%, rgba(146, 91, 255, 0.12) 74%, transparent 86% 100%),
    linear-gradient(90deg, rgba(82, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(82, 240, 255, 0.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 32px 32px, 32px 32px !important;
  opacity: 0.88 !important;
  filter: saturate(1.18);
}

body:has(#queuePanel:not(.hidden)) .galaxy-layer {
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(82, 240, 255, 0.8)) saturate(1.18);
  transform: translate3d(calc(var(--mouse-nx, 0) * -48px), calc(var(--mouse-ny, 0) * -36px), 0) scale(1.08);
}

body:has(#queuePanel:not(.hidden)) .nebula-layer {
  opacity: 0.95;
  background:
    radial-gradient(ellipse at calc(var(--mouse-x, 50%) * 0.82) calc(var(--mouse-y, 50%) * 0.78), rgba(82, 240, 255, 0.22), transparent 28%),
    radial-gradient(ellipse at 20% 30%, rgba(45, 230, 190, 0.14), transparent 30%),
    radial-gradient(ellipse at 78% 72%, rgba(255, 91, 191, 0.14), transparent 30%),
    radial-gradient(ellipse at 54% 18%, rgba(137, 101, 255, 0.16), transparent 24%);
  filter: blur(2px) saturate(1.22);
}

@keyframes queuePanelStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 140px 118px, -210px 190px, 270px -240px, -330px 280px, 420px 360px, 44px 44px; }
}

@keyframes queueStageStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 170px 140px, -240px 220px, 310px -260px, 40px 40px, 0 0; }
}

@keyframes queueOuterStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 320px 280px, -480px 440px, 660px -580px, -840px 740px, 1080px 960px; }
}

@keyframes queueAuroraSweep {
  0% { opacity: 0.52; transform: translate3d(calc(var(--mouse-nx, 0) * 34px), calc(var(--mouse-ny, 0) * 22px), 0) rotate(-7deg) scale(1.02); }
  100% { opacity: 0.82; transform: translate3d(calc(var(--mouse-nx, 0) * 54px), calc(var(--mouse-ny, 0) * 36px), 0) rotate(8deg) scale(1.08); }
}

@keyframes queuePanelAurora {
  0% { opacity: 0.48; filter: hue-rotate(-5deg); transform: translateX(-1.5%); }
  100% { opacity: 0.78; filter: hue-rotate(10deg); transform: translateX(1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .console-panel.is-charging::before,
  .console-panel.is-charging::after,
  .charging-panel::before,
  .charging-panel::after,
  .queue-stage,
  body:has(#queuePanel:not(.hidden))::before {
    animation: none !important;
  }
}

/* Queue starfield / aurora v18: less glare, visible stars, real ribbon-like aurora */
body:has(#queuePanel:not(.hidden)) .page-grid {
  opacity: 0.2 !important;
}

body:has(#queuePanel:not(.hidden))::before {
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 18% 64%, rgba(86,172,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34% 26%, rgba(255,92,186,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 50% 78%, rgba(155,101,255,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(86,240,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 94% 38%, rgba(255,92,186,.58) 0 1px, transparent 1.8px) !important;
  background-size:
    86px 74px,
    132px 118px,
    176px 152px,
    226px 204px,
    286px 248px,
    364px 318px,
    444px 390px !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.44))
    drop-shadow(0 0 6px rgba(82,240,255,.25)) !important;
  opacity: 0.95 !important;
  animation: queueDenseStars 54s linear infinite !important;
}

body:has(#queuePanel:not(.hidden))::after {
  background:
    linear-gradient(116deg,
      transparent 0 18%,
      rgba(16, 255, 210, 0.0) 26%,
      rgba(24, 237, 224, 0.18) 33%,
      rgba(78, 155, 255, 0.12) 39%,
      rgba(185, 88, 255, 0.09) 45%,
      transparent 56% 100%),
    linear-gradient(68deg,
      transparent 0 40%,
      rgba(255, 70, 177, 0.1) 48%,
      rgba(103, 119, 255, 0.12) 54%,
      rgba(64, 255, 221, 0.12) 60%,
      transparent 70% 100%),
    radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82,240,255,.08), transparent 24%),
    linear-gradient(90deg, rgba(82,240,255,.026) 1px, transparent 1px),
    linear-gradient(rgba(82,240,255,.022) 1px, transparent 1px) !important;
  background-size: 160% 100%, 145% 100%, auto, 32px 32px, 32px 32px !important;
  background-position:
    calc(var(--mouse-nx, 0) * 28px) 0,
    calc(var(--mouse-nx, 0) * -24px) 0,
    0 0,
    0 0,
    0 0 !important;
  opacity: 0.92 !important;
  filter: saturate(1.28) blur(0.2px) !important;
  animation: queueAuroraBands 16s ease-in-out infinite alternate !important;
}

body:has(#queuePanel:not(.hidden)) .galaxy-layer {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.96) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 40%, rgba(88,168,255,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 72%, rgba(255,78,179,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(160,107,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 20%, rgba(75,255,226,.72) 0 1px, transparent 2px);
  background-size: 120px 104px, 190px 164px, 270px 238px, 360px 310px, 470px 410px;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.62))
    drop-shadow(0 0 7px rgba(82,240,255,.42)) !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * -46px), calc(var(--mouse-ny, 0) * -34px), 0) scale(1.06) !important;
}

body:has(#queuePanel:not(.hidden)) .nebula-layer {
  opacity: 0.9 !important;
  background:
    linear-gradient(104deg, transparent 5%, rgba(50,255,220,.0) 22%, rgba(50,255,220,.14) 34%, rgba(82,150,255,.08) 42%, transparent 58%),
    linear-gradient(76deg, transparent 20%, rgba(255,78,187,.08) 48%, rgba(137,101,255,.12) 56%, rgba(51,237,219,.1) 64%, transparent 78%),
    radial-gradient(ellipse at 15% 25%, rgba(45,230,190,.08), transparent 32%),
    radial-gradient(ellipse at 80% 72%, rgba(255,91,191,.08), transparent 30%) !important;
  background-size: 150% 100%, 155% 100%, auto, auto !important;
  filter: blur(1px) saturate(1.35) !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * 38px), calc(var(--mouse-ny, 0) * 24px), 0) scale(1.03) !important;
  animation: queueNebulaBands 18s ease-in-out infinite alternate;
}

.console-panel.is-charging {
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82,240,255,.055), transparent 22%),
    linear-gradient(180deg, rgba(3,16,27,.82), rgba(2,10,18,.9)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82,240,255,.14),
    0 0 18px rgba(82,240,255,.06) !important;
}

.console-panel.is-charging::before {
  inset: 0 !important;
  background:
    radial-gradient(circle at 7% 15%, rgba(255,255,255,.88) 0 1px, transparent 1.8px),
    radial-gradient(circle at 20% 70%, rgba(87,166,255,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 34%, rgba(255,91,191,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 82%, rgba(155,101,255,.74) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 26%, rgba(74,245,226,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 66%, rgba(255,255,255,.62) 0 1px, transparent 1.8px) !important;
  background-size: 112px 96px, 168px 144px, 230px 204px, 318px 280px, 410px 354px, 520px 450px !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 0 4px rgba(82,240,255,.25)) !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * -26px), calc(var(--mouse-ny, 0) * -18px), 0) !important;
  animation: queuePanelDenseStars 42s linear infinite !important;
}

.console-panel.is-charging::after {
  inset: 0 !important;
  background:
    linear-gradient(112deg,
      transparent 0 20%,
      rgba(38,255,215,0) 28%,
      rgba(38,255,215,.19) 35%,
      rgba(75,154,255,.11) 42%,
      rgba(179,92,255,.08) 49%,
      transparent 60% 100%),
    linear-gradient(70deg,
      transparent 0 42%,
      rgba(255,88,190,.08) 50%,
      rgba(111,122,255,.12) 57%,
      rgba(48,239,217,.1) 64%,
      transparent 74% 100%) !important;
  background-size: 142% 100%, 152% 100% !important;
  opacity: 0.78 !important;
  filter: blur(0.6px) saturate(1.32) !important;
  mix-blend-mode: screen !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * 30px), calc(var(--mouse-ny, 0) * 14px), 0) !important;
  animation: queueAuroraBands 15s ease-in-out infinite alternate !important;
}

.charging-panel {
  border-color: rgba(99, 230, 244, 0.58) !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82,240,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(4,28,42,.88), rgba(2,14,25,.94)) !important;
  box-shadow:
    0 0 0 1px rgba(82,240,255,.18),
    0 0 10px rgba(82,240,255,.16),
    0 0 24px rgba(45,230,190,.07),
    inset 0 0 22px rgba(82,240,255,.07) !important;
}

.charging-panel::before {
  background:
    radial-gradient(circle at 6% 16%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 80%, rgba(82,240,255,.86) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 36%, rgba(255,91,191,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(138,104,255,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 22%, rgba(75,255,226,.74) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 62%, rgba(255,255,255,.68) 0 1px, transparent 1.8px),
    linear-gradient(135deg, rgba(82,240,255,.026) 25%, transparent 25%, transparent 50%, rgba(82,240,255,.026) 50%, rgba(82,240,255,.026) 75%, transparent 75%) 0 0 / 22px 22px !important;
  background-size: 96px 82px, 142px 124px, 194px 170px, 254px 224px, 330px 286px, 420px 360px, 22px 22px !important;
  opacity: 0.96 !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.42))
    drop-shadow(0 0 5px rgba(82,240,255,.28)) !important;
  animation: queueCardStars 30s linear infinite !important;
}

.charging-panel::after {
  background:
    linear-gradient(118deg, transparent 0 24%, rgba(50,255,220,.14) 34%, rgba(82,158,255,.08) 43%, rgba(166,94,255,.06) 50%, transparent 62%),
    linear-gradient(74deg, transparent 0 44%, rgba(255,91,191,.07) 52%, rgba(64,255,220,.1) 62%, transparent 74%),
    radial-gradient(ellipse at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82,240,255,.09), transparent 34%) !important;
  opacity: 0.66 !important;
  filter: blur(.35px) saturate(1.25) !important;
  animation: queueCardAurora 12s ease-in-out infinite alternate !important;
}

.charging-grid,
.charge-row,
.queue-stage,
.charge-tags span {
  background-color: rgba(1, 14, 25, 0.56) !important;
}

.queue-stage {
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 68% 62%, rgba(82,240,255,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 86%, rgba(155,101,255,.62) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(82,240,255,.055) 25%, transparent 25%, transparent 50%, rgba(82,240,255,.055) 50%, rgba(82,240,255,.055) 75%, transparent 75%) 0 0 / 20px 20px,
    rgba(1, 14, 25, .58) !important;
  background-size: 116px 96px, 174px 154px, 230px 196px, 20px 20px, auto !important;
  animation: queueStageStars 16s linear infinite !important;
}

@keyframes queueDenseStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 172px 148px, -264px 236px, 352px -304px, -452px 408px, 572px 496px, -728px 636px, 888px -780px; }
}

@keyframes queuePanelDenseStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 224px 192px, -336px 288px, 460px -408px, -636px 560px, 820px 708px, -1040px 900px; }
}

@keyframes queueCardStars {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 192px 164px, -284px 248px, 388px -340px, -508px 448px, 660px 572px, -840px 720px, 44px 44px; }
}

@keyframes queueAuroraBands {
  0% { background-position: -22% 0, 24% 0, 0 0, 0 0, 0 0; }
  100% { background-position: 28% 0, -18% 0, 0 0, 0 0, 0 0; }
}

@keyframes queueNebulaBands {
  0% { background-position: -18% 0, 18% 0, 0 0, 0 0; }
  100% { background-position: 24% 0, -22% 0, 0 0, 0 0; }
}

@keyframes queueCardAurora {
  0% { background-position: -20% 0, 18% 0, 0 0; }
  100% { background-position: 22% 0, -16% 0, 0 0; }
}

/* Queue aurora + electric arc v19: keep aurora/electricity, remove starfield noise */
body:has(#queuePanel:not(.hidden)) {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(24, 237, 224, 0.075), transparent 42%),
    linear-gradient(135deg, #03101a 0%, #061324 48%, #020912 100%) !important;
}

body:has(#queuePanel:not(.hidden)) .page-grid {
  opacity: 0.12 !important;
}

body:has(#queuePanel:not(.hidden)) .galaxy-layer {
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

body:has(#queuePanel:not(.hidden))::before {
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

body:has(#queuePanel:not(.hidden))::after {
  background:
    linear-gradient(112deg,
      transparent 0 18%,
      rgba(35, 255, 220, 0) 25%,
      rgba(35, 255, 220, 0.16) 34%,
      rgba(82, 150, 255, 0.105) 43%,
      rgba(158, 92, 255, 0.07) 50%,
      transparent 64% 100%),
    linear-gradient(72deg,
      transparent 0 38%,
      rgba(255, 86, 188, 0.065) 49%,
      rgba(95, 132, 255, 0.09) 58%,
      rgba(64, 255, 220, 0.115) 67%,
      transparent 79% 100%),
    radial-gradient(ellipse at calc(var(--mouse-x, 50%) * 0.9) calc(var(--mouse-y, 50%) * 0.72),
      rgba(82, 240, 255, 0.055), transparent 28%) !important;
  background-size: 156% 100%, 166% 100%, auto !important;
  background-position:
    calc(-20% + var(--mouse-nx, 0) * 26px) 0,
    calc(20% - var(--mouse-nx, 0) * 22px) 0,
    0 0 !important;
  opacity: 0.76 !important;
  filter: blur(0.35px) saturate(1.22) !important;
  animation: queueAuroraOnlyBands 17s ease-in-out infinite alternate !important;
}

body:has(#queuePanel:not(.hidden)) .nebula-layer {
  opacity: 0.84 !important;
  background:
    linear-gradient(104deg,
      transparent 6%,
      rgba(45, 230, 190, 0) 24%,
      rgba(45, 230, 190, 0.125) 35%,
      rgba(82, 150, 255, 0.075) 45%,
      transparent 62%),
    linear-gradient(76deg,
      transparent 24%,
      rgba(137, 101, 255, 0.075) 49%,
      rgba(51, 237, 219, 0.105) 62%,
      transparent 78%),
    radial-gradient(ellipse at 14% 20%, rgba(45, 230, 190, 0.06), transparent 34%),
    radial-gradient(ellipse at 84% 72%, rgba(82, 150, 255, 0.055), transparent 36%) !important;
  background-size: 148% 100%, 158% 100%, auto, auto !important;
  background-position:
    calc(-14% + var(--mouse-nx, 0) * 34px) 0,
    calc(16% - var(--mouse-nx, 0) * 28px) 0,
    0 0,
    0 0 !important;
  filter: blur(1px) saturate(1.24) !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * 24px), calc(var(--mouse-ny, 0) * 16px), 0) scale(1.02) !important;
  animation: queueAuroraOnlyNebula 19s ease-in-out infinite alternate !important;
}

.console-panel.is-charging {
  background:
    linear-gradient(180deg, rgba(3, 18, 30, 0.86), rgba(2, 10, 18, 0.93)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.12),
    0 0 18px rgba(82, 240, 255, 0.045) !important;
}

.console-panel.is-charging::before {
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.console-panel.is-charging::after {
  inset: -18% !important;
  z-index: 0 !important;
  background:
    linear-gradient(112deg,
      transparent 0 20%,
      rgba(38, 255, 215, 0) 29%,
      rgba(38, 255, 215, 0.14) 37%,
      rgba(75, 154, 255, 0.085) 45%,
      transparent 60% 100%),
    linear-gradient(70deg,
      transparent 0 42%,
      rgba(111, 122, 255, 0.08) 56%,
      rgba(48, 239, 217, 0.09) 66%,
      transparent 78% 100%) !important;
  background-size: 144% 100%, 154% 100% !important;
  background-position:
    calc(-16% + var(--mouse-nx, 0) * 24px) 0,
    calc(18% - var(--mouse-nx, 0) * 20px) 0 !important;
  opacity: 0.7 !important;
  filter: blur(0.7px) saturate(1.22) !important;
  mix-blend-mode: screen !important;
  transform: translate3d(calc(var(--mouse-nx, 0) * 22px), calc(var(--mouse-ny, 0) * 12px), 0) !important;
  animation: queueAuroraOnlyBands 16s ease-in-out infinite alternate !important;
}

.charging-panel {
  isolation: isolate;
  overflow: visible !important;
  border-color: rgba(99, 230, 244, 0.56) !important;
  background:
    linear-gradient(115deg, rgba(45, 230, 190, 0.055), transparent 34%),
    linear-gradient(252deg, rgba(82, 150, 255, 0.05), transparent 38%),
    linear-gradient(180deg, rgba(4, 27, 42, 0.9), rgba(2, 14, 25, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.17),
    0 0 12px rgba(82, 240, 255, 0.14),
    0 0 28px rgba(45, 230, 190, 0.055),
    inset 0 0 22px rgba(82, 240, 255, 0.075) !important;
}

.charging-panel::before {
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.charging-panel::after {
  z-index: 1 !important;
  inset: 2px !important;
  border: 1px solid rgba(82, 240, 255, 0.18) !important;
  background:
    linear-gradient(118deg,
      transparent 0 23%,
      rgba(50, 255, 220, 0.105) 34%,
      rgba(82, 158, 255, 0.062) 44%,
      transparent 63%),
    linear-gradient(74deg,
      transparent 0 44%,
      rgba(64, 255, 220, 0.07) 63%,
      transparent 76%) !important;
  opacity: 0.58 !important;
  filter: blur(0.3px) saturate(1.16) !important;
  animation: queueCardAuroraOnly 12s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

.charging-panel > :not(.lightning-frame):not(.electric-current) {
  position: relative;
  z-index: 40 !important;
}

.charging-grid,
.charge-row,
.charge-tags span {
  background:
    linear-gradient(180deg, rgba(2, 22, 34, 0.72), rgba(1, 14, 25, 0.64)) !important;
}

.queue-stage {
  background:
    linear-gradient(135deg, rgba(82, 240, 255, 0.045) 25%, transparent 25%, transparent 50%, rgba(82, 240, 255, 0.038) 50%, rgba(82, 240, 255, 0.038) 75%, transparent 75%) 0 0 / 20px 20px,
    linear-gradient(180deg, rgba(2, 22, 34, 0.74), rgba(1, 14, 25, 0.66)) !important;
  animation: none !important;
}

.lightning-frame {
  z-index: 70 !important;
  opacity: 0.28 !important;
  pointer-events: none !important;
}

.electric-current[data-electric-style="delicate"] {
  z-index: 90 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: visible !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  contain: none !important;
  filter: drop-shadow(0 0 4px rgba(82, 240, 255, 0.48)) !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg {
  opacity: 0.045 !important;
}

.electric-current[data-electric-style="delicate"] .ec-orbit {
  inset: -6px !important;
  opacity: 0.18 !important;
  filter: drop-shadow(0 0 8px rgba(82, 240, 255, 0.42)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-inner {
  opacity: 0.34 !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  z-index: 95 !important;
  opacity: 1 !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.68))
    drop-shadow(0 0 11px rgba(45, 230, 190, 0.24)) !important;
}

.edge-trace,
.edge-spark,
.edge-zap {
  visibility: visible !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.edge-trace {
  stroke: rgba(88, 238, 255, 0.92) !important;
  stroke-width: 0.95px !important;
  opacity: var(--trace-o, 0.74) !important;
  stroke-dasharray: 42 5 3 8 !important;
  animation:
    edgeTraceFlow 0.96s linear infinite,
    edgeTraceBreath 0.5s steps(3, end) infinite alternate !important;
}

.edge-trace-0 {
  stroke: #5df3ff !important;
  stroke-width: 1.12px !important;
  stroke-dasharray: 54 4 3 7 12 5 !important;
}

.edge-trace-1 {
  stroke: rgba(114, 249, 255, 0.26) !important;
  stroke-width: 1.28px !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(164, 252, 255, 0.36) !important;
  stroke-width: 0.72px !important;
}

.edge-spark {
  stroke: rgba(238, 255, 255, 0.95) !important;
  stroke-width: var(--spark-w, 1.46px) !important;
  opacity: var(--spark-o, 0.48) !important;
  stroke-dasharray: 18 38 6 30 !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.56)) !important;
}

.edge-zap {
  stroke: rgba(245, 255, 255, 0.98) !important;
  stroke-width: var(--zap-w, 1.08px) !important;
  opacity: var(--zap-o, 0.3) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.84))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.66))
    drop-shadow(0 0 9px rgba(41, 223, 255, 0.22)) !important;
  animation: edgeZapSizzle 0.12s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  z-index: 96 !important;
  opacity: var(--arc-opacity, 0.2) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.56)) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 3px !important;
  border-radius: 2px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(73, 231, 255, 0.08) 10%,
      rgba(110, 248, 255, 0.78) 28%,
      rgba(255, 255, 255, 0.96) 46%,
      rgba(45, 230, 190, 0.76) 62%,
      rgba(82, 240, 255, 0.34) 76%,
      transparent 100%) !important;
  clip-path: polygon(
    0% 55%, 8% 41%, 15% 61%, 23% 36%, 31% 57%, 39% 45%,
    47% 66%, 55% 34%, 63% 58%, 72% 40%, 82% 63%, 91% 45%,
    100% 52%, 91% 59%, 82% 50%, 72% 72%, 63% 51%, 55% 68%,
    47% 45%, 39% 70%, 31% 49%, 23% 66%, 15% 48%, 8% 62%
  ) !important;
  animation:
    chaserFlicker 0.12s steps(2, end) infinite,
    delicateRunnerPulse 0.72s steps(3, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::after {
  opacity: 0.62 !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg {
  opacity: 0.028 !important;
}

.edge-zap {
  stroke-width: var(--zap-w, 1.18px) !important;
}

@keyframes edgeZapSizzle {
  0% { opacity: 0.12; }
  28% { opacity: var(--zap-o, 0.34); }
  48% { opacity: 0.62; }
  72% { opacity: 0.18; }
  100% { opacity: 0.78; }
}

@keyframes edgeSparkBlink {
  0% { opacity: 0.1; }
  35% { opacity: var(--spark-o, 0.48); }
  65% { opacity: 0.2; }
  100% { opacity: 0.66; }
}

@keyframes queueAuroraOnlyBands {
  0% {
    background-position: -22% 0, 24% 0, 0 0;
  }
  100% {
    background-position: 28% 0, -18% 0, 0 0;
  }
}

@keyframes queueAuroraOnlyNebula {
  0% {
    background-position: -18% 0, 18% 0, 0 0, 0 0;
  }
  100% {
    background-position: 24% 0, -22% 0, 0 0, 0 0;
  }
}

@keyframes queueCardAuroraOnly {
  0% {
    background-position: -18% 0, 16% 0;
  }
  100% {
    background-position: 20% 0, -14% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#queuePanel:not(.hidden))::after,
  body:has(#queuePanel:not(.hidden)) .nebula-layer,
  .console-panel.is-charging::after,
  .charging-panel::after,
  .edge-trace,
  .edge-spark,
  .edge-zap,
  .electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
    animation: none !important;
  }
}

/* Electric arc recovery v20: restore tight jagged, flickering, flowing border current */
.electric-current[data-electric-style="delicate"] {
  --arc-cyan: #52f0ff;
  --arc-mint: #2de6be;
  --arc-white: #f4ffff;
}

.electric-current[data-electric-style="delicate"]::before,
.electric-current[data-electric-style="delicate"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
}

.electric-current[data-electric-style="delicate"]::before {
  inset: -3px;
  padding: 2px;
  z-index: 88;
  background:
    conic-gradient(
      from var(--ec-angle, 0deg),
      transparent 0 8deg,
      rgba(82, 240, 255, 0.15) 14deg,
      var(--arc-cyan) 21deg,
      var(--arc-white) 25deg,
      var(--arc-mint) 31deg,
      transparent 42deg 96deg,
      rgba(82, 240, 255, 0.1) 112deg,
      var(--arc-cyan) 121deg,
      transparent 136deg 206deg,
      rgba(45, 230, 190, 0.12) 225deg,
      var(--arc-white) 233deg,
      var(--arc-cyan) 241deg,
      transparent 255deg 360deg
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.72;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 7px rgba(82, 240, 255, 0.56));
  animation:
    ecAngleSpin 1.65s linear infinite,
    electricRingFlicker 0.18s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"]::after {
  inset: -9px;
  z-index: 87;
  border: 1px solid rgba(82, 240, 255, 0.24);
  opacity: 0.5;
  filter:
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.45))
    drop-shadow(0 0 14px rgba(45, 230, 190, 0.16));
  animation: electricOuterPulse 1.15s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-line {
  display: block !important;
  position: absolute !important;
  z-index: 98 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 0.98 !important;
  mix-blend-mode: screen !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 12px rgba(45, 230, 190, 0.25)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-line::before,
.electric-current[data-electric-style="delicate"] .ec-line::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.electric-current[data-electric-style="delicate"] .ec-line::before {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.05) 7%,
      rgba(82, 240, 255, 0.78) 17%,
      #ffffff 24%,
      rgba(45, 230, 190, 0.82) 31%,
      transparent 42%,
      transparent 58%,
      rgba(82, 240, 255, 0.52) 66%,
      #ffffff 71%,
      rgba(82, 240, 255, 0.28) 78%,
      transparent 100%);
  background-size: 260px 100%;
  animation:
    electricJaggedX 0.84s linear infinite,
    electricLineFlicker 0.12s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-line::after {
  opacity: 0.72;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.92) 19px 21px,
      rgba(82, 240, 255, 0.64) 22px 24px,
      transparent 25px 42px);
  animation:
    electricJaggedXReverse 0.52s linear infinite,
    electricLineDropout 0.16s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-top,
.electric-current[data-electric-style="delicate"] .ec-bottom {
  left: 0 !important;
  right: 0 !important;
  height: 15px !important;
  width: auto !important;
  background: none !important;
  border-radius: 0 !important;
}

.electric-current[data-electric-style="delicate"] .ec-top {
  top: -7px !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom {
  bottom: -7px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::before {
  clip-path: polygon(
    0% 52%, 4% 37%, 8% 59%, 12% 42%, 16% 65%, 21% 35%,
    26% 57%, 31% 43%, 36% 70%, 41% 38%, 46% 58%, 51% 44%,
    56% 66%, 62% 34%, 68% 61%, 73% 41%, 79% 68%, 85% 39%,
    91% 58%, 96% 45%, 100% 52%,
    100% 62%, 96% 54%, 91% 69%, 85% 50%, 79% 75%, 73% 53%,
    68% 70%, 62% 47%, 56% 76%, 51% 54%, 46% 67%, 41% 50%,
    36% 77%, 31% 55%, 26% 67%, 21% 49%, 16% 74%, 12% 55%,
    8% 67%, 4% 50%, 0% 62%
  ) !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom::before {
  transform: scaleY(-1);
}

.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  clip-path: polygon(
    0% 48%, 9% 53%, 15% 45%, 21% 56%, 28% 47%, 34% 60%,
    42% 44%, 49% 57%, 55% 45%, 62% 59%, 70% 46%, 78% 61%,
    87% 43%, 94% 55%, 100% 48%, 100% 57%, 94% 62%, 87% 52%,
    78% 70%, 70% 54%, 62% 66%, 55% 53%, 49% 68%, 42% 52%,
    34% 69%, 28% 55%, 21% 64%, 15% 52%, 9% 62%, 0% 57%
  ) !important;
}

.electric-current[data-electric-style="delicate"] .ec-right,
.electric-current[data-electric-style="delicate"] .ec-left {
  top: 0 !important;
  bottom: 0 !important;
  width: 15px !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
}

.electric-current[data-electric-style="delicate"] .ec-right {
  right: -7px !important;
}

.electric-current[data-electric-style="delicate"] .ec-left {
  left: -7px !important;
}

.electric-current[data-electric-style="delicate"] .ec-right::before,
.electric-current[data-electric-style="delicate"] .ec-left::before {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.05) 7%,
      rgba(82, 240, 255, 0.78) 17%,
      #ffffff 24%,
      rgba(45, 230, 190, 0.82) 31%,
      transparent 42%,
      transparent 58%,
      rgba(82, 240, 255, 0.52) 66%,
      #ffffff 71%,
      rgba(82, 240, 255, 0.28) 78%,
      transparent 100%);
  background-size: 100% 260px;
  clip-path: polygon(
    52% 0%, 37% 4%, 59% 8%, 42% 12%, 65% 16%, 35% 21%,
    57% 26%, 43% 31%, 70% 36%, 38% 41%, 58% 46%, 44% 51%,
    66% 56%, 34% 62%, 61% 68%, 41% 73%, 68% 79%, 39% 85%,
    58% 91%, 45% 96%, 52% 100%,
    62% 100%, 54% 96%, 69% 91%, 50% 85%, 75% 79%, 53% 73%,
    70% 68%, 47% 62%, 76% 56%, 54% 51%, 67% 46%, 50% 41%,
    77% 36%, 55% 31%, 67% 26%, 49% 21%, 74% 16%, 55% 12%,
    67% 8%, 50% 4%, 62% 0%
  ) !important;
  animation:
    electricJaggedY 0.88s linear infinite,
    electricLineFlicker 0.12s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-right::after,
.electric-current[data-electric-style="delicate"] .ec-left::after {
  opacity: 0.72;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.92) 19px 21px,
      rgba(82, 240, 255, 0.64) 22px 24px,
      transparent 25px 42px);
  clip-path: polygon(
    48% 0%, 53% 9%, 45% 15%, 56% 21%, 47% 28%, 60% 34%,
    44% 42%, 57% 49%, 45% 55%, 59% 62%, 46% 70%, 61% 78%,
    43% 87%, 55% 94%, 48% 100%, 57% 100%, 62% 94%, 52% 87%,
    70% 78%, 54% 70%, 66% 62%, 53% 55%, 68% 49%, 52% 42%,
    69% 34%, 55% 28%, 64% 21%, 52% 15%, 62% 9%, 57% 0%
  ) !important;
  animation:
    electricJaggedYReverse 0.58s linear infinite,
    electricLineDropout 0.16s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-left::after {
  transform: scaleX(-1);
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 7px rgba(82, 240, 255, 0.78))
    drop-shadow(0 0 14px rgba(45, 230, 190, 0.26)) !important;
}

.edge-trace {
  stroke-width: 1.22px !important;
  opacity: var(--trace-o, 0.86) !important;
}

.edge-spark {
  stroke-width: var(--spark-w, 1.9px) !important;
  opacity: var(--spark-o, 0.62) !important;
}

.edge-zap {
  stroke-width: var(--zap-w, 1.65px) !important;
  opacity: var(--zap-o, 0.48) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  height: 16px !important;
  min-width: 42px;
  opacity: clamp(0.22, var(--arc-opacity, 0.36), 0.8) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 9px !important;
}

@keyframes electricJaggedX {
  0% { background-position: 260px 0; transform: translate3d(-1px, 0, 0); }
  24% { transform: translate3d(0.7px, -0.5px, 0); }
  52% { transform: translate3d(-0.6px, 0.8px, 0); }
  100% { background-position: -260px 0; transform: translate3d(0.4px, 0, 0); }
}

@keyframes electricJaggedXReverse {
  0% { background-position: -180px 0; transform: translate3d(0.6px, 0, 0); }
  100% { background-position: 180px 0; transform: translate3d(-0.6px, 0, 0); }
}

@keyframes electricJaggedY {
  0% { background-position: 0 260px; transform: translate3d(0, -1px, 0); }
  24% { transform: translate3d(-0.5px, 0.7px, 0); }
  52% { transform: translate3d(0.8px, -0.6px, 0); }
  100% { background-position: 0 -260px; transform: translate3d(0, 0.4px, 0); }
}

@keyframes electricJaggedYReverse {
  0% { background-position: 0 -180px; transform: translate3d(0, 0.6px, 0); }
  100% { background-position: 0 180px; transform: translate3d(0, -0.6px, 0); }
}

@keyframes electricLineFlicker {
  0% { opacity: 0.34; filter: brightness(0.9); }
  40% { opacity: 1; filter: brightness(1.72); }
  72% { opacity: 0.58; filter: brightness(1.12); }
  100% { opacity: 0.9; filter: brightness(1.45); }
}

@keyframes electricLineDropout {
  0% { opacity: 0.08; }
  45% { opacity: 0.72; }
  100% { opacity: 0.28; }
}

@keyframes electricRingFlicker {
  from { opacity: 0.34; filter: drop-shadow(0 0 1px rgba(255,255,255,0.6)) drop-shadow(0 0 5px rgba(82,240,255,0.42)); }
  to { opacity: 0.78; filter: drop-shadow(0 0 2px rgba(255,255,255,0.9)) drop-shadow(0 0 9px rgba(82,240,255,0.68)); }
}

@keyframes electricOuterPulse {
  from { opacity: 0.26; }
  to { opacity: 0.54; }
}

/* Electric arc recovery v21: visible full-perimeter zappy edge, not only a smooth top streak */
.electric-current[data-electric-style="delicate"] .lightning-chaser {
  width: min(var(--arc-len, 58px), 86px) !important;
  height: 12px !important;
  opacity: clamp(0.12, var(--arc-opacity, 0.22), 0.46) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 5px !important;
  filter: brightness(1.15) contrast(1.2);
}

.electric-current[data-electric-style="delicate"] .ec-line {
  opacity: 1 !important;
}

.electric-current[data-electric-style="delicate"] .ec-top,
.electric-current[data-electric-style="delicate"] .ec-bottom {
  height: 12px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top {
  top: -6px !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom {
  bottom: -6px !important;
}

.electric-current[data-electric-style="delicate"] .ec-right,
.electric-current[data-electric-style="delicate"] .ec-left {
  width: 12px !important;
}

.electric-current[data-electric-style="delicate"] .ec-right {
  right: -6px !important;
}

.electric-current[data-electric-style="delicate"] .ec-left {
  left: -6px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::before {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      rgba(82, 240, 255, 0.56) 8px 13px,
      rgba(255, 255, 255, 0.95) 14px 15px,
      rgba(45, 230, 190, 0.64) 16px 22px,
      transparent 23px 36px),
    linear-gradient(90deg, rgba(82, 240, 255, 0.16), rgba(255,255,255,0.18), rgba(45,230,190,0.14)) !important;
  background-size: 136px 100%, 100% 100% !important;
  clip-path: polygon(
    0% 50%, 3% 36%, 6% 58%, 10% 42%, 13% 67%, 17% 34%,
    21% 56%, 25% 44%, 29% 72%, 33% 37%, 37% 59%, 42% 41%,
    46% 66%, 50% 35%, 54% 61%, 59% 43%, 64% 70%, 69% 38%,
    74% 60%, 80% 42%, 86% 68%, 92% 40%, 100% 54%,
    100% 62%, 92% 57%, 86% 75%, 80% 54%, 74% 70%, 69% 51%,
    64% 78%, 59% 55%, 54% 69%, 50% 48%, 46% 76%, 42% 54%,
    37% 70%, 33% 52%, 29% 79%, 25% 55%, 21% 69%, 17% 50%,
    13% 76%, 10% 56%, 6% 68%, 3% 51%, 0% 62%
  ) !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 0 6px rgba(82,240,255,.7)) !important;
  animation:
    electricJaggedX 0.7s linear infinite,
    electricLineFlicker 0.1s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 28px,
      rgba(255, 255, 255, 0.95) 29px 31px,
      rgba(82, 240, 255, 0.86) 32px 38px,
      transparent 39px 62px) !important;
  background-size: 112px 100% !important;
  clip-path: polygon(
    0% 45%, 8% 56%, 14% 38%, 21% 62%, 29% 43%, 36% 67%,
    45% 39%, 54% 61%, 63% 44%, 71% 70%, 80% 36%, 90% 60%,
    100% 46%, 100% 58%, 90% 70%, 80% 49%, 71% 78%, 63% 55%,
    54% 68%, 45% 51%, 36% 76%, 29% 54%, 21% 71%, 14% 50%,
    8% 66%, 0% 57%
  ) !important;
  animation:
    electricJaggedXReverse 0.44s linear infinite,
    electricLineDropout 0.13s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-right::before,
.electric-current[data-electric-style="delicate"] .ec-left::before {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 7px,
      rgba(82, 240, 255, 0.56) 8px 13px,
      rgba(255, 255, 255, 0.95) 14px 15px,
      rgba(45, 230, 190, 0.64) 16px 22px,
      transparent 23px 36px),
    linear-gradient(180deg, rgba(82, 240, 255, 0.16), rgba(255,255,255,0.18), rgba(45,230,190,0.14)) !important;
  background-size: 100% 136px, 100% 100% !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.88))
    drop-shadow(0 0 6px rgba(82,240,255,.7)) !important;
  animation:
    electricJaggedY 0.72s linear infinite,
    electricLineFlicker 0.1s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-right::after,
.electric-current[data-electric-style="delicate"] .ec-left::after {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 28px,
      rgba(255, 255, 255, 0.95) 29px 31px,
      rgba(82, 240, 255, 0.86) 32px 38px,
      transparent 39px 62px) !important;
  background-size: 100% 112px !important;
  animation:
    electricJaggedYReverse 0.46s linear infinite,
    electricLineDropout 0.13s steps(2, end) infinite alternate !important;
}

/* Electric arc restore v22: screenshot-style full rectangular sizzling shell */
.charging-panel {
  --arc-shell-cyan: rgba(82, 240, 255, 0.82);
  --arc-shell-hot: rgba(244, 255, 255, 0.95);
  --arc-shell-mint: rgba(45, 230, 190, 0.55);
}

.charging-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  z-index: 125 !important;
  pointer-events: none !important;
  border-radius: 14px !important;
  opacity: 0.94 !important;
  background:
    /* top sizzling band */
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(82, 240, 255, 0.22) 7px 10px,
      var(--arc-shell-hot) 11px 12px,
      rgba(82, 240, 255, 0.68) 13px 18px,
      transparent 19px 31px,
      rgba(45, 230, 190, 0.38) 32px 37px,
      transparent 38px 54px) top 7px left 10px / calc(100% - 20px) 11px no-repeat,
    /* bottom sizzling band */
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      rgba(45, 230, 190, 0.38) 8px 13px,
      rgba(82, 240, 255, 0.62) 14px 20px,
      var(--arc-shell-hot) 21px 22px,
      transparent 23px 38px,
      rgba(82, 240, 255, 0.28) 39px 45px,
      transparent 46px 62px) bottom 7px left 10px / calc(100% - 20px) 11px no-repeat,
    /* left sizzling band */
    repeating-linear-gradient(180deg,
      transparent 0 6px,
      rgba(82, 240, 255, 0.22) 7px 10px,
      var(--arc-shell-hot) 11px 12px,
      rgba(82, 240, 255, 0.66) 13px 18px,
      transparent 19px 31px,
      rgba(45, 230, 190, 0.36) 32px 37px,
      transparent 38px 54px) left 7px top 10px / 11px calc(100% - 20px) no-repeat,
    /* right sizzling band */
    repeating-linear-gradient(180deg,
      transparent 0 7px,
      rgba(45, 230, 190, 0.36) 8px 13px,
      rgba(82, 240, 255, 0.62) 14px 20px,
      var(--arc-shell-hot) 21px 22px,
      transparent 23px 38px,
      rgba(82, 240, 255, 0.28) 39px 45px,
      transparent 46px 62px) right 7px top 10px / 11px calc(100% - 20px) no-repeat,
    /* crisp inner rails */
    linear-gradient(90deg, transparent, rgba(214, 255, 255, 0.9), rgba(82, 240, 255, 0.58), transparent) top 9px left 14px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(82, 240, 255, 0.58), rgba(214, 255, 255, 0.86), transparent) bottom 9px left 14px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(214, 255, 255, 0.9), rgba(82, 240, 255, 0.58), transparent) left 9px top 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(180deg, transparent, rgba(82, 240, 255, 0.58), rgba(214, 255, 255, 0.86), transparent) right 9px top 14px / 1px calc(100% - 28px) no-repeat !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.75))
    drop-shadow(0 0 13px rgba(82, 240, 255, 0.36))
    drop-shadow(0 0 24px rgba(45, 230, 190, 0.14)) !important;
  transform: translate3d(0, 0, 0);
  animation:
    restoredArcFlow 0.76s linear infinite,
    restoredArcFlicker 0.115s steps(2, end) infinite alternate,
    restoredArcJitter 0.21s steps(3, end) infinite !important;
}

.charging-panel .lightning-frame {
  z-index: 124 !important;
  inset: -7px !important;
  border-radius: 14px !important;
  opacity: 0.62 !important;
  background:
    linear-gradient(90deg, rgba(82, 240, 255, 0.62), rgba(255, 255, 255, 0.18), rgba(45, 230, 190, 0.48)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(45, 230, 190, 0.48), rgba(255, 255, 255, 0.2), rgba(82, 240, 255, 0.62)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(82, 240, 255, 0.62), rgba(255, 255, 255, 0.18), rgba(45, 230, 190, 0.48)) left top / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(45, 230, 190, 0.48), rgba(255, 255, 255, 0.2), rgba(82, 240, 255, 0.62)) right top / 1px 100% no-repeat !important;
  filter:
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.68))
    drop-shadow(0 0 14px rgba(82, 240, 255, 0.28)) !important;
  animation: restoredArcFlicker 0.18s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] {
  z-index: 130 !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  z-index: 132 !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.86))
    drop-shadow(0 0 16px rgba(45, 230, 190, 0.28)) !important;
}

.edge-trace {
  stroke: rgba(91, 242, 255, 0.98) !important;
  stroke-width: 1.48px !important;
  opacity: var(--trace-o, 0.94) !important;
  stroke-dasharray: 9 5 22 6 4 7 !important;
}

.edge-trace-0 {
  stroke-width: 1.72px !important;
  stroke-dasharray: 13 4 28 5 5 8 !important;
}

.edge-spark {
  stroke-width: var(--spark-w, 2.1px) !important;
  opacity: var(--spark-o, 0.72) !important;
}

.edge-zap {
  stroke-width: var(--zap-w, 1.86px) !important;
  opacity: var(--zap-o, 0.62) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  z-index: 134 !important;
  opacity: clamp(0.22, var(--arc-opacity, 0.4), 0.72) !important;
}

@keyframes restoredArcFlow {
  0% {
    background-position:
      top 7px left 10px,
      bottom 7px left 10px,
      left 7px top 10px,
      right 7px top 10px,
      top 9px left 14px,
      bottom 9px left 14px,
      left 9px top 14px,
      right 9px top 14px;
  }
  100% {
    background-position:
      top 7px left -96px,
      bottom 7px left 116px,
      left 7px top -96px,
      right 7px top 116px,
      top 9px left 14px,
      bottom 9px left 14px,
      left 9px top 14px,
      right 9px top 14px;
  }
}

@keyframes restoredArcFlicker {
  0% { opacity: 0.52; filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 5px rgba(82,240,255,.48)) drop-shadow(0 0 13px rgba(82,240,255,.22)); }
  36% { opacity: 0.98; filter: drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 8px rgba(82,240,255,.84)) drop-shadow(0 0 19px rgba(82,240,255,.42)); }
  64% { opacity: 0.68; filter: drop-shadow(0 0 1px rgba(255,255,255,.84)) drop-shadow(0 0 6px rgba(82,240,255,.62)) drop-shadow(0 0 14px rgba(82,240,255,.28)); }
  100% { opacity: 0.9; filter: drop-shadow(0 0 2px rgba(255,255,255,.94)) drop-shadow(0 0 7px rgba(82,240,255,.74)) drop-shadow(0 0 18px rgba(45,230,190,.24)); }
}

@keyframes restoredArcJitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.7px, 0.4px, 0); }
  50% { transform: translate3d(0.6px, -0.5px, 0); }
  75% { transform: translate3d(-0.3px, -0.4px, 0); }
}

/* Electric arc restore v23: refine from square LEDs to continuous noisy electric arcs */
.charging-panel::before {
  inset: -8px !important;
  border-radius: 13px !important;
  opacity: 0.88 !important;
  background:
    /* continuous hot rails */
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.48) 4%,
      rgba(236, 255, 255, 0.9) 16%,
      rgba(82, 240, 255, 0.58) 34%,
      rgba(45, 230, 190, 0.52) 52%,
      rgba(238, 255, 255, 0.86) 78%,
      rgba(82, 240, 255, 0.44) 94%,
      transparent 100%) top 8px left 12px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 5%,
      rgba(236, 255, 255, 0.86) 22%,
      rgba(45, 230, 190, 0.5) 48%,
      rgba(82, 240, 255, 0.58) 68%,
      rgba(238, 255, 255, 0.84) 86%,
      transparent 100%) bottom 8px left 12px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.48) 4%,
      rgba(236, 255, 255, 0.9) 16%,
      rgba(82, 240, 255, 0.58) 34%,
      rgba(45, 230, 190, 0.52) 52%,
      rgba(238, 255, 255, 0.86) 78%,
      rgba(82, 240, 255, 0.44) 94%,
      transparent 100%) left 8px top 12px / 2px calc(100% - 24px) no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 5%,
      rgba(236, 255, 255, 0.86) 22%,
      rgba(45, 230, 190, 0.5) 48%,
      rgba(82, 240, 255, 0.58) 68%,
      rgba(238, 255, 255, 0.84) 86%,
      transparent 100%) right 8px top 12px / 2px calc(100% - 24px) no-repeat,
    /* hairline sparks riding on top of rails */
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.52) 11px 12px,
      rgba(82, 240, 255, 0.36) 13px 16px,
      transparent 17px 42px,
      rgba(45, 230, 190, 0.3) 43px 45px,
      transparent 46px 73px) top 5px left 10px / calc(100% - 20px) 6px no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 16px,
      rgba(45, 230, 190, 0.26) 17px 19px,
      rgba(255, 255, 255, 0.48) 20px 21px,
      rgba(82, 240, 255, 0.32) 22px 25px,
      transparent 26px 68px) bottom 5px left 10px / calc(100% - 20px) 6px no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.52) 11px 12px,
      rgba(82, 240, 255, 0.36) 13px 16px,
      transparent 17px 42px,
      rgba(45, 230, 190, 0.3) 43px 45px,
      transparent 46px 73px) left 5px top 10px / 6px calc(100% - 20px) no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 16px,
      rgba(45, 230, 190, 0.26) 17px 19px,
      rgba(255, 255, 255, 0.48) 20px 21px,
      rgba(82, 240, 255, 0.32) 22px 25px,
      transparent 26px 68px) right 5px top 10px / 6px calc(100% - 20px) no-repeat !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 11px rgba(82, 240, 255, 0.38))
    drop-shadow(0 0 22px rgba(45, 230, 190, 0.14)) !important;
  animation:
    restoredFineArcFlow 0.7s linear infinite,
    restoredFineArcFlicker 0.12s steps(2, end) infinite alternate,
    restoredArcJitter 0.22s steps(3, end) infinite !important;
}

.charging-panel .lightning-frame {
  opacity: 0.46 !important;
  filter:
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.5))
    drop-shadow(0 0 10px rgba(82, 240, 255, 0.2)) !important;
}

.edge-trace {
  stroke-dasharray: 5 2 3 3 20 4 2 6 !important;
  stroke-linecap: round !important;
}

.edge-trace-0 {
  stroke-width: 1.46px !important;
  stroke-dasharray: 7 2 4 3 26 4 3 7 !important;
}

.edge-spark {
  stroke-width: var(--spark-w, 1.72px) !important;
}

.edge-zap {
  stroke-width: var(--zap-w, 1.34px) !important;
}

@keyframes restoredFineArcFlow {
  0% {
    background-position:
      top 8px left 12px,
      bottom 8px left 12px,
      left 8px top 12px,
      right 8px top 12px,
      top 5px left 10px,
      bottom 5px left 10px,
      left 5px top 10px,
      right 5px top 10px;
  }
  100% {
    background-position:
      top 8px left 12px,
      bottom 8px left 12px,
      left 8px top 12px,
      right 8px top 12px,
      top 5px left -118px,
      bottom 5px left 128px,
      left 5px top -118px,
      right 5px top 128px;
  }
}

@keyframes restoredFineArcFlicker {
  0% { opacity: 0.48; }
  38% { opacity: 0.94; }
  58% { opacity: 0.62; }
  100% { opacity: 0.86; }
}

/* Electric arc restore v24: remove inner smooth orbit line, keep outer arc shell */
.electric-current[data-electric-style="delicate"] .electric-svg,
.electric-current[data-electric-style="delicate"] .electric-svg-track,
.electric-current[data-electric-style="delicate"] .electric-svg-flow,
.electric-current[data-electric-style="delicate"] .electric-orb {
  display: none !important;
  opacity: 0 !important;
}

/* Electric arc v32 FINAL OVERRIDE: highest-priority visible jagged arcs */
.charging-panel::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.electric-current[data-electric-style="delicate"] .ec-line {
  display: block !important;
  position: absolute !important;
  z-index: 180 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  background: none !important;
  mix-blend-mode: screen !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(82,240,255,.88))
    drop-shadow(0 0 14px rgba(82,240,255,.32)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-line::before,
.electric-current[data-electric-style="delicate"] .ec-line::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82,240,255,.82) 8%,
      rgba(255,255,255,.98) 15%,
      rgba(45,230,190,.72) 23%,
      rgba(82,240,255,.88) 34%,
      rgba(255,255,255,.96) 48%,
      rgba(82,240,255,.82) 62%,
      rgba(45,230,190,.72) 75%,
      rgba(255,255,255,.94) 88%,
      transparent 100%) !important;
  background-size: 160% 100% !important;
  opacity: .92 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 5px rgba(82,240,255,.86)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-top,
.electric-current[data-electric-style="delicate"] .ec-bottom {
  left: -3px !important;
  right: -3px !important;
  width: auto !important;
  height: 30px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top { top: -14px !important; }
.electric-current[data-electric-style="delicate"] .ec-bottom { bottom: -14px !important; }

.electric-current[data-electric-style="delicate"] .ec-top::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::before {
  inset: 0 !important;
  clip-path: polygon(
    0% 50%, 2% 20%, 4% 66%, 7% 32%, 10% 82%, 13% 24%,
    17% 60%, 21% 35%, 26% 90%, 31% 30%, 36% 64%, 42% 38%,
    48% 84%, 54% 22%, 60% 66%, 67% 34%, 74% 88%, 82% 30%,
    90% 68%, 100% 48%, 100% 64%, 90% 56%, 82% 86%, 74% 52%,
    67% 78%, 60% 48%, 54% 92%, 48% 62%, 42% 82%, 36% 54%,
    31% 88%, 26% 58%, 21% 76%, 17% 52%, 13% 88%, 10% 58%,
    7% 78%, 4% 54%, 2% 68%, 0% 62%
  ) !important;
  animation:
    finalArcFlowX .78s linear infinite,
    finalArcFlicker .22s steps(2,end) infinite alternate,
    finalArcJitter .16s steps(2,end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  inset: 2px 8px !important;
  clip-path: polygon(
    0% 46%, 8% 58%, 14% 18%, 22% 70%, 31% 32%, 40% 82%,
    51% 24%, 61% 66%, 72% 30%, 84% 78%, 94% 28%, 100% 50%,
    100% 61%, 94% 52%, 84% 90%, 72% 50%, 61% 78%, 51% 45%,
    40% 92%, 31% 55%, 22% 82%, 14% 44%, 8% 70%, 0% 58%
  ) !important;
  opacity: .58 !important;
  animation:
    finalArcFlowXReverse .52s linear infinite,
    finalArcPop .18s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  transform: scaleY(-1) !important;
}

.electric-current[data-electric-style="delicate"] .ec-left,
.electric-current[data-electric-style="delicate"] .ec-right {
  top: -3px !important;
  bottom: -3px !important;
  width: 30px !important;
  height: auto !important;
}

.electric-current[data-electric-style="delicate"] .ec-left { left: -14px !important; }
.electric-current[data-electric-style="delicate"] .ec-right { right: -14px !important; }

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-right::before,
.electric-current[data-electric-style="delicate"] .ec-left::after,
.electric-current[data-electric-style="delicate"] .ec-right::after {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(82,240,255,.82) 8%,
      rgba(255,255,255,.98) 15%,
      rgba(45,230,190,.72) 23%,
      rgba(82,240,255,.88) 34%,
      rgba(255,255,255,.96) 48%,
      rgba(82,240,255,.82) 62%,
      rgba(45,230,190,.72) 75%,
      rgba(255,255,255,.94) 88%,
      transparent 100%) !important;
  background-size: 100% 160% !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-right::before {
  inset: 0 !important;
  clip-path: polygon(
    50% 0%, 20% 2%, 66% 4%, 32% 7%, 82% 10%, 24% 13%,
    60% 17%, 35% 21%, 90% 26%, 30% 31%, 64% 36%, 38% 42%,
    84% 48%, 22% 54%, 66% 60%, 34% 67%, 88% 74%, 30% 82%,
    68% 90%, 48% 100%, 64% 100%, 56% 90%, 86% 82%, 52% 74%,
    78% 67%, 48% 60%, 92% 54%, 62% 48%, 82% 42%, 54% 36%,
    88% 31%, 58% 26%, 76% 21%, 52% 17%, 88% 13%, 58% 10%,
    78% 7%, 54% 4%, 68% 2%, 62% 0%
  ) !important;
  animation:
    finalArcFlowY .82s linear infinite,
    finalArcFlicker .22s steps(2,end) infinite alternate,
    finalArcJitter .16s steps(2,end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after,
.electric-current[data-electric-style="delicate"] .ec-right::after {
  inset: 8px 2px !important;
  clip-path: polygon(
    46% 0%, 58% 8%, 18% 14%, 70% 22%, 32% 31%, 82% 40%,
    24% 51%, 66% 61%, 30% 72%, 78% 84%, 28% 94%, 50% 100%,
    61% 100%, 52% 94%, 90% 84%, 50% 72%, 78% 61%, 45% 51%,
    92% 40%, 55% 31%, 82% 22%, 44% 14%, 70% 8%, 58% 0%
  ) !important;
  opacity: .58 !important;
  animation:
    finalArcFlowYReverse .56s linear infinite,
    finalArcPop .18s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-left::after {
  transform: scaleX(-1) !important;
}

@keyframes finalArcFlowX {
  from { background-position: 0 0; }
  to { background-position: -160% 0; }
}

@keyframes finalArcFlowXReverse {
  from { background-position: -120% 0; }
  to { background-position: 120% 0; }
}

@keyframes finalArcFlowY {
  from { background-position: 0 0; }
  to { background-position: 0 -160%; }
}

@keyframes finalArcFlowYReverse {
  from { background-position: 0 -120%; }
  to { background-position: 0 120%; }
}

@keyframes finalArcFlicker {
  0% { opacity: .35; filter: brightness(.86); }
  42% { opacity: .98; filter: brightness(1.78); }
  100% { opacity: .66; filter: brightness(1.16); }
}

@keyframes finalArcPop {
  0% { opacity: .08; }
  50% { opacity: .7; }
  100% { opacity: .22; }
}

@keyframes finalArcJitter {
  0%, 100% { translate: 0 0; }
  50% { translate: .45px -.3px; }
}

/* Electric arc v33: visible moving lightning runners on each edge */
.electric-current[data-electric-style="delicate"] .ec-runner {
  display: block !important;
  position: absolute !important;
  z-index: 220 !important;
  width: 165px !important;
  height: 34px !important;
  opacity: .78 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82,240,255,.18) 8%,
      rgba(82,240,255,.95) 18%,
      rgba(255,255,255,1) 30%,
      rgba(45,230,190,.86) 43%,
      rgba(255,255,255,.95) 58%,
      rgba(82,240,255,.82) 74%,
      transparent 100%) !important;
  clip-path: polygon(
    0% 50%, 7% 34%, 13% 60%, 20% 28%, 28% 65%, 36% 40%,
    44% 76%, 52% 26%, 60% 61%, 70% 36%, 82% 70%, 92% 42%,
    100% 52%, 92% 61%, 82% 50%, 70% 86%, 60% 53%, 52% 72%,
    44% 46%, 36% 82%, 28% 50%, 20% 76%, 13% 45%, 7% 64%
  ) !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 7px rgba(82,240,255,.9))
    drop-shadow(0 0 16px rgba(45,230,190,.32)) !important;
  transform-origin: 50% 50% !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-a {
  top: -18px !important;
  left: 4% !important;
  animation:
    runnerTopArc 2.6s linear infinite,
    runnerArcFlicker .22s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-b {
  top: 12% !important;
  right: -82px !important;
  transform: rotate(90deg) !important;
  animation:
    runnerRightArc 2.8s linear infinite,
    runnerArcFlicker .24s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-c {
  bottom: -18px !important;
  right: 4% !important;
  transform: rotate(180deg) !important;
  animation:
    runnerBottomArc 2.7s linear infinite,
    runnerArcFlicker .2s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-d {
  bottom: 12% !important;
  left: -82px !important;
  transform: rotate(-90deg) !important;
  animation:
    runnerLeftArc 2.9s linear infinite,
    runnerArcFlicker .25s steps(2,end) infinite alternate !important;
}

@keyframes runnerTopArc {
  0% { left: 2%; translate: 0 0; }
  48% { left: 76%; translate: .5px -.4px; }
  49% { opacity: 0; }
  100% { left: 2%; opacity: 0; }
}

@keyframes runnerRightArc {
  0% { top: 4%; translate: 0 0; }
  48% { top: 74%; translate: .4px .5px; }
  49% { opacity: 0; }
  100% { top: 4%; opacity: 0; }
}

@keyframes runnerBottomArc {
  0% { right: 2%; translate: 0 0; }
  48% { right: 76%; translate: -.5px .4px; }
  49% { opacity: 0; }
  100% { right: 2%; opacity: 0; }
}

@keyframes runnerLeftArc {
  0% { bottom: 4%; translate: 0 0; }
  48% { bottom: 74%; translate: -.4px -.5px; }
  49% { opacity: 0; }
  100% { bottom: 4%; opacity: 0; }
}

@keyframes runnerArcFlicker {
  0% { opacity: .24; filter: brightness(.75) drop-shadow(0 0 4px rgba(82,240,255,.45)); }
  42% { opacity: .92; filter: brightness(1.85) drop-shadow(0 0 10px rgba(82,240,255,.9)); }
  100% { opacity: .62; filter: brightness(1.18) drop-shadow(0 0 6px rgba(82,240,255,.62)); }
}

.charging-panel::after {
  opacity: 0.18 !important;
  background:
    linear-gradient(118deg, transparent 0 24%, rgba(50, 255, 220, 0.045) 34%, rgba(82, 158, 255, 0.03) 43%, transparent 62%) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  display: none !important;
  opacity: 0 !important;
}

/* Electric arc v26: precise SVG edge current, subtle continuous zizzle */
.charging-panel {
  overflow: visible !important;
}

.charging-panel::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.charging-panel .lightning-frame {
  z-index: 70 !important;
  inset: 0 !important;
  opacity: 0.18 !important;
  filter: drop-shadow(0 0 4px rgba(82, 240, 255, 0.28)) !important;
}

.electric-current[data-electric-style="delicate"] {
  z-index: 120 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: inherit !important;
  overflow: visible !important;
  opacity: 1 !important;
  contain: none !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  filter: none !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  display: block !important;
  position: absolute !important;
  z-index: 125 !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
  filter:
    drop-shadow(0 0 1px rgba(240, 255, 255, 0.6))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.48))
    drop-shadow(0 0 7px rgba(45, 230, 190, 0.14)) !important;
}

.edge-trace-field {
  transform-box: fill-box !important;
  transform-origin: center !important;
}

.edge-trace,
.edge-spark,
.edge-zap {
  display: block !important;
  visibility: visible !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.edge-trace {
  stroke: rgba(96, 244, 255, 0.86) !important;
  stroke-width: 1.02px !important;
  opacity: var(--trace-o, 0.62) !important;
  stroke-dasharray: 7 3 18 4 2 5 !important;
  animation:
    edgeTraceFlowFine 1.55s linear infinite,
    edgeTraceBreathFine 1.05s steps(3, end) infinite alternate !important;
  animation-delay: var(--trace-delay, 0s) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.54))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.46)) !important;
}

.edge-trace-0 {
  stroke: rgba(218, 255, 255, 0.94) !important;
  stroke-width: 1.18px !important;
  stroke-dasharray: 10 3 24 5 3 6 !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.34) !important;
  stroke-width: 1.42px !important;
  stroke-dasharray: 60 10 16 8 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.24) !important;
  stroke-width: 0.72px !important;
  stroke-dasharray: 5 7 13 8 !important;
}

.edge-spark {
  stroke: rgba(236, 255, 255, 0.82) !important;
  stroke-width: var(--spark-w, 0.9px) !important;
  opacity: var(--spark-o, 0.26) !important;
  stroke-dasharray: 8 18 4 22 !important;
  animation:
    edgeSparkBlinkFine 0.5s steps(2, end) infinite alternate,
    edgeTraceFlowFine 1.35s linear infinite !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.42)) !important;
}

.edge-zap {
  stroke: rgba(242, 255, 255, 0.9) !important;
  stroke-width: var(--zap-w, 0.78px) !important;
  opacity: var(--zap-o, 0.18) !important;
  stroke-dasharray: 12 18 !important;
  animation: edgeZapSizzleFine 0.42s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.56))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.44)) !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeMicroShakeFine 0.5s steps(3, end) infinite !important;
}

@keyframes edgeTraceFlowFine {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -54; }
}

@keyframes edgeTraceBreathFine {
  from { opacity: calc(var(--trace-o, 0.62) * 0.72); }
  to { opacity: var(--trace-o, 0.62); }
}

@keyframes edgeSparkBlinkFine {
  0% { opacity: 0.06; }
  36% { opacity: var(--spark-o, 0.26); }
  100% { opacity: 0.18; }
}

@keyframes edgeZapSizzleFine {
  0% { opacity: 0.025; }
  40% { opacity: var(--zap-o, 0.18); }
  100% { opacity: 0.08; }
}

@keyframes edgeMicroShakeFine {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-0.14px, 0.08px, 0); }
  66% { transform: translate3d(0.12px, -0.1px, 0); }
}

/* Electric arc v27: real jagged arcs and short fork discharges on top of the fine edge current */
.charging-panel::before {
  content: none !important;
  display: none !important;
}

.charging-panel {
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.2),
    0 0 10px rgba(82, 240, 255, 0.14),
    0 0 24px rgba(45, 230, 190, 0.06),
    inset 0 0 22px rgba(82, 240, 255, 0.065) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  filter:
    drop-shadow(0 0 1px rgba(240, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.56))
    drop-shadow(0 0 8px rgba(45, 230, 190, 0.16)) !important;
}

.edge-trace {
  stroke: rgba(79, 236, 255, 0.72) !important;
  stroke-width: 0.82px !important;
  opacity: var(--trace-o, 0.55) !important;
  stroke-dasharray: 4 3 9 5 2 6 !important;
}

.edge-trace-0 {
  stroke: rgba(230, 255, 255, 0.86) !important;
  stroke-width: 0.98px !important;
  stroke-dasharray: 5 3 12 4 2 5 !important;
}

.edge-spark {
  stroke: rgba(238, 255, 255, 0.78) !important;
  stroke-width: var(--spark-w, 0.95px) !important;
  opacity: var(--spark-o, 0.28) !important;
}

.edge-zap,
.edge-arc,
.edge-fork {
  display: block !important;
  visibility: visible !important;
  fill: none !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.edge-zap {
  stroke: rgba(248, 255, 255, 0.94) !important;
  stroke-width: var(--zap-w, 1px) !important;
  opacity: var(--zap-o, 0.24) !important;
  stroke-dasharray: 10 12 4 16 !important;
  animation: edgeZapHardSizzle 0.28s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.58))
    drop-shadow(0 0 8px rgba(45, 230, 190, 0.18)) !important;
}

.edge-arc {
  stroke: rgba(235, 255, 255, 0.98) !important;
  stroke-width: var(--arc-w, 1.45px) !important;
  opacity: var(--arc-o, 0.68) !important;
  stroke-dasharray: 22 4 4 6 10 4 !important;
  animation:
    edgeArcDash 0.62s linear infinite,
    edgeArcFlicker 0.34s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.84))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.7))
    drop-shadow(0 0 10px rgba(82, 240, 255, 0.2)) !important;
}

.edge-fork {
  stroke: rgba(255, 255, 255, 0.92) !important;
  stroke-width: var(--fork-w, 1.12px) !important;
  opacity: var(--fork-o, 0.42) !important;
  stroke-dasharray: 12 7 !important;
  animation: edgeForkSnap 0.22s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.68)) !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeMicroShakeArc 0.22s steps(2, end) infinite !important;
}

@keyframes edgeArcDash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -46; }
}

@keyframes edgeArcFlicker {
  0% { opacity: calc(var(--arc-o, 0.52) * 0.55); }
  42% { opacity: var(--arc-o, 0.52); }
  100% { opacity: calc(var(--arc-o, 0.52) * 0.72); }
}

@keyframes edgeForkSnap {
  0% { opacity: 0.03; }
  38% { opacity: var(--fork-o, 0.28); }
  100% { opacity: 0.08; }
}

@keyframes edgeZapHardSizzle {
  0% { opacity: 0.04; }
  45% { opacity: var(--zap-o, 0.24); }
  100% { opacity: 0.1; }
}

@keyframes edgeMicroShakeArc {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.32px, 0.16px, 0); }
  50% { transform: translate3d(0.24px, -0.22px, 0); }
  75% { transform: translate3d(-0.12px, -0.16px, 0); }
}

/* Electric arc v29: guaranteed visible jagged border arcs (CSS fallback over SVG current) */
.electric-current[data-electric-style="delicate"] .ec-line {
  display: block !important;
  position: absolute !important;
  z-index: 135 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 0.82 !important;
  mix-blend-mode: screen !important;
  background: none !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 10px rgba(45, 230, 190, 0.18)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-line::before,
.electric-current[data-electric-style="delicate"] .ec-line::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  display: block !important;
  mix-blend-mode: screen !important;
}

.electric-current[data-electric-style="delicate"] .ec-top,
.electric-current[data-electric-style="delicate"] .ec-bottom {
  left: -2px !important;
  right: -2px !important;
  width: auto !important;
  height: 18px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top {
  top: -8px !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom {
  bottom: -8px !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::before {
  inset: 0 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.22) 7%,
      rgba(255, 255, 255, 0.92) 14%,
      rgba(82, 240, 255, 0.72) 22%,
      rgba(45, 230, 190, 0.62) 35%,
      rgba(255, 255, 255, 0.9) 48%,
      rgba(82, 240, 255, 0.72) 62%,
      rgba(45, 230, 190, 0.58) 76%,
      rgba(255, 255, 255, 0.86) 88%,
      transparent 100%) !important;
  background-size: 190% 100% !important;
  clip-path: polygon(
    0% 51%, 3% 38%, 6% 57%, 9% 44%, 12% 62%, 16% 36%,
    20% 55%, 24% 42%, 28% 68%, 32% 39%, 36% 58%, 41% 45%,
    46% 64%, 51% 35%, 56% 59%, 61% 43%, 67% 69%, 73% 39%,
    79% 58%, 85% 44%, 92% 65%, 100% 50%,
    100% 60%, 92% 57%, 85% 73%, 79% 51%, 73% 68%, 67% 49%,
    61% 76%, 56% 54%, 51% 67%, 46% 50%, 41% 74%, 36% 53%,
    32% 68%, 28% 50%, 24% 76%, 20% 54%, 16% 69%, 12% 50%,
    9% 66%, 6% 52%, 3% 62%, 0% 60%
  ) !important;
  animation:
    cssArcFlowX 1.1s linear infinite,
    cssArcFlicker 0.38s steps(2, end) infinite alternate,
    cssArcJitter 0.24s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  inset: 1px 0 !important;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      rgba(255, 255, 255, 0.95) 35px 37px,
      rgba(82, 240, 255, 0.8) 38px 48px,
      transparent 49px 86px) !important;
  background-size: 150px 100% !important;
  clip-path: polygon(
    0% 46%, 10% 55%, 17% 35%, 25% 62%, 34% 41%, 43% 67%,
    53% 37%, 63% 60%, 73% 42%, 84% 68%, 94% 39%, 100% 49%,
    100% 58%, 94% 55%, 84% 76%, 73% 52%, 63% 69%, 53% 49%,
    43% 76%, 34% 53%, 25% 70%, 17% 48%, 10% 64%, 0% 56%
  ) !important;
  animation:
    cssArcFlowXReverse 0.72s linear infinite,
    cssArcPop 0.3s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom::before,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  transform: scaleY(-1);
}

.electric-current[data-electric-style="delicate"] .ec-left,
.electric-current[data-electric-style="delicate"] .ec-right {
  top: -2px !important;
  bottom: -2px !important;
  width: 18px !important;
  height: auto !important;
}

.electric-current[data-electric-style="delicate"] .ec-left {
  left: -8px !important;
}

.electric-current[data-electric-style="delicate"] .ec-right {
  right: -8px !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-right::before {
  inset: 0 !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.22) 7%,
      rgba(255, 255, 255, 0.92) 14%,
      rgba(82, 240, 255, 0.72) 22%,
      rgba(45, 230, 190, 0.62) 35%,
      rgba(255, 255, 255, 0.9) 48%,
      rgba(82, 240, 255, 0.72) 62%,
      rgba(45, 230, 190, 0.58) 76%,
      rgba(255, 255, 255, 0.86) 88%,
      transparent 100%) !important;
  background-size: 100% 190% !important;
  clip-path: polygon(
    51% 0%, 38% 3%, 57% 6%, 44% 9%, 62% 12%, 36% 16%,
    55% 20%, 42% 24%, 68% 28%, 39% 32%, 58% 36%, 45% 41%,
    64% 46%, 35% 51%, 59% 56%, 43% 61%, 69% 67%, 39% 73%,
    58% 79%, 44% 85%, 65% 92%, 50% 100%,
    60% 100%, 57% 92%, 73% 85%, 51% 79%, 68% 73%, 49% 67%,
    76% 61%, 54% 56%, 67% 51%, 50% 46%, 74% 41%, 53% 36%,
    68% 32%, 50% 28%, 76% 24%, 54% 20%, 69% 16%, 50% 12%,
    66% 9%, 52% 6%, 62% 3%, 60% 0%
  ) !important;
  animation:
    cssArcFlowY 1.15s linear infinite,
    cssArcFlicker 0.38s steps(2, end) infinite alternate,
    cssArcJitter 0.24s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after,
.electric-current[data-electric-style="delicate"] .ec-right::after {
  inset: 0 1px !important;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 34px,
      rgba(255, 255, 255, 0.95) 35px 37px,
      rgba(82, 240, 255, 0.8) 38px 48px,
      transparent 49px 86px) !important;
  background-size: 100% 150px !important;
  clip-path: polygon(
    46% 0%, 55% 10%, 35% 17%, 62% 25%, 41% 34%, 67% 43%,
    37% 53%, 60% 63%, 42% 73%, 68% 84%, 39% 94%, 49% 100%,
    58% 100%, 55% 94%, 76% 84%, 52% 73%, 69% 63%, 49% 53%,
    76% 43%, 53% 34%, 70% 25%, 48% 17%, 64% 10%, 56% 0%
  ) !important;
  animation:
    cssArcFlowYReverse 0.72s linear infinite,
    cssArcPop 0.3s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::before,
.electric-current[data-electric-style="delicate"] .ec-left::after {
  transform: scaleX(-1);
}

@keyframes cssArcFlowX {
  from { background-position: 0 0; }
  to { background-position: -190% 0; }
}

@keyframes cssArcFlowXReverse {
  from { background-position: -150px 0; }
  to { background-position: 150px 0; }
}

@keyframes cssArcFlowY {
  from { background-position: 0 0; }
  to { background-position: 0 -190%; }
}

@keyframes cssArcFlowYReverse {
  from { background-position: 0 -150px; }
  to { background-position: 0 150px; }
}

@keyframes cssArcFlicker {
  0% { opacity: 0.42; filter: brightness(0.9); }
  45% { opacity: 0.92; filter: brightness(1.6); }
  100% { opacity: 0.68; filter: brightness(1.15); }
}

@keyframes cssArcPop {
  0% { opacity: 0.06; }
  42% { opacity: 0.62; }
  100% { opacity: 0.2; }
}

@keyframes cssArcJitter {
  0%, 100% { translate: 0 0; }
  50% { translate: 0.35px -0.25px; }
}

/* Electric arc v30: explicit short diagonal bolt forks so the border reads as electricity */
.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  inset: -6px 18px !important;
  height: 30px !important;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.94) 47% 52%, rgba(82,240,255,.7) 53% 57%, transparent 61% 100%) 7% 50% / 46px 22px no-repeat,
    linear-gradient(45deg, transparent 0 42%, rgba(82,240,255,.75) 47% 52%, rgba(255,255,255,.92) 53% 57%, transparent 62% 100%) 18% 50% / 38px 18px no-repeat,
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.9) 47% 51%, rgba(45,230,190,.68) 52% 57%, transparent 62% 100%) 31% 50% / 52px 24px no-repeat,
    linear-gradient(45deg, transparent 0 43%, rgba(82,240,255,.8) 48% 53%, rgba(255,255,255,.95) 54% 58%, transparent 63% 100%) 46% 50% / 42px 20px no-repeat,
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.92) 48% 52%, rgba(82,240,255,.72) 53% 58%, transparent 63% 100%) 61% 50% / 48px 22px no-repeat,
    linear-gradient(45deg, transparent 0 42%, rgba(45,230,190,.72) 47% 52%, rgba(255,255,255,.92) 53% 57%, transparent 62% 100%) 76% 50% / 40px 18px no-repeat,
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.9) 48% 52%, rgba(82,240,255,.7) 53% 58%, transparent 63% 100%) 91% 50% / 48px 22px no-repeat !important;
  clip-path: none !important;
  opacity: 0.58 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 5px rgba(82,240,255,.72))
    drop-shadow(0 0 10px rgba(45,230,190,.2)) !important;
  animation:
    visibleBoltForker 0.42s steps(2, end) infinite alternate,
    cssArcJitter 0.18s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  transform: scaleY(-1) !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after,
.electric-current[data-electric-style="delicate"] .ec-right::after {
  inset: 18px -6px !important;
  width: 30px !important;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.94) 47% 52%, rgba(82,240,255,.7) 53% 57%, transparent 61% 100%) 50% 7% / 22px 46px no-repeat,
    linear-gradient(45deg, transparent 0 42%, rgba(82,240,255,.75) 47% 52%, rgba(255,255,255,.92) 53% 57%, transparent 62% 100%) 50% 18% / 18px 38px no-repeat,
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.9) 47% 51%, rgba(45,230,190,.68) 52% 57%, transparent 62% 100%) 50% 31% / 24px 52px no-repeat,
    linear-gradient(45deg, transparent 0 43%, rgba(82,240,255,.8) 48% 53%, rgba(255,255,255,.95) 54% 58%, transparent 63% 100%) 50% 46% / 20px 42px no-repeat,
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.92) 48% 52%, rgba(82,240,255,.72) 53% 58%, transparent 63% 100%) 50% 61% / 22px 48px no-repeat,
    linear-gradient(45deg, transparent 0 42%, rgba(45,230,190,.72) 47% 52%, rgba(255,255,255,.92) 53% 57%, transparent 62% 100%) 50% 76% / 18px 40px no-repeat,
    linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.9) 48% 52%, rgba(82,240,255,.7) 53% 58%, transparent 63% 100%) 50% 91% / 22px 48px no-repeat !important;
  clip-path: none !important;
  opacity: 0.58 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 5px rgba(82,240,255,.72))
    drop-shadow(0 0 10px rgba(45,230,190,.2)) !important;
  animation:
    visibleBoltForker 0.42s steps(2, end) infinite alternate,
    cssArcJitter 0.18s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after {
  transform: scaleX(-1) !important;
}

@keyframes visibleBoltForker {
  0% { opacity: 0.18; filter: brightness(.9) drop-shadow(0 0 3px rgba(82,240,255,.42)); }
  45% { opacity: 0.72; filter: brightness(1.7) drop-shadow(0 0 7px rgba(82,240,255,.78)); }
  100% { opacity: 0.42; filter: brightness(1.15) drop-shadow(0 0 4px rgba(82,240,255,.54)); }
}

/* Electric arc v31: visible saw-tooth current, replacing the pure tube look */
.electric-current[data-electric-style="delicate"] .ec-top::after,
.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  inset: 0 !important;
  height: 18px !important;
  width: 100% !important;
  background:
    linear-gradient(90deg,
      rgba(82,240,255,0) 0%,
      rgba(82,240,255,.82) 7%,
      rgba(255,255,255,.98) 12%,
      rgba(45,230,190,.72) 18%,
      rgba(82,240,255,.86) 25%,
      rgba(255,255,255,.95) 34%,
      rgba(82,240,255,.74) 45%,
      rgba(45,230,190,.78) 55%,
      rgba(255,255,255,.96) 67%,
      rgba(82,240,255,.84) 78%,
      rgba(255,255,255,.9) 90%,
      rgba(82,240,255,0) 100%) !important;
  background-size: 135% 100% !important;
  clip-path: polygon(
    0% 54%, 2% 34%, 4% 62%, 7% 39%, 10% 74%, 13% 31%,
    16% 58%, 19% 43%, 23% 82%, 27% 36%, 31% 61%, 35% 45%,
    40% 76%, 45% 29%, 50% 64%, 55% 41%, 61% 86%, 67% 35%,
    73% 62%, 80% 42%, 87% 78%, 94% 38%, 100% 55%,
    100% 68%, 94% 56%, 87% 91%, 80% 60%, 73% 78%, 67% 55%,
    61% 96%, 55% 62%, 50% 79%, 45% 49%, 40% 92%, 35% 61%,
    31% 79%, 27% 55%, 23% 98%, 19% 63%, 16% 76%, 13% 51%,
    10% 92%, 7% 61%, 4% 77%, 2% 56%, 0% 68%
  ) !important;
  opacity: .86 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(82,240,255,.88))
    drop-shadow(0 0 13px rgba(82,240,255,.34)) !important;
  animation:
    cssArcFlowX 0.82s linear infinite,
    hardSawArcFlicker .24s steps(2, end) infinite alternate,
    cssArcJitter .16s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-bottom::after {
  transform: scaleY(-1) !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after,
.electric-current[data-electric-style="delicate"] .ec-right::after {
  inset: 0 !important;
  width: 18px !important;
  height: 100% !important;
  background:
    linear-gradient(180deg,
      rgba(82,240,255,0) 0%,
      rgba(82,240,255,.82) 7%,
      rgba(255,255,255,.98) 12%,
      rgba(45,230,190,.72) 18%,
      rgba(82,240,255,.86) 25%,
      rgba(255,255,255,.95) 34%,
      rgba(82,240,255,.74) 45%,
      rgba(45,230,190,.78) 55%,
      rgba(255,255,255,.96) 67%,
      rgba(82,240,255,.84) 78%,
      rgba(255,255,255,.9) 90%,
      rgba(82,240,255,0) 100%) !important;
  background-size: 100% 135% !important;
  clip-path: polygon(
    54% 0%, 34% 2%, 62% 4%, 39% 7%, 74% 10%, 31% 13%,
    58% 16%, 43% 19%, 82% 23%, 36% 27%, 61% 31%, 45% 35%,
    76% 40%, 29% 45%, 64% 50%, 41% 55%, 86% 61%, 35% 67%,
    62% 73%, 42% 80%, 78% 87%, 38% 94%, 55% 100%,
    68% 100%, 56% 94%, 91% 87%, 60% 80%, 78% 73%, 55% 67%,
    96% 61%, 62% 55%, 79% 50%, 49% 45%, 92% 40%, 61% 35%,
    79% 31%, 55% 27%, 98% 23%, 63% 19%, 76% 16%, 51% 13%,
    92% 10%, 61% 7%, 77% 4%, 56% 2%, 68% 0%
  ) !important;
  opacity: .86 !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(82,240,255,.88))
    drop-shadow(0 0 13px rgba(82,240,255,.34)) !important;
  animation:
    cssArcFlowY 0.86s linear infinite,
    hardSawArcFlicker .24s steps(2, end) infinite alternate,
    cssArcJitter .16s steps(2, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .ec-left::after {
  transform: scaleX(-1) !important;
}

@keyframes hardSawArcFlicker {
  0% { opacity: .34; filter: brightness(.8); }
  40% { opacity: .92; filter: brightness(1.7); }
  70% { opacity: .56; filter: brightness(1.05); }
  100% { opacity: .78; filter: brightness(1.28); }
}

.charging-panel::before {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.78))
    drop-shadow(0 0 13px rgba(82, 240, 255, 0.42))
    drop-shadow(0 0 24px rgba(45, 230, 190, 0.16)) !important;
}

.edge-trace,
.edge-spark,
.edge-zap {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 10px rgba(45, 230, 190, 0.22)) !important;
}

/* Electric arc SUCCESS rollback 202607042115:
   use the proven JS/SVG edge-zap implementation; disable later pseudo LED shells. */
.charging-panel {
  overflow: visible !important;
  border-color: rgba(91, 235, 249, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.22),
    0 0 14px rgba(82, 240, 255, 0.24),
    0 0 36px rgba(41, 223, 255, 0.12),
    inset 0 0 38px rgba(82, 240, 255, 0.1) !important;
}

.charging-panel::before,
.electric-current[data-electric-style="delicate"]::before,
.electric-current[data-electric-style="delicate"]::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.charging-panel .lightning-frame {
  z-index: 70 !important;
  inset: -1px !important;
  opacity: 0.24 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(73, 237, 255, 0.16), rgba(73, 237, 255, 0.02), rgba(51, 230, 195, 0.16)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(51, 230, 195, 0.16), rgba(73, 237, 255, 0.02), rgba(73, 237, 255, 0.16)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(73, 237, 255, 0.16), rgba(73, 237, 255, 0.02), rgba(51, 230, 195, 0.16)) left top / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(51, 230, 195, 0.16), rgba(73, 237, 255, 0.02), rgba(73, 237, 255, 0.16)) right top / 1px 100% no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(82, 240, 255, 0.38)) !important;
  animation: ecFramePulse 1.8s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] {
  z-index: 90 !important;
  inset: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  overflow: visible !important;
  opacity: 1 !important;
  display: block !important;
  contain: none !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  filter: drop-shadow(0 0 4px rgba(82, 240, 255, 0.5)) !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg,
.electric-current[data-electric-style="delicate"] .electric-svg-track,
.electric-current[data-electric-style="delicate"] .electric-svg-flow,
.electric-current[data-electric-style="delicate"] .electric-orb {
  display: none !important;
  opacity: 0 !important;
}

.electric-current[data-electric-style="delicate"] .ec-line,
.electric-current[data-electric-style="delicate"] .ec-runner {
  display: none !important;
}

.electric-current[data-electric-style="delicate"] .ec-orbit {
  display: block !important;
  opacity: 0.1 !important;
  inset: -3px !important;
  filter: drop-shadow(0 0 6px rgba(82, 240, 255, 0.28)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-inner {
  display: block !important;
  opacity: 0.32 !important;
}

.electric-current[data-electric-style="delicate"] .bolt,
.electric-current[data-electric-style="delicate"] .bolt-fork,
.electric-current[data-electric-style="delicate"] .bolt-spark {
  display: none !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  display: block !important;
  position: absolute !important;
  z-index: 95 !important;
  opacity: 1 !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
  filter:
    drop-shadow(0 0 1px rgba(238, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.62))
    drop-shadow(0 0 11px rgba(41, 223, 255, 0.2)) !important;
}

.edge-trace-field {
  transform-box: fill-box !important;
  transform-origin: center !important;
}

.edge-trace,
.edge-spark,
.edge-zap {
  visibility: visible !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.edge-trace {
  stroke: rgba(88, 238, 255, 0.92) !important;
  stroke-width: 0.86px !important;
  opacity: var(--trace-o, 0.7) !important;
  stroke-dasharray: 34 5 2 7 !important;
  animation:
    edgeTraceFlow 1.05s linear infinite,
    edgeTraceBreath 0.52s steps(3, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.62)) !important;
}

.edge-trace-0 {
  stroke: #5df3ff !important;
  stroke-width: 1.05px !important;
  stroke-dasharray: 48 4 3 6 12 5 !important;
}

.edge-trace-1 {
  stroke: rgba(114, 249, 255, 0.24) !important;
  stroke-width: 1.35px !important;
  stroke-dasharray: 86 9 18 7 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(164, 252, 255, 0.42) !important;
  stroke-width: 0.72px !important;
  stroke-dasharray: 12 10 4 15 !important;
}

.edge-spark {
  stroke: rgba(238, 255, 255, 0.94) !important;
  stroke-width: var(--spark-w, 1.45px) !important;
  opacity: var(--spark-o, 0.42) !important;
  stroke-dasharray: 18 38 6 30 !important;
  animation:
    edgeSparkBlink 0.28s steps(2, end) infinite alternate,
    edgeTraceFlow 0.9s linear infinite !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.74))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.58)) !important;
}

.edge-zap {
  stroke: rgba(238, 255, 255, 0.98) !important;
  stroke-width: var(--zap-w, 1px) !important;
  opacity: var(--zap-o, 0.28) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.72))
    drop-shadow(0 0 9px rgba(41, 223, 255, 0.28)) !important;
  animation: edgeZapSizzle 0.11s steps(2, end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser {
  z-index: 96 !important;
  display: block !important;
  width: var(--arc-len, 58px) !important;
  height: 10px !important;
  opacity: var(--arc-opacity, 0.18) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.74))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.62)) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::before {
  height: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(73, 231, 255, 0.16) 12%,
      rgba(110, 248, 255, 0.76) 35%,
      rgba(255, 255, 255, 0.9) 52%,
      rgba(82, 240, 255, 0.62) 72%,
      transparent 100%) !important;
  animation: delicateRunnerPulse 1.25s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-chaser::after {
  right: -2px !important;
  width: 5px !important;
  height: 5px !important;
  opacity: 0.55 !important;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 9px rgba(82, 240, 255, 0.72) !important;
  animation: delicateHeadPulse 0.9s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeMicroShake 0.22s steps(2, end) infinite !important;
}

/* Electric arc SUCCESS visual lock: full four-edge fine sizzling shell + no smooth inner orbit */
.charging-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: 126 !important;
  pointer-events: none !important;
  border-radius: 13px !important;
  opacity: 0.9 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 4%,
      rgba(236, 255, 255, 0.92) 16%,
      rgba(82, 240, 255, 0.6) 34%,
      rgba(45, 230, 190, 0.54) 52%,
      rgba(238, 255, 255, 0.88) 78%,
      rgba(82, 240, 255, 0.46) 94%,
      transparent 100%) top 8px left 12px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 5%,
      rgba(236, 255, 255, 0.86) 22%,
      rgba(45, 230, 190, 0.5) 48%,
      rgba(82, 240, 255, 0.58) 68%,
      rgba(238, 255, 255, 0.84) 86%,
      transparent 100%) bottom 8px left 12px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 4%,
      rgba(236, 255, 255, 0.92) 16%,
      rgba(82, 240, 255, 0.6) 34%,
      rgba(45, 230, 190, 0.54) 52%,
      rgba(238, 255, 255, 0.88) 78%,
      rgba(82, 240, 255, 0.46) 94%,
      transparent 100%) left 8px top 12px / 2px calc(100% - 24px) no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      rgba(82, 240, 255, 0.5) 5%,
      rgba(236, 255, 255, 0.86) 22%,
      rgba(45, 230, 190, 0.5) 48%,
      rgba(82, 240, 255, 0.58) 68%,
      rgba(238, 255, 255, 0.84) 86%,
      transparent 100%) right 8px top 12px / 2px calc(100% - 24px) no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.56) 11px 12px,
      rgba(82, 240, 255, 0.4) 13px 16px,
      transparent 17px 42px,
      rgba(45, 230, 190, 0.32) 43px 45px,
      transparent 46px 73px) top 5px left 10px / calc(100% - 20px) 6px no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 16px,
      rgba(45, 230, 190, 0.28) 17px 19px,
      rgba(255, 255, 255, 0.52) 20px 21px,
      rgba(82, 240, 255, 0.36) 22px 25px,
      transparent 26px 68px) bottom 5px left 10px / calc(100% - 20px) 6px no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.56) 11px 12px,
      rgba(82, 240, 255, 0.4) 13px 16px,
      transparent 17px 42px,
      rgba(45, 230, 190, 0.32) 43px 45px,
      transparent 46px 73px) left 5px top 10px / 6px calc(100% - 20px) no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 16px,
      rgba(45, 230, 190, 0.28) 17px 19px,
      rgba(255, 255, 255, 0.52) 20px 21px,
      rgba(82, 240, 255, 0.36) 22px 25px,
      transparent 26px 68px) right 5px top 10px / 6px calc(100% - 20px) no-repeat !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.78))
    drop-shadow(0 0 13px rgba(82, 240, 255, 0.42))
    drop-shadow(0 0 24px rgba(45, 230, 190, 0.16)) !important;
  animation:
    restoredFineArcFlow 0.7s linear infinite,
    restoredFineArcFlicker 0.12s steps(2, end) infinite alternate,
    restoredArcJitter 0.22s steps(3, end) infinite !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg,
.electric-current[data-electric-style="delicate"] .electric-svg-track,
.electric-current[data-electric-style="delicate"] .electric-svg-flow,
.electric-current[data-electric-style="delicate"] .electric-orb {
  display: none !important;
  opacity: 0 !important;
}

/* Electric arc v34 ABSOLUTE LAST OVERRIDE: runners must be visible */
.electric-current[data-electric-style="delicate"] .ec-runner {
  display: block !important;
  position: absolute !important;
  z-index: 260 !important;
  width: 170px !important;
  height: 36px !important;
  opacity: .86 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82,240,255,.2) 8%,
      rgba(82,240,255,.96) 18%,
      rgba(255,255,255,1) 30%,
      rgba(45,230,190,.9) 43%,
      rgba(255,255,255,.98) 58%,
      rgba(82,240,255,.86) 74%,
      transparent 100%) !important;
  clip-path: polygon(
    0% 50%, 7% 30%, 13% 63%, 20% 22%, 28% 70%, 36% 38%,
    44% 82%, 52% 20%, 60% 64%, 70% 32%, 82% 76%, 92% 40%,
    100% 52%, 92% 64%, 82% 48%, 70% 92%, 60% 55%, 52% 76%,
    44% 44%, 36% 86%, 28% 52%, 20% 80%, 13% 43%, 7% 68%
  ) !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.98))
    drop-shadow(0 0 8px rgba(82,240,255,.95))
    drop-shadow(0 0 18px rgba(45,230,190,.34)) !important;
  transform-origin: 50% 50% !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-a {
  top: -18px !important;
  left: 10% !important;
  animation: finalRunnerTop 2.2s linear infinite, finalRunnerFlicker .18s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-b {
  top: 18% !important;
  right: -84px !important;
  transform: rotate(90deg) !important;
  animation: finalRunnerRight 2.35s linear infinite, finalRunnerFlicker .2s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-c {
  bottom: -18px !important;
  right: 10% !important;
  transform: rotate(180deg) !important;
  animation: finalRunnerBottom 2.3s linear infinite, finalRunnerFlicker .19s steps(2,end) infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-d {
  bottom: 18% !important;
  left: -84px !important;
  transform: rotate(-90deg) !important;
  animation: finalRunnerLeft 2.45s linear infinite, finalRunnerFlicker .21s steps(2,end) infinite alternate !important;
}

@keyframes finalRunnerTop {
  0% { left: 3%; opacity: .18; }
  8% { opacity: .9; }
  58% { left: 78%; opacity: .74; }
  68%, 100% { left: 78%; opacity: 0; }
}

@keyframes finalRunnerRight {
  0% { top: 4%; opacity: .16; }
  8% { opacity: .86; }
  58% { top: 76%; opacity: .7; }
  68%, 100% { top: 76%; opacity: 0; }
}

@keyframes finalRunnerBottom {
  0% { right: 3%; opacity: .18; }
  8% { opacity: .9; }
  58% { right: 78%; opacity: .74; }
  68%, 100% { right: 78%; opacity: 0; }
}

@keyframes finalRunnerLeft {
  0% { bottom: 4%; opacity: .16; }
  8% { opacity: .86; }
  58% { bottom: 76%; opacity: .7; }
  68%, 100% { bottom: 76%; opacity: 0; }
}

@keyframes finalRunnerFlicker {
  0% { opacity: .24; filter: brightness(.78) drop-shadow(0 0 4px rgba(82,240,255,.45)); }
  42% { opacity: .96; filter: brightness(1.9) drop-shadow(0 0 11px rgba(82,240,255,.95)); }
  100% { opacity: .66; filter: brightness(1.22) drop-shadow(0 0 7px rgba(82,240,255,.68)); }
}

/* Electric arc v35 FINAL TUNING: thin jagged runners, not chunky diamonds */
.electric-current[data-electric-style="delicate"] .ec-runner {
  width: 150px !important;
  height: 14px !important;
  opacity: .72 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(82,240,255,.14) 8%,
      rgba(82,240,255,.9) 20%,
      rgba(255,255,255,.98) 32%,
      rgba(45,230,190,.78) 46%,
      rgba(255,255,255,.92) 60%,
      rgba(82,240,255,.76) 76%,
      transparent 100%) !important;
  clip-path: polygon(
    0% 50%, 8% 38%, 15% 58%, 22% 34%, 30% 62%, 38% 42%,
    47% 68%, 56% 32%, 65% 60%, 75% 40%, 86% 66%, 94% 43%,
    100% 52%, 94% 58%, 86% 49%, 75% 74%, 65% 54%, 56% 66%,
    47% 47%, 38% 70%, 30% 51%, 22% 67%, 15% 46%, 8% 60%
  ) !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 5px rgba(82,240,255,.82))
    drop-shadow(0 0 11px rgba(45,230,190,.22)) !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-a {
  top: -7px !important;
  left: 8% !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-b {
  right: -75px !important;
  top: 12% !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-c {
  bottom: -7px !important;
  right: 8% !important;
}

.electric-current[data-electric-style="delicate"] .ec-runner-d {
  left: -75px !important;
  bottom: 12% !important;
}

/* Electric arc v36 — real SVG edge current, no smooth neon tube / no diamond runners.
   The visible electricity now comes from JS-generated polylines that hug the task-card edge. */
.charging-panel {
  border-color: rgba(88, 238, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.16),
    0 0 18px rgba(82, 240, 255, 0.18),
    0 0 52px rgba(36, 214, 255, 0.09),
    inset 0 0 34px rgba(82, 240, 255, 0.08) !important;
}

.charging-panel::before,
.charging-panel .lightning-frame,
.electric-current[data-electric-style="delicate"] .ec-orbit,
.electric-current[data-electric-style="delicate"] .ec-inner,
.electric-current[data-electric-style="delicate"] .ec-line,
.electric-current[data-electric-style="delicate"] .ec-runner,
.electric-current[data-electric-style="delicate"] .lightning-chaser {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

.charging-panel > :not(.lightning-frame):not(.electric-current) {
  position: relative !important;
  z-index: 160 !important;
}

.electric-current[data-electric-style="delicate"] {
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 145 !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  border-radius: inherit !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  contain: none !important;
  mix-blend-mode: screen !important;
  filter: none !important;
}

.electric-current[data-electric-style="delicate"] .electric-svg,
.electric-current[data-electric-style="delicate"] .electric-svg-track,
.electric-current[data-electric-style="delicate"] .electric-svg-flow,
.electric-current[data-electric-style="delicate"] .electric-orb,
.electric-current[data-electric-style="delicate"] .bolt,
.electric-current[data-electric-style="delicate"] .bolt-fork,
.electric-current[data-electric-style="delicate"] .bolt-spark {
  display: none !important;
  opacity: 0 !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
  opacity: 1 !important;
  z-index: 146 !important;
  transform: translateZ(0) !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.76))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.56))
    drop-shadow(0 0 10px rgba(45, 230, 190, 0.18)) !important;
}

.edge-trace-field {
  display: block !important;
  overflow: visible !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

.edge-trace,
.edge-spark,
.edge-zap,
.edge-arc,
.edge-fork {
  display: block !important;
  visibility: visible !important;
  fill: none !important;
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  shape-rendering: geometricPrecision !important;
}

.edge-trace {
  stroke: rgba(86, 239, 255, 0.82) !important;
  stroke-width: 0.9px !important;
  opacity: var(--trace-o, 0.42) !important;
  stroke-dasharray: 6 5 1 4 10 7 2 5 !important;
  stroke-dashoffset: 0;
  animation:
    edgeArcCrawlV36 0.95s linear infinite,
    edgeArcBlinkV36 0.36s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.58)) !important;
}

.edge-trace-0 {
  stroke: rgba(234, 255, 255, 0.96) !important;
  stroke-width: 1.12px !important;
  opacity: var(--trace-o, 0.56) !important;
  stroke-dasharray: 9 4 2 5 17 6 1 4 !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.4) !important;
  stroke-width: 1.4px !important;
  stroke-dasharray: 18 10 3 7 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.32) !important;
  stroke-width: 0.8px !important;
  stroke-dasharray: 4 7 1 8 12 11 !important;
}

.edge-spark {
  stroke: rgba(242, 255, 255, 0.95) !important;
  stroke-width: var(--spark-w, 1px) !important;
  opacity: var(--spark-o, 0.42) !important;
  stroke-dasharray: 11 18 3 13 !important;
  animation:
    edgeArcCrawlV36 0.62s linear infinite,
    edgeArcSparkV36 0.18s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.66)) !important;
}

.edge-zap {
  stroke: rgba(250, 255, 255, 0.98) !important;
  stroke-width: var(--zap-w, 1.06px) !important;
  opacity: var(--zap-o, 0.34) !important;
  stroke-dasharray: 8 7 3 9 !important;
  animation: edgeArcZapV36 0.15s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.74))
    drop-shadow(0 0 9px rgba(82, 240, 255, 0.24)) !important;
}

.edge-arc {
  stroke: rgba(238, 255, 255, 0.98) !important;
  stroke-width: var(--arc-w, 1.24px) !important;
  opacity: var(--arc-o, 0.68) !important;
  stroke-dasharray: 14 3 3 5 8 4 !important;
  animation:
    edgeArcCrawlV36 0.52s linear infinite,
    edgeArcFlashV36 0.28s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.76))
    drop-shadow(0 0 10px rgba(45, 230, 190, 0.18)) !important;
}

.edge-fork {
  stroke: rgba(255, 255, 255, 0.96) !important;
  stroke-width: var(--fork-w, 0.96px) !important;
  opacity: var(--fork-o, 0.24) !important;
  stroke-dasharray: 9 5 !important;
  animation: edgeArcForkV36 0.2s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.62)) !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeArcMicroShakeV36 0.2s steps(2, end) infinite !important;
}

@keyframes edgeArcCrawlV36 {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -42; }
}

@keyframes edgeArcBlinkV36 {
  0% { opacity: calc(var(--trace-o, 0.42) * 0.62); }
  45% { opacity: var(--trace-o, 0.42); }
  100% { opacity: calc(var(--trace-o, 0.42) * 0.76); }
}

@keyframes edgeArcSparkV36 {
  0% { opacity: 0.05; }
  52% { opacity: var(--spark-o, 0.42); }
  100% { opacity: 0.16; }
}

@keyframes edgeArcZapV36 {
  0% { opacity: 0.04; }
  44% { opacity: var(--zap-o, 0.34); }
  100% { opacity: 0.12; }
}

@keyframes edgeArcFlashV36 {
  0% { opacity: calc(var(--arc-o, 0.68) * 0.42); }
  38% { opacity: var(--arc-o, 0.68); }
  100% { opacity: calc(var(--arc-o, 0.68) * 0.66); }
}

@keyframes edgeArcForkV36 {
  0% { opacity: 0.02; }
  50% { opacity: var(--fork-o, 0.24); }
  100% { opacity: 0.08; }
}

@keyframes edgeArcMicroShakeV36 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.2px, 0.1px, 0); }
  50% { transform: translate3d(0.16px, -0.18px, 0); }
  75% { transform: translate3d(-0.1px, -0.08px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .edge-trace,
  .edge-spark,
  .edge-zap,
  .edge-arc,
  .edge-fork,
  .electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
    animation: none !important;
  }
}


/* Electric arc v37: calmer photo-2 style, realistic low-frequency edge current */
.charging-panel {
  border-color: rgba(92, 232, 242, 0.24) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.10),
    0 0 13px rgba(82, 240, 255, 0.16),
    0 0 34px rgba(33, 213, 235, 0.075),
    inset 0 0 30px rgba(82, 240, 255, 0.055) !important;
}

.electric-current[data-electric-style="delicate"] {
  inset: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  opacity: 0.86 !important;
  mix-blend-mode: screen !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 0.88 !important;
  filter:
    drop-shadow(0 0 1px rgba(235, 255, 255, 0.5))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.36))
    drop-shadow(0 0 8px rgba(45, 230, 190, 0.12)) !important;
}

.edge-trace,
.edge-spark,
.edge-zap,
.edge-arc,
.edge-fork {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  shape-rendering: auto !important;
}

.edge-trace {
  stroke: rgba(92, 235, 244, 0.58) !important;
  stroke-width: 0.72px !important;
  opacity: var(--trace-o, 0.34) !important;
  stroke-dasharray: 22 12 3 10 42 16 !important;
  animation:
    edgeArcCrawlV37 2.2s linear infinite,
    edgeArcBreathV37 1.4s ease-in-out infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.42))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.38)) !important;
}

.edge-trace-0 {
  stroke: rgba(226, 255, 255, 0.68) !important;
  stroke-width: 0.95px !important;
  opacity: var(--trace-o, 0.42) !important;
  stroke-dasharray: 34 10 4 16 70 22 !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.24) !important;
  stroke-width: 1.18px !important;
  stroke-dasharray: 80 18 22 24 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.18) !important;
  stroke-width: 0.62px !important;
  stroke-dasharray: 18 18 5 20 !important;
}

.edge-spark {
  stroke: rgba(232, 255, 255, 0.72) !important;
  stroke-width: var(--spark-w, 0.76px) !important;
  opacity: var(--spark-o, 0.2) !important;
  stroke-dasharray: 12 34 4 26 !important;
  animation:
    edgeArcCrawlV37 1.55s linear infinite,
    edgeArcSoftBlinkV37 0.62s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.42)) !important;
}

.edge-zap {
  stroke: rgba(245, 255, 255, 0.82) !important;
  stroke-width: var(--zap-w, 0.76px) !important;
  opacity: var(--zap-o, 0.16) !important;
  stroke-dasharray: 7 18 2 14 !important;
  animation: edgeArcSoftZapV37 0.44s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.58))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.46)) !important;
}

.edge-arc {
  stroke: rgba(234, 255, 255, 0.76) !important;
  stroke-width: var(--arc-w, 0.9px) !important;
  opacity: var(--arc-o, 0.32) !important;
  stroke-dasharray: 18 9 3 12 20 16 !important;
  animation:
    edgeArcCrawlV37 1.75s linear infinite,
    edgeArcSoftFlashV37 0.9s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.54))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.5))
    drop-shadow(0 0 8px rgba(45, 230, 190, 0.08)) !important;
}

.edge-fork {
  stroke: rgba(255, 255, 255, 0.62) !important;
  stroke-width: var(--fork-w, 0.7px) !important;
  opacity: var(--fork-o, 0.08) !important;
  stroke-dasharray: 8 18 !important;
  animation: edgeArcSoftForkV37 0.72s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.44))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.34)) !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeArcMicroShakeV37 0.72s steps(2, end) infinite !important;
}

@keyframes edgeArcCrawlV37 {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}

@keyframes edgeArcBreathV37 {
  0% { opacity: calc(var(--trace-o, 0.34) * 0.7); }
  100% { opacity: var(--trace-o, 0.34); }
}

@keyframes edgeArcSoftBlinkV37 {
  0% { opacity: calc(var(--spark-o, 0.2) * 0.42); }
  100% { opacity: var(--spark-o, 0.2); }
}

@keyframes edgeArcSoftZapV37 {
  0% { opacity: 0.025; }
  48% { opacity: var(--zap-o, 0.16); }
  100% { opacity: 0.055; }
}

@keyframes edgeArcSoftFlashV37 {
  0% { opacity: calc(var(--arc-o, 0.32) * 0.48); }
  100% { opacity: var(--arc-o, 0.32); }
}

@keyframes edgeArcSoftForkV37 {
  0% { opacity: 0.01; }
  100% { opacity: var(--fork-o, 0.08); }
}

@keyframes edgeArcMicroShakeV37 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-0.04px, 0.035px, 0); }
}


/* Electric arc v38: photo-2 continuous waterline shell + restrained SVG sparks */
.charging-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: 143 !important;
  pointer-events: none !important;
  border-radius: 13px !important;
  opacity: 0.78 !important;
  background:
    linear-gradient(90deg,
      transparent 0%, rgba(94, 237, 246, 0.35) 8%, rgba(224, 255, 255, 0.72) 16%,
      rgba(82, 240, 255, 0.46) 33%, rgba(120, 255, 248, 0.22) 54%,
      rgba(236, 255, 255, 0.58) 74%, rgba(82, 240, 255, 0.32) 92%, transparent 100%)
      top 5px left 10px / calc(100% - 20px) 1.5px no-repeat,
    linear-gradient(90deg,
      transparent 0%, rgba(82, 240, 255, 0.28) 7%, rgba(236, 255, 255, 0.56) 22%,
      rgba(45, 230, 190, 0.26) 46%, rgba(82, 240, 255, 0.42) 70%,
      rgba(232, 255, 255, 0.64) 88%, transparent 100%)
      bottom 5px left 10px / calc(100% - 20px) 1.5px no-repeat,
    linear-gradient(180deg,
      transparent 0%, rgba(94, 237, 246, 0.32) 8%, rgba(224, 255, 255, 0.68) 18%,
      rgba(82, 240, 255, 0.42) 36%, rgba(120, 255, 248, 0.22) 58%,
      rgba(236, 255, 255, 0.56) 76%, rgba(82, 240, 255, 0.28) 92%, transparent 100%)
      left 5px top 10px / 1.5px calc(100% - 20px) no-repeat,
    linear-gradient(180deg,
      transparent 0%, rgba(82, 240, 255, 0.28) 6%, rgba(236, 255, 255, 0.58) 22%,
      rgba(45, 230, 190, 0.26) 46%, rgba(82, 240, 255, 0.42) 70%,
      rgba(232, 255, 255, 0.62) 88%, transparent 100%)
      right 5px top 10px / 1.5px calc(100% - 20px) no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 18px, rgba(235, 255, 255, 0.23) 19px 20px,
      rgba(82, 240, 255, 0.22) 21px 25px, transparent 26px 76px)
      top 1px left 7px / calc(100% - 14px) 7px no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 24px, rgba(82, 240, 255, 0.18) 25px 29px,
      rgba(235, 255, 255, 0.22) 30px 31px, transparent 32px 82px)
      bottom 1px left 7px / calc(100% - 14px) 7px no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 18px, rgba(235, 255, 255, 0.22) 19px 20px,
      rgba(82, 240, 255, 0.2) 21px 25px, transparent 26px 74px)
      left 1px top 7px / 7px calc(100% - 14px) no-repeat,
    repeating-linear-gradient(180deg,
      transparent 0 24px, rgba(82, 240, 255, 0.17) 25px 29px,
      rgba(235, 255, 255, 0.23) 30px 31px, transparent 32px 82px)
      right 1px top 7px / 7px calc(100% - 14px) no-repeat !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.6))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.46))
    drop-shadow(0 0 13px rgba(82, 240, 255, 0.18)) !important;
  animation:
    edgeShellFlowV38 3.2s linear infinite,
    edgeShellBreathV38 2.4s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 0.72 !important;
  filter:
    drop-shadow(0 0 1px rgba(235, 255, 255, 0.42))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.3)) !important;
}

.edge-trace {
  stroke: rgba(96, 238, 247, 0.7) !important;
  stroke-width: 0.82px !important;
  opacity: var(--trace-o, 0.46) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.46))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.42)) !important;
}

.edge-trace-0 {
  stroke: rgba(232, 255, 255, 0.82) !important;
  stroke-width: 1px !important;
  opacity: var(--trace-o, 0.56) !important;
}

.edge-spark { opacity: calc(var(--spark-o, 0.2) * 0.78) !important; }
.edge-zap { opacity: calc(var(--zap-o, 0.16) * 0.72) !important; }
.edge-arc { opacity: calc(var(--arc-o, 0.32) * 0.82) !important; }
.edge-fork { opacity: calc(var(--fork-o, 0.08) * 0.55) !important; }

@keyframes edgeShellFlowV38 {
  from { background-position:
    top 5px left 10px, bottom 5px left 10px, left 5px top 10px, right 5px top 10px,
    top 1px left 7px, bottom 1px left 7px, left 1px top 7px, right 1px top 7px; }
  to { background-position:
    top 5px left 46px, bottom 5px left -28px, left 5px top 42px, right 5px top -24px,
    top 1px left 39px, bottom 1px left -31px, left 1px top 39px, right 1px top -31px; }
}

@keyframes edgeShellBreathV38 {
  0% { opacity: 0.62; filter: drop-shadow(0 0 1px rgba(245,255,255,0.42)) drop-shadow(0 0 4px rgba(82,240,255,0.34)) drop-shadow(0 0 10px rgba(82,240,255,0.12)); }
  100% { opacity: 0.82; filter: drop-shadow(0 0 1px rgba(245,255,255,0.62)) drop-shadow(0 0 6px rgba(82,240,255,0.48)) drop-shadow(0 0 14px rgba(82,240,255,0.18)); }
}


/* Electric arc v39: remove dotted blocks; continuous soft wavy border like reference 2 */
.charging-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -4px !important;
  z-index: 143 !important;
  pointer-events: none !important;
  border-radius: 13px !important;
  opacity: 0.64 !important;
  background:
    linear-gradient(90deg,
      rgba(82, 240, 255, 0.16) 0%, rgba(226, 255, 255, 0.52) 14%,
      rgba(82, 240, 255, 0.28) 34%, rgba(45, 230, 190, 0.18) 55%,
      rgba(226, 255, 255, 0.42) 76%, rgba(82, 240, 255, 0.16) 100%)
      top 4px left 8px / calc(100% - 16px) 2px no-repeat,
    linear-gradient(90deg,
      rgba(82, 240, 255, 0.14) 0%, rgba(226, 255, 255, 0.42) 18%,
      rgba(45, 230, 190, 0.2) 46%, rgba(82, 240, 255, 0.28) 70%,
      rgba(226, 255, 255, 0.48) 88%, rgba(82, 240, 255, 0.14) 100%)
      bottom 4px left 8px / calc(100% - 16px) 2px no-repeat,
    linear-gradient(180deg,
      rgba(82, 240, 255, 0.16) 0%, rgba(226, 255, 255, 0.48) 16%,
      rgba(82, 240, 255, 0.26) 36%, rgba(45, 230, 190, 0.18) 58%,
      rgba(226, 255, 255, 0.42) 78%, rgba(82, 240, 255, 0.16) 100%)
      left 4px top 8px / 2px calc(100% - 16px) no-repeat,
    linear-gradient(180deg,
      rgba(82, 240, 255, 0.14) 0%, rgba(226, 255, 255, 0.44) 20%,
      rgba(45, 230, 190, 0.2) 46%, rgba(82, 240, 255, 0.28) 70%,
      rgba(226, 255, 255, 0.48) 88%, rgba(82, 240, 255, 0.14) 100%)
      right 4px top 8px / 2px calc(100% - 16px) no-repeat !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.48))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.42))
    drop-shadow(0 0 12px rgba(82, 240, 255, 0.12)) !important;
  animation: edgeShellBreathV39 2.8s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 0.95 !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.58))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.4))
    drop-shadow(0 0 8px rgba(82, 240, 255, 0.12)) !important;
}

.edge-trace {
  stroke: rgba(92, 238, 248, 0.74) !important;
  stroke-width: 0.9px !important;
  opacity: var(--trace-o, 0.52) !important;
  stroke-dasharray: none !important;
  animation: edgeArcBreathV39 1.8s ease-in-out infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.46)) !important;
}

.edge-trace-0 {
  stroke: rgba(232, 255, 255, 0.9) !important;
  stroke-width: 1.05px !important;
  opacity: var(--trace-o, 0.62) !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.2) !important;
  stroke-width: 2px !important;
  opacity: 0.18 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.16) !important;
  stroke-width: 0.68px !important;
  opacity: 0.18 !important;
}

.edge-spark {
  stroke-dasharray: none !important;
  opacity: calc(var(--spark-o, 0.2) * 0.7) !important;
  animation: edgeArcSoftBlinkV37 0.82s steps(2, end) infinite alternate !important;
}

.edge-zap {
  stroke-dasharray: none !important;
  opacity: calc(var(--zap-o, 0.16) * 0.64) !important;
  animation: edgeArcSoftZapV37 0.62s steps(2, end) infinite alternate !important;
}

.edge-arc {
  stroke-dasharray: none !important;
  opacity: calc(var(--arc-o, 0.32) * 0.74) !important;
  animation: edgeArcSoftFlashV37 1.1s steps(2, end) infinite alternate !important;
}

.edge-fork {
  stroke-dasharray: none !important;
  opacity: calc(var(--fork-o, 0.08) * 0.42) !important;
}

@keyframes edgeShellBreathV39 {
  0% { opacity: 0.52; filter: drop-shadow(0 0 1px rgba(245,255,255,0.36)) drop-shadow(0 0 4px rgba(82,240,255,0.32)) drop-shadow(0 0 10px rgba(82,240,255,0.1)); }
  100% { opacity: 0.7; filter: drop-shadow(0 0 1px rgba(245,255,255,0.54)) drop-shadow(0 0 6px rgba(82,240,255,0.44)) drop-shadow(0 0 13px rgba(82,240,255,0.14)); }
}

@keyframes edgeArcBreathV39 {
  0% { opacity: calc(var(--trace-o, 0.52) * 0.76); }
  100% { opacity: var(--trace-o, 0.52); }
}


/* Electric arc v40: brighter wavy SVG edge, straight base line pushed back */
.charging-panel::before {
  opacity: 0.42 !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.3))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.28))
    drop-shadow(0 0 10px rgba(82, 240, 255, 0.08)) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.78))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.54))
    drop-shadow(0 0 12px rgba(82, 240, 255, 0.16)) !important;
}

.edge-trace {
  stroke: rgba(96, 242, 250, 0.86) !important;
  stroke-width: 1.02px !important;
  opacity: var(--trace-o, 0.62) !important;
  stroke-dasharray: none !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.68))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.58)) !important;
}

.edge-trace-0 {
  stroke: rgba(238, 255, 255, 0.96) !important;
  stroke-width: 1.22px !important;
  opacity: var(--trace-o, 0.72) !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.32) !important;
  stroke-width: 2.4px !important;
  opacity: 0.24 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.22) !important;
  stroke-width: 0.82px !important;
  opacity: 0.22 !important;
}

.edge-arc {
  stroke: rgba(236, 255, 255, 0.86) !important;
  opacity: calc(var(--arc-o, 0.32) * 0.92) !important;
}

.edge-zap {
  opacity: calc(var(--zap-o, 0.16) * 0.78) !important;
}


/* Electric arc v43: reference-2 plasma membrane, stronger but still low-jank */
.charging-panel {
  --edge-core: rgba(238, 255, 255, 0.96);
  --edge-cyan: rgba(96, 242, 250, 0.86);
  --edge-mint: rgba(45, 230, 190, 0.36);
  border-color: rgba(102, 241, 250, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.18),
    0 0 18px rgba(82, 240, 255, 0.24),
    0 0 46px rgba(33, 213, 235, 0.13),
    inset 0 0 42px rgba(82, 240, 255, 0.075) !important;
}

.charging-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: 143 !important;
  pointer-events: none !important;
  border-radius: 15px !important;
  padding: 2px !important;
  opacity: 0.9 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(238,255,255,0.95), rgba(96,242,250,0.5) 18%, transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(238,255,255,0.8), rgba(96,242,250,0.42) 18%, transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(238,255,255,0.72), rgba(96,242,250,0.38) 18%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(238,255,255,0.8), rgba(96,242,250,0.42) 18%, transparent 34%),
    linear-gradient(90deg,
      rgba(96,242,250,0.48), rgba(238,255,255,0.9) 16%, rgba(96,242,250,0.58) 34%,
      rgba(45,230,190,0.3) 52%, rgba(238,255,255,0.78) 74%, rgba(96,242,250,0.5)),
    linear-gradient(180deg,
      rgba(96,242,250,0.42), rgba(238,255,255,0.82) 20%, rgba(96,242,250,0.54) 40%,
      rgba(45,230,190,0.28) 62%, rgba(238,255,255,0.72) 84%, rgba(96,242,250,0.42));
  background-size:
    72px 72px,
    72px 72px,
    72px 72px,
    72px 72px,
    180% 100%,
    100% 180% !important;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right,
    0 0,
    0 0 !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.84))
    drop-shadow(0 0 7px rgba(82, 240, 255, 0.6))
    drop-shadow(0 0 18px rgba(82, 240, 255, 0.22)) !important;
  animation:
    edgeMembraneDriftV43 5.8s linear infinite,
    edgeMembranePulseV43 2.4s ease-in-out infinite alternate !important;
}

.charging-panel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -22px !important;
  z-index: 142 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  opacity: 0.52 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(82, 240, 255, 0.18), transparent 58%),
    radial-gradient(ellipse at 0% 50%, rgba(82, 240, 255, 0.17), transparent 56%),
    radial-gradient(ellipse at 100% 50%, rgba(82, 240, 255, 0.17), transparent 56%),
    radial-gradient(ellipse at 50% 100%, rgba(45, 230, 190, 0.14), transparent 58%) !important;
  filter: blur(2px) saturate(1.12) !important;
  mix-blend-mode: screen !important;
  animation: edgeAuraBreathV43 3.2s ease-in-out infinite alternate !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.92))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.68))
    drop-shadow(0 0 15px rgba(82, 240, 255, 0.24)) !important;
}

.edge-trace {
  stroke: rgba(100, 244, 252, 0.95) !important;
  stroke-width: 1.22px !important;
  opacity: var(--trace-o, 0.72) !important;
  stroke-dasharray: none !important;
  animation: edgeArcBreathV43 1.7s ease-in-out infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 6px rgba(82, 240, 255, 0.64)) !important;
}

.edge-trace-0 {
  stroke: rgba(246, 255, 255, 0.98) !important;
  stroke-width: 1.46px !important;
  opacity: var(--trace-o, 0.84) !important;
}

.edge-trace-1 {
  stroke: rgba(82, 240, 255, 0.44) !important;
  stroke-width: 2.9px !important;
  opacity: 0.3 !important;
}

.edge-trace-2,
.edge-trace-3 {
  stroke: rgba(45, 230, 190, 0.28) !important;
  stroke-width: 0.92px !important;
  opacity: 0.26 !important;
}

.edge-spark {
  stroke: rgba(240, 255, 255, 0.86) !important;
  opacity: calc(var(--spark-o, 0.2) * 0.9) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.62))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.52)) !important;
}

.edge-zap {
  stroke: rgba(250, 255, 255, 0.92) !important;
  opacity: calc(var(--zap-o, 0.16) * 0.92) !important;
  animation: edgeArcSoftZapV43 0.54s steps(2, end) infinite alternate !important;
}

.edge-arc {
  stroke: rgba(240, 255, 255, 0.94) !important;
  opacity: calc(var(--arc-o, 0.32) * 1.02) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.6)) !important;
}

.edge-fork {
  opacity: calc(var(--fork-o, 0.08) * 0.55) !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeArcMicroShakeV43 0.92s steps(2, end) infinite !important;
}

@keyframes edgeMembraneDriftV43 {
  0% { background-position: top left, top right, bottom left, bottom right, 0 0, 0 0; }
  100% { background-position: top left, top right, bottom left, bottom right, 42% 0, 0 36%; }
}

@keyframes edgeMembranePulseV43 {
  0% { opacity: 0.74; filter: drop-shadow(0 0 1px rgba(245,255,255,0.66)) drop-shadow(0 0 5px rgba(82,240,255,0.46)) drop-shadow(0 0 14px rgba(82,240,255,0.16)); }
  100% { opacity: 0.94; filter: drop-shadow(0 0 1px rgba(245,255,255,0.9)) drop-shadow(0 0 8px rgba(82,240,255,0.64)) drop-shadow(0 0 20px rgba(82,240,255,0.24)); }
}

@keyframes edgeAuraBreathV43 {
  0% { opacity: 0.38; transform: scale(0.996); }
  100% { opacity: 0.58; transform: scale(1.004); }
}

@keyframes edgeArcBreathV43 {
  0% { opacity: calc(var(--trace-o, 0.72) * 0.82); }
  100% { opacity: var(--trace-o, 0.72); }
}

@keyframes edgeArcSoftZapV43 {
  0% { opacity: 0.04; }
  50% { opacity: calc(var(--zap-o, 0.16) * 0.92); }
  100% { opacity: 0.08; }
}

@keyframes edgeArcMicroShakeV43 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-0.055px, 0.045px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .charging-panel::before,
  .charging-panel::after,
  .electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg,
  .edge-trace,
  .edge-zap {
    animation: none !important;
  }
}


/* Electric arc v44: irregular realistic edge skin, no global breathing aura */
.charging-panel {
  --edge-core: rgba(235, 255, 255, 0.94);
  --edge-cyan: rgba(83, 225, 245, 0.82);
  --edge-mint: rgba(45, 230, 190, 0.24);
  border-color: rgba(88, 230, 245, 0.24) !important;
  box-shadow:
    0 0 0 1px rgba(82, 240, 255, 0.12),
    0 0 14px rgba(82, 240, 255, 0.17),
    0 0 34px rgba(33, 213, 235, 0.085),
    inset 0 0 36px rgba(82, 240, 255, 0.055) !important;
}

.charging-panel::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  filter: none !important;
}

.charging-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: 143 !important;
  pointer-events: none !important;
  border-radius: 15px !important;
  padding: 2px !important;
  opacity: 0.32 !important;
  background:
    radial-gradient(circle at 1% 3%, rgba(235,255,255,0.7), rgba(83,225,245,0.32) 15%, transparent 31%),
    radial-gradient(circle at 98% 3%, rgba(235,255,255,0.52), rgba(83,225,245,0.28) 14%, transparent 31%),
    radial-gradient(circle at 2% 97%, rgba(235,255,255,0.46), rgba(83,225,245,0.24) 14%, transparent 31%),
    radial-gradient(circle at 98% 97%, rgba(235,255,255,0.52), rgba(83,225,245,0.28) 14%, transparent 31%),
    linear-gradient(90deg, rgba(83,225,245,0.2), rgba(235,255,255,0.42) 16%, rgba(83,225,245,0.24) 42%, rgba(45,230,190,0.12) 68%, rgba(235,255,255,0.32)),
    linear-gradient(180deg, rgba(83,225,245,0.18), rgba(235,255,255,0.36) 22%, rgba(83,225,245,0.22) 46%, rgba(45,230,190,0.12) 74%, rgba(235,255,255,0.3)) !important;
  background-size: 84px 84px, 76px 76px, 78px 78px, 82px 82px, 100% 100%, 100% 100% !important;
  background-position: top left, top right, bottom left, bottom right, 0 0, 0 0 !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
  filter:
    drop-shadow(0 0 1px rgba(235, 255, 255, 0.44))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.34)) !important;
  animation: none !important;
}

.electric-current[data-electric-style="delicate"] {
  opacity: 0.98 !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 1px rgba(240, 255, 255, 0.8))
    drop-shadow(0 0 5px rgba(82, 240, 255, 0.54))
    drop-shadow(0 0 10px rgba(82, 240, 255, 0.15)) !important;
}

.edge-trace {
  stroke: rgba(83, 231, 246, 0.92) !important;
  stroke-width: 1.18px !important;
  opacity: var(--trace-o, 0.72) !important;
  stroke-dasharray: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  animation: none !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.62))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.5)) !important;
}

.edge-trace-0 {
  stroke: rgba(238, 255, 255, 0.96) !important;
  stroke-width: 1.42px !important;
  opacity: var(--trace-o, 0.84) !important;
}

.edge-trace-1 {
  stroke: rgba(69, 225, 245, 0.34) !important;
  stroke-width: 3.15px !important;
  opacity: 0.27 !important;
  filter: drop-shadow(0 0 7px rgba(82, 240, 255, 0.4)) !important;
}

.edge-trace-2 {
  stroke: rgba(45, 230, 190, 0.24) !important;
  stroke-width: 0.92px !important;
  opacity: 0.22 !important;
}

.edge-trace-3 {
  stroke: rgba(180, 255, 255, 0.2) !important;
  stroke-width: 0.62px !important;
  opacity: 0.18 !important;
}

.edge-spark {
  stroke: rgba(230, 255, 255, 0.78) !important;
  stroke-width: var(--spark-w, 0.8px) !important;
  opacity: calc(var(--spark-o, 0.2) * 0.82) !important;
  animation: edgeSparkSnapV44 0.48s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 3px rgba(82, 240, 255, 0.44)) !important;
}

.edge-zap {
  stroke: rgba(248, 255, 255, 0.88) !important;
  stroke-width: var(--zap-w, 0.82px) !important;
  opacity: calc(var(--zap-o, 0.16) * 0.78) !important;
  animation: edgeZapSnapV44 0.42s steps(2, end) infinite alternate !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.58))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.44)) !important;
}

.edge-arc {
  stroke: rgba(238, 255, 255, 0.86) !important;
  stroke-width: var(--arc-w, 1px) !important;
  opacity: calc(var(--arc-o, 0.32) * 0.86) !important;
  animation: none !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.56))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.48)) !important;
}

.edge-fork {
  opacity: calc(var(--fork-o, 0.08) * 0.42) !important;
  animation: none !important;
}

.electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg {
  animation: edgeOrganicMicroJitterV44 0.72s steps(2, end) infinite !important;
}

@keyframes edgeSparkSnapV44 {
  0% { opacity: 0.04; }
  58% { opacity: calc(var(--spark-o, 0.2) * 0.82); }
  100% { opacity: 0.09; }
}

@keyframes edgeZapSnapV44 {
  0% { opacity: 0.025; }
  48% { opacity: calc(var(--zap-o, 0.16) * 0.78); }
  100% { opacity: 0.065; }
}

@keyframes edgeOrganicMicroJitterV44 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-0.06px, 0.04px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .charging-panel::before,
  .charging-panel::after,
  .electric-current[data-electric-style="delicate"][data-lightning-live="1"] .lightning-svg,
  .edge-spark,
  .edge-zap {
    animation: none !important;
  }
}


/* Electric arc v45: break the perfect white rectangle, keep raw irregular current */
.charging-panel::before {
  opacity: 0.14 !important;
  filter:
    drop-shadow(0 0 1px rgba(235, 255, 255, 0.24))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.22)) !important;
  animation: none !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  filter:
    drop-shadow(0 0 1px rgba(240, 255, 255, 0.72))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.5))
    drop-shadow(0 0 8px rgba(82, 240, 255, 0.12)) !important;
}

.edge-trace {
  stroke: rgba(80, 226, 244, 0.86) !important;
  stroke-width: 1.06px !important;
  opacity: var(--trace-o, 0.66) !important;
  filter:
    drop-shadow(0 0 1px rgba(245, 255, 255, 0.48))
    drop-shadow(0 0 4px rgba(82, 240, 255, 0.44)) !important;
}

.edge-trace-0 {
  stroke: rgba(232, 255, 255, 0.88) !important;
  stroke-width: 1.22px !important;
  opacity: var(--trace-o, 0.72) !important;
}

.edge-trace-1 {
  stroke: rgba(69, 225, 245, 0.26) !important;
  stroke-width: 2.25px !important;
  opacity: 0.2 !important;
}

.edge-trace-2 {
  stroke: rgba(45, 230, 190, 0.2) !important;
  stroke-width: 0.78px !important;
  opacity: 0.18 !important;
}

.edge-trace-3 {
  stroke: rgba(180, 255, 255, 0.16) !important;
  stroke-width: 0.54px !important;
  opacity: 0.14 !important;
}

.edge-arc {
  stroke-width: var(--arc-w, 0.9px) !important;
  opacity: calc(var(--arc-o, 0.32) * 0.78) !important;
}

.edge-zap {
  opacity: calc(var(--zap-o, 0.16) * 0.68) !important;
}


/* Brand + current color v46: reference screenshot cold-blue logo and electricity */
:root {
  --ref-blue-core: #e2fbff;
  --ref-blue: #37c8ff;
  --ref-blue-mid: #25aee8;
  --ref-blue-dim: rgba(43, 177, 234, 0.42);
  --ref-blue-deep: rgba(14, 70, 112, 0.72);
}

.topbar .brand,
.brand {
  min-height: 58px !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f1fbff !important;
  text-transform: none !important;
  font-family: "Sora", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(22px, 2.2vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.82),
    0 0 14px rgba(55, 200, 255, 0.34) !important;
}

.brand .brand-mark,
.brand-mark {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(55, 200, 255, 0.78) !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(55, 200, 255, 0.24), transparent 44%),
    linear-gradient(180deg, rgba(12, 52, 76, 0.92), rgba(5, 28, 45, 0.88)) !important;
  color: #72dcff !important;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    inset 0 0 18px rgba(55, 200, 255, 0.14),
    0 0 0 1px rgba(55, 200, 255, 0.08),
    0 0 18px rgba(55, 200, 255, 0.38) !important;
  text-shadow:
    0 0 1px rgba(226, 251, 255, 0.8),
    0 0 8px rgba(55, 200, 255, 0.72) !important;
}

.brand span:last-child {
  color: #f3fbff !important;
  letter-spacing: -0.055em !important;
}

/* Queue electric edge recolor: pure cold blue, no mint/green cast */
.charging-panel {
  --edge-core: rgba(226, 251, 255, 0.94);
  --edge-cyan: rgba(55, 200, 255, 0.84);
  --edge-mint: rgba(35, 174, 232, 0.24);
  border-color: rgba(55, 200, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(55, 200, 255, 0.14),
    0 0 14px rgba(55, 200, 255, 0.2),
    0 0 34px rgba(35, 174, 232, 0.095),
    inset 0 0 36px rgba(55, 200, 255, 0.058) !important;
}

.charging-panel::before {
  background:
    radial-gradient(circle at 1% 3%, rgba(226,251,255,0.62), rgba(55,200,255,0.34) 15%, transparent 31%),
    radial-gradient(circle at 98% 3%, rgba(226,251,255,0.48), rgba(55,200,255,0.3) 14%, transparent 31%),
    radial-gradient(circle at 2% 97%, rgba(226,251,255,0.42), rgba(55,200,255,0.26) 14%, transparent 31%),
    radial-gradient(circle at 98% 97%, rgba(226,251,255,0.5), rgba(55,200,255,0.3) 14%, transparent 31%),
    linear-gradient(90deg, rgba(55,200,255,0.22), rgba(226,251,255,0.38) 16%, rgba(55,200,255,0.28) 42%, rgba(35,174,232,0.16) 68%, rgba(226,251,255,0.3)),
    linear-gradient(180deg, rgba(55,200,255,0.2), rgba(226,251,255,0.34) 22%, rgba(55,200,255,0.26) 46%, rgba(35,174,232,0.15) 74%, rgba(226,251,255,0.28)) !important;
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.25))
    drop-shadow(0 0 4px rgba(55, 200, 255, 0.28)) !important;
}

.electric-current[data-electric-style="delicate"] .lightning-svg {
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.72))
    drop-shadow(0 0 4px rgba(55, 200, 255, 0.54))
    drop-shadow(0 0 8px rgba(35, 174, 232, 0.14)) !important;
}

.edge-trace {
  stroke: rgba(55, 200, 255, 0.9) !important;
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.5))
    drop-shadow(0 0 4px rgba(55, 200, 255, 0.48)) !important;
}

.edge-trace-0 {
  stroke: rgba(226, 251, 255, 0.88) !important;
}

.edge-trace-1 {
  stroke: rgba(37, 174, 232, 0.28) !important;
}

.edge-trace-2 {
  stroke: rgba(40, 156, 220, 0.2) !important;
}

.edge-trace-3 {
  stroke: rgba(116, 215, 255, 0.16) !important;
}

.edge-spark {
  stroke: rgba(218, 248, 255, 0.78) !important;
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.5))
    drop-shadow(0 0 3px rgba(55, 200, 255, 0.46)) !important;
}

.edge-zap {
  stroke: rgba(226, 251, 255, 0.88) !important;
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.56))
    drop-shadow(0 0 4px rgba(55, 200, 255, 0.46)) !important;
}

.edge-arc {
  stroke: rgba(218, 248, 255, 0.84) !important;
  filter:
    drop-shadow(0 0 1px rgba(226, 251, 255, 0.54))
    drop-shadow(0 0 4px rgba(55, 200, 255, 0.48)) !important;
}

.processing-badge,
.queue-copy,
.charge-tags span,
.queue-stage,
.charge-row,
.input-status.loading {
  border-color: rgba(55, 200, 255, 0.34) !important;
}


/* Cold blue final tint v47: remove residual green from queue accents */
.edge-trace-0 {
  stroke: rgba(170, 232, 255, 0.92) !important;
}

.edge-trace {
  stroke: rgba(47, 190, 247, 0.9) !important;
}

.edge-spark,
.edge-zap,
.edge-arc {
  stroke: rgba(124, 218, 255, 0.86) !important;
}

.queue-progress i,
.progress-fill {
  background:
    linear-gradient(90deg, #24c8ff 0%, #38cfff 52%, #50d8ff 100%) !important;
  box-shadow:
    0 0 8px rgba(55, 200, 255, 0.44),
    0 0 18px rgba(37, 174, 232, 0.22) !important;
}

.processing-badge,
.queue-copy {
  color: #72dcff !important;
  border-color: rgba(55, 200, 255, 0.52) !important;
  background:
    linear-gradient(180deg, rgba(55, 200, 255, 0.16), rgba(55, 200, 255, 0.045)),
    rgba(5, 28, 45, 0.78) !important;
  box-shadow:
    inset 0 0 16px rgba(55, 200, 255, 0.08),
    0 0 14px rgba(55, 200, 255, 0.16) !important;
}

.charge-tags span,
.queue-stage,
.charge-row {
  border-color: rgba(55, 200, 255, 0.26) !important;
}

.charge-tags b,
.queue-stage span,
.queue-stage strong,
.charging-head strong,
.charging-head span {
  text-shadow: 0 0 10px rgba(55, 200, 255, 0.12) !important;
}

/* Payment task states */
.payment-flow-cell {
  min-width: 210px;
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

.flow-line {
  display: grid;
  grid-template-columns: 10px minmax(70px, auto) 1fr;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(214, 245, 255, 0.82);
}

.flow-line strong {
  color: #e9fbff;
  font-weight: 800;
}

.flow-line small,
.flow-meta {
  color: rgba(158, 209, 226, 0.68);
  font-size: 11px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(158, 209, 226, 0.65);
  box-shadow: 0 0 8px rgba(158, 209, 226, 0.4);
}

.flow-line.ok .flow-dot {
  background: #42e7ff;
  box-shadow: 0 0 12px rgba(66, 231, 255, 0.72);
}

.flow-line.ok strong {
  color: #9af4ff;
}

.flow-line.live .flow-dot {
  background: #5c9dff;
  animation: admin-flow-pulse 900ms ease-in-out infinite alternate;
}

.flow-line.warn .flow-dot {
  background: #ffb94a;
  box-shadow: 0 0 10px rgba(255, 185, 74, 0.55);
}

.flow-line.danger .flow-dot {
  background: #ff5f7a;
  box-shadow: 0 0 10px rgba(255, 95, 122, 0.6);
}

.flow-error {
  max-width: 260px;
  color: #ff9aac;
  font-size: 11px;
  line-height: 1.45;
}

@keyframes admin-flow-pulse {
  from { opacity: 0.55; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line.live .flow-dot { animation: none; }
}

/* Encrypted payment profile */

.profile-step-panel,
.profile-status-panel {
  border: 1px solid rgba(66, 231, 255, 0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(7, 18, 28, 0.86), rgba(4, 12, 20, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 40px rgba(0, 0, 0, 0.22);
  padding: 16px;
}

.profile-step-panel h2,
.profile-status-panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #e8fbff;
}

.setup-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.profile-status-panel {
  margin-top: 14px;
}

.profile-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.profile-status-item {
  border: 1px solid rgba(66, 231, 255, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(5, 15, 24, 0.68);
}

.profile-status-item span {
  display: block;
  color: rgba(158, 209, 226, 0.68);
  font-size: 11px;
  margin-bottom: 6px;
}

.profile-status-item strong {
  color: #dffaff;
  font-size: 13px;
  word-break: break-all;
}

.profile-log {
  min-height: 110px;
  margin-top: 12px;
  border: 1px solid rgba(66, 231, 255, 0.16);
  border-radius: 8px;
  padding: 12px;
  color: #aeeeff;
  background: rgba(0, 6, 12, 0.72);
  white-space: pre-wrap;
  overflow: auto;
}

.tiny {
  font-size: 12px;
}

@media (max-width: 900px) {
  .profile-status-grid {
    grid-template-columns: 1fr;
  }
}

/* Embedded profile tab */
.profile-admin-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.profile-status-panel.admin-embedded {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .profile-admin-layout {
    grid-template-columns: 1fr;
  }
}

/* Admin interaction performance v51: stable tabs, no heavy tilt on management surfaces */
.admin-shell .admin-console,
.admin-shell .login-panel,
.admin-shell .table-wrap,
.admin-shell .stat-card,
.admin-shell .admin-tabs button,
.admin-shell .profile-step-panel,
.admin-shell .profile-status-panel,
.admin-shell .toolbar,
.admin-shell .btn,
.admin-shell .field,
.admin-shell .log-item {
  transform: none !important;
  transform-style: flat !important;
  will-change: auto !important;
}

.admin-shell .admin-console.fx-tilt,
.admin-shell .login-panel.fx-tilt,
.admin-shell .table-wrap.fx-tilt,
.admin-shell .stat-card.fx-tilt,
.admin-shell .admin-tabs button.fx-tilt,
.admin-shell .nav-link.fx-tilt,
.admin-shell .summary-row.fx-tilt,
.admin-shell .input-status.fx-tilt {
  transform: none !important;
  box-shadow: inherit;
}

.admin-shell .admin-tabs button,
.admin-shell .btn,
.admin-shell .table-actions .btn,
.admin-shell .pay-link-actions .btn,
.admin-shell .mini-copy {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease !important;
}

.admin-shell .admin-tabs button:hover,
.admin-shell .admin-tabs button.active {
  transform: none !important;
  box-shadow:
    inset 0 -2px 0 rgba(66, 231, 255, 0.78),
    0 0 18px rgba(66, 231, 255, 0.16) !important;
}

.admin-shell .btn:hover,
.admin-shell .mini-copy:hover,
.admin-shell .pay-link-text:hover,
.admin-shell .pill:hover {
  transform: none !important;
}

.admin-shell .admin-view {
  animation: none !important;
}

.admin-shell .table-wrap,
.admin-shell .profile-step-panel,
.admin-shell .profile-status-panel,
.admin-shell .stat-card {
  contain: layout paint;
}

.admin-shell .pointer-spark {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell *,
  .admin-shell *::before,
  .admin-shell *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Commercial trust, tracking, success and admin metrics v52 */
#productStrip.product-strip {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
}

.admin-tabs {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
}

.order-query-panel,
.trust-section,
.success-shell {
  position: relative;
  z-index: 2;
}

.trust-section {
  width: min(100%, 1180px);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.7fr);
  gap: 14px;
}

.trust-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.22);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(7, 31, 47, 0.82), rgba(3, 13, 23, 0.88));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 56px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(82, 240, 255, 0.08);
}

.trust-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent, rgba(82, 240, 255, 0.08), rgba(45, 230, 190, 0.08), transparent),
    radial-gradient(circle at 12% 28%, rgba(82, 240, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 70%, rgba(45, 230, 190, 0.2) 0 1px, transparent 2px);
  opacity: 0.66;
  transform: translateX(-18%);
  animation: productTabStarDrift 12s linear infinite;
}

.trust-card > * {
  position: relative;
  z-index: 1;
}

.trust-card-wide {
  grid-row: span 2;
}

.trust-card h2,
.trust-card h3 {
  margin: 6px 0 14px;
  color: #effdff;
}

.trust-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.trust-flow-grid div,
.success-detail-grid div {
  min-height: 106px;
  border: 1px solid rgba(82, 240, 255, 0.14);
  border-radius: 12px;
  padding: 13px;
  background: rgba(2, 15, 24, 0.58);
}

.trust-flow-grid span,
.success-detail-grid span {
  display: block;
  color: #66efff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.trust-flow-grid strong,
.success-detail-grid strong {
  display: block;
  color: #f2feff;
  font-size: 14px;
  word-break: break-word;
}

.trust-flow-grid p {
  margin: 8px 0 0;
  color: #9ec8d4;
  font-size: 12px;
  line-height: 1.55;
}

.eta-card strong {
  display: block;
  margin: 4px 0 10px;
  color: #52f0ff;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  font-size: 30px;
  text-shadow: 0 0 18px rgba(82, 240, 255, 0.28);
}

.faq-card details {
  border-top: 1px solid rgba(82, 240, 255, 0.13);
  padding: 11px 0;
}

.faq-card details:first-of-type {
  border-top: 0;
}

.faq-card summary {
  color: #e8fbff;
  cursor: pointer;
  font-weight: 800;
}

.faq-card p {
  margin: 8px 0 0;
  color: #9ec8d4;
  font-size: 12px;
  line-height: 1.55;
}

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

.query-protocol-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 12px;
}

.query-protocol-grid div {
  min-width: 0;
  border: 1px solid rgba(82, 240, 255, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(82, 240, 255, 0.12), transparent 45%),
    rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.query-protocol-grid span {
  display: block;
  color: rgba(155, 211, 226, 0.86);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.query-protocol-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #f4feff;
  font-family: "JetBrains Mono", "Microsoft YaHei", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.query-status.live {
  border-color: rgba(82, 240, 255, 0.52);
  color: #9af4ff;
  box-shadow: inset 0 0 14px rgba(82, 240, 255, 0.08);
}

.query-error-line {
  margin-top: 12px;
  border: 1px solid rgba(255, 107, 138, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  color: #ffb2c0;
  background: rgba(255, 82, 120, 0.08);
  font-size: 12px;
}

#cardQueryBtn,
.success-actions .btn.primary,
.admin-shell .btn.primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.34) !important;
  border-radius: 10px !important;
  color: #eafcff !important;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(82, 240, 255, 0.12), transparent 33%),
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.18), transparent 54%),
    linear-gradient(180deg, rgba(82, 240, 255, 0.13), rgba(45, 230, 190, 0.045)),
    rgba(3, 20, 31, 0.84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(82, 240, 255, 0.055),
    inset 0 -1px 0 rgba(82, 240, 255, 0.2),
    0 0 18px rgba(82, 240, 255, 0.08) !important;
  text-shadow: 0 0 14px rgba(82, 240, 255, 0.24) !important;
}

.order-toolbar {
  align-items: flex-start;
  flex-direction: column;
}

.order-filter-bar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(150px, 0.65fr) minmax(136px, 0.5fr) minmax(136px, 0.5fr) auto auto;
  gap: 8px;
  align-items: center;
}

.order-filter-bar input,
.order-filter-bar select {
  min-height: 38px;
  border: 1px solid rgba(82, 240, 255, 0.24);
  border-radius: 9px;
  padding: 0 11px;
  color: #e8fbff;
  background: rgba(5, 22, 33, 0.82);
  outline: none;
}

.order-filter-bar input:focus,
.order-filter-bar select:focus {
  border-color: rgba(82, 240, 255, 0.68);
  box-shadow: 0 0 0 3px rgba(82, 240, 255, 0.1);
}

.business-stat {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(7, 31, 47, 0.78), rgba(3, 13, 23, 0.84)) !important;
}

.business-stat.ok strong { color: #6effdf; }
.business-stat.live strong { color: #9af4ff; }
.business-stat.warn strong { color: #ffd166; }
.business-stat.danger strong { color: #ff8da1; }
.business-stat.money strong { color: #eaffff; font-size: 24px; }

.status-stack {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.status-stack small {
  color: rgba(158, 209, 226, 0.72);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.35;
  word-break: break-word;
}

.status-stack em {
  width: fit-content;
  border: 1px solid rgba(255, 209, 102, 0.34);
  border-radius: 999px;
  padding: 2px 8px;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.order-actions {
  min-width: 250px;
}

.success-shell {
  min-height: calc(100vh - 176px);
  width: min(100% - 28px, 980px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.success-panel {
  position: relative;
  width: min(100%, 780px);
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.28);
  border-radius: 24px;
  padding: 34px;
  text-align: center;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(7, 31, 47, 0.88), rgba(3, 13, 23, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 26px 90px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(82, 240, 255, 0.13);
}

.success-orbit {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    conic-gradient(from 0deg, transparent, rgba(82, 240, 255, 0.18), transparent, rgba(45, 230, 190, 0.16), transparent);
  filter: blur(32px);
  opacity: 0.36;
  animation: electricOrbit 11s linear infinite;
}

.success-panel > *:not(.success-orbit) {
  position: relative;
  z-index: 1;
}

.success-mark {
  width: 74px;
  height: 74px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(82, 240, 255, 0.42);
  border-radius: 999px;
  color: #061018;
  background: linear-gradient(135deg, #52f0ff, #2de6be);
  box-shadow: 0 0 34px rgba(82, 240, 255, 0.32);
  font-size: 36px;
  font-weight: 900;
}

.success-panel h1 {
  margin: 4px 0 8px;
  color: #f5feff;
  font-size: clamp(30px, 5vw, 54px);
}

.success-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 14px;
  text-align: left;
}

.success-status-line {
  margin: 12px auto 20px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(82, 240, 255, 0.2);
  border-radius: 999px;
  padding: 9px 14px;
  color: #bff8ff;
  background: rgba(82, 240, 255, 0.07);
  font-weight: 800;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1020px) {
  .trust-section {
    grid-template-columns: 1fr;
  }
  .trust-flow-grid,
  .order-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .trust-flow-grid,
  .order-result-grid,
  .success-detail-grid,
  .order-filter-bar {
    grid-template-columns: 1fr;
  }
  .success-panel {
    padding: 24px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-card::before,
  .success-orbit {
    animation: none !important;
  }
}

/* Query/progress/overview refinement v53 */
#productStrip.product-strip {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
}

.compact-trust-section {
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr) !important;
}

.compact-trust-section .eta-card,
.compact-trust-section .faq-card {
  min-height: 100%;
}

.queue-progress {
  position: relative;
  overflow: visible !important;
  height: 11px !important;
  border: 1px solid rgba(80, 216, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(2, 12, 22, 0.88), rgba(5, 27, 42, 0.72)) !important;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(55, 200, 255, 0.12) !important;
  cursor: default;
}

.queue-progress::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--queue-progress, 12%) 50%, rgba(80, 216, 255, 0.2), transparent 8%),
    linear-gradient(90deg, transparent, rgba(80, 216, 255, 0.08), transparent);
  opacity: 0.9;
  transition: background-position 260ms ease, opacity 180ms ease;
}

.queue-progress i {
  position: relative;
  z-index: 1;
  min-width: 3%;
  background:
    linear-gradient(90deg, #1fb8ff 0%, #55d6ff 48%, #9ff5ff 72%, #47ccff 100%) !important;
  box-shadow:
    0 0 10px rgba(80, 216, 255, 0.58),
    0 0 22px rgba(55, 200, 255, 0.28) !important;
  transition: width 520ms cubic-bezier(.22, 1, .36, 1) !important;
}

.queue-progress-star {
  position: absolute;
  z-index: 2;
  left: var(--queue-progress, 12%);
  top: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #e9fdff;
  transform: translate(-50%, -50%);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(80, 216, 255, 0.72),
    0 0 24px rgba(55, 200, 255, 0.3);
  filter: drop-shadow(0 0 8px rgba(80, 216, 255, 0.55));
  animation: queueStarTwinkle 1.15s steps(2, end) infinite;
  transition: left 520ms cubic-bezier(.22, 1, .36, 1), transform 160ms ease;
}

.queue-progress:hover .queue-progress-star {
  transform: translate(-50%, -50%) scale(1.12) rotate(12deg);
}

.queue-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: rgba(176, 231, 245, 0.8);
  font-size: 12px;
  line-height: 1.55;
}

.queue-progress-meta b {
  flex: 0 0 auto;
  min-width: 48px;
  color: #9ef4ff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  text-shadow: 0 0 12px rgba(80, 216, 255, 0.38);
}

.queue-progress-meta span {
  color: rgba(184, 226, 238, 0.78);
  text-align: right;
}

@keyframes queueStarTwinkle {
  0%, 100% { opacity: 0.72; filter: drop-shadow(0 0 6px rgba(80, 216, 255, 0.46)); }
  42% { opacity: 1; filter: drop-shadow(0 0 14px rgba(116, 230, 255, 0.82)); }
  58% { opacity: 0.62; }
}

.stat-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  align-items: stretch;
}

.overview-group {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(82, 240, 255, 0.22);
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(82, 240, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(7, 31, 47, 0.76), rgba(3, 13, 23, 0.86));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.028),
    0 16px 44px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(82, 240, 255, 0.07);
  contain: layout paint;
}

.overview-group::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(82, 240, 255, 0.08), rgba(45, 230, 190, 0.06), transparent);
  opacity: 0.5;
}

.overview-group-head,
.overview-metrics {
  position: relative;
  z-index: 1;
}

.overview-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.overview-group-head span {
  color: #eefcff;
  font-size: 14px;
  font-weight: 900;
}

.overview-group-head small {
  color: rgba(158, 209, 226, 0.68);
  font-size: 11px;
  font-weight: 800;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overview-metric {
  min-height: 92px;
  border: 1px solid rgba(82, 240, 255, 0.14);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 0%, rgba(82, 240, 255, 0.11), transparent 56%),
    rgba(2, 15, 24, 0.58);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.overview-metric:hover,
.overview-metric:focus-visible {
  border-color: rgba(82, 240, 255, 0.42);
  background-color: rgba(8, 34, 50, 0.72);
  box-shadow: inset 0 -2px 0 rgba(82, 240, 255, 0.38), 0 0 18px rgba(82, 240, 255, 0.12);
  outline: none;
  filter: brightness(1.05);
}

.overview-metric span {
  display: block;
  min-height: 32px;
  color: rgba(169, 203, 212, 0.9);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.overview-metric strong {
  display: block;
  margin-top: 8px;
  color: #f2feff;
  font-family: "Sora", "Microsoft YaHei", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.04em;
}

.overview-group.success .overview-metric:nth-child(1) strong,
.overview-group.cards .overview-metric:nth-child(1) strong {
  color: #6effdf;
}

.overview-group.success .overview-metric:nth-child(2) strong,
.overview-group.cards .overview-metric:nth-child(3) strong {
  color: #ff8da1;
}

.overview-group.orders .overview-metric:nth-child(1) strong,
.overview-group.success .overview-metric:nth-child(3) strong {
  color: #9af4ff;
}

@media (max-width: 1120px) {
  .stat-grid,
  .compact-trust-section {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .overview-metrics {
    grid-template-columns: 1fr;
  }
  .queue-progress-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .queue-progress-meta span {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .queue-progress-star {
    animation: none !important;
  }
}

/* P3O public Xingkong protocol readback */
.queue-protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  position: relative;
  z-index: 160;
}

.queue-protocol-grid div {
  min-width: 0;
  border: 1px solid rgba(55, 200, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(55, 200, 255, 0.07), rgba(4, 19, 31, 0.72)),
    rgba(3, 18, 29, 0.62);
  padding: 9px 10px;
  box-shadow: inset 0 0 16px rgba(55, 200, 255, 0.055);
}

.queue-protocol-grid span {
  display: block;
  margin-bottom: 5px;
  color: rgba(166, 222, 238, 0.76);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.queue-protocol-grid strong {
  display: block;
  overflow: hidden;
  color: #eaffff;
  font-family: "JetBrains Mono", "Microsoft YaHei", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 160;
}

.queue-actions .btn {
  min-height: 36px;
  padding-inline: 14px;
}

@media (max-width: 760px) {
  .queue-protocol-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .queue-protocol-grid {
    grid-template-columns: 1fr;
  }
}

/* P3Q commercial success receipt */
.commercial-success-shell {
  width: min(100% - 28px, 1080px);
  align-items: start;
  padding-top: 30px;
  padding-bottom: 92px;
}

.commercial-success-panel {
  width: min(100%, 920px);
  text-align: left;
}

.commercial-success-panel .success-mark,
.commercial-success-panel > .eyebrow,
.commercial-success-panel > h1,
.commercial-success-panel > .muted {
  text-align: center;
}

.commercial-success-panel .success-mark {
  display: grid;
  margin-inline: auto;
}

.success-receipt-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  border: 1px solid rgba(82, 240, 255, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(82, 240, 255, 0.1), transparent),
    rgba(3, 18, 29, 0.66);
  padding: 11px 12px;
}

.success-receipt-strip span,
.success-protocol-grid span,
.proof-grid span {
  color: rgba(180, 232, 245, 0.78);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 900;
}

.success-receipt-strip strong {
  overflow: hidden;
  color: #efffff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-mark.is-failed {
  color: #22040b;
  background: linear-gradient(135deg, #ff9eb0, #ff5f7a);
  box-shadow: 0 0 34px rgba(255, 95, 122, 0.28);
}

.success-protocol-grid,
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.success-protocol-grid div,
.proof-grid span,
.success-proof-panel,
.success-timeline-panel {
  border: 1px solid rgba(82, 240, 255, 0.16);
  border-radius: 12px;
  background: rgba(2, 15, 24, 0.58);
  box-shadow: inset 0 0 18px rgba(82, 240, 255, 0.035);
}

.success-protocol-grid div {
  min-width: 0;
  padding: 12px;
}

.success-protocol-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: #f2feff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-proof-panel,
.success-timeline-panel {
  margin-top: 14px;
  padding: 14px;
}

.proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.proof-head strong {
  color: #f4feff;
  font-size: 14px;
}

.proof-head span {
  color: rgba(180, 232, 245, 0.68);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  text-align: right;
}

.proof-grid {
  margin: 0;
}

.proof-grid span {
  display: block;
  padding: 10px;
}

.success-timeline {
  display: grid;
  gap: 9px;
  max-height: 310px;
  overflow: auto;
  padding-right: 4px;
}

.success-timeline article {
  border-left: 2px solid rgba(82, 240, 255, 0.38);
  padding-left: 12px;
}

.success-timeline article span,
.success-empty-line {
  color: rgba(180, 232, 245, 0.66);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
}

.success-timeline article strong {
  display: block;
  margin: 3px 0;
  color: #eaffff;
  font-size: 13px;
}

.success-timeline article p {
  margin: 0;
  color: rgba(207, 232, 240, 0.76);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .success-protocol-grid,
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .success-receipt-strip,
  .success-protocol-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }
  .proof-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .proof-head span {
    text-align: left;
  }
}


/* Billing details for encrypted browser profiles */
.billing-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 6px 0 14px;
}

.billing-form-grid .billing-wide {
  grid-column: 1 / -1;
}

.billing-form-grid input {
  min-height: 42px;
}

@media (max-width: 720px) {
  .billing-form-grid {
    grid-template-columns: 1fr;
  }
}


/* Xingkong operations tab v56 */
.xingkong-tab-view {
  display: grid;
  gap: 14px;
}

.xingkong-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.08fr);
  align-items: start;
  gap: 14px;
}

.xingkong-toolbar > div:first-child {
  display: grid;
  gap: 6px;
}

.xingkong-toolbar h2 {
  margin-bottom: 0;
}

.xingkong-toolbar .muted {
  margin: 0;
  max-width: 60ch;
}

.xingkong-filter-bar {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.xingkong-filter-search {
  width: 100%;
  min-width: 0;
}

.xingkong-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.xingkong-filter-bar input,
.xingkong-filter-bar select,
.xingkong-filter-bar .btn {
  min-height: 38px;
}

.xingkong-filter-row select {
  min-width: 144px;
}

.xingkong-filter-row input[type="date"] {
  min-width: 146px;
}

.xingkong-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 12px;
  margin: 8px 0 0;
}

.xingkong-stat {
  appearance: none;
  border: 1px solid rgba(95, 214, 255, 0.22);
  border-radius: 18px;
  padding: 14px 16px;
  color: var(--text);
  text-align: left;
  background: rgba(7, 18, 34, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.xingkong-stat:hover,
.xingkong-stat:focus-visible {
  border-color: rgba(31, 216, 255, 0.72);
  background: rgba(10, 35, 55, 0.86);
  transform: translateY(-1px);
  outline: none;
}

.xingkong-stat span {
  display: block;
  color: #a9bdd0;
  font-size: 0.78rem;
}

.xingkong-stat strong {
  display: block;
  margin-top: 6px;
  color: #f1fbff;
  font-size: 1.08rem;
}

.xingkong-stat.ok strong { color: var(--mint); }
.xingkong-stat.warn strong { color: var(--amber); }
.xingkong-stat.danger strong { color: var(--red); }
.xingkong-stat.live strong { color: var(--cyan); }

.xingkong-control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}

.xingkong-control-deck > :only-child {
  grid-column: 1 / -1;
}

.xingkong-ops-card,
.xingkong-commerce-card {
  min-width: 0;
  border: 1px solid rgba(95, 214, 255, 0.22);
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at 90% 0%, rgba(123, 92, 255, 0.14), transparent 32%),
    rgba(7, 18, 34, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xingkong-ops-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.xingkong-ops-card-head strong {
  display: block;
  color: #f1fbff;
  font-size: 1rem;
}

.xingkong-ops-card-head p {
  max-width: 58ch;
  margin: 5px 0 0;
  color: #9fb5c8;
  font-size: 0.82rem;
  line-height: 1.5;
}

.xingkong-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.xingkong-mini-stat {
  min-width: 86px;
  border: 1px solid rgba(143, 170, 188, 0.3);
  border-radius: 16px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.045);
}

.xingkong-mini-stat small {
  display: block;
  color: #9fb5c8;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.xingkong-mini-stat strong {
  display: block;
  margin-top: 3px;
  color: #f1fbff;
  font-size: 0.98rem;
}

.xingkong-mini-stat.ok strong { color: var(--mint); }
.xingkong-mini-stat.warn strong { color: var(--amber); }
.xingkong-mini-stat.live strong { color: var(--cyan); }
.xingkong-mini-stat.danger strong { color: var(--red); }

.xingkong-form-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(130px, 0.7fr) minmax(220px, 1.4fr);
  gap: 10px;
}

.partner-form-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.xingkong-wide-field {
  margin-top: 10px;
}

.xingkong-action-row,
.commerce-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.xingkong-result-output {
  width: 100%;
  min-height: 112px;
  margin-top: 4px;
  border: 1px solid rgba(95, 214, 255, 0.22);
  border-radius: 16px;
  padding: 12px;
  color: #e8f7ff;
  background: rgba(3, 9, 18, 0.72);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  resize: vertical;
}

.xingkong-ledger-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(92px, 0.2fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.xingkong-ledger-pager {
  margin-top: 12px;
}

.xingkong-ledger-list,
.xingkong-partner-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.xingkong-ledger-row,
.xingkong-partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(143, 170, 188, 0.2);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
}

.xingkong-ledger-row strong,
.xingkong-partner-row strong {
  display: block;
  color: #f1fbff;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.xingkong-ledger-row span,
.xingkong-partner-row span,
.xingkong-partner-row small {
  display: block;
  margin-top: 3px;
  color: #9fb5c8;
  font-size: 0.74rem;
  line-height: 1.35;
}

.xingkong-partner-row.active {
  border-color: rgba(38, 217, 166, 0.26);
}

.xingkong-partner-row.disabled {
  opacity: 0.72;
}

.xingkong-commerce-card {
  margin-top: 14px;
}

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

.xingkong-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  gap: 14px;
  align-items: start;
}

.xingkong-panel-shell,
.xingkong-task-panel {
  min-width: 0;
}

.xingkong-panel-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(95, 214, 255, 0.2);
  border-radius: 26px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 216, 255, 0.1), transparent 32%),
    rgba(8, 18, 34, 0.82);
  box-shadow: var(--shadow);
}

.xingkong-ledger-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(38, 217, 166, 0.12), transparent 34%),
    rgba(8, 18, 34, 0.82);
}

.xingkong-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.xingkong-panel-head .eyebrow {
  margin-bottom: 4px;
}

.xingkong-panel-head h3 {
  margin: 0;
  font-size: 1.08rem;
  color: #f4fcff;
}

.xingkong-panel-head .muted {
  max-width: 34ch;
  margin: 0;
  text-align: right;
  line-height: 1.6;
}

.xingkong-panel-shell .xingkong-ops-card {
  margin: 0;
}

.xingkong-task-panel {
  display: flex;
  flex-direction: column;
}

.xingkong-task-panel .table-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 6px;
}

.xingkong-task-panel .table-actions .btn {
  min-width: 58px;
  justify-content: center;
  padding-inline: 10px;
}

.xingkong-table-wrap table {
  min-width: 980px;
}

.xingkong-table-wrap th:last-child,
.xingkong-table-wrap td:last-child {
  position: sticky;
  right: 0;
  min-width: 150px;
  z-index: 2;
  background: rgba(5, 13, 22, 0.96);
  box-shadow: -14px 0 24px rgba(0, 0, 0, 0.22);
}

.xingkong-table-wrap th:last-child {
  z-index: 3;
}

.xingkong-task-id {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xingkong-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  border: 1px solid rgba(95, 214, 255, 0.36);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--cyan);
  background: rgba(31, 216, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 700;
}

.xingkong-state.ok {
  border-color: rgba(38, 217, 166, 0.55);
  color: var(--mint);
  background: rgba(38, 217, 166, 0.1);
}

.xingkong-state.warn {
  border-color: rgba(255, 185, 74, 0.55);
  color: var(--amber);
  background: rgba(255, 185, 74, 0.1);
}

.xingkong-state.danger {
  border-color: rgba(255, 95, 122, 0.55);
  color: var(--red);
  background: rgba(255, 95, 122, 0.1);
}

.xingkong-result-ledger {
  display: grid;
  gap: 6px;
  min-width: 136px;
}

.xingkong-result-ledger.compact {
  min-width: 124px;
}

.xingkong-result-ledger small {
  color: #9fb5c8;
  font-size: 0.72rem;
  line-height: 1.35;
}

.result-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(143, 170, 188, 0.34);
  border-radius: 999px;
  padding: 4px 9px;
  color: #c7d5e2;
  background: rgba(143, 170, 188, 0.09);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.result-chip.ok {
  border-color: rgba(38, 217, 166, 0.58);
  color: var(--mint);
  background: rgba(38, 217, 166, 0.1);
}

.result-chip.live {
  border-color: rgba(31, 216, 255, 0.55);
  color: var(--cyan);
  background: rgba(31, 216, 255, 0.1);
}

.result-chip.warn {
  border-color: rgba(255, 185, 74, 0.58);
  color: var(--amber);
  background: rgba(255, 185, 74, 0.1);
}

.result-chip.danger {
  border-color: rgba(255, 95, 122, 0.58);
  color: var(--red);
  background: rgba(255, 95, 122, 0.1);
}

.mini-progress {
  width: 118px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(95, 214, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--mint));
}

.xingkong-task-detail-row td {
  padding: 0;
  background: rgba(4, 14, 24, 0.96);
}

.xingkong-inline-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(95, 214, 255, 0.18);
  padding: 14px;
}

.xingkong-inline-detail div {
  min-width: 0;
  border: 1px solid rgba(95, 214, 255, 0.14);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.xingkong-inline-detail span {
  display: block;
  margin-bottom: 5px;
  color: #8faabc;
  font-size: 0.7rem;
}

.xingkong-inline-detail strong {
  display: block;
  overflow-wrap: anywhere;
  color: #f2fbff;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .xingkong-inline-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .xingkong-toolbar {
    grid-template-columns: 1fr;
  }

  .xingkong-control-deck {
    grid-template-columns: 1fr;
  }

  .xingkong-panel-head {
    flex-direction: column;
  }

  .xingkong-panel-head .muted {
    max-width: none;
    text-align: left;
  }

  .xingkong-admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .xingkong-filter-row {
    flex-direction: column;
  }

  .xingkong-filter-search,
  .xingkong-filter-row > * {
    width: 100%;
  }

  .xingkong-form-grid,
  .partner-form-grid,
  .xingkong-ledger-controls,
  .commerce-grid,
  .vault-grid {
    grid-template-columns: 1fr;
  }
}
.policy-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.policy-consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}