/* ============================================================
   Golden Ark Reserve — Cabinet Theme · Unified Stylesheet
   ------------------------------------------------------------
   Covers every page of the counterparty portal:
     · Dashboard, Orders, View Order, Documents
     · Cart, Inquiry form, Inquiry received
     · Price fixation, Onboarding
   ------------------------------------------------------------
   Scoped to .woocommerce-account where needed so the rest of
   the public site (catalog, product pages, blog) is unaffected.
   ============================================================ */

/* ------------------------------------------------------------
   01 · Design tokens
   ------------------------------------------------------------ */
:root {
  
  --bg:           #0B0D10;
  --bg-surface:   #1B1F26;
  --bg-surface-2: #1B1F26;
  --bg-hover:     #21262E;
  --text:         #FFFFFF;
  --text-muted:   #FFFFFF;
  /*--text-muted:   #A1A1AA;*/
  --text-dim:     #FFFFFF;
  /*--text-dim:     #71717A;*/
  --line:         #262626;
  --line-strong:  #3F3F46;
  --accent:       #D4AF37;
  --accent-bright:#E8C158;
  --accent-deep:  #A88930;
  --accent-glow:  rgba(212, 175, 55, 0.20);
  --accent-soft:  rgba(212, 175, 55, 0.08);
  --success:      #34D399;
  --success-bg:   rgba(52, 211, 153, 0.12);
  --info:         #60A5FA;
  --info-bg:      rgba(96, 165, 250, 0.12);
  --warning:      #F59E0B;
  --warning-bg:   rgba(245, 158, 11, 0.12);
  --danger:       #F87171;
  --danger-bg:    rgba(248, 113, 113, 0.12);
  --radius:       12px;
  --radius-sm:    8px;
  --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.transactions-table td:last-child  {
    min-width: 280px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ===== Document chrome (above the mockups) ===== */
.doc-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 24px;
}
.doc-intro .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}
.doc-intro h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.15;
}
.doc-intro p {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.6;
}
.doc-intro p + p { margin-top: 8px; }

.doc-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin-bottom: 32px;
}
.doc-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.doc-nav-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-right: 12px;
}
.doc-nav a {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
  transition: all 0.12s ease;
}
.doc-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Step screen container ===== */
.step-screen {
  margin-bottom: 48px;
  scroll-margin-top: 80px;
}
.step-screen-label {
  max-width: 1280px;
  margin: 0 auto 16px;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.step-screen-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-deep);
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.step-screen-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.step-screen-desc {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1 1 100%;
  margin-top: 4px;
}
.step-screen-desc strong { color: var(--text); font-weight: 600; }

.step-divider {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.step-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}


.woocommerce-MyAccount-navigation {
  background: #0000;
  border: 1px solid #0000;
  border-radius: var(--radius);
  padding: 0;
}
.appbar{
    width:100%;
    top:40px!important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.layout{
    width:100%;
}
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
}
.nav-badge.is-warning { background: var(--warning-bg); color: var(--warning); }
.woocommerce-MyAccount-navigation li.logout {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation li.logout a { color: var(--text-dim); }
.woocommerce-MyAccount-content { min-width: 0; }

/* ===== Page header ===== */
.page-header { margin-bottom: 24px; }
.page-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-kicker .id {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
}
.page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.page-meta {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}
.save-indicator svg { width: 14px; height: 14px; }

/* ===== Stepper ===== */
.stepper {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.stepper-track {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  position: relative;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.stepper-step.is-done:not(:last-child)::after,
.stepper-step.is-current:not(:last-child)::after {
  background: var(--accent);
}
.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.stepper-dot svg { width: 13px; height: 13px; }
.stepper-step.is-done .stepper-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.stepper-step.is-current .stepper-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.stepper-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.stepper-step.is-done .stepper-label,
.stepper-step.is-current .stepper-label { color: var(--text); }
.stepper-step.is-current .stepper-label { color: var(--accent); }

/* ===== Step container ===== */
.step-container {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-bottom: 18px;
}
.step-head {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.step-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.step-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.step-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.6;
}
.step-desc a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
}

/* ===== Subsections ===== */
.subsection { margin-bottom: 36px; }
.subsection:last-child { margin-bottom: 0; }
.subsection-head { margin-bottom: 16px; }
.subsection-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.subsection-title .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.subsection-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ===== Form ===== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.form-row:last-child { margin-bottom: 0; }
.form-row.is-full { grid-template-columns: 1fr; }
.form-row.is-thirds { grid-template-columns: 1fr 1fr 1fr; }
.form-row.is-2-1 { grid-template-columns: 2fr 1fr; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-label .req { color: var(--accent); margin-left: 3px; }
.form-help {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea {
  min-height: 96px;
  resize: vertical;
}
.input-suffix {
  position: relative;
}
.input-suffix .input { padding-right: 50px; }
.input-suffix .suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  pointer-events: none;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ===== Radio cards ===== */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.radio-cards.is-thirds { grid-template-columns: 1fr 1fr 1fr; }
.radio-cards.is-quad { grid-template-columns: 1fr 1fr 1fr 1fr; }
.radio-card {
  position: relative;
  padding: 18px 18px 18px 50px;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
}
.radio-card:hover { border-color: var(--text-dim); }
.radio-card .radio-dot {
  position: absolute;
  top: 20px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
}
.radio-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.radio-card.is-selected .radio-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.radio-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.radio-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.radio-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  background: var(--bg-surface-2);
  border-radius: 4px;
  color: var(--text-dim);
}
.radio-card.is-selected .radio-card-badge {
  background: var(--accent);
  color: #0A0A0A;
}

/* ===== Yes/No radios ===== */
.yn-question {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.yn-question:last-child { margin-bottom: 0; }
.yn-question-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.yn-radio-group { display: inline-flex; gap: 8px; }
.yn-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--bg-surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  transition: all 0.12s ease;
}
.yn-option:hover { border-color: var(--text-dim); color: var(--text); }
.yn-option.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.yn-option.is-selected.is-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.yn-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  position: relative;
}
.yn-option.is-selected .yn-radio-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: currentColor;
  border-radius: 999px;
}
.conditional-reveal {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.conditional-reveal.is-warning { border-left-color: var(--warning); }
.conditional-reveal .form-label { margin-bottom: 6px; color: var(--accent); }
.conditional-reveal.is-warning .form-label { color: var(--warning); }
.ubo-row-header {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--bg-surface);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.ubo-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}
.ubo-input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ubo-input.is-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ubo-remove {
  width: 36px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}
.ubo-remove svg { width: 14px; height: 14px; }
.ubo-share-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 16px;
  padding: 10px 16px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.ubo-share-total .value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}
.ubo-share-total.is-valid .value { color: var(--success); }
.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.add-row-btn svg { width: 14px; height: 14px; }

/* ===== Checkbox / attestation ===== */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}
.checkbox-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  margin-top: 1px;
  display: grid;
  place-items: center;
}
.checkbox-mark svg {
  width: 12px;
  height: 12px;
  color: #0A0A0A;
  opacity: 0;
}
.checkbox.is-checked .checkbox-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox.is-checked .checkbox-mark svg { opacity: 1; }
.checkbox-label {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.checkbox-label a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
}

/* ===== Info banner ===== */
.info-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--info-bg);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.info-banner svg {
  width: 16px;
  height: 16px;
  color: var(--info);
  flex-shrink: 0;
  margin-top: 2px;
}
.info-banner strong { color: var(--text); font-weight: 600; }
.info-banner .muted { color: var(--text-muted); }

/* ===== Skip card (Step 7) ===== */
.skip-card {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.skip-card-text { flex: 1 1 280px; }
.skip-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.skip-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== Upload zone ===== */
.upload-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 12px;
}
.upload-mini:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-mini-icon {
  width: 36px;
  height: 36px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.upload-mini-icon svg { width: 16px; height: 16px; }
.upload-mini-info { flex: 1; min-width: 0; }
.upload-mini-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.upload-mini-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.upload-mini-action {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== Review cards (Step 8) ===== */
.review-card {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 12px;
}
.review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px!important;
  flex-wrap: wrap;
  gap: 12px;
}
.review-card-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px!important;
  font-weight: 700;
  color: var(--text);
}
.review-card-title .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 4px;
}
.review-edit {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.review-edit svg { width: 12px; height: 12px; }
.review-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.review-field {
  font-size: 18px;
  line-height: 1.1;
  display: flex;
    flex-direction: column;
    gap: 5px;
        padding: 12px 0!important;
}
.review-field-label {
      font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6B7280!important;
    font-weight: 600;
}
.review-field-value {
  color: var(--text);
  font-weight: 500;
  font-size: 18px;
  text-align: left!important;
}
.review-field-value.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ===== Action bar ===== */
.action-bar {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.action-bar.is-final { border-color: var(--accent); }
.action-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.action-bar-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.action-bar-meta strong { color: var(--text-muted); }
.action-bar-right { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
}
.btn svg { width: 14px; height: 14px; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.btn--primary.is-large {
  padding: 16px 32px;
  font-size: 15px;
  box-shadow: 0 8px 32px var(--accent-glow);
}
.btn--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .woocommerce-account {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .woocommerce-MyAccount-navigation li.logout {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}
@media (max-width: 900px) {
  .stepper { padding: 18px; overflow-x: auto; }
  .stepper-track { min-width: 640px; }
  .step-container { padding: 28px 20px; }
  .form-row, .form-row.is-thirds, .form-row.is-2-1 { grid-template-columns: 1fr; }
  .radio-cards, .radio-cards.is-thirds, .radio-cards.is-quad { grid-template-columns: 1fr; }
  .review-card-body { grid-template-columns: 1fr; }
  .ubo-row { grid-template-columns: 1fr 1fr; }
}


:root {
  
  --bg:           #0B0D10!important;
  --bg-surface:   #1B1F26!important;
  --bg-surface-2: #1B1F26!important;
  --bg-hover:     #21262E!important;
  --text:         #FFFFFF;
  --text-muted:   #FFFFFF;
  /*--text-muted:   #A1A1AA;*/
  --text-dim:     #FFFFFF;
  --theme-palette-color-3: #FFFFFF;
  /*--text-dim:     #71717A;*/

  --line:         #232830!important;
  --line-strong:  #333B45!important;

  --accent:       #D4AF37;
  --accent-bright:#E8C158;
  --accent-deep:  #A88930;
  --accent-glow:  rgba(212, 175, 55, 0.20);
  --accent-soft:  rgba(212, 175, 55, 0.08);

  --success:      #34D399;
  --success-bg:   rgba(52, 211, 153, 0.12);
  --info:         #60A5FA;
  --info-bg:      rgba(96, 165, 250, 0.12);
  --warning:      #F59E0B;
  --warning-bg:   rgba(245, 158, 11, 0.12);
  --danger:       #F87171;
  --danger-bg:    rgba(248, 113, 113, 0.12);
  --neutral:      #A1A1AA;
  --neutral-bg:   rgba(161, 161, 170, 0.10);

  --radius:       12px;
  --radius-sm:    8px;

  --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* ------------------------------------------------------------
   02 · Base / scope
   ------------------------------------------------------------ */
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.woocommerce-account *,
.woocommerce-account *::before,
.woocommerce-account *::after,
.woocommerce-cart *,
.woocommerce-checkout *,
.woocommerce-order-received * {
  box-sizing: border-box;
}

.woocommerce-account a,
.woocommerce-cart a,
.woocommerce-checkout a,
.woocommerce-order-received a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------
   03 · Layout (cabinet shell)
   ------------------------------------------------------------ */
.woocommerce-account .woocommerce, .woocommerce-page .woocommerce {
     width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 0;
    align-items: start;
    flex-direction: column;
}

.woocommerce-MyAccount-content { 
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------
   04 · Sidebar navigation
   ------------------------------------------------------------ */
.woocommerce-MyAccount-navigation {
  background: #0000;
  border:0;
  border-radius: var(--radius);
  padding: 0;
  position: sticky;
  top: 122px;
}
@media(max-width: 1024px){
    .woocommerce-MyAccount-navigation {
          position: relative!important;
    }
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.4;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 700;
  box-shadow: 0 0 24px var(--accent-glow);
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
	margin-left:1rem;
}
.nav-badge.is-warning { background: var(--warning-bg); color: var(--warning); }
.is-active .nav-badge {
  background: rgba(10, 10, 10, 0.2);
  color: #0A0A0A;
}
.woocommerce-MyAccount-navigation-link--customer-logout,
.woocommerce-MyAccount-navigation li.logout {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-MyAccount-navigation li.logout a { color: var(--text-dim); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.woocommerce-MyAccount-navigation li.logout a:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

/* ------------------------------------------------------------
   05 · Shared page utilities
   ------------------------------------------------------------ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 20px;
  transition: color 0.12s ease;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 14px; height: 14px; }

.page-header { margin-bottom: 24px; }
.page-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-kicker .id {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
}
.page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--text);
}
.page-lead, .page-meta {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 680px;
  line-height: 1.55;
}
.page-meta strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
  margin-left: 12px;
}
.save-indicator svg { width: 14px; height: 14px; }

/* Section card / surface */
.surface, .section-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-card { padding: 28px 32px; margin-bottom: 18px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.section-head h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--text);
}
.section-head h2 .count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.view-all:hover { color: var(--accent-bright); }

/* ------------------------------------------------------------
   06 · Status pills (WC standard statuses + extras)
   ------------------------------------------------------------ */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
  width: fit-content;
}
.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.status--completed, .status--verified, .status--paid, .status--signed {
  background: var(--success-bg); color: var(--success);
}
.status--completed::before, .status--verified::before, .status--paid::before, .status--signed::before {
  background: var(--success);
}
.status--processing {
  background: var(--info-bg); color: var(--info);
}
.status--processing::before { background: var(--info); }
.status--on-hold, .status--pending {
  background: var(--warning-bg); color: var(--warning);
}
.status--on-hold::before, .status--pending::before { background: var(--warning); }
.status{
      background: var(--neutral-bg); color: #fff;
}
.status::before{
        background: #fff;
}
.status--cancelled, .status--refunded, .status--cancelled, .status--placed, .status--allocated, .status--awaiting-fixation, .status--qc, .status--delivered {
  background: var(--neutral-bg); color: #fff;
}
.status--cancelled::before, .status--refunded::before, .status--placed::before, .status--allocated::before, .status--awaiting-fixation::before, .status--qc::before, .status--delivered::before { background: #fff; }
.status--failed, .status--rejected, .status--expired, .status--cancelled {
  background: var(--danger-bg); color: var(--danger);
}
.section-card.documents-section, .timeline, .pricing-table{
    padding-top: 28px!important;
    padding-bottom: 28px!important;
}
.content section{
    margin-top: 0!important;
    margin-bottom: 20px!important;
}
.pricing-table span.woocommerce-Price-amount.amount{
    font-size: 18px;
}
.status--failed::before, .status--rejected::before, .status--expired::before, .status--cancelled::before { background: var(--danger); }
.status--lg { font-size: 13px; padding: 7px 16px; }
.status--lg::before { width: 8px; height: 8px; }

/* Verified badge variant */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.verified-badge svg { width: 14px; height: 14px; }

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid;
}

/* Зелёный — Verified */
.verified-badge.status-verified {
    background: rgba(52, 211, 153, 0.12);
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.3);
}

/* Жёлтый — Pending */
.verified-badge.status-pending {
    background: rgba(251, 191, 36, 0.12);
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* Красный — Not verified */
.verified-badge.status-notverified {
    background: rgba(248, 113, 113, 0.12);
    color: #F87171;
    border-color: rgba(248, 113, 113, 0.3);
}

/* Иконки внутри бейджа */
.verified-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Live indicator (pulsing) */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  position: relative;
  display: inline-block;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: var(--success);
  animation: ga-pulse 1.6s ease-out infinite;
}
@keyframes ga-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(3); }
}

/* ------------------------------------------------------------
   07 · Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.btn--primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #0A0A0A;
}
.btn--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.back-to-shop{
    max-width: fit-content;
}
.btn--ghost:hover { color: var(--accent); }
.btn--lg { padding: 14px 28px; font-size: 15px; }

/* WC native button override on account pages */
.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-page .woocommerce-button,
.woocommerce-cart .button,
.woocommerce-checkout .button, [data-products=type-2] .ct-woo-card-actions .button, [data-products=type-2] .ct-woo-card-actions .added_to_cart {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent)!important;
   background-color: var(--accent)!important;
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-page .woocommerce-button:hover{
  background: var(--accent-bright);
  color: #0A0A0A;
}

/* ------------------------------------------------------------
   08 · Form fields
   ------------------------------------------------------------ */
label{
	margin:0!important;
}
.form-row.is-full{
	grid-template-columns: 1fr!important;
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-label .req { color: var(--accent); margin-left: 3px; }
.form-help {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
}
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  row-gap: 28px;
  margin-bottom: 18px;
}

.input, .select, .textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="date"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .select:focus, .textarea:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 96px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Radio cards (delivery/payment selection) */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.radio-card {
  position: relative;
  padding: 18px 18px 18px 50px;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
}
.radio-card:hover { border-color: var(--text-dim); }
.radio-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.radio-card .radio-dot {
  position: absolute;
  top: 20px; left: 18px;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  transition: all 0.12s ease;
}
.radio-card.is-selected,
.radio-card input[type="radio"]:checked ~ * {
  border-color: var(--accent);
  /*background: var(--accent-soft);*/
}
.radio-card.is-selected .radio-dot {
  border-color: var(--accent)!important;
  background: var(--accent)!important;
  box-shadow: inset 0 0 0 4px var(--bg);
}
.radio-card-title {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
	background: #0000!important;
}
.radio-card-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}

/* Custom checkbox */
.checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; padding: 8px 0;
}
.checkbox input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.checkbox-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  margin-top: 1px;
  display: grid; place-items: center;
  transition: all 0.12s ease;
}
.checkbox-mark svg {
  width: 12px; height: 12px;
  color: #0A0A0A; opacity: 0;
  transition: opacity 0.12s ease;
}
.checkbox.is-checked .checkbox-mark,
.checkbox input:checked + .checkbox-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox.is-checked .checkbox-mark svg { opacity: 1; }
.checkbox-label {
  font-size: 13px; color: var(--text); line-height: 1.5;
}
.checkbox-label a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
}

/* Inline yes/no radios (onboarding) */
.yn-question {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.yn-question:last-child { margin-bottom: 0; }
.yn-question-text {
  font-size: 14px; color: var(--text);
  margin-bottom: 14px; font-weight: 500; line-height: 1.5;
}
.yn-radio-group { display: inline-flex; gap: 8px; }
.yn-option {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--bg-surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600; font-size: 13px;
  color: var(--text-muted);
  transition: all 0.12s ease;
}
.yn-option:hover { border-color: var(--text-dim); color: var(--text); }
.yn-option.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.yn-option.is-selected.is-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.yn-radio-dot {
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  position: relative;
}
.yn-option.is-selected .yn-radio-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: currentColor;
  border-radius: 999px;
}
.conditional-reveal {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}
.conditional-reveal .form-label { margin-bottom: 6px; color: var(--warning); }

.form-row-first, .form-row-last{
	width:100%!important;
}
@media(min-width: 690px){
	.form-row-first, .form-row-last{
	width:100%!important;
}
}

/* Toggle switch */
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.toggle-info-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.toggle-info-desc { font-size: 12px; color: var(--text-muted); }
.toggle {
  position: relative;
  width: 42px; height: 24px;
  background: var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #FFFFFF;
  border-radius: 999px;
  transition: transform 0.15s ease;
}
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { transform: translateX(18px); }

/* ------------------------------------------------------------
   09 · Progress strip (cart / inquiry / inquiry-received)
   ------------------------------------------------------------ */
.progress-strip {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
  width: fit-content;
}
.progress-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
}
.progress-step .step-num {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.progress-step.is-done { color: var(--success); }
.progress-step.is-done .step-num {
  background: var(--success);
  border-color: var(--success);
  color: #0A0A0A;
}
.progress-step.is-done .step-num svg { width: 12px; height: 12px; }
.progress-step.is-current {
  background: var(--accent);
  color: #0A0A0A;
}
.progress-step.is-current .step-num {
  background: rgba(10, 10, 10, 0.15);
  border-color: rgba(10, 10, 10, 0.3);
  color: #0A0A0A;
}

/* ------------------------------------------------------------
   10 · DASHBOARD
   ------------------------------------------------------------ */
.account-header {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.account-header::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.account-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.account-kicker .id {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
}
.account-company {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
  position: relative;
}
.account-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
}
.account-meta-item { display: flex; align-items: center; gap: 8px; }
.account-meta-item strong { color: var(--text); font-weight: 600; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
	margin-top: 0!important;
  margin-bottom: 36px!important;
}
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color 0.15s ease;
  min-width: 0;
  overflow: hidden;
}
.stat-card:hover { border-color: var(--line-strong); }
.stat-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.stat-label .stat-icon { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.stat-value {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
.stat-value .stat-unit {
  font-size: 14px; font-weight: 500;
  color: var(--text-muted); margin-left: 4px;
}
.stat-value.is-accent { color: var(--accent); }
.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.stat-sub .up { color: var(--success); font-weight: 600; }

/* ------------------------------------------------------------
   11 · ORDERS table (dashboard recent + orders list)
   ------------------------------------------------------------ */
.orders-section, .orders-surface, .documents-section { 
	margin-bottom: 36px!important;
	margin-top: 0!important;
}

.orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.orders-table thead { background: var(--bg-surface-2); }
.orders-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.orders-table th.sortable {
  cursor: pointer; user-select: none;
}
.orders-table th.sortable:hover { color: var(--text); }
.orders-table th.sortable.is-active { color: var(--accent); }
.orders-table th.sortable svg { width: 10px; height: 10px; vertical-align: middle; margin-left: 2px; }
.orders-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
  color: var(--text);
}

.orders-table td span.woocommerce-Price-amount.amount{
    margin-bottom: 0;
     font-size: 14px;
}
.orders-table tbody tr:last-child td { border-bottom: none; }
.orders-table tbody tr { transition: background-color 0.12s ease; cursor: pointer; }
.orders-table tbody tr:hover td { background: var(--bg-hover); }

.order-id {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.order-id a:hover { color: var(--accent); }
.order-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
}
.action-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.action-link:hover { color: var(--accent-bright); }
.action-link svg { width: 16px; height: 16px; }

/* Composition column (orders list) */
.composition-main {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 500;
}
.composition-sub {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.composition-sub .weight {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 500;
}

/* ------------------------------------------------------------
   12 · VIEW ORDER
   ------------------------------------------------------------ */
.order-header {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.order-header::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.order-kicker {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.order-title-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  position: relative;
}
.order-number {
  font-family: var(--font-mono);
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.order-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
}
.order-meta-item strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.order-total-display { text-align: right; position: relative; }
.order-total-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.order-total-value {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Order timeline (horizontal) */
.timeline {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px 28px;
  margin-bottom: 32px;
}
.timeline-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.timeline-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.timeline-step {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px; left: 50%;
  width: 100%; height: 2px;
  background: var(--line);
  z-index: 0;
}
.timeline-step.is-done:not(:last-child)::after,
.timeline-step.is-current:not(:last-child)::after {
  background: var(--accent);
}
.timeline-dot {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 2px solid var(--line);
  display: grid; place-items: center;
  position: relative; z-index: 1;
  margin-bottom: 12px;
}
.timeline-dot svg { width: 14px; height: 14px; color: var(--text-dim); }
.timeline-step.is-done .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.timeline-step.is-done .timeline-dot svg,
.timeline-step.is-current .timeline-dot svg { color: #0A0A0A; }
.timeline-step.is-current .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}
.timeline-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.3;
}
.timeline-step.is-done .timeline-label,
.timeline-step.is-current .timeline-label { color: var(--text); }
.timeline-date {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.timeline-step.is-current .timeline-date {
  color: var(--accent); font-weight: 600;
}

/* Items section */
.items-section { margin-bottom: 32px; }
.item-row {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  align-items: start;
}
.item-row:last-child { border-bottom: none; }
.item-image {
  width: 140px; height: 140px;
  background: #FFFFFF00;
  border: 0px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  padding: 0px;
  overflow: hidden;
}
.item-image img, .item-image svg {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}
.item-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.item-name {
  font-size: 16px; font-weight: 700;
  color: var(--text);
}
.item-refiner {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
  padding: 3px 8px;
  background: var(--accent-soft);
  border-radius: 4px;
}
.item-spec {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.item-spec strong { color: var(--text); font-weight: 600; }
.item-price {
  text-align: right;
  min-width: 140px;
}
.item-qty {
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.item-qty strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
}
.item-subtotal {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.item-unit-price {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Info cards 3-up */
.info-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.info-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-card-label svg {
  width: 14px; height: 14px;
  color: var(--accent); flex-shrink: 0;
}
.info-card-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}
.info-card-body strong { font-weight: 600; color: var(--text); }
.info-card-body .muted { color: var(--text-muted); font-size: 13px; }
.info-card-body .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.info-card-divider {
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}

/* Pricing breakdown */
.pricing-table {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 32px;
}
.pricing-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
}
.pricing-row .label { color: var(--text-muted); }
.pricing-row .label .sub {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}
.pricing-row .value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.pricing-row.is-discount .value { color: var(--success); }
.pricing-row.is-total {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 18px;
  font-size: 18px;
  font-weight: 700;
}
.pricing-row.is-total .label {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  align-self: center;
}
.pricing-row.is-total .value {
  font-size: 24px;
  color: var(--accent);
  font-weight: 700;
}

/* Actions bar (view order) */
.actions-bar {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.actions-bar-text {
  font-size: 14px;
  color: var(--text-muted);
}
.actions-bar-text strong { color: var(--text); }
.actions-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   13 · DOCUMENTS list
   ------------------------------------------------------------ */
.onboarding-banner {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.banner-content { display: flex; align-items: center; gap: 14px; }
.banner-icon {
  width: 36px; height: 36px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.banner-icon svg { width: 18px; height: 18px; }
.banner-text { font-size: 14px; }
.banner-text strong { color: var(--text); font-weight: 600; }
.banner-text .muted { color: var(--text-muted); }

.upload-zone {
  background: var(--bg-surface);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: center;
  margin-bottom: 24px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone-icon {
  width: 48px; height: 48px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.upload-zone-icon svg { width: 22px; height: 22px; }
.upload-zone-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.upload-zone-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.upload-zone-types {
  display: inline-flex; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  padding: 5px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Toolbar */
.toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.tab:hover { border-color: var(--line-strong); color: var(--text); }
.tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.tab .tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab-count { background: rgba(10, 10, 10, 0.2); }

.search-wrap { position: relative; width: 240px; }
.search-wrap svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-dim);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Documents table */
.docs-surface {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.docs-table { width: 100%; }
.docs-table-head {
  display: grid;
  grid-template-columns: 0.2fr 3fr 2fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.docs-table-head .sortable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.docs-table-head .sortable:hover { color: var(--text); }
.docs-table-head .sortable.is-active { color: var(--accent); }
.docs-table-head .sortable svg { width: 10px; height: 10px; }

.doc-row {
  display: grid;
  grid-template-columns: 0.2fr 3fr 2fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.12s ease;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-hover); }
.doc-icon {
  width: 36px; height: 36px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.doc-icon svg { width: 18px; height: 18px; }
.doc-info { min-width: 0; }
.doc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.doc-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
  width: fit-content;
}
.doc-linked {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.doc-linked a:hover { color: var(--accent); }
.doc-linked.is-empty { color: var(--text-dim); font-family: var(--font); font-weight: 500; }
.doc-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.doc-download {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: all 0.12s ease;
  background: transparent;
  justify-self: end;
  cursor: pointer;
}
.doc-download:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.doc-download.is-disabled { opacity: 0.4; pointer-events: none; }
.doc-download svg { width: 16px; height: 16px; }
.doc-upload-bar {
  padding: 16px 20px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.btn-upload:hover { background: var(--accent-bright); color: #0A0A0A; }
.btn-upload svg { width: 14px; height: 14px; }

/* Documents list (dashboard preview) */
.documents-list { display: flex; flex-direction: column; }

/* ------------------------------------------------------------
   14 · CART / Inquiry basket
   ------------------------------------------------------------ */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.cart-items {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.items-head {
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.items-head-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.items-head-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.items-head-meta strong { color: var(--text); font-weight: 600; }
.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto auto 32px;
  gap: 20px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.12s ease;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--bg-hover); }
.cart-item .item-image {
  width: 90px; height: 90px;
}
.cart-item .item-info { min-width: 0; }
.cart-item .item-weight {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.cart-item .item-subtotal {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cart-item .item-subtotal .approx {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  margin-right: 4px;
}

/* Quantity controls */
.qty-control {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.qty-btn {
  background: transparent;
  color: var(--text-muted);
  width: 34px; height: 38px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
  display: grid; place-items: center;
}
.qty-btn:hover {
  color: var(--accent);
  background: var(--bg-hover);
}
.qty-btn svg { width: 12px; height: 12px; }
.qty-value {
  width: 44px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text);
  line-height: 38px;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  outline: none;
}

/* Remove button */
.remove-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.12s ease;
}
.remove-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.remove-btn svg { width: 14px; height: 14px; }

.items-footer {
  padding: 16px 28px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  gap: 16px;
  flex-wrap: wrap;
}
.items-footer a {
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.items-footer a:hover {
  color: var(--danger);
  border-bottom-color: var(--danger);
}
.spot-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.spot-live .spot-value { color: var(--accent); font-weight: 600; }

/* Summary sidebar (cart / inquiry-form) */
.summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 24px;
}
.summary-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface-2);
}
.summary-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.summary-body { padding: 8px 24px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row .label { color: var(--text-muted); }
.summary-row .value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-row .value .live-indicator {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--success);
  margin-right: 6px;
  vertical-align: middle;
}
.summary-total {
  padding: 18px 24px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary-total .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text);
}
.summary-total .value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.summary-cta { padding: 18px 24px; }
.btn-proceed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  text-decoration: none;
  box-shadow: 0 6px 24px var(--accent-glow);
}
.btn-proceed:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px var(--accent-glow);
  color: #0A0A0A;
}
.btn-proceed svg { width: 16px; height: 16px; }
.summary-disclaimer {
  padding: 14px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  display: flex;
  gap: 8px;
}
.summary-disclaimer svg {
  width: 14px; height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Summary items (inquiry-form sidebar) */
.summary-items { padding: 8px 0; }
.summary-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 14px 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.summary-item:last-child { border-bottom: none; }
.summary-item-img {
  width: 48px; height: 48px;
  background: #FFFFFF;
  border-radius: 6px;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 4px;
}
.summary-item-img svg, .summary-item-img img {
  width: 100%; height: 100%;
}
.summary-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.summary-item-meta {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.summary-item-qty {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-totals {
  padding: 18px 24px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--line);
}
.summary-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.summary-total-row .value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-total-row.is-main {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--line-strong);
}
.summary-total-row.is-main .label {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  align-self: center;
}
.summary-total-row.is-main .value {
  font-size: 22px;
  color: var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------------------
   15 · INQUIRY FORM (B2B checkout)
   ------------------------------------------------------------ */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.form-section {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 18px;
}
.form-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.form-section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.form-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.form-section-desc {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.55;
}
.submit-section {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.submit-note {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.5;
}
.submit-note strong { color: var(--text); }

/* ------------------------------------------------------------
   16 · INQUIRY RECEIVED (Thank you)
   ------------------------------------------------------------ */
.confirmation-hero {
  text-align: center;
  padding: 48px 32px 40px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.confirmation-hero::before {
  content: '';
  position: absolute;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
}
.success-icon {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto 24px;
  background: var(--accent);
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: 0 0 40px var(--accent-glow);
}
.success-icon svg {
  width: 40px; height: 40px;
  color: #0A0A0A;
}
.confirmation-title {
  position: relative;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.confirmation-lead {
  position: relative;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 28px;
}
.inquiry-id-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.inquiry-id-block { text-align: left; }
.inquiry-id-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.inquiry-id-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.inquiry-id-block.is-meta .inquiry-id-value {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.inquiry-id-divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}

/* Steps list (vertical) */
.steps-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.steps-list::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px; bottom: 16px;
  width: 2px;
  background: var(--line);
}
.step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  padding: 14px 0;
  position: relative;
  align-items: start;
}
.step-marker {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 2px solid var(--line);
  display: grid; place-items: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.step-marker svg { width: 14px; height: 14px; }
.step.is-done .step-marker {
  background: var(--success);
  border-color: var(--success);
  color: #0A0A0A;
}
.step.is-current .step-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.step-content { padding-top: 5px; }
.step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.step.is-future .step-title { color: var(--text-muted); font-weight: 600; }
.step-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.step-eta {
  padding-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.step.is-done .step-eta { color: var(--success); }
.step.is-current .step-eta { color: var(--accent); }

/* Recap grid */
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.recap-cell {
  padding: 16px 20px;
  background: var(--bg);
}
.recap-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.recap-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.45;
}
.recap-value .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.recap-value strong { font-weight: 700; }
.recap-value .sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.recap-value.is-accent { color: var(--accent); font-weight: 700; }

/* Manager box */
.manager-box {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.manager-avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #FFFFFF;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.manager-info { flex: 1; min-width: 0; }
.manager-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.manager-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.manager-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.manager-meta a { color: var(--accent); }
.manager-meta a:hover { color: var(--accent-bright); }

/* Email note */
.email-note {
  background: var(--info-bg);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.email-note svg {
  width: 18px; height: 18px;
  color: var(--info);
  flex-shrink: 0;
  margin-top: 1px;
}
.email-note strong { color: var(--text); }
.email-note .muted { color: var(--text-muted); }

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   17 · PRICE FIXATION
   ------------------------------------------------------------ */
.timer-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.timer-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.timer-info-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.timer-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--warning);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.timer-progress {
  flex: 1 1 280px;
  min-width: 220px;
}
.progress-track {
  height: 6px;
  background: var(--bg-surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}
.progress-fill {
  height: 100%;
  background: var(--warning);
  border-radius: 999px;
  transition: width 1s linear;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 6px;
}

/* Live price hero */
.spot-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 36px 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.spot-card::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  pointer-events: none;
}
.spot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  position: relative;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--success);
  padding: 5px 11px;
  background: var(--success-bg);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 999px;
}
.spot-updated {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.spot-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  position: relative;
}
.spot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.spot-value {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}
.spot-value .unit {
  font-size: 22px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 500;
}
.spot-movement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.spot-movement svg { width: 14px; height: 14px; }
.spot-movement .since {
  color: var(--text-dim);
  font-family: var(--font);
  font-weight: 400;
  margin-left: 4px;
}
.spark-chart {
  position: relative;
  width: 240px; height: 90px;
}
.spark-chart svg {
  width: 100%; height: 100%;
  display: block;
}
.spark-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 8px;
  padding: 0 4px;
}
.spot-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 24px;
  position: relative;
}
.spot-stat {
  padding: 14px 18px;
  background: var(--bg);
}
.spot-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.spot-stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Calculation card */
.calc-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 18px;
}
.calc-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 14px;
}
.calc-row .label { color: var(--text-muted); }
.calc-row .label .sub {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.calc-row .value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.calc-row.is-total {
  border-top: 1px solid var(--line-strong);
  margin-top: 10px;
  padding-top: 18px;
}
.calc-row.is-total .label {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  align-self: center;
}
.calc-row.is-total .value {
  font-size: 26px;
  color: var(--accent);
  font-weight: 700;
}
.calc-row.is-paid {
  font-size: 13px;
  color: var(--text-muted);
}
.calc-row.is-paid .value {
  color: var(--text-muted);
  font-weight: 500;
}
.diff-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
}
.diff-pill.is-refund { background: var(--success-bg); color: var(--success); }
.diff-pill.is-additional { background: var(--warning-bg); color: var(--warning); }

/* Fix action */
.fix-action {
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.fix-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
}
.fix-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 44px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 32px var(--accent-glow);
  text-decoration: none;
}
.fix-btn:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px var(--accent-glow);
  color: #0A0A0A;
}
.fix-btn svg { width: 18px; height: 18px; }
.fix-btn .lock-rate {
  font-family: var(--font-mono);
  font-size: 16px;
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1.5px solid rgba(10, 10, 10, 0.25);
  font-variant-numeric: tabular-nums;
}
.fix-hint {
  position: relative;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.help-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
  gap: 16px;
  flex-wrap: wrap;
}
.help-row a { color: var(--accent); font-weight: 600; }
.help-row a:hover { color: var(--accent-bright); }

/* ------------------------------------------------------------
   18 · ONBOARDING wizard
   ------------------------------------------------------------ */
.stepper {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.stepper-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 20px;
  position: relative;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px; left: 50%;
  width: 100%; height: 2px;
  background: var(--line);
  z-index: 0;
}
.stepper-step.is-done:not(:last-child)::after,
.stepper-step.is-current:not(:last-child)::after {
  background: var(--accent);
}
.stepper-dot {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  transition: all 0.15s ease;
}
.stepper-dot svg { width: 13px; height: 13px; }
.stepper-step.is-done .stepper-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.stepper-step.is-current .stepper-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.stepper-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.stepper-step.is-done .stepper-label,
.stepper-step.is-current .stepper-label { color: var(--text); }
.stepper-step.is-current .stepper-label { color: var(--accent); }

.step-container {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-bottom: 18px;
}
.step-head {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.step-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.step-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.step-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.6;
}
.step-desc a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
}

.subsection { margin-bottom: 36px; }
.subsection:last-child { margin-bottom: 0; }
.subsection-head { margin-bottom: 16px; }
.subsection-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.subsection-title .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.subsection-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* UBO repeating rows */
.ubo-row {
    padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  align-items: end;
  position: relative;
}
.ubo-row .ubo-row-primary {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 110px 36px;
  gap: 12px;
}
.ubo-company-fields{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.ubo-company-fields div{
    width: 100%;
}
.ubo-row-header {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--bg-surface);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.ubo-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}
.ubo-input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ubo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.ubo-input.is-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ubo-remove {
  width: 36px; height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.12s ease;
}
.ubo-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.ubo-remove svg { width: 14px; height: 14px; }
.ubo-share-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 16px;
  padding: 10px 16px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.ubo-share-total .value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ubo-share-total.is-valid .value { color: var(--success); }

.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-top: 4px;
}
.add-row-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
  background: var(--accent-soft);
}
.add-row-btn svg { width: 14px; height: 14px; }

/* Action bar (onboarding) */
.action-bar {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.action-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.action-bar-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.action-bar-meta strong { color: var(--text-muted); }
.action-bar-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   19 · Pagination
   ------------------------------------------------------------ */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}
.pagination-info { color: var(--text-dim); }
.pagination-controls { display: flex; gap: 4px; }
.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   20 · Responsive
   ------------------------------------------------------------ */

/* Layout: switch to single column to give content full width */
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .woocommerce-account .woocommerce, .woocommerce-page .woocommerce {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 18px;
  }
  .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-MyAccount-navigation ul { 
/* 	  flex-direction: row;  */
	  flex-wrap: wrap; 
	}
  .woocommerce-MyAccount-navigation li { flex: 1 1 auto; }
  .woocommerce-MyAccount-navigation-link--customer-logout,
  .woocommerce-MyAccount-navigation li.logout {
    border-top: none; margin-top: 0; padding-top: 0;
  }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-grid .info-card:last-child { grid-column: span 2; }
  .checkout-grid, .cart-grid { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .toolbar { grid-template-columns: 1fr; }
  .search-wrap { width: 100%; }
  .orders-table th, .orders-table td { padding: 14px 14px; }
}
.orders-table th{
    color:#fff;
}
@media (max-width: 900px) {
  .stepper { padding: 18px; overflow-x: auto; }
  .stepper-track { min-width: 640px; }
  .timeline { padding: 24px 16px; overflow-x: auto; }
  .timeline-track { min-width: 540px; }
  .step-container { padding: 28px 24px; }
  .ubo-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ubo-row .ubo-remove { grid-column: 2; justify-self: end; }

 

  /* Documents grid columns hide */
  .docs-table-head, .doc-row {
    grid-template-columns: 36px 1fr 110px 40px;
  }
  .col-linked, .col-date,
  .doc-linked, .doc-date { display: none; }

  /* Items / item-row */
  .item-row {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .item-image { width: 100%; height: 140px; }
  .item-price { text-align: left; }

  /* Info cards single col */
  .info-grid { grid-template-columns: 1fr; }
  .info-grid .info-card:last-child { grid-column: auto; }
}
@media (max-width: 720px) {
  .woocommerce-account .woocommerce, .woocommerce-page .woocommerce { padding: 16px 0; }
  .page-title { font-size: 24px; }
  .step-container { padding: 22px 18px; }
  .ubo-row { grid-template-columns: 1fr; padding: 18px 16px 16px; }
  .form-row { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .progress-step .step-text { display: none; }
  .action-bar { flex-direction: column; align-items: stretch; }
  .action-bar-left, .action-bar-right { justify-content: center; }
  .action-bar .btn { flex: 1; }
  .actions-bar { flex-direction: column; align-items: stretch; }
  .actions .btn { flex: 1 1 auto; }

  /* Cart item mobile */
  .cart-item {
    grid-template-columns: 70px 1fr 32px;
    grid-template-areas:
      "image info remove"
      "image qty price";
    gap: 14px 16px;
    padding: 18px 20px;
  }
  .cart-item .item-image { grid-area: image; width: 70px; height: 70px; }
  .cart-item .item-info { grid-area: info; }
  .qty-control { grid-area: qty; align-self: end; }
  .cart-item .item-price { grid-area: price; align-self: end; text-align: right; }
  .remove-btn { grid-area: remove; align-self: start; }

  /* Spot card mobile */
  .spot-card { padding: 24px 20px; }
  .spot-main { grid-template-columns: 1fr; }
  .spark-chart { width: 100%; }
  .spot-value { font-size: 44px; }
  .spot-value .unit { font-size: 16px; }
  .spot-footer { grid-template-columns: 1fr; }
  .fix-btn {
    width: 100%;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    font-size: 15px;
  }
  .fix-btn .lock-rate {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    padding-top: 6px;
    border-top: 1.5px solid rgba(10, 10, 10, 0.25);
    width: 100%;
    text-align: center;
  }

  /* Doc row mobile */
  .doc-row { grid-template-columns: 36px 1fr auto; }
  .doc-type { display: none; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.form-row:before, .form-row:after{
	display:none!important;
}

:is(.woocommerce-info,.woocommerce-error,.woocommerce-message,.woocommerce-thankyou-order-received){
	background: var(--bg-surface)!important;
	    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.woocommerce-MyAccount-navigation ul li:hover, .woocommerce-MyAccount-navigation ul li:hover a, .woocommerce-MyAccount-navigation ul li a:hover{
	    background: var(--bg-hover)!important;
    color: var(--text)!important;
}
.woocommerce-MyAccount-navigation ul li.is-active a{
	background: linear-gradient(99.16deg, #F9B531 0.11%, #FFD981 50%, #F5C422 99.89%);
    box-shadow: 0px 4px 56.3px 0px #FFFFFF40 inset;
}

.woocommerce-MyAccount-content section.timeline, 
.woocommerce-MyAccount-content section.section-card.items-section,
.woocommerce-MyAccount-content section.info-grid, 
.woocommerce-MyAccount-content section.pricing-table{ 	
	margin-top:0!important;
	    margin-bottom: 32px!important;
}

.review-edit{
	display: flex;
	align-items: center;
	gap:10px;
}
.review-edit svg{
	width:2rem;
	height: 2rem;
}
	.transactions-table tr:last-child td{
	min-width:120px;
	width:100%;
}

:is(.woocommerce-info,.woocommerce-error,.woocommerce-message,.woocommerce-thankyou-order-received):before{
	position: static!important;
	margin-right:6px;
}
.woocommerce-page :is(.woocommerce-info,.woocommerce-error,.woocommerce-message,.woocommerce-thankyou-order-received){
    display:flex!important;
    padding: 20px!important;
    gap:10px;
}
.woocommerce-error{
    background: rgba(218, 0, 28, 0.25)!important;
}
.woocommerce-error span.woocommerce-Price-amount.amount{
    margin-bottom: 0!important;
    font-size: 16px!important;
}
.woocommerce-error:is(.woocommerce-info,.woocommerce-error,.woocommerce-message,.woocommerce-thankyou-order-received):before{
    display:none!important;
}
.transactions-table{
	display:block;
	overflow:auto!important;
}

#intermediary-fields{
	margin-top: 20px;
}

.woocommerce.ct-woo-account > div:nth-child(1){
    position: sticky;
    top: 50px;
}
@media(max-width: 1024px){
    .woocommerce.ct-woo-account > div:nth-child(1){
        position: relative;
    }
}

.woocommerce-MyAccount-content .woocommerce-message p, .woocommerce-MyAccount-content .woocommerce-info p{
	margin-bottom:0;
	margin-left: 20px;
}

.woocommerce-account .woocommerce.ct-woo-unauthorized, .woocommerce-page .woocommerce.ct-woo-unauthorized {
    grid-template-columns: 1fr!important;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-content{
	margin-top:0px;
}
@media(max-width: 768px){
	.woocommerce-MyAccount-content{
	margin-top:0px;
}
}

#ga-contact-list .contact-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
    position: relative;
}
.contact-remove{
    background: #0000;   
    position: absolute;
    top: 0;
    right: 0;
}
.contact-remove svg{
    width: 2rem;
    height: 2rem;
    stroke: #fff;
}

.ubo-share-total.no-valid .value{
    color: red;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-window {
    background: var(--bg-surface);
    max-width: 500px;
    width: 90%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
    color: #fff;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.woocommerce-MyAccount-navigation-link--shop a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Иконка для Gold Balance (золотой слиток) */
.woocommerce-MyAccount-navigation-link--gold-balance a::before, .woocommerce-MyAccount-navigation-link--shop a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Ctext x='12' y='16' font-family='Arial' font-size='10' text-anchor='middle' fill='white' stroke='white' stroke-width='0'%3EAu%3C/text%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Ctext x='12' y='16' font-family='Arial' font-size='10' text-anchor='middle' fill='white' stroke='white' stroke-width='0'%3EAu%3C/text%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}


:is(.woocommerce-info.visible,.woocommerce-error.visible,.woocommerce-message.visible,.woocommerce-thankyou-order-received.visible) {
    display: flex!important;
}

.woocommerce-MyAccount-content .cart-empty.woocommerce-info{
    display:flex!important;
}

.contact-wrapper .contact-item, .ubo-wrapper .ubo-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* UBO accordion cards */
.ubo-card {
    border: 1px solid var(--line-2, #3F3F46);
    border-radius: var(--radius, 12px);
    background: var(--bg-surface-2, #1C1C1C);
    overflow: hidden;
    margin-bottom: 12px;
}
.ubo-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    cursor: pointer;
    transition: background 0.12s;
}
.ubo-head:hover {
    background: var(--bg-hover, #202020);
}
.ubo-idx {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-soft, rgba(212,175,55,0.08));
    color: var(--accent, #D4AF37);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.ubo-sum {
    flex: 1;
    min-width: 0;
}
.ubo-name {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ubo-name .ph {
    color: var(--text-dim, #71717A);
    font-weight: 500;
}
.ubo-meta {
    font-size: 12.5px;
    color: var(--text-muted, #A1A1AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ubo-share {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    color: var(--accent, #D4AF37);
    font-size: 15px;
    flex-shrink: 0;
}
.ubo-chev {
    color: var(--text-dim, #71717A);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ubo-chev svg {
    width: 18px;
    height: 18px;
    display: block;
}
.ubo-card.open .ubo-chev {
    transform: rotate(90deg);
}
.ubo-del {
    color: var(--text-dim, #71717A);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.ubo-del:hover {
    color: var(--danger, #F87171);
    background: var(--danger-bg, rgba(248,113,113,0.12));
}
.ubo-del svg {
    width: 16px;
    height: 16px;
}
.ubo-body {
    padding: 4px 16px 18px;
    display: none;
}
.ubo-card.open .ubo-body {
    display: block;
}
.sub {
    margin-top: 18px;
}
.sub-l {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #71717A);
    margin-bottom: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line, #262626);
}
.sub.first .sub-l {
    border-top: none;
    padding-top: 2px;
}
.fgrid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.orders-table tbody tr:hover pre, .orders-table tbody tr:hover code, .orders-table tbody tr:hover samp, .orders-table tbody tr:hover kbd, .orders-table tbody tr pre, .orders-table tbody tr code, .orders-table tbody tr samp, .orders-table tbody tr kbd{
    background: #0000;
    font-size: 14px;
    --theme-font-size: 14px;
}
.field label {
    /*display: block;*/
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #A1A1AA);
    margin-bottom: 6px;
}
.field label .req {
    color: var(--accent, #D4AF37);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    /*padding: 11px 13px;*/
    background: var(--bg, #0A0A0A);
    border: 1px solid var(--line-2, #3F3F46);
    border-radius: var(--radius-sm, 8px);
    color: var(--text, #FFFFFF);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea {
    resize: vertical;
    min-height: 72px;
}
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717A' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-dim, #71717A);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    /*outline: none;*/
    border-color: var(--accent, #D4AF37);
    /*box-shadow: 0 0 0 3px var(--accent-soft, rgba(212,175,55,0.08));*/
}
.field.full {
    grid-column: 1 / -1;
}
.add-ubo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px dashed var(--line-2, #3F3F46);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted, #A1A1AA);
    transition: 0.12s;
    margin-top: 4px;
    background: transparent;
    cursor: pointer;
}
.add-ubo:hover {
    border-color: var(--accent, #D4AF37);
    color: var(--accent, #D4AF37);
    background: var(--accent-soft, rgba(212,175,55,0.08));
}
.add-ubo svg {
    width: 16px;
    height: 16px;
}
.share-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid var(--line, #262626);
    border-radius: var(--radius, 12px);
    margin: 14px 0 4px;
    background: var(--bg-surface, #141414);
}
.share-text {
    font-size: 13px;
    color: var(--text-muted, #A1A1AA);
}
.share-text small {
    display: block;
    font-size: 12px;
    color: var(--text-dim, #71717A);
    margin-top: 2px;
}
.share-val {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 18px;
    color: var(--accent, #D4AF37);
}
.share-bar.over {
    border-color: rgba(248,113,113,0.5);
    background: var(--danger-bg, rgba(248,113,113,0.12));
}
.share-bar.over .share-val,
.share-bar.over .warn {
    color: var(--danger, #F87171);
}

/* List items for contacts and UBOs */
.ga-list-item {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ga-list-item:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.ga-list-item-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    justify-content: space-between;
}
.ga-list-item-name {
    font-weight: 600;
    color: var(--text);
}
.ga-list-item-role {
    font-size: 13px;
    color: var(--text-muted);
    flex: 1;
}
.ga-list-item-chevron {
    color: var(--accent);
    font-size: 20px;
    font-weight: 300;
    opacity: 0.6;
    transition: transform 0.15s;
}
.ga-list-item:hover .ga-list-item-chevron {
    opacity: 1;
    transform: translateX(4px);
}

/* Modals */
.ga-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.ga-modal {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.7);
}
.ga-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}
.ga-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.ga-modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}
.ga-modal-close:hover {
    color: var(--text);
}
.ga-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: 60vh;
}
.ga-modal-body hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 12px 0;
}
.ga-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    background: var(--bg-surface-2);
}
.ga-modal-footer .btn {
    margin: 0;
}

/* Списки контактов и UBO — flex, gap 20px */
.ga-contact-list,
.ga-ubo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 4px 0;
}

.ga-list-item {
    flex: 0 1 auto;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: var(--radius-sm, 8px);
    padding: 6px 14px 6px 10px;
    background: var(--bg-surface-2, #1C1C1C);
    border: 1px solid var(--line, #262626);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.c-product-finder__form{
      border-radius: var(--radius)!important;
}

.ga-list-item:hover {
    background: var(--bg-hover, #202020);
    border-color: var(--line-strong, #3F3F46);
}

.ga-list-item-summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-list-item-name {
    font-weight: 600;
    color: var(--text);
}

.ga-list-item-role {
    font-size: 13px;
    color: var(--text-muted);
}

.ga-list-item-chevron {
    color: var(--accent, #D4AF37);
    font-size: 18px;
    line-height: 1;
    margin-left: 4px;
}
.review-card-body.flex-list{
    display: flex;
}
.bar-row input[type="checkbox"]{
    transition: 03s ease;
}

/* ===== КАСТОМНЫЙ SELECT ===== */
.ga-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 180px;
    cursor: pointer;
}

.ga-select-wrapper .ga-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-surface, #f5f5f5);
    border: 1px solid var(--line, #ddd);
    border-radius: var(--radius-sm, 8px);
    font-size: 14px;
    color: var(--text, #333);
    transition: all 0.2s ease;
    user-select: none;
    min-height: 48px;
    gap: 10px;
    box-sizing: border-box;
}

.ga-select-wrapper .ga-select-trigger:hover {
    border-color: var(--accent, #E17335);
}

.ga-select-wrapper .ga-select-trigger.active {
    border-color: var(--accent, #E17335);
    box-shadow: 0 0 0 3px rgba(225, 115, 53, 0.15);
}

.ga-select-wrapper .ga-select-trigger .ga-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, #333);
}

.ga-select-wrapper .ga-select-trigger .ga-select-placeholder {
    color: var(--text-muted, #999);
}

.ga-select-wrapper .ga-select-trigger .ga-select-arrow {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.ga-select-wrapper .ga-select-trigger .ga-select-arrow svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted, #888);
    stroke-width: 2;
}

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

.ga-select-wrapper .ga-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--line, #ddd);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    padding: 6px 0;
    box-sizing: border-box;
}

.ga-select-wrapper .ga-select-dropdown.show {
    display: block;
    animation: gaDropdownFadeIn 0.18s ease;
}

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

.ga-select-wrapper .ga-select-dropdown .ga-select-option {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text, #333);
    transition: background 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ga-select-wrapper .ga-select-dropdown .ga-select-option:hover {
    background: var(--hover, #f0f0f0);
}

.ga-select-wrapper .ga-select-dropdown .ga-select-option.selected {
 background:linear-gradient(99.16deg, #F9B531 0.11%, #FFD981 50%, #F5C422 99.89%);
        color:#000;
    font-weight: 600;
}

.ga-select-wrapper .ga-select-dropdown .ga-select-option .ga-option-check {
    display: none;
    margin-right: 8px;
    color: var(--accent, #E17335);
}

.ga-select-wrapper .ga-select-dropdown .ga-select-option.selected .ga-option-check {
    display: none;
}

.ga-select-wrapper .ga-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.ga-select-wrapper .ga-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.ga-select-wrapper .ga-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--line, #ddd);
    border-radius: 3px;
}

/* disabled state */
.ga-select-wrapper.disabled .ga-select-trigger {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.ga-select-wrapper.disabled .ga-select-trigger:hover {
    border-color: var(--line, #ddd);
}

/* валидация */
.ga-select-wrapper.error .ga-select-trigger {
    border-color: var(--danger, #e74c3c);
}

.ga-select-wrapper.error .ga-select-trigger.active {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.ga-select-wrapper .ga-select-error {
    color: var(--danger, #e74c3c);
    font-size: 13px;
    margin-top: 4px;
    display: none;
}

.ga-select-wrapper.error .ga-select-error {
    display: block;
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .ga-select-wrapper .ga-select-trigger {
        background: var(--bg-surface, #1a1a1a);
        border-color: var(--line, #333);
        color: var(--text, #eee);
    }
    .ga-select-wrapper .ga-select-dropdown {
        background: var(--bg-surface, #1a1a1a);
        border-color: var(--line, #333);
    }
    .ga-select-wrapper .ga-select-dropdown .ga-select-option {
        color: var(--text, #eee);
    }
    .ga-select-wrapper .ga-select-dropdown .ga-select-option:hover {
         background:linear-gradient(99.16deg, #F9B531 0.11%, #FFD981 50%, #F5C422 99.89%);
        color:#000;
    }
    .ga-select-wrapper .ga-select-dropdown .ga-select-option.selected {
         background:linear-gradient(99.16deg, #F9B531 0.11%, #FFD981 50%, #F5C422 99.89%);
        color:#000;
    }
    .ga-select-wrapper .ga-select-trigger .ga-select-value {
        color: var(--text, #eee);
    }
}

/* Мобильная адаптация */
@media (max-width: 600px) {
    .ga-select-wrapper .ga-select-trigger {
        padding: 8px 14px;
        min-height: 44px;
        font-size: 13px;
    }
    .ga-select-wrapper .ga-select-dropdown .ga-select-option {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Стили для wrapper в форме */
.form-row .ga-select-wrapper,
.fgrid .ga-select-wrapper {
    width: 100%;
}

.yn-radio-group .ga-select-wrapper {
    min-width: 120px;
}

/* Стили для селектов внутри UBO */
.ubo-body .ga-select-wrapper .ga-select-trigger {
    padding: 12px 14px;
    min-height: 38px;
    font-size: 13px;
    background: var(--bg-surface, #f5f5f5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.ubo-body .ga-select-wrapper .ga-select-dropdown .ga-select-option {
    padding: 8px 14px;
    font-size: 13px;
}

/* Стили для селектов в контактах */
.contact-row .ga-select-wrapper .ga-select-trigger {
    padding: 6px 12px;
    min-height: 38px;
    font-size: 13px;
}

:root {
 --bg: #0B0D10;
    --surface: #14171C;
    --surface-2: #1B1F26;
    --hover: #21262E;
    --text: #F5F7FA;
    --muted: #9BA3AF;
    --dim: #6B7280;
    --line: #232830;
    --line-2: #333B45;
    --gold: #D4AF37;
    --gold-bright: #E8C158;
    --gold-deep: #A88930;
    --glow: rgba(212, 175, 55, .16);
    --soft: rgba(212, 175, 55, .10);
    --success: #6EE7B7;
    --success-bg: rgba(110, 231, 183, .10);
    --info: #93A4C4;
    --info-bg: rgba(147, 164, 196, .12);
    --warning: #D4AF37;
    --warning-bg: rgba(212, 175, 55, .12);
    --danger: #E5A3A3;
    --danger-bg: rgba(229, 163, 163, .10);
    --r: 14px;
    --r-sm: 10px;
    --fs-display: 28px;
    --fs-h1: 24px;
    --fs-h2: 18px;
    --fs-body: 14px;
    --fs-small: 13px;
    --fs-micro: 11px;
    --fs-nano: 9.5px;
    --font: 'Plus Jakarta Sans', sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

.ga-topup-page .form-card { max-width: 560px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 40px; }
    .ga-topup-page .form-card .field:last-of-type { margin-bottom: 0; }
    .ga-topup-page .field { margin-bottom: 16px; }
    .ga-topup-page .field-label { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
    .ga-topup-page .amount-field { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; transition: border-color .12s; }
    .ga-topup-page .amount-field:focus-within { border-color: var(--accent); }
    .ga-topup-page .amount-cur { display: flex; align-items: center; padding: 0 14px; color: var(--text-muted); font-size: var(--fs-h2); font-weight: 600; border-right: 1px solid var(--line); min-width: 26px; justify-content: center; }
    .ga-topup-page .amount-input { flex: 1;
    min-width: 0;
    border: 0;
    background-color: #0000 !important;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-h1);
    font-weight: 700;
    padding: 14px 12px;
    outline: none;
    box-shadow: none!important;}
    .ga-topup-page .ccy-select { border: 0; border-left: 1px solid var(--line); background: var(--bg-surface-2); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; padding: 0 14px; outline: none; cursor: pointer; }
    .ga-topup-page .helper { margin-top: 8px; font-size: var(--fs-small); color: var(--text-dim); line-height: 1.5; }
    .ga-topup-page .note-field { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); padding: 11px 12px; outline: none; resize: vertical; min-height: 62px; transition: border-color .12s; }
    .ga-topup-page .note-field:focus { border-color: var(--accent); }
    .ga-topup-page .source-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-surface-2); margin-bottom: 16px; }
    .ga-topup-page .source-row .sr-k { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
    .ga-topup-page .source-row .sr-v { font-size: var(--fs-small); color: var(--text); font-weight: 600; }
    .ga-topup-page .modal-note { display: flex; gap: 10px; padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); margin-bottom: 22px; }
    .ga-topup-page .modal-acts { display: flex; gap: 12px; }
    .ga-topup-page .btn-primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #1A1206; font-family: var(--font); font-size: var(--fs-body); font-weight: 700; cursor: pointer; transition: background .12s; }
    .ga-topup-page .btn-primary:hover { background: var(--accent-bright); }
    .ga-topup-page .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-family: var(--font); font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: border-color .12s,color .12s; }
    .ga-topup-page .btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }
    .ga-topup-page .order-card { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; }
    .ga-topup-page .order-card--active { border-color: var(--line-strong); }
    .ga-topup-page .oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .ga-topup-page .oc-ref { font-size: var(--fs-h2); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
    .ga-topup-page .oc-sub { font-size: var(--fs-small); color: var(--text-dim); margin-top: 4px; }
    .ga-topup-page .pill { flex: none; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; }
    .ga-topup-page .pill--wait { color: var(--warning); background: var(--warning-bg); border-color: rgba(212,175,55,.28); }
    .ga-topup-page .pill--ok { color: var(--success); background: var(--success-bg); border-color: rgba(110,231,183,.22); }
    .ga-topup-page .stepper { list-style: none; margin: 20px 0 22px; padding: 0; }
    .ga-topup-page .stepper li { position: relative; padding: 0 0 16px 28px; }
    .ga-topup-page .stepper li:last-child { padding-bottom: 0; }
    .ga-topup-page .stepper li::before { content: ""; position: absolute; left: 6px; top: 15px; bottom: -1px; width: 2px; background: var(--line); }
    .ga-topup-page .stepper li:last-child::before { display: none; }
    .ga-topup-page .stepper li.done::before { background: var(--accent-deep); }
    .ga-topup-page .stepper .dot { position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg-surface); box-sizing: border-box; }
    .ga-topup-page .stepper li.done .dot { background: var(--accent); border-color: var(--accent); }
    .ga-topup-page .stepper li.current .dot { border-color: var(--accent); background: var(--bg-surface); box-shadow: 0 0 0 4px var(--accent-glow); }
    .ga-topup-page .stepper .stp { font-size: var(--fs-small); color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
    .ga-topup-page .stepper li.done .stp { color: var(--text); }
    .ga-topup-page .stepper li.current .stp { color: var(--text); font-weight: 600; }
    .ga-topup-page .stepper .stp em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
    .ga-topup-page .pending-box { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
    .ga-topup-page .pb-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--line); background: var(--bg-surface-2); }
    .ga-topup-page .pb-spin { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--warning-bg); color: var(--warning); }
    .ga-topup-page .pb-spin.ok { background: var(--success-bg); color: var(--success); }
    .ga-topup-page .pb-title { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
    .ga-topup-page .pb-sub { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
    .ga-topup-page .pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
    .ga-topup-page .invoice-box { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
    .ga-topup-page .ib-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-surface-2); }
    .ga-topup-page .ib-k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
    .ga-topup-page .ib-ref { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); font-weight: 600; }
    .ga-topup-page .ib-cell { background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
    .ga-topup-page .ib-cell .c-k { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
    .ga-topup-page .ib-cell .c-v { font-size: var(--fs-body); color: var(--text); font-weight: 600; }
    .ga-topup-page .ib-cell .c-v.mono { font-family: var(--font-mono); font-size: var(--fs-small); }
    .ga-topup-page .ib-note { padding: 14px 16px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); border-top: 1px solid var(--line); }
    .ga-topup-page .ib-acts { display: flex; gap: 12px; padding: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); }
    .ga-topup-page .ib-acts .btn-primary { flex: 0 0 auto; text-decoration: none; }
    .ga-topup-page .surface { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .ga-topup-page .orders-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .ga-topup-page .orders-table thead { background: var(--bg-surface-2); }
    .ga-topup-page .orders-table th { text-align: left; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-dim); padding: 14px 20px; border-bottom: 1px solid var(--line); }
    .ga-topup-page .orders-table td { padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); vertical-align: middle; }
    .ga-topup-page .orders-table tbody tr:last-child td { border-bottom: none; }
    .ga-topup-page .orders-table tbody tr { transition: background-color 0.12s ease; cursor: pointer; }
    .ga-topup-page .orders-table tbody tr:hover { background: var(--bg-hover); }
    .ga-topup-page .order-id { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-small); color: var(--text); }
    .ga-topup-page .order-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .ga-topup-page .order-total { font-weight: 700; font-variant-numeric: tabular-nums; }
    .ga-topup-page .action-link { font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
    .ga-topup-page .action-link:hover { color: var(--accent-bright); }
    .ga-topup-page .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 999px; white-space: nowrap; line-height: 1.4; }
    .ga-topup-page .status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
    .ga-topup-page .status--completed { background: var(--success-bg); color: var(--success); }
    .ga-topup-page .status--completed::before { background: var(--success); }
    .ga-topup-page .status--processing { background: var(--info-bg); color: var(--info); }
    .ga-topup-page .status--processing::before { background: var(--info); }
    .ga-topup-page .status--on-hold, .ga-topup-page .status--pending { background: var(--warning-bg); color: var(--warning); }
    .ga-topup-page .status--on-hold::before, .ga-topup-page .status--pending::before { background: var(--warning); }
    .ga-topup-page .status--cancelled, .ga-topup-page .status--refunded { background: var(--neutral-bg); color: var(--neutral); }
    .ga-topup-page .status--cancelled::before, .ga-topup-page .status--refunded::before { background: var(--neutral); }
    .ga-topup-page .status--failed { background: var(--danger-bg); color: var(--danger); }
    .ga-topup-page .status--failed::before { background: var(--danger); }
    .ga-topup-page .flow-hint { max-width: 560px; font-size: var(--fs-small); color: var(--text-dim); margin: -12px 0 26px; line-height: 1.5; }


a { color: inherit; text-decoration: none; }
.nav-ic { display: none; }  /* icons only used in the mobile top strip */
.mini-bar { display: none; }  /* hamburger bar: only on very small screens */
.mini-dot { display: none; }


/* ============================================================
   Content
   ============================================================ */


/* ============================================================
   Stats grid
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 36px;
  align-items: stretch;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.stat-card:not(.stat-card--wide) { justify-content: flex-start; }
.stat-card:hover {
  border-color: var(--line-strong);
}

.stat-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: nowrap;
  min-width: 0;
  min-height: 26px;    /* равная высота строки-лейбла в обеих карточках → числа на одном уровне */
  white-space: nowrap;
  overflow: hidden;
}
/* chip fixed (never overflows); the label TEXT shrinks/ellipsizes first if space is tight */
.stat-label .alloc-tag { flex: 0 0 auto; }
.stat-label > svg { flex: 0 0 auto; }
.lbl-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* лейбл может усечься первым, чтобы чип не переносился и не вылезал */
.stat-label > svg { flex-shrink: 0; }
.stat-label .alloc-tag { flex-shrink: 0; }
.stat-label .stat-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.stat-value {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
.stat-value .stat-unit {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}
.stat-value.is-accent {
  color: var(--accent);
}

.stat-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.stat-sub .up { color: var(--success); font-weight: 600; }
.stat-sub .neutral { color: var(--text-muted); }

/* ============================================================
   Section header
   ============================================================ */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  gap: 16px;
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.section-head h2 .count {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.view-all {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  transition: color 0.12s ease;
  background: #0000;
}
.view-all:hover { color: var(--accent-bright); }

/* ============================================================
   Orders table
   ============================================================ */
.orders-section,
.documents-section { margin-bottom: 36px; }

.surface {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.orders-table thead { background: var(--bg-surface-2); }
.orders-table th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.orders-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  vertical-align: middle;
}
.orders-table tbody tr:last-child td { border-bottom: none; }
.orders-table tbody tr { transition: background-color 0.12s ease; }
.orders-table tbody tr:hover { background: var(--bg-hover); }

.order-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--text);
}
.order-id a:hover { color: var(--accent); }
.order-date {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.order-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.action-link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}
.action-link:hover { color: var(--accent-bright); }

/* ============================================================
   Status pills
   ============================================================ */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.status--completed { background: var(--success-bg); color: var(--success); }
.status--completed::before { background: var(--success); }
.status--processing { background: var(--info-bg); color: var(--info); }
.status--processing::before { background: var(--info); }
.status--on-hold, .status--pending { background: var(--warning-bg); color: var(--warning); }
.status--on-hold::before, .status--pending::before { background: var(--warning); }
.status--cancelled, .status--refunded { background: var(--neutral-bg); color: var(--neutral); }
.status--cancelled::before, .status--refunded::before { background: var(--neutral); }
.status--failed { background: var(--danger-bg); color: var(--danger); }
.status--failed::before { background: var(--danger); }

/* ============================================================
   Documents list
   ============================================================ */
.documents-list {
  display: flex;
  flex-direction: column;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], textarea, select{
    background-color: #0000!important;
}
.doc-row {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.12s ease;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-hover); }

.doc-icon {
  width: 36px;
  height: 36px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.doc-icon svg { width: 18px; height: 18px; }

.doc-info { min-width: 0; }
.doc-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-meta {
  font-size: var(--fs-micro);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.doc-type {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.doc-download {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: all 0.12s ease;
  background: transparent;
  cursor: pointer;
}
.doc-download:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.doc-download svg { width: 16px; height: 16px; }

.doc-upload-bar {
  padding: 16px 20px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 700;
  font-size: var(--fs-small);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.btn-upload:hover { background: var(--accent-bright); }
.btn-upload svg { width: 14px; height: 14px; }

/* ============================================================
   Quick action cards
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: block;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.12);
}
.card h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card h3::after {
  content:"→";
  color: var(--accent);
  font-weight: 600;
  transition: transform 0.15s ease;
}
.card:hover h3::after { transform: translateX(4px); }
.card p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   Hallmark strip + statement ledger (rev. r2)
   ============================================================ */
.alloc-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hallmark {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hm { display: flex; flex-direction: column; gap: 4px; }
.hm-k {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hm-v {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
}
.hm-v.is-accent { color: var(--accent); }

/* Allocation strip — clean full-width row under the two balance cards */
.alloc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: -16px 0 36px;                 /* pull up under the balances (which have 36px gap) */
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.as { display: flex; flex-direction: column; gap: 4px; }
.as-k {
  font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.as-v { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; color: var(--text); }
.as-v.is-accent { color: var(--accent); }

.ledger-table th.amt-col, .ledger-table td.amt { text-align: right; }
.entry-name { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.entry-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-dim);
  margin-top: 3px;
}
.ledger-table .order-id { font-size: var(--fs-micro); color: var(--text-muted); }
.amt {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amt--pos { color: var(--accent); }
.amt--neg { color: var(--text-muted); }

/* ============================================================
   Balance row + dashboard actions (rev. r1 — правки №10–11)
   ============================================================ */
.stat-card--wide { grid-column: span 1; }
.stat-card--wide .stat-value { font-size: var(--fs-display); } /* equal to Cash */
.actions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.actions-head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rates-link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.rates-link:hover { color: var(--accent-bright); }

/* Actions as destinations (sections), not buttons: card language + arrow. Both equal, no gold fill. */
.actions-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.nav-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.nav-card:hover {
  border-color: var(--accent);
  background: var(--bg-surface-2);
  transform: translateY(-2px);
}
.nav-card .ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.nav-card .ic svg { width: 20px; height: 20px; }
.nav-card .lbl {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav-card .arr {
  color: var(--accent);
  font-size: var(--fs-h2);
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-card:hover .arr { transform: translateX(4px); opacity: 1; }
@media (max-width: 760px) {
  .actions-nav { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .stat-card--wide { grid-column: auto; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   Top nav strip (variant B) baseline
   ============================================================ */
@media (max-width: 900px) {
  .woocommerce-account {
    padding: 0;
  }
  /* Sticky top strip — icon + label, evenly distributed, nothing clipped, no scroll */
  .woocommerce-MyAccount-navigation {
    position: sticky; top: 0; z-index: 50;
    grid-column: 1 / -1;
    width: 100vw; margin-left: calc(50% - 50vw);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    border: none; border-bottom: 1px solid var(--line); border-radius: 0;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    overflow: hidden;
  }
  .woocommerce-account { min-height: auto; align-items: stretch; }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row; flex-wrap: nowrap; gap: 0; width: 100%;
  }
  .woocommerce-MyAccount-navigation li { flex: 1 1 0; min-width: 0; }
  .woocommerce-MyAccount-navigation li a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 2px;
    box-shadow: none !important;
    color: var(--text-dim); font-weight: 600;
  }
  .nav-ic { display: block; width: 22px; height: 22px; }
  .woocommerce-MyAccount-navigation li a span:not(.nav-badge) {
    font-size: 16px; line-height: 1; letter-spacing: 0;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* very narrow screens: swap 2 longest labels for short aliases so nothing truncates */
  .lbl-short { display: none; }
  /* ≤430px: switch from icon-strip to hamburger dropdown */
 
  /* active = gold icon+label, no pill background */
  .woocommerce-MyAccount-navigation li.is-active a { color: var(--accent); }
  /* badges become small dots pinned to the icon so nothing shifts layout */
  .woocommerce-MyAccount-navigation .nav-badge {
    position: absolute; top: 2px; left: 50%; margin-left: 6px;
    min-width: 15px; height: 15px; padding: 0 4px;
    display: grid; place-items: center;
    font-size: var(--fs-nano); font-weight: 700; border-radius: 999px;
  }
  .woocommerce-MyAccount-navigation li.logout {
    border-top: none; margin-top: 0; padding-top: 0;
  }
  .woocommerce-MyAccount-navigation li.logout a { color: var(--text-dim); }
  .account-header { padding: 16px!important; }
  .account-company { font-size: var(--fs-h1); }
  .cards-grid { grid-template-columns: 1fr; }
  .doc-row, .docs-table-head {
           grid-template-columns: 30px 1fr 80px auto;
  }
  .docs-table-head div:nth-child(3){
      display: none;
  }
  .doc-type { display: none; }
}
 @media (max-width: 430px) {
    /* show compact bar */
    .mini-bar {
      display: flex; align-items: center; justify-content: space-between;
      grid-column: 1 / -1;
      padding: 12px 14px;
      background: var(--bg-surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .mini-brand { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
    .mini-brand span { display: block; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.2em; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
    .mini-btn {
      position: relative; width: 42px; height: 42px; flex-shrink: 0;
      display: grid; place-items: center;
      border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
      background: var(--bg-surface-2); color: var(--accent); cursor: pointer;
    }
    .mini-btn svg { width: 20px; height: 20px; }
    .mini-btn .mi-close { display: none; }
    .mini-btn[aria-expanded="true"] .mi-open { display: none; }
    .mini-btn[aria-expanded="true"] .mi-close { display: block; }
    .mini-dot {
      display: block; position: absolute; top: 8px; right: 8px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--warning); box-shadow: 0 0 0 2px var(--bg-surface-2);
    }
    .mini-btn[aria-expanded="true"] .mini-dot { display: none; }

    /* nav becomes a hidden dropdown panel (vertical list) instead of the icon strip */
    .woocommerce-MyAccount-navigation {
      position: static; width: auto; margin: 0; padding: 6px;
      grid-column: 1 / -1;
      background: #0000!important; border: 0; border-radius: 0;
      border-bottom: 0;
      -webkit-backdrop-filter: none; backdrop-filter: none;
      overflow: visible;
      padding: 0;
              margin-top: 3rem;
    }
    .woocommerce-MyAccount-navigation.is-open { display: block; }
    /* back to a clean vertical list with text labels */
    .woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 2px; width: 100%; }
    .woocommerce-MyAccount-navigation li { flex: none; }
    .woocommerce-MyAccount-navigation li a {
      flex-direction: row; justify-content: flex-start; align-items: center;
      gap: 11px; padding: 12px 14px; font-size: var(--fs-body); color: var(--text-muted);
    }
    .woocommerce-MyAccount-navigation li.is-active a { background: var(--bg-surface-2); color: var(--text); border-radius: var(--radius-sm); }
    /* show icons inline in the dropdown, full-size */
    .nav-ic { display: block; width: 20px; height: 20px; }
    /* use full labels in the dropdown (room is fine vertically) */
    .lbl-full { display: inline; }
    .lbl-short { display: none; }
    /* badges back to inline pills */
    .woocommerce-MyAccount-navigation .nav-badge {
      position: static; margin-left: auto; top: auto; left: auto;
      min-width: 20px; height: 20px; padding: 0 7px; font-size: var(--fs-micro);
    }
    .woocommerce-MyAccount-navigation li.logout { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  }
@media (max-width: 600px) {
    .surface table{
        display: block;
    width: 100%;
    max-width: 100%;
    }
  .stats-grid { grid-template-columns: 1fr; }
 
}

/* Strip mode 431–470px: short aliases for the two long labels (placed last to win by order) */
@media (min-width: 431px) and (max-width: 470px) {
  /*.woocommerce-MyAccount-navigation .lbl-full { display: none; }*/
  /*.woocommerce-MyAccount-navigation .lbl-short { display: inline; }*/
}

/* ===== Request advance invoice — modal (canon: advance under an instruction, not top-up/balance) ===== */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,8,11,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;}
.modal-backdrop.open{opacity:1;visibility:visible;}
.modal{width:100%;max-width:462px;background:var(--bg-surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:0 24px 64px rgba(0,0,0,.55);transform:translateY(10px) scale(.985);
  transition:transform .18s ease;max-height:calc(100vh - 48px);overflow-y:auto;}
.modal-backdrop.open .modal{transform:none;}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 0;}
.modal-kicker{font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.modal-title{font-size:var(--fs-h2);font-weight:700;color:var(--text);letter-spacing:-.01em;}
.modal-x{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .12s,color .12s;}
.modal-x:hover{border-color:var(--line-strong);color:var(--text);}
.modal-body{padding:16px 24px 24px;}
.modal-intro{font-size:var(--fs-small);line-height:1.55;color:var(--text-muted);margin-bottom:20px;}
.field{margin-bottom:16px;}
.field-label{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.amount-field{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);overflow:hidden;transition:border-color .12s;}
.amount-field:focus-within{border-color:var(--accent);}
.amount-cur{display:flex;align-items:center;padding:0 14px;color:var(--text-muted);font-size:var(--fs-h2);font-weight:600;border-right:1px solid var(--line);min-width:26px;justify-content:center;}
.amount-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-family:var(--font);font-size:var(--fs-h1);font-weight:700;padding:14px 12px;outline:none;}
.amount-input::placeholder{color:var(--text-dim);font-weight:600;}
.ccy-select{width:auto!important;border:0;border-left:1px solid var(--line);background:var(--bg-surface-2);color:var(--text);font-family:var(--font-mono);font-size:var(--fs-small);font-weight:600;padding:0 14px;outline:none;cursor:pointer;}
.helper{margin-top:8px;font-size:var(--fs-small);color:var(--text-dim);line-height:1.5;}
.helper b{color:var(--text-muted);font-weight:600;}
.note-field{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);padding:11px 12px;outline:none;resize:vertical;min-height:62px;transition:border-color .12s;}
.note-field:focus{border-color:var(--accent);}
.note-field::placeholder{color:var(--text-dim);}
.source-row{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-surface-2);margin-bottom:16px;}
.source-row svg{flex:none;color:var(--text-muted);}
.source-row .sr-k{font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.source-row .sr-v{font-size:var(--fs-small);color:var(--text);font-weight:600;}
.modal-note{display:flex;gap:10px;padding:12px 14px;border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-small);line-height:1.5;color:var(--text-muted);margin-bottom:22px;}
.modal-note svg{flex:none;color:var(--accent);margin-top:1px;}
.modal-acts{display:flex;gap:12px;}
.btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:0;border-radius:var(--radius-sm);background:var(--accent);color:#1A1206;font-family:var(--font);font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:background .12s;}
.btn-primary:hover{background:var(--accent-bright);}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-family:var(--font);font-size:var(--fs-body);font-weight:600;cursor:pointer;transition:border-color .12s,color .12s;}
.btn-ghost:hover{border-color:var(--text-dim);color:var(--text);}
.modal-success{padding:34px 24px 28px;text-align:center;}
.ms-ic{width:52px;height:52px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--success-bg);color:var(--success);}
.modal-success h3{font-size:var(--fs-h2);font-weight:700;color:var(--text);margin-bottom:8px;}
.modal-success p{font-size:var(--fs-small);color:var(--text-muted);line-height:1.55;margin-bottom:6px;}
.modal-success .ref{font-family:var(--font-mono);color:var(--accent);}
.mhidden{display:none!important;}


/* ===== Orders (purchase instructions) ===== */
.order-card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:16px;}
.order-card--active{border-color:var(--line-strong);}
.oc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.oc-ref{font-size:var(--fs-h2);font-weight:700;color:var(--text);letter-spacing:-.01em;}
.oc-sub{font-size:var(--fs-small);color:var(--text-dim);margin-top:4px;}
.pill{flex:none;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:100px;border:1px solid transparent;white-space:nowrap;}
.pill--wait{color:var(--warning);background:var(--warning-bg);border-color:rgba(212,175,55,.28);}
.pill--ok{color:var(--success);background:var(--success-bg);border-color:rgba(110,231,183,.22);}
.stepper{list-style:none;margin:20px 0 22px;padding:0;}
.stepper li{position:relative;padding:0 0 16px 28px;}
.stepper li:last-child{padding-bottom:0;}
.stepper li::before{content:"";position:absolute;left:6px;top:15px;bottom:-1px;width:2px;background:var(--line);}
.stepper li:last-child::before{display:none;}
.stepper li.done::before{background:var(--accent-deep);}
.stepper .dot{position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);background:var(--bg-surface);box-sizing:border-box;}
.stepper li.done .dot{background:var(--accent);border-color:var(--accent);}
.stepper li.current .dot{border-color:var(--accent);background:var(--bg-surface);box-shadow:0 0 0 4px var(--accent-glow);}
.stepper .stp{font-size:var(--fs-small);color:var(--text-muted);display:flex;flex-direction:column;gap:2px;line-height:1.3;}
.stepper li.done .stp{color:var(--text);}
.stepper li.current .stp{color:var(--text);font-weight:600;}
.stepper .stp em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.invoice-box{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);overflow:hidden;}
.ib-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-surface-2);}
.ib-k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.ib-ref{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--accent);font-weight:600;}
.ib-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
.ib-cell{background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:5px;}
.ib-cell .c-k{font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.ib-cell .c-v{font-size:var(--fs-body);color:var(--text);font-weight:600;}
.ib-cell .c-v.mono{font-family:var(--font-mono);font-size:var(--fs-small);}
.ib-note{padding:14px 16px;font-size:var(--fs-small);line-height:1.55;color:var(--text-muted);border-top:1px solid var(--line);}
.ib-acts{display:flex;gap:12px;padding:16px;flex-wrap:wrap;border-top:1px solid var(--line);}
.ib-acts .btn-primary{flex:0 0 auto;text-decoration:none;}
.btn-disabled{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-family:var(--font);font-size:var(--fs-body);font-weight:600;cursor:not-allowed;}
.new-btn{background:none;border:0;color:var(--accent);font-family:var(--font);font-size:var(--fs-small);font-weight:600;cursor:pointer;}
.new-btn:hover{color:var(--accent-bright);}
.allocg{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:var(--fs-small);}


/* ===== Awaiting-invoice (intermediate) state ===== */
.pending-box{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);overflow:hidden;}
.pb-head{display:flex;gap:12px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line);background:var(--bg-surface-2);}
.pb-spin{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--warning-bg);color:var(--warning);}
.pb-title{font-size:var(--fs-body);font-weight:700;color:var(--text);}
.pb-sub{font-size:var(--fs-small);color:var(--text-muted);margin-top:3px;line-height:1.45;}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}


/* ===== Advance-flow standalone pages ===== */
.form-card{max-width:560px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-bottom:40px;}
.form-card .field:last-of-type{margin-bottom:0;}
.pb-spin.ok{background:var(--success-bg);color:var(--success);}
.flow-hint{max-width:560px;font-size:var(--fs-small);color:var(--text-dim);margin:-12px 0 26px;line-height:1.5;}

/* ===== Buyback screens ===== */
.bb-layout{display:grid;grid-template-columns:1fr 356px;gap:20px;align-items:start;}
@media (max-width:1100px){.bb-layout{grid-template-columns:1fr;}}
.bars-table{width:100%;border-collapse:collapse;}
.bars-table thead th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600;padding:13px 16px 10px;white-space:nowrap;}
.bars-table th.r,.bars-table td.r{text-align:right;}
.bars-table td{padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--text);}
.bars-table tbody tr{cursor:pointer;transition:background .1s;}
.bars-table tbody tr:hover{background:var(--bg-hover);}
.bars-table tbody tr.sel{background:var(--accent-soft);}
.bars-table td.mono{font-family:var(--font-mono);}
.bars-table td.dim{color:var(--text-muted);}
.cbx{width:16px;height:16px;border:1px solid var(--line-strong);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.1s;}
.cbx svg{width:10px;height:10px;opacity:0;color:var(--bg);}
tr.sel .cbx{background:var(--accent);border-color:var(--accent);}
tr.sel .cbx svg{opacity:1;}
.sel-all{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--text-muted);}
.sel-all button{background:none;border:0;color:var(--accent);font-family:var(--font);font-size:var(--fs-small);font-weight:600;cursor:pointer;padding:0;}
.sel-all button:hover{color:var(--accent-bright);}
.quote{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);position:sticky;top:20px;overflow:hidden;}
.quote-h{padding:16px 18px;border-bottom:1px solid var(--line);}
.quote-h .qk{font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.quote-h .qt{font-size:var(--fs-h2);font-weight:700;color:var(--text);margin-top:3px;}
.quote-b{padding:16px 18px;}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;font-size:var(--fs-small);}
.qrow .k{color:var(--text-muted);}
.qrow .v{font-family:var(--font-mono);color:var(--text);font-weight:600;}
.qrow .v.neg{color:var(--danger);}
.qrow.sub .k,.qrow.sub .v{color:var(--text-dim);font-weight:500;}
.qsep{height:1px;background:var(--line);margin:10px 0;}
.qtot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0 4px;}
.qtot .k{font-size:var(--fs-small);color:var(--text);font-weight:600;}
.qtot .v{font-family:var(--font-mono);font-size:var(--fs-h1);font-weight:700;color:var(--accent);}
.qempty{padding:22px 4px;text-align:center;font-size:var(--fs-small);color:var(--text-dim);line-height:1.5;}
.qnote{font-size:12px;line-height:1.5;color:var(--text-dim);border-top:1px solid var(--line);padding:14px 18px;}
.quote-acts{padding:0 18px 18px;}
.quote-acts .btn-primary{width:100%;}
.lock{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid rgba(212,175,55,.30);background:var(--accent-soft);border-radius:var(--radius-sm);margin-bottom:16px;}
.lock svg{flex:none;color:var(--accent);}
.lock .lk{font-size:var(--fs-small);color:var(--text-muted);}
.lock .lv{margin-left:auto;font-family:var(--font-mono);font-weight:700;color:var(--accent);font-size:var(--fs-body);}
.done-card{max-width:620px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;text-align:center;}
.done-ic{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--success-bg);color:var(--success);}
.done-card h2{font-size:var(--fs-h1);font-weight:700;color:var(--text);margin-bottom:10px;}
.done-card p{font-size:var(--fs-small);color:var(--text-muted);line-height:1.6;margin-bottom:8px;}
.done-ref{font-family:var(--font-mono);color:var(--accent);}
.mhide{display:none!important;}

/* --- classes used by these screens but not declared in the shared sheet --- */
.account-lede{font-size:var(--fs-body);line-height:1.6;color:var(--text-muted);max-width:76ch;margin:10px 0 16px;}
.hint{font-size:12px;color:var(--text-dim);}

/* ===== Buyback screens ===== */
.bb-layout{display:grid;grid-template-columns:1fr 356px;gap:20px;align-items:start;}
@media (max-width:1100px){.bb-layout{grid-template-columns:1fr;}}
.bars-table{width:100%;border-collapse:collapse;}
.bars-table thead th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600;padding:13px 16px 10px;white-space:nowrap;}
.bars-table th.r,.bars-table td.r{text-align:right;}
.bars-table td{padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--text);}
.bars-table tbody tr{cursor:pointer;transition:background .1s;}
.bars-table tbody tr:hover{background:var(--bg-hover);}
.bars-table tbody tr.sel{background:var(--accent-soft);}
.bars-table td.mono{font-family:var(--font-mono);}
.bars-table td.dim{color:var(--text-muted);}
.cbx{width:16px;height:16px;border:1px solid var(--line-strong);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.1s;}
.cbx svg{width:10px;height:10px;opacity:0;color:var(--bg);}
tr.sel .cbx{background:var(--accent);border-color:var(--accent);}
tr.sel .cbx svg{opacity:1;}
.sel-all{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--text-muted);}
.sel-all button{background:none;border:0;color:var(--accent);font-family:var(--font);font-size:var(--fs-small);font-weight:600;cursor:pointer;padding:0;}
.sel-all button:hover{color:var(--accent-bright);}
.quote{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);position:sticky;top:20px;overflow:hidden;}
.quote-h{padding:16px 18px;border-bottom:1px solid var(--line);}
.quote-h .qk{font-family:var(--font-mono);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.quote-h .qt{font-size:var(--fs-h2);font-weight:700;color:var(--text);margin-top:3px;}
.quote-b{padding:16px 18px;}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;font-size:var(--fs-small);}
.qrow .k{color:var(--text-muted);}
.qrow .v{font-family:var(--font-mono);color:var(--text);font-weight:600;}
.qrow .v.neg{color:var(--danger);}
.qrow.sub .k,.qrow.sub .v{color:var(--text-dim);font-weight:500;}
.qsep{height:1px;background:var(--line);margin:10px 0;}
.qtot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0 4px;}
.qtot .k{font-size:var(--fs-small);color:var(--text);font-weight:600;}
.qtot .v{font-family:var(--font-mono);font-size:var(--fs-h1);font-weight:700;color:var(--accent);}
.qempty{padding:22px 4px;text-align:center;font-size:var(--fs-small);color:var(--text-dim);line-height:1.5;}
.qnote{font-size:12px;line-height:1.5;color:var(--text-dim);border-top:1px solid var(--line);padding:14px 18px;}
.quote-acts{padding:0 18px 18px;}
.quote-acts .btn-primary{width:100%;}
.lock{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid rgba(212,175,55,.30);background:var(--accent-soft);border-radius:var(--radius-sm);margin-bottom:16px;}
.lock svg{flex:none;color:var(--accent);}
.lock .lk{font-size:var(--fs-small);color:var(--text-muted);}
.lock .lv{margin-left:auto;font-family:var(--font-mono);font-weight:700;color:var(--accent);font-size:var(--fs-body);}
.done-card{max-width:620px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;text-align:center;}
.done-ic{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--success-bg);color:var(--success);}
.done-card h2{font-size:var(--fs-h1);font-weight:700;color:var(--text);margin-bottom:10px;}
.done-card p{font-size:var(--fs-small);color:var(--text-muted);line-height:1.6;margin-bottom:8px;}
.done-ref{font-family:var(--font-mono);color:var(--accent);}
.mhide{display:none!important;}

/* --- classes used by these screens but not declared in the shared sheet --- */
.account-lede{font-size:var(--fs-body);line-height:1.6;color:var(--text-muted);max-width:76ch;margin:10px 0 16px;}
.hint{font-size:12px;color:var(--text-dim);}

@media(max-width: 768px){
    #tab-onboarding .card {
    margin-bottom: 0 !important;
    max-width: 100%!important;
    width: 100%;
}
    .bb-layout {
        grid-template-columns: 1fr;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .bb-layout > div{
        width: 100%;
    }
    .surface table{
        width: auto;
        max-width: auto;
        overflow: auto;
    }
     .col-linked, .col-date, .doc-linked, .doc-date{
        display: table-cell;
    }
        .cart-item {
        grid-template-columns: 70px 1fr 32px;
        grid-template-areas:         "image info remove"        "image qty price";
        gap: 14px 16px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
        .qty-control {
        grid-area: qty;
        align-self: end;
        margin-right: auto;
    }
        .cart-item .item-price {
        grid-area: price;
        align-self: start;
        text-align: left;
    }
        .remove-btn {
        grid-area: remove;
        align-self: start;
        position: absolute;
        right: 16px;
    }
}

.ga-topup-page .ccy-select{
    display: none;
}