/* ============================================================
   Stealthlink - customer dashboard (WooCommerce My Account)
   App shell: sidebar + top bar + content cards.
   Also styles the logged-out login form on the same page.
   ============================================================ */

/* ---------- Shell ---------- */
body.is-app {
  background: var(--n-0);
}

.app {
  min-height: 100vh;
}

.app:focus {
  outline: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
  /* paint the sidebar column the full height of the page, not just the sticky viewport */
  background: linear-gradient(to right, var(--n-1) 255px, var(--hairline) 255px, var(--hairline) 256px, transparent 256px);
}

.app-side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--hairline);
  background: var(--n-1);
  overflow-y: auto;
}

.app-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 24px;
}

.app-side-top .brand {
  font-size: 19px;
}

.app-side-top .brand-mark {
  width: 26px;
  height: 22px;
}

.app-side-close {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-strong);
}

.app-nav-group + .app-nav-group {
  margin-top: 22px;
}

.app-nav-label {
  display: block;
  padding: 0 10px 8px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.app-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  color: var(--text-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.app-nav-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-faint);
}

.app-nav-item:hover {
  background: var(--surface);
  color: var(--text-strong);
}

.app-nav-item.is-active {
  background: var(--accent-fill);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--text-strong);
}

.app-nav-item.is-active svg {
  color: var(--accent-light);
}

.app-nav-soon {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-faint);
  font-size: 11px;
}

.app-side-foot {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.app-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--hairline);
  background: rgba(4, 5, 9, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.app-menu-btn,
.app-top-brand {
  display: none;
}

.app-menu-btn {
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-strong);
}

.app-account {
  position: relative;
  margin-left: auto;
}

.app-account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-strong);
  text-align: left;
}

.app-account-btn:hover {
  border-color: var(--text-faint);
}

.app-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--white);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.app-account-id {
  display: grid;
  line-height: 1.2;
}

.app-account-email {
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.app-account-balance {
  color: var(--text-muted);
  font-size: 12px;
}

.app-account-balance strong {
  color: var(--accent-light);
  font-weight: var(--fw-medium);
}

.app-account .chev {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.app-account-menu {
  right: 0;
  left: auto;
  width: 300px;
  transform: translate(0, -6px);
}

.app-account.is-open .app-account-menu {
  transform: translate(0, 0);
}

.app-content {
  width: 100%;
  max-width: 1200px;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) 64px;
}

.app-scrim {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  .app-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
  }

  .app-side.is-open {
    transform: none;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6);
  }

  .app-side-close,
  .app-menu-btn {
    display: grid;
  }

  .app-top-brand {
    display: inline-flex;
    font-size: 18px;
  }

  .app-top-brand .brand-mark {
    width: 24px;
    height: 20px;
  }
}

@media (max-width: 560px) {
  .app-account-id {
    display: none;
  }

  .app-account-menu {
    width: min(300px, calc(100vw - 32px));
  }
}

/* ---------- Page scaffolding ---------- */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.dash-title {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: var(--fw-medium);
}

.dash-head p {
  margin-top: 6px;
}

.text-strong {
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

.dash-back {
  justify-self: start;
}

.dash-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.dash-single {
  max-width: 760px;
}

/* Deposit: balance (left) and add funds (right), same edges as the history card */
.deposit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  align-items: stretch;
}

.balance-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.balance-card .stat-label {
  font-size: 14px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
}

.balance-card .balance-value {
  margin: 4px 0 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.balance-card .balance-note {
  margin-top: auto;
  padding-top: 16px;
}

@media (max-width: 900px) {
  .deposit-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .dash-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.panel {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head .panel-title,
.panel-head h2 {
  margin: 0;
}

.panel-title,
.panel > h2,
.panel-head h2 {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
}

.panel > p {
  margin-bottom: 12px;
  font-size: 15px;
}

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

.panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.panel .notice + .table-wrap,
.panel .table-wrap + .panel-foot + .notice {
  margin-top: 16px;
}

.panel .table-wrap {
  margin-inline: calc(clamp(20px, 2.4vw, 28px) * -1);
  padding-inline: clamp(6px, 1vw, 14px);
}

/* ---------- Announcement ---------- */
.dash-announce {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 160% at 0% 0%, rgba(89, 105, 255, 0.2), transparent 60%),
    var(--surface);
}

.dash-announce-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-strong);
  color: var(--white);
}

.dash-announce-icon svg {
  width: 18px;
  height: 18px;
}

.dash-announce p {
  margin: 0;
  color: var(--text-strong);
  font-size: 15px;
}

.dash-announce p + p {
  margin-top: 6px;
  color: var(--text-body);
}

/* ---------- Stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.stat-label svg {
  width: 16px;
  height: 16px;
  color: var(--accent-light);
}

.stat-value {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-value small {
  color: var(--text-muted);
  font-size: 16px;
}

.stat-sub {
  margin: 0;
  color: var(--text-faint);
  font-size: 13px;
}

.stat-action .btn {
  align-self: flex-start;
  margin-top: auto;
}

.stat-grid-sm {
  margin-bottom: 16px;
}

.stat-grid-sm .stat {
  padding: 16px 18px;
  background: var(--n-1);
}

.stat-grid-sm .stat-value {
  font-size: 26px;
}

@media (max-width: 760px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 480px) {
  .stat-grid-sm {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Proxy table ---------- */
.proxy-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

.proxy-name:hover {
  color: var(--accent-light);
}

.proxy-id {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 12px;
}

.expires {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.expires svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
}

.expires.is-soon {
  color: #FFD796;
}

.expires.is-soon svg {
  color: var(--warn);
}

.ip-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ip-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.ip-icon svg {
  width: 14px;
  height: 14px;
}

.ip-state.is-ok .ip-icon {
  background: var(--ok-fill);
  color: var(--ok);
}

.ip-state.is-bad .ip-icon {
  background: var(--danger-fill);
  color: var(--danger);
}

.ip-state.is-bad {
  color: #FFB4B4;
}

.cell-action {
  text-align: right;
}

.mini-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.mini-pager-btn {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
  color: var(--text-body);
  font-size: 13px;
}

.mini-pager-btn svg {
  width: 15px;
  height: 15px;
}

.mini-pager-btn:disabled,
.mini-pager-btn.is-disabled {
  opacity: 0.4;
}

.mini-pager-btn.is-current {
  border-color: var(--accent);
  color: var(--text-strong);
}

a.mini-pager-btn:hover {
  border-color: var(--text-faint);
  color: var(--text-strong);
}

/* ---------- Manage proxy ---------- */
.manage-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manage-title .dash-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}

.muted-title {
  color: var(--text-muted);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
}

.icon-btn:hover {
  color: var(--text-strong);
  border-color: var(--text-faint);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.rename-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
}

.rename-form .input {
  flex: 1 1 240px;
  min-height: 36px;
  padding: 6px 12px;
}

.tabbar {
  display: flex;
  gap: 6px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--n-1);
  scrollbar-width: none;
}

.tabbar::-webkit-scrollbar {
  display: none;
}

.tabbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.tabbar-item svg {
  width: 16px;
  height: 16px;
}

.tabbar-item:hover {
  background: var(--surface);
  color: var(--text-strong);
}

.tabbar-item.is-active {
  background: var(--accent-strong);
  color: var(--white);
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.copy-field {
  display: grid;
  gap: 6px;
}

.copy-field.is-wide {
  grid-column: 1 / -1;
}

.copy-field label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.copy-field-row {
  display: flex;
  gap: 8px;
}

.copy-field-row .input {
  min-width: 0;
  flex: 1;
  font-size: 14px;
}

.copy-field-row .copy-btn {
  flex: none;
  padding: 0 14px;
}

@media (max-width: 700px) {
  .kv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rotate-box {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.rotate-box h3,
.extend-box h3 {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.rotate-box > p {
  margin-bottom: 16px;
  font-size: 15px;
}

.rotate-box .form-actions {
  margin: 16px 0;
}

.rotate-box .copy-field + .notice {
  margin-top: 12px;
  font-size: 14px;
}

.dash-form .field + .field,
.dash-form .form-row-2 + .field,
.dash-form .field + .form-row-2,
.dash-form .form-row-2 + .form-row-2 {
  margin-top: 16px;
}

.dash-form .form-row-2 > .field + .field {
  margin-top: 0;
}

.field-set {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.field-set legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.field-set .field-hint {
  margin: -4px 0 10px;
}

.field-set + .form-row-2,
.field-set + .field {
  margin-top: 16px;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.field-inline input {
  width: 110px !important;
}

.reveal {
  position: relative;
}

.reveal input {
  padding-right: 46px !important;
}

.reveal-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.reveal-btn:hover {
  color: var(--text-strong);
}

.reveal-btn svg {
  width: 18px;
  height: 18px;
}

/* Live proxy settings (provider API) */
.copy-field-row .reveal {
  min-width: 0;
  flex: 1;
}

.copy-field-row .reveal .input {
  width: 100%;
}

.live-block + .live-block {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.live-block .field-set[disabled] {
  opacity: 0.6;
}

.live-block .form-actions {
  margin-top: 16px;
}

.ip-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.ip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

.field-inline select {
  width: auto !important;
  flex: none;
}

.field-inline .ip-input {
  width: min(260px, 100%) !important;
}

.advanced {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.advanced summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  color: var(--text-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
}

.advanced summary::-webkit-details-marker {
  display: none;
}

.advanced summary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.advanced[open] summary svg {
  transform: rotate(90deg);
}

.diag {
  display: grid;
  gap: 8px;
  margin: 20px 0 16px;
  padding: 0;
  list-style: none;
}

.diag li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
  color: var(--text-muted);
  font-size: 14px;
}

.diag li::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--n-4);
}

.diag li.is-running::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-fill);
  animation: pulse 0.9s ease-in-out infinite alternate;
}

.diag li.is-ok {
  color: var(--text-strong);
}

.diag li.is-ok::before {
  background: var(--ok);
}

.diag li.is-fail {
  color: #FFB4B4;
}

.diag li.is-fail::before {
  background: var(--danger);
}

@keyframes pulse {
  to { opacity: 0.4; }
}

.bill-price {
  margin: 4px 0 20px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
}

.bill-price .muted {
  font-family: var(--font-body);
  font-size: 15px;
}

.kv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.kv-list > div {
  padding: 14px 16px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--n-1);
}

.kv-list dt {
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kv-list dd {
  margin: 4px 0 0;
  color: var(--text-strong);
  font-size: 15px;
}

.extend-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.extend-box p {
  margin: 0;
  font-size: 14px;
}

.usage {
  display: grid;
  gap: 20px;
}

.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--hairline);
  stroke-width: 1;
}

.chart-axis {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.chart-bar {
  fill: var(--accent);
  transition: fill var(--dur-fast) var(--ease);
}

.chart-bar:hover {
  fill: var(--accent-light);
}

.chart-line {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 2;
  stroke-linejoin: round;
}

.chart-area {
  fill: var(--accent-fill-2);
}

.chart-dot {
  fill: var(--n-2);
  stroke: var(--accent-light);
  stroke-width: 2;
}

.chart-dot:hover {
  fill: var(--accent-light);
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 12px;
}

/* ---------- Deposit ---------- */
.pay-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pay-opt {
  position: relative;
  cursor: pointer;
}

.pay-opt input {
  position: absolute;
  opacity: 0;
}

.pay-opt-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
  color: var(--text-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.pay-opt-box svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.pay-opt input:checked + .pay-opt-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text-strong);
}

.pay-opt input:checked + .pay-opt-box svg {
  color: var(--accent-light);
}

.pay-opt input:focus-visible + .pay-opt-box {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.input-affix {
  position: relative;
}

.input-affix > span {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.input-affix input {
  padding-left: 32px !important;
}

.amount-chips {
  margin-top: 10px;
}

.amount-chips .chip {
  padding: 6px 12px;
  font-size: 13px;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
}

.seg-item {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.seg-item:hover {
  color: var(--text-strong);
}

.seg-item.is-active {
  background: var(--surface-raised);
  color: var(--text-strong);
}

.tx-amount.is-credit {
  color: var(--ok);
}

.tx-amount.is-debit {
  color: #FF9494;
}

.empty-row {
  padding: 24px 0;
}

/* ---------- Coming soon ---------- */
.coming-soon {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(40px, 6vw, 72px) 24px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(89, 105, 255, 0.16), transparent 70%),
    var(--surface);
}

.coming-soon p {
  max-width: 460px;
}

.coming-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background: var(--accent-fill);
  color: var(--accent-light);
}

.coming-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}

/* ---------- Settings ---------- */
.settings-jump {
  max-width: 100%;
  overflow-x: auto;
}

.dash > .panel {
  scroll-margin-top: 84px;
}

.pw-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* WooCommerce address fields rendered by woocommerce_form_field() */
.woo-fields .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.woo-fields .form-row {
  display: grid;
  gap: 6px;
  margin: 0;
}

.woo-fields .form-row-wide,
.woo-fields #billing_address_1_field,
.woo-fields #billing_address_2_field {
  grid-column: 1 / -1;
}

.woo-fields .form-row label {
  color: var(--text-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
}

.woo-fields .required {
  color: var(--accent-light);
  text-decoration: none;
}

.woo-fields .optional {
  color: var(--text-faint);
  font-weight: var(--fw-regular);
}

.woo-fields input.input-text,
.woo-fields select,
.woo-fields textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
  color: var(--text-strong);
  font-size: 15px;
}

.woo-fields input.input-text:focus,
.woo-fields select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-fill-2);
}

.woo-fields .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 700px) {
  .woo-fields .woocommerce-address-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Support ---------- */
.support .input-lg {
  min-height: 56px;
  font-size: 18px;
}

.help-results {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.help-hit {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-1);
}

.help-hit h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.help-hit p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.help-mail {
  margin-top: 16px;
}

/* ---------- Toast ---------- */
.app-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--n-3);
  box-shadow: var(--shadow-pop);
  color: var(--text-strong);
  font-size: 14px;
}

/* ---------- Contact: Telegram first ---------- */
.panel.support-tg {
  margin-bottom: 16px;
  border-color: var(--accent-line);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(89, 105, 255, 0.18), transparent 60%),
    var(--surface);
}

.support-tg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.support-tg-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
}

.support-tg-icon svg {
  width: 22px;
  height: 22px;
}

.support-tg-text {
  flex: 1 1 260px;
  min-width: 0;
}

.support-tg-text .panel-title {
  margin-bottom: 4px;
}

.support-tg-text p {
  margin: 0;
}

.support-tg-text .mono {
  color: var(--accent-light);
}

/* "Prefer email?" line under the Telegram card: plain text, no card */
.support-mail-line {
  margin: -20px 0 4px;
  padding: 0 4px;
  font-size: 14px;
}

.support-mail-line a {
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.support-mail-line a:hover {
  color: var(--text-strong);
  text-decoration-color: currentColor;
}

/* ---------- Iteration 6: real proxies ---------- */

/* Renew a suspended / unpaid proxy (manage view, above the tabs) */
.renew-box {
  display: grid;
  gap: 16px;
  border-color: rgba(255, 107, 107, 0.35);
}

.renew-box .panel-title {
  margin-bottom: 6px;
}

.renew-box p {
  margin: 0;
}

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

.renew-actions form {
  margin: 0;
}

/* Connection details before the proxy is provisioned */
.setup-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-md, 12px);
  background: var(--accent-fill);
}

.setup-box h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.setup-box p {
  margin-bottom: 10px;
  font-size: 15px;
}

.setup-box .card-icon {
  flex: none;
}

/* Controls that need the provider API: visible, but clearly unavailable */
.api-soon {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.api-soon fieldset[disabled] {
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.55;
}

.api-soon fieldset[disabled] * {
  cursor: not-allowed;
}

/* Ended proxies in the overview */
.proxy-table tr.is-ended td {
  color: var(--text-muted);
}

.proxy-table .expires .muted {
  margin-right: 2px;
}

.kv-list .link-arrow {
  display: inline-block;
  margin-top: 4px;
}

.kv-list dd .link-arrow {
  display: block;
  width: max-content;
}

@media (max-width: 600px) {
  .setup-box {
    flex-direction: column;
  }
}

/* Deposit: topping up for an order waiting at checkout */
.topup-for-order {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.topup-for-order .notice[hidden] {
  display: none;
}

.topup-for-order .notice > span {
  display: grid;
  gap: 6px;
}

.topup-waiting {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.topup-waiting svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

.topup-covered {
  align-items: center;
}

.topup-covered .btn {
  margin-left: auto;
  flex: none;
}

@media (max-width: 600px) {
  .topup-covered {
    flex-wrap: wrap;
  }

  .topup-covered .btn {
    margin-left: 0;
  }
}

/* "Manage card": a POST button that looks like the inline link next to it */
.inline-form {
  display: inline;
  margin: 0 0 0 8px;
}

.btn-link {
  padding: 0;
  color: var(--accent-light);
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ---------- Free trials (iteration 10) ---------- */
.badge-trial {
  margin-top: 4px;
  vertical-align: middle;
}

.proxy-table tr.is-trial-ended .btn-primary {
  white-space: nowrap;
}

.trial-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 160% at 0% 0%, rgba(89, 105, 255, 0.2), transparent 60%),
    var(--surface);
}

.trial-banner[hidden] {
  display: none;
}

.trial-banner-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-strong);
  color: var(--white);
}

.trial-banner-icon svg {
  width: 16px;
  height: 16px;
}

.trial-banner p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--text-strong);
  font-size: 15px;
}

.trial-banner-close {
  margin-left: auto;
}

.trial-end-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
}

.trial-end-box h3 {
  margin: 0 0 4px;
}

.trial-end-box p {
  margin: 0;
}

.trial-line {
  margin-top: 12px;
}

.manage-title .badge-trial {
  margin: 0 0 0 4px;
  font-size: 13px;
}

/* Ended trial: "Liked it?" above Manage, the badge under the name, so the row fits */
.proxy-table tr.is-trial-ended .cell-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.proxy-table .badge-trial {
  display: flex;
  width: max-content;
  margin-top: 6px;
}

/* Iteration 11: "Assigned by Stealthlink" (proxy without subscription) may wrap, so the table keeps fitting its card. */
.proxy-table td.cell-wrap {
  min-width: 8.5em;
  white-space: normal;
  line-height: 1.35;
}

/* Address field WooCommerce hides for the selected country (e.g. State for Germany); wc-address-i18n shows it again when needed. */
.woo-fields .sl-hidden-until-js {
  display: none;
}