/* ═══════════════════════════════════════════════════════════
   TUNDR MERCHANT PORTAL — styles.css
   Tokens: Base.HR/BO + Semantic.HR + Responsive.HR/BO
   ═══════════════════════════════════════════════════════════ */

/* ─── Base color tokens ─────────────────────────────────── */
:root {
  /* Color.Grey */
  --grey-0:   #ffffff;
  --grey-100: #f6f6f5;
  --grey-200: #f1f1f0;
  --grey-300: #e7e7e5;
  --grey-400: #c4c4c3;
  --grey-500: #a6a6a5;
  --grey-600: #7c7c7b;
  --grey-700: #686867;
  --grey-800: #494948;
  --grey-900: #272726;

  /* Color.Green */
  --green-50:  #e1f3f3;
  --green-100: #b3e0e0;
  --green-400: #26aaa5;
  --green-700: #007d74;
  --green-800: #026d65;
  --green-900: #035148;

  /* Color.Yellow */
  --yellow-50:  #fff7e1;
  --yellow-100: #ffebb4;
  --yellow-400: #fec82f;

  /* Color.Orange (warning) */
  --orange-50:  #faf2e1;
  --orange-700: #d67b13;

  /* Color.Sage (success) */
  --sage-50:  #e7f5ef;
  --sage-700: #588b6a;

  /* Color.Denim (info) */
  --denim-50:  #e0f0ff;
  --denim-600: #416c86;

  /* Color.Sand */
  --sand-50:  #f4ebdf;

  /* ─── Semantic tokens (HR) ── */
  --surface-page:           var(--grey-100);
  --surface-card:           var(--grey-0);
  --surface-card-secondary: var(--grey-100);
  --surface-card-tertiary:  var(--sand-50);
  --surface-inverse:        var(--grey-900);
  --surface-brand:          var(--green-700);
  --surface-brand-muted:    var(--green-50);

  --content-primary:    var(--grey-900);
  --content-secondary:  var(--grey-700);
  --content-muted:      var(--grey-500);
  --content-action:     var(--green-700);
  --content-on-inverse: var(--grey-0);

  --border-primary:  var(--grey-900);
  --border-tertiary: var(--grey-300);

  --feedback-warning-strong: var(--orange-700);
  --feedback-warning-subtle: var(--orange-50);
  --feedback-success-strong: var(--sage-700);
  --feedback-success-subtle: var(--sage-50);
  --feedback-info-strong:    var(--denim-600);
  --feedback-info-subtle:    var(--denim-50);

  --accent-yellow:       var(--yellow-400);
  --accent-yellow-muted: var(--yellow-50);

  /* ─── Spacing (Scale.100=4 Scale.200=8 Scale.300=12 Scale.400=16 Scale.600=24 Scale.800=32) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* ─── BorderRadius (Scale.100=4 Scale.200=8 Scale.400=16 Scale.600=24) ── */
  --r-sm:  4px;
  --r-md:  8px;
  --r-xl:  16px;
  --r-2xl: 24px;

  /* ─── Typography ── */
  --fs-h1: 36px;  --lh-h1: 40px;
  --fs-h2: 24px;  --lh-h2: 32px;
  --fs-h3: 18px;  --lh-h3: 24px;
  --fs-body1: 16px; --lh-body1: 24px;
  --fs-body2: 14px; --lh-body2: 20px;

  --font-title: 'Sofia Sans', sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;

  /* ─── Shadows ── */
  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.07), 0 16px 40px rgba(0,0,0,.10);

  --sidebar-w: 232px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--content-primary);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ─── Shell ─────────────────────────────────────────────── */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* ─── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-inverse);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background: var(--grey-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--content-on-inverse);
  flex-shrink: 0;
}

.user-name { font-size: var(--fs-body2); font-weight: 700; color: var(--content-on-inverse); line-height: 1.3; }
.user-role { font-size: 12px; color: var(--grey-500); }

.sidebar-cta-wrap {
  padding: var(--space-md) var(--space-md);
}

.sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--accent-yellow);
  color: var(--content-primary);
  border-radius: var(--r-xl);
  font-size: var(--fs-body2);
  font-weight: 700;
  transition: background .15s;
}

.sidebar-cta:hover { background: var(--yellow-100); }

.sidebar-nav { flex: 1; padding: var(--space-xs) 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  margin: 2px var(--space-sm);
  border-radius: var(--r-xl);
  font-size: var(--fs-body2);
  font-weight: 500;
  color: var(--grey-500);
  transition: all .15s;
}

.nav-item svg { flex-shrink: 0; }
.nav-item:hover { color: var(--content-on-inverse); background: rgba(255,255,255,.07); }
.nav-item.active { color: var(--content-on-inverse); background: rgba(255,255,255,.10); font-weight: 700; }

.sidebar-logo-bottom {
  padding: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.sidebar-wordmark {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 22px;
  color: var(--content-on-inverse);
  letter-spacing: -.02em;
}

.sidebar-powered {
  font-size: 11px;
  color: var(--grey-600);
  margin-top: 2px;
}

/* ─── Main ──────────────────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ─── Greeting ──────────────────────────────────────────── */
.greeting-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--content-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  isolation: isolate;
}

.greeting-name { position: relative; }

.greeting-name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 8px;
  background: var(--accent-yellow);
  z-index: -1;
  border-radius: 1px;
}

.greeting-date {
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  color: var(--content-secondary);
  margin-top: var(--space-xs);
  padding-left: 30px;
}

/* ─── Alert ─────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
}

.alert.warning { background: var(--feedback-warning-subtle); border-color: rgba(214,123,19,.18); }
.alert.info    { background: var(--feedback-info-subtle);    border-color: rgba(65,108,134,.18); }
.alert.success { background: var(--feedback-success-subtle); border-color: rgba(88,139,106,.18); }

.alert-icon {
  width: var(--space-2xl);
  height: var(--space-2xl);
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert.warning .alert-icon { background: var(--feedback-warning-strong); }
.alert.info    .alert-icon { background: var(--feedback-info-strong); }
.alert.success .alert-icon { background: var(--feedback-success-strong); }

.alert-body { flex: 1; }
.alert-title { font-weight: 600; font-size: var(--fs-body2); color: var(--content-primary); }
.alert-msg   { font-size: var(--fs-body2); color: var(--content-secondary); margin-top: 2px; }

.alert-cta {
  flex-shrink: 0;
  font-size: var(--fs-body2);
  font-weight: 600;
  padding: var(--space-xs) var(--space-md);
  border-radius: 99px;
  transition: background .15s;
}

.alert.warning .alert-cta { color: var(--feedback-warning-strong); background: rgba(214,123,19,.1); }
.alert.warning .alert-cta:hover { background: rgba(214,123,19,.2); }

/* ─── KPI Grid ──────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.kpi-card {
  background: var(--surface-card);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: box-shadow .2s, transform .2s;
}

.kpi-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
}

.kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--content-primary);
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 99px;
}

.kpi-delta.positive { color: var(--feedback-success-strong); background: var(--feedback-success-subtle); }
.kpi-delta.muted    { color: var(--content-secondary); background: var(--grey-200); }

.kpi-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--content-secondary);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.kpi-progress-label strong { color: var(--content-action); font-weight: 700; }

.progress-track { height: 4px; background: var(--grey-300); border-radius: 99px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--surface-brand); border-radius: 99px; }

/* ─── Two-col ───────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

/* ─── Card ──────────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.card-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--content-primary);
}

.card-sub { font-size: var(--fs-body2); color: var(--content-secondary); margin-top: 2px; }

.pill-link {
  font-size: var(--fs-body2);
  font-weight: 600;
  padding: var(--space-xs) var(--space-md);
  border-radius: 99px;
  color: var(--content-action);
  background: var(--surface-brand-muted);
  white-space: nowrap;
  transition: background .15s;
}

.pill-link:hover { background: var(--green-100); }

/* ─── Services ──────────────────────────────────────────── */
.service-list { display: flex; flex-direction: column; }

.service-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--r-md);
  transition: background .12s;
}

.service-row:hover { background: var(--surface-card-secondary); }

.s-rank {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--grey-200);
  color: var(--content-secondary);
}

.s-rank.gold { background: var(--accent-yellow-muted); color: #7a5800; }

.s-name {
  flex: 1;
  font-size: var(--fs-body2);
  font-weight: 500;
  color: var(--content-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-count { font-size: var(--fs-body2); font-weight: 700; color: var(--content-primary); margin-right: var(--space-xs); }

.trend-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 99px;
  white-space: nowrap;
}

.trend-up   { color: var(--feedback-success-strong); background: var(--feedback-success-subtle); }
.trend-flat { color: var(--content-secondary); background: var(--grey-200); }

/* ─── Billing ───────────────────────────────────────────── */
.billing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 11px;
  font-weight: 600;
  padding: 3px var(--space-sm);
  border-radius: 99px;
  color: var(--content-action);
  background: var(--surface-brand-muted);
}

.billing-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-md);
  background: var(--surface-brand-muted);
  border: 1px solid rgba(0,125,116,.15);
}

.billing-alert-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-brand);
}

.billing-alert-title { font-size: var(--fs-body2); font-weight: 600; color: var(--content-primary); }
.billing-alert-sub   { font-size: 11px; color: var(--content-secondary); }

.billing-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.billing-num-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  margin-bottom: var(--space-xs);
}

.billing-num-value {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--content-primary);
}

.billing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  background: var(--surface-inverse);
  color: var(--content-on-inverse);
  border-radius: var(--r-md);
  font-size: var(--fs-body2);
  font-weight: 600;
  transition: all .15s;
}

.billing-cta:hover { background: var(--grey-800); transform: translateY(-1px); }

/* ─── Transactions ──────────────────────────────────────── */
.tx-list { display: flex; flex-direction: column; }

.tx-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--r-md);
  transition: background .12s;
}

.tx-row:hover { background: var(--surface-card-secondary); }

.tx-divider { height: 1px; background: var(--grey-200); margin: 2px 0; }

.tx-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-800);
  flex-shrink: 0;
}

.tx-name  { font-size: var(--fs-body2); font-weight: 600; color: var(--content-primary); }
.tx-meta  { font-size: 11px; color: var(--content-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amount{ font-size: var(--fs-body1); font-weight: 700; color: var(--content-primary); text-align: right; }
.tx-time  { font-size: 11px; color: var(--content-muted); text-align: right; margin-top: 1px; }

/* ─── Badge ─────────────────────────────────────────────── */
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px var(--space-sm);
  border-radius: 99px;
  white-space: nowrap;
}

.badge-ok   { color: var(--feedback-success-strong); background: var(--feedback-success-subtle); }
.badge-warn { color: var(--feedback-warning-strong); background: var(--feedback-warning-subtle); }

/* ═══════════════════════════════════════════════════════════
   MERCHANT PAGE — nuove classi (merchant.html)
   ═══════════════════════════════════════════════════════════ */

/* ─── Page hero ─────────────────────────────────────────── */
.page-hero {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
}

.page-hero-icon {
  width: 44px;
  height: 44px;
  background: var(--surface-brand);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-hero-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--content-primary);
}

.page-hero-sub {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  margin-top: 2px;
}

/* ─── Sedi ──────────────────────────────────────────────── */
.sedi-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.map-wrap {
  height: 300px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grey-200);
}

.sede-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sede-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--r-md);
  border: 1px solid var(--grey-300);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.sede-item:hover,
.sede-item.selected {
  border-color: var(--border-brand);
  box-shadow: 0 2px 8px rgba(0,125,116,.1);
}

.sede-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--feedback-success-strong);
  flex-shrink: 0;
  margin-top: 4px;
}

.sede-info { flex: 1; min-width: 0; }

.sede-name {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
}

.sede-address {
  font-size: 12px;
  color: var(--content-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sede-hours {
  font-size: 11px;
  color: var(--content-muted);
  margin-top: 3px;
}

.sede-stats {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.sede-stat {
  font-size: 11px;
  font-weight: 500;
  color: var(--content-muted);
  background: var(--grey-200);
  padding: 2px var(--space-xs);
  border-radius: 99px;
}

.sede-edit {
  font-size: 12px;
  font-weight: 600;
  color: var(--content-action);
  flex-shrink: 0;
  white-space: nowrap;
}

.sede-edit:hover { text-decoration: underline; }

/* ─── Brand & Presenza ──────────────────────────────────── */
.brand-grid {
  display: grid;
  grid-template-columns: 148px 1fr 200px;
  gap: var(--space-xl);
  align-items: start;
}

.brand-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  margin-bottom: var(--space-sm);
}

.logo-slot {
  width: 148px;
  height: 148px;
  border-radius: var(--r-xl);
  background: var(--surface-brand-muted);
  border: 2px dashed var(--green-400);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.logo-monogram {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 44px;
  color: var(--surface-brand);
  pointer-events: none;
}

.logo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: white;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s;
}

.logo-slot:hover .logo-overlay { opacity: 1; }

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.gallery-item {
  height: 68px;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item:first-child { height: 148px; grid-column: 1 / -1; }

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  color: white;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-cover-label {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: white;
  background: rgba(0,0,0,.3);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* ─── App preview ───────────────────────────────────────── */
.app-preview-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--grey-300);
  background: var(--surface-card);
}

.app-preview-cover {
  height: 72px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm);
}

.app-preview-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 13px;
  color: var(--surface-brand);
  transform: translateY(50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.app-preview-body {
  padding: var(--space-xl) var(--space-md) var(--space-md);
}

.app-preview-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--content-primary);
  margin-bottom: var(--space-xs);
}

.app-preview-meta {
  font-size: 11px;
  color: var(--content-secondary);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.app-preview-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 99px;
  color: var(--content-action);
  background: var(--surface-brand-muted);
}

.app-preview-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: var(--content-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}

/* ─── Anagrafica fields ─────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-2xl);
}

.field-divider {
  height: 1px;
  background: var(--grey-300);
  margin: var(--space-lg) 0;
}

.field-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.field-item--full { grid-column: 1 / -1; }

.field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 2px;
}

.field-value {
  font-size: var(--fs-body1);
  font-weight: 600;
  color: var(--content-primary);
  line-height: var(--lh-body1);
}

.field-hint {
  font-size: 12px;
  color: var(--content-muted);
  margin-top: 2px;
}

.readonly-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--grey-200);
  color: var(--content-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Welfare tags ──────────────────────────────────────── */
.welfare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.welfare-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px var(--space-md);
  border-radius: 99px;
  color: var(--content-action);
  background: var(--surface-brand-muted);
}

/* ═══════════════════════════════════════════════════════════
   CATALOG PAGE — nuove classi (catalog.html)
   ═══════════════════════════════════════════════════════════ */

/* ─── Toolbar ───────────────────────────────────────────── */
.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.catalog-stats {
  display: flex;
  gap: var(--space-md);
  margin-right: auto;
}

.catalog-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-body2);
  color: var(--content-secondary);
}

.catalog-stat strong {
  font-weight: 700;
  color: var(--content-primary);
}

.catalog-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--r-md);
  font-size: var(--fs-body2);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  border: none;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--surface-inverse);
  color: var(--content-on-inverse);
}
.btn-primary:hover { background: var(--grey-800); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--content-primary);
  border: 1px solid var(--grey-300);
}
.btn-secondary:hover { border-color: var(--grey-400); background: var(--grey-100); }

.btn-ghost {
  background: transparent;
  color: var(--content-secondary);
  border: 1px solid var(--grey-300);
}
.btn-ghost:hover { color: var(--content-primary); background: var(--grey-100); }

.btn-danger {
  background: var(--feedback-error-subtle, #ffe3db);
  color: #7a3c3a;
}
.btn-danger:hover { background: #eec2bd; }

/* ─── Filter bar ────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  flex-wrap: wrap;
}

.tab-group {
  display: flex;
  background: var(--grey-200);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}

.tab-btn {
  padding: 5px var(--space-md);
  border-radius: var(--r-sm);
  font-size: var(--fs-body2);
  font-weight: 500;
  color: var(--content-secondary);
  cursor: pointer;
  transition: all .15s;
  border: none;
  background: none;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tab-btn:hover { color: var(--content-primary); }
.tab-btn.active {
  background: var(--surface-card);
  color: var(--content-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.tab-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--grey-300);
  color: var(--content-secondary);
  line-height: 1.4;
}

.tab-btn.active .tab-count {
  background: var(--surface-brand-muted);
  color: var(--content-action);
}

.filter-select {
  padding: 6px var(--space-md);
  border-radius: var(--r-md);
  border: 1px solid var(--grey-300);
  font-size: var(--fs-body2);
  font-family: var(--font-body);
  color: var(--content-secondary);
  background: var(--surface-card);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23686867' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.filter-select:focus { outline: none; border-color: var(--border-brand); }

/* ─── Batch action bar ──────────────────────────────────── */
.batch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-brand-muted);
  border: 1px solid rgba(0,125,116,.2);
  border-radius: var(--r-md);
  animation: slideDown .15s ease;
}

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

.batch-count {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-action);
  margin-right: auto;
}

/* ─── Service list ──────────────────────────────────────── */
.service-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-row {
  display: grid;
  grid-template-columns: 20px 56px 1fr auto auto 120px 80px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--grey-200);
  transition: background .12s;
  cursor: pointer;
}

.service-row:last-child { border-bottom: none; }
.service-row:hover { background: var(--surface-card-secondary); }
.service-row.selected-row { background: #f0f8f7; }

.service-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-box {
  width: 16px;
  height: 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--grey-400);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
}

.check-box.checked {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
}

.service-thumb {
  width: 56px;
  height: 44px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-info { min-width: 0; }

.service-name {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-desc {
  font-size: 12px;
  color: var(--content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.service-sedi {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.service-sede-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--grey-200);
  color: var(--content-secondary);
  white-space: nowrap;
}

.service-price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-body1);
  color: var(--content-primary);
  text-align: right;
  white-space: nowrap;
}

.service-validity {
  font-size: 11px;
  color: var(--content-muted);
  text-align: right;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .15s;
}

.service-row:hover .service-actions { opacity: 1; }

.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-secondary);
  transition: all .12s;
  font-family: inherit;
}

.icon-btn:hover { background: var(--grey-300); color: var(--content-primary); }

/* ─── Category icon chip ────────────────────────────────── */
.cat-chip {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Drawer overlay ────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  background: var(--surface-card);
  box-shadow: -4px 0 40px rgba(0,0,0,.15);
  z-index: 101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--grey-300);
  flex-shrink: 0;
}

.drawer-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--content-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.drawer-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--grey-300);
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ─── Form fields ───────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
}

.form-input,
.form-textarea,
.form-select {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-md);
  border: 1.5px solid var(--grey-300);
  font-size: var(--fs-body2);
  font-family: var(--font-body);
  color: var(--content-primary);
  background: var(--surface-card);
  transition: border-color .15s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--border-brand);
}

.form-textarea { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ─── Version history ───────────────────────────────────── */
.version-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.version-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--grey-200);
}

.version-item:last-child { border-bottom: none; }

.version-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--grey-200);
  color: var(--content-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.version-badge.current {
  background: var(--surface-brand-muted);
  color: var(--content-action);
}

.version-info { flex: 1; min-width: 0; }

.version-note {
  font-size: 12px;
  color: var(--content-primary);
  font-weight: 500;
}

.version-date {
  font-size: 11px;
  color: var(--content-muted);
  margin-top: 1px;
}

/* ─── Sedi checkboxes ───────────────────────────────────── */
.sedi-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sede-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--r-md);
  border: 1.5px solid var(--grey-300);
  cursor: pointer;
  transition: border-color .12s;
}

.sede-check-row.checked { border-color: var(--border-brand); background: var(--surface-brand-muted); }

.sede-check-label {
  font-size: var(--fs-body2);
  font-weight: 500;
  color: var(--content-primary);
}

.sede-check-addr {
  font-size: 11px;
  color: var(--content-secondary);
  margin-left: auto;
}

/* ─── Photo upload ──────────────────────────────────────── */
.photo-upload {
  height: 120px;
  border-radius: var(--r-md);
  border: 2px dashed var(--grey-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--content-muted);
}

.photo-upload:hover {
  border-color: var(--border-brand);
  background: var(--surface-brand-muted);
  color: var(--content-action);
}

.photo-upload span { font-size: 12px; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE TAB — nuove classi
   ═══════════════════════════════════════════════════════════ */

/* ─── Page-level tabs ───────────────────────────────────── */
.page-tabs {
  display: flex;
  border-bottom: 2px solid var(--grey-200);
  gap: 0;
  margin-bottom: var(--space-lg);
}

.page-tab {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-secondary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.page-tab:hover { color: var(--content-primary); }
.page-tab.active {
  color: var(--content-action);
  border-bottom-color: var(--surface-brand);
}

/* ─── Perf grid ─────────────────────────────────────────── */
.perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.perf-grid-full {
  grid-column: 1 / -1;
}

/* ─── KPI strip ─────────────────────────────────────────── */
.perf-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.perf-kpi {
  background: var(--surface-card);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-xl);
  padding: var(--space-md) var(--space-lg);
}

.perf-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  margin-bottom: var(--space-xs);
}

.perf-kpi-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--content-primary);
  line-height: 1;
}

.perf-kpi-sub {
  font-size: 12px;
  color: var(--content-secondary);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 3px;
}

.trend-up   { color: var(--feedback-success-strong); }
.trend-flat { color: var(--content-muted); }
.trend-down { color: var(--feedback-error-strong, #c0392b); }

/* ─── Service performance rows ──────────────────────────── */
.perf-service-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px 80px 100px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--grey-200);
}

.perf-service-row:last-child { border-bottom: none; }

.perf-rank {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-body1);
  color: var(--content-muted);
  text-align: center;
}

.perf-rank.top { color: var(--accent-yellow); }

.perf-service-name {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
}

.perf-service-cat {
  font-size: 11px;
  color: var(--content-secondary);
  margin-top: 2px;
}

.perf-val {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
  text-align: right;
}

.perf-val-sub {
  font-size: 11px;
  color: var(--content-secondary);
  text-align: right;
  margin-top: 2px;
}

/* ─── Sparkline ─────────────────────────────────────────── */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  justify-content: flex-end;
}

.spark-bar {
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: var(--grey-300);
  transition: background .15s;
}

.spark-bar.last { background: var(--surface-brand); }

/* ─── Sede bars ─────────────────────────────────────────── */
.sede-perf-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sede-perf-item {}

.sede-perf-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-xs);
}

.sede-perf-name {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
}

.sede-perf-meta {
  font-size: 12px;
  color: var(--content-secondary);
  text-align: right;
}

.sede-bar-track {
  height: 8px;
  background: var(--grey-200);
  border-radius: 99px;
  overflow: hidden;
}

.sede-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  background: var(--surface-brand);
}

.sede-bar-fill.s2 { background: #26aaa5; }
.sede-bar-fill.s3 { background: #8dd0cc; }

.sede-top-services {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  flex-wrap: wrap;
}

.sede-top-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--grey-200);
  color: var(--content-secondary);
}

/* ─── Monthly trend ─────────────────────────────────────── */
.monthly-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  height: 80px;
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--grey-200);
  position: relative;
}

.month-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  height: 100%;
}

.month-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--grey-200);
  transition: background .2s;
  min-height: 4px;
}

.month-col.current .month-bar { background: var(--surface-brand); }
.month-col:hover .month-bar   { background: var(--surface-brand); opacity: .7; }

.month-label {
  font-size: 10px;
  color: var(--content-muted);
  margin-top: var(--space-xs);
  font-weight: 500;
}

.month-col.current .month-label {
  color: var(--content-action);
  font-weight: 700;
}

/* ─── Delete confirm modal ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--surface-card);
  border-radius: var(--r-xl);
  padding: var(--space-xl);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  transform: scale(.96);
  transition: transform .2s;
}

.modal-overlay.open .modal { transform: scale(1); }

.modal-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-xl);
  background: #ffe3db;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.modal-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--content-primary);
  margin-bottom: var(--space-xs);
}

.modal-body {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  line-height: var(--lh-body2);
  margin-bottom: var(--space-lg);
}

.modal-body strong { color: var(--content-primary); }

.modal-actions {
  display: flex;
  gap: var(--space-sm);
}

/* ─── Form sections in drawer ───────────────────────────── */
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--grey-200);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.form-label-emoji {
  font-size: 13px;
  line-height: 1;
  margin-right: 2px;
}

/* ═══════════════════════════════════════════════════════════
   TRANSACTION FLOW — sidebar guida + step content
   ═══════════════════════════════════════════════════════════ */

/* ─── Sidebar flow mode ─────────────────────────────────── */
.sidebar-flow {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  gap: 0;
}

.sidebar-flow-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: var(--space-lg);
}

.sidebar-flow-back {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background .15s;
  flex-shrink: 0;
}
.sidebar-flow-back:hover { background: rgba(255,255,255,.2); }

.sidebar-flow-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-body1);
  color: white;
}

.sidebar-flow-sub {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 1px;
}

/* ─── Step list ─────────────────────────────────────────── */
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.flow-step {
  display: flex;
  gap: var(--space-sm);
  position: relative;
  padding-bottom: var(--space-lg);
}

.flow-step:last-child { padding-bottom: 0; }

.flow-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.1);
}
.flow-step:last-child::before { display: none; }

.flow-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-title);
  position: relative;
  z-index: 1;
  transition: all .2s;
}

.flow-step.done .flow-step-dot {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
}
.flow-step.active .flow-step-dot {
  background: var(--accent-yellow);
  color: var(--grey-900);
  box-shadow: 0 0 0 4px rgba(254,200,47,.2);
}
.flow-step.upcoming .flow-step-dot {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.3);
}

.flow-step-content { flex: 1; padding-top: 4px; }

.flow-step-label {
  font-size: var(--fs-body2);
  font-weight: 600;
  transition: color .2s;
}
.flow-step.done    .flow-step-label { color: rgba(255,255,255,.5); }
.flow-step.active  .flow-step-label { color: white; }
.flow-step.upcoming .flow-step-label { color: rgba(255,255,255,.3); }

.flow-step-hint {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}
.flow-step.done    .flow-step-hint { color: rgba(255,255,255,.35); }
.flow-step.active  .flow-step-hint { color: rgba(255,255,255,.6); }
.flow-step.upcoming .flow-step-hint { color: rgba(255,255,255,.2); }

.flow-step-value {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-yellow);
  background: rgba(254,200,47,.12);
  border-radius: 99px;
  padding: 2px 8px;
}

/* ─── Cancel button ─────────────────────────────────────── */
.sidebar-flow-cancel {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.08);
}

.btn-cancel-flow {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-md);
  color: rgba(255,255,255,.5);
  font-size: var(--fs-body2);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.btn-cancel-flow:hover {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
}

/* ─── Transaction main content ──────────────────────────── */
.tx-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-xl);
  min-height: 100vh;
}

.tx-step-wrap {
  width: 100%;
  max-width: 560px;
  animation: stepIn .25s cubic-bezier(.4,0,.2,1);
}

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

.tx-step-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--content-action);
  margin-bottom: var(--space-xs);
}

.tx-step-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--content-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.15;
}

.tx-step-desc {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  margin-bottom: var(--space-xl);
  line-height: var(--lh-body2);
}

/* ─── Step 1: phone search ──────────────────────────────── */
.tx-phone-wrap {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tx-phone-input {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-h3);
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: .05em;
  border: 2px solid var(--grey-300);
  border-radius: var(--r-lg);
  outline: none;
  transition: border-color .15s;
  color: var(--content-primary);
}
.tx-phone-input:focus { border-color: var(--surface-brand); }
.tx-phone-input::placeholder { color: var(--grey-400); font-weight: 400; }

.tx-search-btn {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-brand);
  border: none;
  border-radius: var(--r-lg);
  color: white;
  font-weight: 600;
  font-size: var(--fs-body2);
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.tx-search-btn:hover { opacity: .85; }
.tx-search-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Employee card ─────────────────────────────────────── */
.tx-employee-card {
  background: var(--surface-card);
  border: 2px solid var(--grey-200);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  transition: border-color .15s;
}

.tx-employee-card.confirmed {
  border-color: var(--feedback-success-strong);
  background: #f0faf8;
}

.tx-employee-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--content-primary);
  margin-bottom: 2px;
}

.tx-employee-company {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tx-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--grey-200);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--content-secondary);
  margin-top: var(--space-sm);
}

/* ─── Sede selection ────────────────────────────────────── */
.tx-sede-label {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tx-sede-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tx-sede-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--grey-200);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all .15s;
  background: white;
}
.tx-sede-option:hover { border-color: var(--surface-brand); background: var(--surface-brand-muted); }
.tx-sede-option.selected { border-color: var(--surface-brand); background: var(--surface-brand-muted); }

.tx-sede-option-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--grey-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.tx-sede-option.selected .tx-sede-option-radio {
  border-color: var(--surface-brand);
  background: var(--surface-brand);
}
.tx-sede-option.selected .tx-sede-option-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

.tx-sede-option-text { flex: 1; }
.tx-sede-option-name {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
}
.tx-sede-option-addr {
  font-size: 12px;
  color: var(--content-secondary);
  margin-top: 1px;
}

/* ─── Step 2: service selection ─────────────────────────── */
.tx-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tx-service-card {
  border: 2px solid var(--grey-200);
  border-radius: var(--r-xl);
  background: white;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
}
.tx-service-card:hover { border-color: var(--surface-brand); }
.tx-service-card.selected { border-color: var(--surface-brand); background: var(--surface-brand-muted); }

.tx-service-card-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.tx-service-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-service-info { flex: 1; min-width: 0; }
.tx-service-name {
  font-size: var(--fs-body2);
  font-weight: 700;
  color: var(--content-primary);
}
.tx-service-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 3px;
  flex-wrap: wrap;
}
.tx-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--content-secondary);
  font-weight: 500;
}
.tx-meta-chip svg { flex-shrink: 0; }

.tx-service-price {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--content-primary);
  flex-shrink: 0;
}

.tx-service-expand-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-lg) var(--space-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--content-action);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  border-top: 1px solid var(--grey-200);
  width: 100%;
  text-align: left;
  transition: background .1s;
}
.tx-service-expand-btn:hover { background: var(--grey-100); }

.tx-service-detail {
  display: none;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--grey-200);
  background: var(--grey-100);
}
.tx-service-detail.open { display: block; }

.tx-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-lg);
}

.tx-detail-item {}
.tx-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-muted);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tx-detail-value {
  font-size: 12px;
  color: var(--content-secondary);
  line-height: 1.5;
}

/* ─── Step 3: payment ───────────────────────────────────── */
.tx-compliance-alert {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.tx-compliance-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.tx-compliance-icon {
  width: 40px;
  height: 40px;
  background: #f59e0b;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-compliance-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-body1);
  color: #92400e;
  margin-bottom: 4px;
}

.tx-compliance-body {
  font-size: var(--fs-body2);
  color: #78350f;
  line-height: var(--lh-body2);
}

.tx-compliance-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: var(--fs-body2);
  color: #78350f;
  font-weight: 600;
}
.tx-compliance-rule svg { flex-shrink: 0; margin-top: 2px; }

.tx-compliance-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(245,158,11,.3);
  cursor: pointer;
}

.tx-compliance-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #f59e0b;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  margin-top: 1px;
  background: white;
}
.tx-compliance-checkbox.checked {
  background: #f59e0b;
  border-color: #f59e0b;
}

.tx-compliance-confirm-text {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: #92400e;
  line-height: 1.4;
}

/* ─── Summary card ──────────────────────────────────────── */
.tx-summary-card {
  background: white;
  border: 2px solid var(--grey-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.tx-summary-header {
  background: var(--grey-100);
  padding: var(--space-sm) var(--space-lg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-muted);
}

.tx-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--grey-100);
}
.tx-summary-row:last-child { border-bottom: none; }

.tx-summary-key {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.tx-summary-val {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: var(--content-primary);
  text-align: right;
}

.tx-summary-total {
  background: var(--grey-900);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tx-summary-total-label {
  font-size: var(--fs-body2);
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.tx-summary-total-amount {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: white;
}

/* ─── POS instruction ───────────────────────────────────── */
.tx-pos-box {
  background: var(--surface-brand-muted);
  border: 1px solid rgba(0,125,116,.2);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.tx-pos-icon {
  width: 40px;
  height: 40px;
  background: var(--surface-brand);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-pos-title {
  font-weight: 700;
  font-size: var(--fs-body1);
  color: var(--content-primary);
  margin-bottom: 4px;
}

.tx-pos-desc {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  line-height: var(--lh-body2);
}

/* ─── Step 4: confirmation ──────────────────────────────── */
.tx-success-icon {
  width: 64px;
  height: 64px;
  background: var(--feedback-success-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.tx-success-title {
  text-align: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--content-primary);
  margin-bottom: var(--space-xs);
}

.tx-success-sub {
  text-align: center;
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  margin-bottom: var(--space-xl);
}

.tx-receipt-box {
  background: white;
  border: 2px solid var(--grey-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.tx-receipt-header {
  background: var(--grey-900);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tx-receipt-header-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.tx-receipt-id {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-body2);
  color: var(--accent-yellow);
}

.tx-non-fiscal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--r-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  margin: var(--space-md) var(--space-lg);
}

.tx-action-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ─── CTA footer ────────────────────────────────────────── */
.tx-cta-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.btn-tx-primary {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-brand);
  border: none;
  border-radius: var(--r-lg);
  color: white;
  font-size: var(--fs-body1);
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.btn-tx-primary:hover { opacity: .88; }
.btn-tx-primary:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.btn-tx-ghost {
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: 2px solid var(--grey-200);
  border-radius: var(--r-lg);
  color: var(--content-secondary);
  font-size: var(--fs-body2);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .15s;
}
.btn-tx-ghost:hover { border-color: var(--grey-400); }

/* ─── Not found state ───────────────────────────────────── */
.tx-not-found {
  text-align: center;
  padding: var(--space-xl);
  background: var(--grey-100);
  border-radius: var(--r-xl);
  border: 2px dashed var(--grey-300);
}
.tx-not-found-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
}
.tx-not-found-title {
  font-weight: 700;
  color: var(--content-primary);
  margin-bottom: var(--space-xs);
}
.tx-not-found-desc {
  font-size: var(--fs-body2);
  color: var(--content-secondary);
}

/* ═══════════════════════════════════════════════════════════
   POS INFOGRAPHIC — step 4
   ═══════════════════════════════════════════════════════════ */

.tx-pos-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) 0 var(--space-lg);
}

/* Card + terminal container */
.tx-pos-scene {
  position: relative;
  width: 280px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carta Tundr */
.tx-card {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 72px;
  background: linear-gradient(135deg, #272726 0%, #007d74 100%);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,125,116,.3), 0 2px 8px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 10px;
  animation: cardSlide 2.2s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes cardSlide {
  0%   { transform: translateY(-50%) translateX(0);    }
  40%  { transform: translateY(-50%) translateX(64px); }
  60%  { transform: translateY(-50%) translateX(64px); }
  100% { transform: translateY(-50%) translateX(0);    }
}

.tx-card-chip {
  width: 20px;
  height: 16px;
  background: linear-gradient(135deg, #fec82f 0%, #f59e0b 100%);
  border-radius: 3px;
  margin-bottom: 6px;
}

.tx-card-label {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.8);
}

/* Wave contactless */
.tx-wave-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--surface-brand);
  opacity: 0;
  animation: waveExpand 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
.tx-wave-ring:nth-child(2) { animation-delay: .18s; }
.tx-wave-ring:nth-child(3) { animation-delay: .36s; }

@keyframes waveExpand {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
  35%  { opacity: 0; }
  45%  { transform: translate(-50%,-50%) scale(.3); opacity: .8; }
  80%  { transform: translate(-50%,-50%) scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* Terminale POS */
.tx-terminal {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 130px;
  background: #e8e8e6;
  border-radius: 10px 10px 14px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.tx-terminal-screen {
  width: 58px;
  height: 40px;
  background: #1a1a1a;
  border-radius: 5px;
  margin: 10px auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.tx-terminal-screen-content {
  animation: screenCycle 2.2s cubic-bezier(.4,0,.2,1) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes screenCycle {
  0%,38%  { opacity: 1; }
  44%     { opacity: 0; }
  52%     {
    opacity: 1;
  }
  100%    { opacity: 1; }
}

.tx-terminal-waiting {
  font-size: 7px;
  color: rgba(255,255,255,.7);
  font-family: monospace;
  text-align: center;
  line-height: 1.4;
}

.tx-terminal-ok {
  position: absolute;
  animation: okAppear 2.2s cubic-bezier(.4,0,.2,1) infinite;
  opacity: 0;
}

@keyframes okAppear {
  0%,48%  { opacity: 0; transform: scale(.5); }
  58%     { opacity: 1; transform: scale(1); }
  90%     { opacity: 1; }
  100%    { opacity: 0; }
}

.tx-terminal-keypad {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px 8px 8px;
  box-sizing: border-box;
}

.tx-key {
  height: 10px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.tx-key.green { background: #22c55e; }
.tx-key.red   { background: #ef4444; }
.tx-key.wide  { grid-column: span 2; }

/* Steps caption below scene */
.tx-pos-steps {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.tx-pos-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  max-width: 90px;
  text-align: center;
}

.tx-pos-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--content-secondary);
}

.tx-pos-step-text {
  font-size: 12px;
  color: var(--content-secondary);
  line-height: 1.4;
}

/* Waiting indicator */
.tx-waiting-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  border-radius: 99px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-body2);
  color: var(--content-secondary);
  font-weight: 500;
}

.tx-waiting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-brand);
  animation: dotPulse 1.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ─── Compliance alert v2 — human tone ───────────────────── */
.tx-compliance-v2 {
  background: #fffbeb;
  border: 2px solid #fcd34d;
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.tx-compliance-v2-top {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.tx-compliance-v2-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.tx-compliance-v2-heading {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--fs-body1);
  color: #78350f;
  margin-bottom: 4px;
}

.tx-compliance-v2-body {
  font-size: var(--fs-body2);
  color: #92400e;
  line-height: 1.55;
}

.tx-compliance-v2-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.tx-compliance-v2-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-body2);
  line-height: 1.4;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-md);
}

.tx-rule-ok {
  background: rgba(34,197,94,.1);
  color: #14532d;
}

.tx-rule-no {
  background: rgba(239,68,68,.08);
  color: #7f1d1d;
}

.tx-rule-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.tx-rule-ok .tx-rule-icon { background: #22c55e; }
.tx-rule-no .tx-rule-icon { background: #ef4444; }